How to link web pages?

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

34 lessons / 3 hours

Overview

Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.

Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome. 

Who should use this?

Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.

What do you need?

  • You'll need a laptop (Mac or PC)
  • Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.

Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?

No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.

Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.

If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

Dreamweaver tutorial 06: How to link pages using hyperlinks.

Hi, Welcome, My name is Daniel Walter Scott. I am a trainer here at Bring Your Own Laptop. This course is designed for people who are new to Dreamweaver and Web Design. The topic we are covering today is: Hyperlinks.

A Hyperlink is normally just referred to as a ‘link’. Hyperlink is the technical term. All it is is a way of linking one page to another. This can be internally, it can be a page like a navigation, going to your contact us page, about us page or product pages. Or it can a link to another site, an external site. This is what we are going to look at in this tutorial (we will look at navigation in a later tutorial).
Let’s look at doing a hyperlink. In this part where it says ‘site designed by….’ Im going to get it to link to my website. So when people click on it it will jump out to my website.

Creating a hyperlink

First highlight this piece of text. So highlighting ‘Daniel Walter Scott’. There are two ways of doing it. There’s the nice simple way. I just go to ‘insert’ – ‘hyperlink’- you get this window to put the text through nice and easily. Now, the link, this is where it is going . I want mine to link to an external website. So in here we have to put the full URL address. I need to put in ‘http://www’. Sometimes it’s easy to just copy from Google’s URL. So in here we are going to put in ‘http://www.byol.com.au’

What is a hyperlink target _blank or _self?

In ‘Target’ you have 2 options: ‘Blank’ and ‘Self’. ‘Self’ means when someone clicks this link, the page will reload on top of itself. So the old one will dissappear and the new one will appear. That’s really good for internal navigation. So clicking on your ‘contact us’ page or your ‘product’ page. What we want for this one is ‘blank’. What this will do is when I click on this link, it will leave the current window there and open up a separate window. Either open up in a second window, or a separate tab. In Google Chrome and Fire Fox it opens up a new tab, but in Internet Explorer and I think Safari, it opens up in a new window. If I leave this empty, put nothing in the target, it will default to ‘self’.

What is the hyperlink title for?

The title is really important. For two reasons. One reason is for screen readers. People who are visually impaired, use a programme to read websites and it reads them what is going on in the page. It will get to this link, ‘Daniel Walter Scott’ and read the title, it will be descriptive, telling them where it goes. So this will be my ‘Web Design Company’. So if someone really lkes this lovely design I have done, when they click on this link it will take them to this website and this is the stuff they get read out to them by the screen reader.

Google likes link titles

The second reason that a title is really important is that google uses this to help them understand where it’s off to. So it’s really important to use good clear key words for your search engine optimization. So use good clear key words describing where it’s going. Now in this case, because it’s going to our Adobe training site, this would not be a particularly good title. Because Google would follow this link expecting to find a web design company and instead find an Adobe training centre. So make sure you use good title key words. Now we don’t use ‘access key’ and ‘tab index’, so let’s click ‘ok’.

So you can see here, my text is gone blue and it is underlined. That is the default colours for a link. Now we are going to look at stylising and colours in a later tutorial. But at the moment just leave them as blue and underlined. Thats one way of doing a hyperlink. ‘Insert and hyperlink’. It’s nice and simple when you’re new.

Making hyperlink the advanced way

The other way. If I wanted to change this word in to a hyperlink, I’d look at the property panel down here. It has much the same features ‘link’, ‘title’ and ‘target’. So the link is going to go to’ http://www. bringyourownlaptop.com.au’. The ‘title’ is explaining where this goes, it goes to adobe training centre. And the ‘target’, if I leave it at default it goes to ‘self’ but in this case I’m going to put it as ‘blank’, which means it will open itself up in a separate window. So that’s the same way as the way we did it earlier but it cuts out one step. See it’s gone blue and underlined so it is the same.

Changing a hyperlink in Dreamweaver

If you need to edit any of these links. If you decide that this ‘DWS’ is going to the wrong place. You can’t use the first way (insert hyperlink) to edit it. You have to edit it in this second way. There’s my url, title and the page. So I’d go through to adjust it, let’s say to our NZ website. So I’d change it to ‘.co.nz. ‘

So let’s preview it. Go to ‘File’- ‘Save’. Then there are 2 ways to preview it. You can go to ‘File’ then preview it in a browser, you get to pick from here. There’s another way, using this globe. it does the same thing. Use preview in chrome, and click this link down here. It goes to Bring Your Own Laptop New Zealand. You can see it has opened it up in a separate tab. That’s what happens when I use ‘blank’. If I used ‘self’ it replaces the tab that I was at. Blank is useful for external links and ‘self’ tends to be used for internal navigation.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024