Mar
2009
Hyper linking in Dreamweaver
HTML is all about something called Hyper Linking. Actually, that’s what the first two letters of HTML pretty much stand for … Hyper Text Markup Language but what does it actually mean? Well, oddly enough us geeks are not all that tricky to understand, give us a beer mug shaped like Yoda’s head and let us string together a few acronyms and we’re happy.
Hypertext is text on a page that contains a Hyper Link.
A Hyper Link is a piece of text or graphic which links to another document. When a user clicks the Hypertext, they follow the Hyper Link to the new document. Not brain surgery but I completely understand how most people would never need to know that.
Using Hyper Links in Adobe Dreamweaver is, for the most part dead simple. To insert a hyperlink into your Dreamweaver document, simply ensure you are in Design mode and select the text you want to make a hyperlink. Next, using the Property toolbar, type the website address you’d like to link to.
How to make a hypertext link in Dreamweaver
There are actually several things you can do with a hyperlink, called protocols. Most people only ever know about the http:// protocol (the Hyper Text Transfer Protocol) but there’s also a ton of other protocols people could use including the https://, ftp://, mailto://, gopher:// and of course the nntp:// protocol. If you have no idea what these are, congratulations … you’ll almost never need to care in your life unless you’re a hard code web developer.
Once you’ve added an http:// link using Dreamweaver you can also force the clicked link to open in a new web browser simply by adding the phrase _blank to the Target field of your property bar. There are a couple of other neat tricks with anchor tags people should be aware of, but to accomplish them we’re going to have to switch to Code view in order to see the following code:
[source lang="html"]<a href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]
In addition to the href value (where the click will go), you can also add:
- accesskey to make the link a keyboard shortcut
- class to assign a CSS class
- dir (rtl or ltr) to make the text run right to left or left to right
- id to make the anchor text have a proper name
- lang to assign a language value
- style to format the tag
- tabindex to index the tab order for the link
- title to assign a title tag
- rel for the link relationship.
Of these I would recommend most links on a website have an href value to show where people should go, an ID if it’s a critical link, a rel for defining relationship values and the title for SEO value. Typically then, a link should look like:
[source lang="html"]<a rel="nofollow" title="My Great Website" id="mainlink" href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]
Absolute Paths vs. Relative Paths
One of the great debates in web publishing is the choice between using absolute paths vs. relative paths. An absolute path is one which is mapped completely to the final destination (http://www.thisismyurl.com/tutorials/placing-page-content-in-adobe-dreamweaver/) vs. one that is linked relative to the document you’re currently reading (../placing-page-content-in-adobe-dreamweaver/) the main advantage of an absolutely path is that it’s locked, while the main advantage of a relative path? That’s it’s relative … in the end, it doesn’t matter so long as the link works.
- Preparing a website in Adobe Dreamweaver
- Building your first Dreamweaver Template file
- Structuring your website with Adobe Dreamweaver
- Improving the common elements in Dreamweaver
- Placing page content in Adobe Dreamweaver
- Hyper linking in Dreamweaver
- Working with Images in Adobe Dreamweaver
- Adding Cascading Style Sheets with Dreamweaver
- Putting your website on a remote web server with Adobe Dreamweaver
- Adding Google Analytics to your Dreamweaver Template
Thanks, I didn’t know I should be using the id tag. I’m still not totally sure what importance it has, but I an look that up. It just never occurred to me that it could be worthwhile.
This is good stuff. My mother has been asking about what I do… with a little more interest. I remember when I first started doing internet marketing, she thought I was wasting my time. Once she sees what it could buy, she gets interested. I’m going to forward her to this article so she can learn how to make webpages.
I appreciate this post! I have a web design project due this wednesday, and we use Dreamweaver. Wish me luck!
Kai Lo’s last blog post..Make Backup of Your Blog
Access Keys are really important as well for those using mobile devices, especially the pre-swanky smartphone devices, as they tell the browser which hyperlink to move to next on the page when the navigation button is clicked.
Nice post, thanks! :-)
I have used Dreamweaver before during my college time for my major project. It is the most useful and helpful tool that helps us to develop a website. I agree with you on the hyperlinks which is easy with this software.
Atniz’s last blog post..How I Gain 21,000 Backlinks In 10 Weeks
My project came out to be a success. Thanks for the tutorial! If you can post more Dreamweaver tutorials that be great because I still have a few more projects to do using that program.
Kai Lo’s last blog post..Free Multiple Social Bookmarking Submission at Once
I m running real estate business when i wanted to edit my site in dreamweaver always been problem because of i don’t have enough designing knowledge but much interested to do, so your code much helpful for me. thx keep providing more designing stuff.
i didn’t used dreamsweaver much because i don’t have the skills to use it but i was know some coding about hyper liking so i use in my websites but thanks for this good tips .
Mohammed Shokry’s last blog post..How to Add an Additional Monitor to a Mac Mini
Christopher,
I am a FP user and ashamed to admit it. I am considering subscribing to you blog just for these DW tips!
I’m using Dreamweaver last 2 years. Dreamweaver has essentially two work environments—the Design window and the Files window. The Files window provides tools to control your Web sites.
I feel that in a hyper link title tag is not required… though is mostly used in img src
Vineet’s last blog post..Red panda amazing & cute animal
It is for this reason that HTML editors, like Microsoft FrontPage or Dreamweaver, have become popular. However, these have their limitations as well; namely, they require study to learn all the features you need to master to use them well.
Accident Injury Claim’s last blog post..About us
I love dragging the little target icon to the file I want to link to! No idea why, it’s just fun for me!
Phil – Facts About Ants’s last blog post..How to Get Rid of Sugar Ants
I do not use ID tag most of the time, is it necessary to use it?
Sanya @ China Travel’s last blog post..Photo Hangzhou Yellow Dragon Cave Dressed in Green
Bad or broken links which lead nowhere are a common problem on web site. Dream weaver 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, Dream weaver will automatically update all of the links that changed as you reorganized your files. This is a great time saving tool and resource that Dream weaver provides.
Thanks.