How to Make a Link Open in a New Browser Window or Tab in Dreamweaver

Clickable links that automatically open web page in new window or tab


How to Make a Link Open in a New Browser Window or Tab in Dreamweaver

by Christopher Heng, thesitewizard.com

One of my visitors asked me if there was a way to make a link on his website open in a new browser window in Dreamweaver. This tutorial discusses the situations when you may want to do this and when you probably should not, as well as provides a practical guide on how you can accomplish it using the Dreamweaver web editor.

Note that this article is meant for people who already know how to create websites using Dreamweaver. It merely deals with the specific steps to accomplish the task mentioned, and not all the other details of making a website. If you are new to Dreamweaver, you should start with my main Dreamweaver CS5.5 Tutorial. Absolutely new webmasters should ideally begin by reading How to Create / Make a Website: The Beginner's A-Z Guide since there is more to creating a website than just designing it.

To Spawn a New Window or Not to Spawn, That is the Question

Making a link open in a new window or tab, so that a new browser window/tab appears when your visitor clicks that link, is a practice that has been so badly abused by newcomers that if you talk about it in some webmaster circles, you will probably be soundly rebuked. It has also earned a place in the Seven Easy Ways to Annoy Visitors to Your Website satire.

The reason for this is probably obvious if you're a seasoned surfer. When you go to a site having such links, and you try browsing around that site, you typically end up with huge numbers of useless open tabs or windows. For example, you may arrive at the home page and click the "Products" page. It opens up in a new window, leaving behind the original home page in a now useless window which you probably have to close manually later. Then you decide to go back to the home page again by clicking the "Home" link. Lo and behold, another new window appears. You now have three open windows, only one of which actually interests you. And you can't use the back and forward buttons in your browser, because the previous and next pages are in different windows. Imagine what the result is like after a few minutes of clicking around to read the information on the site. You may end up with 10 to 20 windows which you have to manually close when you're through. No wonder visitors hate it.

This practice also causes numerous problems for the average user. In particular, average users don't really understand the concept of multiple browser windows and don't manage too well when such windows start spawning on their computer. (For more details, please see Is Your Site Ready for the Average User?) And before you protest that it doesn't cause problems for you, and that you actually like it, remember that you are not an average user. The very fact that you're reading this article already proves that.

Even if your site only caters for the computer geek, it will still be annoying to them. (Actually, judging from the feedback I get, the geeks are the ones that hate it most. The average users are merely bewildered and don't know how to navigate.) While it's true that users can close the windows and switch windows instead of using the BACK and FORWARD buttons on their browser, your website behaves differently from the majority of the sites on the Internet, forcing them to accomodate its unfriendly behaviour.

As a result of this, the general advice given by experienced webmasters for most (but not all) cases is that you should not make your links open in new windows or tabs.

However, as I hinted above, there may be times when it is useful to make selected links open in a separate browser window or tab. For example, if you have ever used thesitewizard.com's Free CSS Menu Bar Wizard to create your navigation menu, you will have noticed that in Step 2, one of the optional links open in a new window. The link is labelled clearly as opening a new browser window, and the context will probably make it obvious why a new window is necessary. The user who wants to click the link will need to repeatedly switch back and forth between the linked page and the Wizard because the linked page has information he/she needs to use the Wizard. (Another reason is that the user, by this time, may have already customized some settings on that page and in the previous step. Making a normal link that replaces the wizard with the linked page may cause them to lose all their hard work so far.)

If you have a situation like this, where you need to make certain links open in a new window, you may want to clearly label those links as opening in a new window like I did. This is not a rule, of course, but it helps to forewarn users. And you may want to minimize such links to only those that really need a new browser window.

Practical Guide to Making a Link Open in a New Browser Window or Tab in Dreamweaver

  1. Start up Dreamweaver and open up the page containing the link you want to change. That is, I will assume here that you have already created a web page containing a normal link. If you haven't, and don't know how to, please read the main Dreamweaver Tutorial series instead.

  2. Click anywhere within the link that you want to modify. Don't select the link. Just put the cursor within the linked text. If this is a clickable picture link, just click the picture to select it.

  3. In the PROPERTIES panel, which you can find at the bottom of the Dreamweaver window, you should be able to see a field that has the label "Link". The field should contain the web address that the link is pointing to. Either beside that field, or below it, depending on whether your link is a text link or an image link, look for another field that has the label "Target". The field should be a drop down box. (The picture below shows the PROPERTIES panel for a text link.)

    PROPERTIES panel in Dreamweaver when the cursor is in a text link

    Click the arrow beside the drop down box to expand it, and select "_blank". When you make a link that has a "_blank" target, the web browser by default opens that link in a new window. If the browser is a modern one that uses tabs instead of windows, it will open in a new tab.

    Note: if you cannot find the "Target" field in your PROPERTIES panel, you may have to click the "HTML" button on the left of that panel (see picture above). The "HTML" and "CSS" words on the left are buttons, although they don't look like it. Clicking them causes different items to appear in the panel.

That's it. Once you publish your web page in the usual way, test the link by clicking it in a web browser. A new window (or tab) should open.

This article can be found at http://www.thesitewizard.com/faqs/open-link-new-window-dreamweaver.shtml

Copyright © 2009-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Make a Link Open in a New Browser Window or Tab in Dreamweaver





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.