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.

Watch the Online Video Course Creating a First Web Site with Dreamweaver CS6

2h 48mBeginnerAug 30, 2012

Viewers:
in countries
Watching now:

Join author Paul Trani as he shows how to create a web site step by step with Adobe Dreamweaver CS6, one of the industry's leading web authoring tools. But not just any web site. A responsive HTML5 web site that works across multiple browsers and devices, complete with rich imagery and text, a robust portfolio, video content, and even a contact form. This course covers how to use web standards such as HTML5 for structure and Cascading Style Sheets (CSS) to control colors, fonts, navigation, and more. The course also demonstrates how to test across multiple browsers and devices and upload your new site to the web.

Adding and stylizing links

The great thing about the web is that it contains a lot of information thatactually can be shared and all linked together, and that's what I want to dowith this page is just start to link it through some other content, as wellstylize those links.So for this page as I scroll down, I can take any text in here or even any imagefor 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'seven better to have this address linked to a map of that address. So I can takethis content here, and I'm just going to copy it, because I'm going to use a webbrowser 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 whatI want is I want this link to this Google map's page right here, so this makesit 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, Copyingthat specific link, and using it now.So I'll minimize my browser, I'll go back into Dreamweaver, and again, for anytext I can easily select it, and in my Properties panel making sure the HTML tabis selected, right down here for a Link, putting my cursor in there and thenPasting in that URL.

You can see it's pretty long, I can hit Enter, and you can see that it turns itactually blue, might become tough to see there, but I'll customize that in thesecond, 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 toadditional files that might exist, which I'm going to do that later, but knowthat 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 wantit to maybe open up in a new blank window, so I still want them to stay on myside, 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 seelook 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, andthat just prevents any spam from going to this email address, so it helps tokind 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 itin there, I want do a mailto, all one word mailto colon, and then I can type inevajonesdesign, 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 abrowser. So I'm going to go to File > Preview in Browser, I'll preview it inSafari, might ask you to save the changes of your index.html, you want tomake sure your latest are there, here is my page, I'll scroll down, you can seemy content right here, and I would like to point out that I've actually alreadyselected this. So this is actually a text that's already been visited, this linkhas 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 tothat map, and everything looks great!Closing that, let's take a look at this email address, selecting that, when Iselect 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 rightin 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 URLto a web page, but it doesn't look good, in fact, it's hard to see, there is alot going on here that needs to be worked on.Well, luckily, if I close that down, go back into Dreamweaver, I can use myPage Properties. And from there I can select this Links category, and I canchange 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 fromthat red to white, and in fact, visited, after you've visited that link justlike we saw the purple before, I might want to change that to a darker redjust toning it down some.

And then your active link color can be something that even has a little bit ofpop 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, andyou 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 canselect 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 turnswhite with the underline and then even as I select this, you can see it turnsyellow, and if I go to that link, it'll actually launch that, but if Iright-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 inDreamweaver, because you have a web browser actually running right here inDreamweaver, which is great!Closing that down, you can see how you can easily add links to maybe pageson your site, external content, even specific email addresses, all done in Dreamweaver.

Find answers to the most frequently asked questions about Creating a First Web Site with Dreamweaver CS6 .

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.

Already a member ?

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

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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:

new course releases

newsletter

general communications

special notices

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:

new course releases

newsletter

general communications

special notices

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