In this walkthrough, we've shared how to link pages in Dreamweaver, so you can build a seamless web experience.
Types of Link Paths
Before creating any links, it's a good idea to familiarize yourself with Dreamweaver's different paths. Every webpage has a URL associated with it, but if you're linking locally (i.e. between pages on your site), you only need to choose another page in the Dreamweaver project. Here are the three link paths found in Dreamweaver:
- Absolute Paths: This lists the full URL and protocol (ex. https://www.shutterstock.com/blog/trends/2017-creative-trends).
- Site Root-Relative Paths: This includes the root folder, subfolders, and page (ex. blog/trends/2017-creative-trends).
- Document-Relative Paths: Generally, this is the best option for creating local links. Instead of listing the full URL, you only have to specify the page and associated folder in your project ( trends/2017-creative-trends.html).
How to Link Pages in Dreamweaver
1. Before creating any links, we recommend saving your existing pages to a local folder. Then, navigate to the page where you'd like to add a link. Depending on the situation, you can add links to text or objects. Just click an object to select it, or drag your cursor to highlight the desired text.
2. Next, find the Insert panel in the top right area of your screen, open the Common section, and click the "Hyperlink" button. You can also select "Insert" > "Hyperlink" from the main menu.
3. A Hyperlink dialog box will appear, with a variety of link settings. The first setting, "Text", displays any highlighted text that you've chosen to hyperlink. Now, click the file folder icon to select the page that you want to link. You'll need to choose an existing page in your website, and then click OK.
4. In the same dialog box, the "Target" setting allows you to specify how the linked page will open. "_self" is the default option, and it opens the linked page in the same window. If you choose "_blank", the link will open as a new tab in your browser. Finally, if you choose "_top", the link will open in an entirely new window.
5. Once you're happy with the hyperlink settings, click OK and the link will be applied. We recommend testing the link on multiple browsers before implementing the changes on a live website.