Adding and stylizing links
Video: Adding and stylizing linksThe 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.
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.
- Understanding basic web principles
- Adding content to a web page
- Linking to web sites and email addresses
- Styling content with CSS
- Creating a layout that fits multiple browsers and devices
- Building an HTML5 layout
- Inserting images and video
- Adding a menu bar
- Creating a contact form
- Integrating a Twitter feed
- Uploading and testing a web site
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.
Find answers to the most frequently asked questions about Creating a First Web Site with Dreamweaver CS6 .
Here are the FAQs that matched your search "" :
- Q: Where do I learn more about how to make a website?
- A: Discover more on this topic by visiting how to make a website on lynda.com.
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.