Viewers: in countries Watching now:
Join Joseph Lowery in Site Navigation with CSS in Dreamweaver as he explores current design trends in site navigation and shows designers and developers how to create robust CSS-based navigation. The course shows how to convert HTML lists to graphical controls that integrate seamlessly with an existing site design, and how to build menus with a wide range of navigation options, all in standards-compliant CSS. Exercise files accompany the course.
For some web sites, especially those for government and large corporations, it's important to differentiate between links to pages within the site and links to external sites. In this video, I'll show you how to set up a single CSS rule that can add an identifying icon to all your external links in one fell swoop. The icon we'll be using is one that has gained a good deal of acceptance on the web, from Wikipedia to the Federal Health and Human Services web site. You can find it here on WIKIMEDIA COMMONS, and it's this icon here that we see in a larger version.
And we're going to be using one of the smaller varieties. So let's go back to Dreamweaver. And here I have two links that actually go to external sites: this Take the tour and a little bit further down, Check 'em out. So I want to add a CSS rule that looks at the value of the href attribute, and if it starts with an http, then apply this rule. So let's go ahead and go to Split view. And I am going to go ahead and put this in the main.css. I'll put this down at the bottom.
And the CSS rule that we're going to adopt is starting off with the anchor tag, and then you use square brackets whenever you're trying to reference an attribute within a tag. So I'll do an opening and closing, just to make sure we have that. And we have to look for the href attribute. And now we need to put in a caret, which is Shift+6, and then an equal sign. The ^= sign is an advanced selector used in CSS3 that says just look at the beginning of the value for the attribute.
And what we're looking for is http, and then I'll close that. Notice that I didn't do http://, even though that would be valid for a number of sites. I initially stopped at the p in order to also encompass https sites, which are secure HTTP. All right, we have our selector, so I'll do my opening and closing curly braces. And now we're going to put in a background tag. So this is background: and then double-click on URL to open up the Select File dialog box.
And we want to choose this from the Chapter 6 > 06_02 > images folder. And you're looking for a file named external_link.png. I'll click Choose here and then enter in no-repeat. And we want to center this on the right of the link. Close off that declaration with a semicolon. And then let's add just a little bit of padding on the right in order to allow room for the icon itself. And the icon is about 12 pixels wide, so we'll just do 13 here to give us a little bit more room.
So now, when I go to Design view, you can see that I have my icon appearing right where it says Take the tour. And if I go down to Check 'em out, there is the other icon automatically added to any external link. Sweet! So hopefully this tip will come in handy when you land that lucrative government web design contract.
There are currently no FAQs about Site Navigation with CSS in Dreamweaver.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.