Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding and stylizing links

From: Creating a First Web Site with Dreamweaver CS6

Video: Adding and stylizing links

The great thing about the web is that it contains a lot of information that actually can be shared and all linked together, and that's what I want to do with this page is just start to link it through some other content, as well stylize those links. So for this page as I scroll down, I can take any text in here or even any image for that matter, and I can link it to external content. Let's take this for instance, you know it's great to have an address, but it's even better to have this address linked to a map of that address. So I can take this content here, and I'm just going to copy it, because I'm going to use a web browser to find the specific URL to this place on a map.

Adding and stylizing links

The great thing about the web is that it contains a lot of information that actually can be shared and all linked together, and that's what I want to do with this page is just start to link it through some other content, as well stylize those links. So for this page as I scroll down, I can take any text in here or even any image for that matter, and I can link it to external content. Let's take this for instance, you know it's great to have an address, but it's even better to have this address linked to a map of that address. So I can take this content here, and I'm just going to copy it, because I'm going to use a web browser to find the specific URL to this place on a map.

Now with that information I'm just going to paste it into my search box and what I want is I want this link to this Google map's page right here, so this makes it much more useful having this text linked to this page. So all I need to do is select the entire link by doing a Select All, Copying that specific link, and using it now. So I'll minimize my browser, I'll go back into Dreamweaver, and again, for any text I can easily select it, and in my Properties panel making sure the HTML tab is selected, right down here for a Link, putting my cursor in there and then Pasting in that URL.

You can see it's pretty long, I can hit Enter, and you can see that it turns it actually blue, might become tough to see there, but I'll customize that in the second, but it basically has pasted in that URL. Know that I can link to a specific URL like I'm doing here, I can point to additional files that might exist, which I'm going to do that later, but know that I can link to any page on the web. In fact, I can also target it, so when they do click on this link, I might want it to maybe open up in a new blank window, so I still want them to stay on my side, but just open up in a blank window so that's why I'm selecting blank right there.

All right, if I take a look at the code, so I'll go to Split view, you can see look at that long URL, could be simple, could be long, you can see that href, referencing that link just like that. All right, so I've linked to web page, pretty straightforward, but what about an email address? Well, I can do that as well, you'll notice right here, here's some text. This is interesting, I actually want to link this text to that email address. Notice how it says evajonesdesignatgmdotcom spelled out the word at and dot, and that just prevents any spam from going to this email address, so it helps to kind of type it out like this, so it doesn't get picked up by spam bots.

Nonetheless, I can take that text and for that link, instead of just pasting it in there, I want do a mailto, all one word mailto colon, and then I can type in evajonesdesign, using the @ sign, gmail.com, using an actual period right in there, just like that, hitting Enter just like that. So now I'm actually going to link to an email address, very cool! In fact, what I want to do now is I want to go ahead and test this out in a browser. So I'm going to go to File > Preview in Browser, I'll preview it in Safari, might ask you to save the changes of your index.html, you want to make sure your latest are there, here is my page, I'll scroll down, you can see my content right here, and I would like to point out that I've actually already selected this. So this is actually a text that's already been visited, this link has already been visited. And I'll show you how you can customize your visited, as well as a link color, even these selected color.

So if I select this, you'll see it turned red, well, I can customize all of that. But again, I'll select that, opens up in a new blank window, goes directly to that map, and everything looks great! Closing that, let's take a look at this email address, selecting that, when I select it, it's actually going to open up in your default email client, whichever one you have setup. In this case it's just mail on Mac, you can see it puts that email address right in there, and you can type in whatever message you want and send that message.

So that how you can start to link to additional content, an email address, a URL to a web page, but it doesn't look good, in fact, it's hard to see, there is a lot going on here that needs to be worked on. Well, luckily, if I close that down, go back into Dreamweaver, I can use my Page Properties. And from there I can select this Links category, and I can change the link color. Instead of being that blue which I can't even see, let's change it to red, selecting Apply, you can see it pops off now. The rollover color, so from here I might want it to turn white, so go from that red to white, and in fact, visited, after you've visited that link just like we saw the purple before, I might want to change that to a darker red just toning it down some.

And then your active link color can be something that even has a little bit of pop like a yellow just like that. Last thing I want to do is change the Underline style. Instead of always underlining it, let's go ahead and Show the underline only on rollover. I just think it adds a nice visual appeal to this, in fact, I'll select OK, and you can see how it changed it immediately. Now I'm going to show you something really cool that you can do in Dreamweaver, because you don't always need to preview in browser, you don't need to always do that.

What you can do is right up here, in fact, if I Save this page first I can select Live view. So that means I've basically activated a web browser inside of Dreamweaver. So now if I scroll down, you can see my red text as I rollover it, it turns white with the underline and then even as I select this, you can see it turns yellow, and if I go to that link, it'll actually launch that, but if I right-click, I can select Follow Link.

So again, this is specific to the Live view, I can follow that specific link, and it will actually open that up just as you can see right here in Dreamweaver, because you have a web browser actually running right here in Dreamweaver, which is great! Closing that down, you can see how you can easily add links to maybe pages on your site, external content, even specific email addresses, all done in Dreamweaver.

Show transcript

This video is part of

Image for Creating a First Web Site with Dreamweaver CS6
Creating a First Web Site with Dreamweaver CS6

30 video lessons · 40408 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Dreamweaver CS6.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.