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.
Throughout this course, the majority of the focus has been on navigating from page to page within a site, but there is another type of navigation that's frequently employed--internal page navigation. Typically, you will need internal navigation on lengthy pages that require a good deal of scrolling. However, with the rise of cell phone web browsing, scrolling is very much upon us. The typical solution to handle internal navigation is named anchors. A named anchor consists of two parts: a triggering link and a target. Let me show you in a blank page what that code looks like.
So if you go to Dreamweaver > Insert > Named Anchor, and let's call this myAnchor, Dreamweaver will put in a nifty little anchor symbol that we see here. And if we go to Code, you can see that it puts in a empty anchor tag with the name myAnchor, and also an ID of myAnchor. Now, that's the first part of a named anchor. The other part would be to create a link in a slightly different place in the document, let's say Go to My Anchor, which you could then select myAnchor and put in the Link with a leading hash sign whatever the name of the anchor is, in this case myAnchor.
So if in Live view I clicked on myAnchor, it will go to the top of the document here wherever the named anchor is. Now, current web design calls for a rethinking of named anchors for several reasons. First, the extra markup that you see here is really unnecessary. You can target links directly to IDs, which conveniently also use a hash mark as an identifier. Browser support for linking to IDs is pretty much universal. The last browser that didn't support it was Netscape Navigator 4.
Second, and this is a biggie, support for the name attribute is being dropped in HTML5, so in this video I am going to show you to code internal navigation in the right way for now and in the future. All right, so let's go over to portfolio.htm, and here you can see on this portfolio page, we have kind of a lengthy page that consists of a number of projects that we worked on. And on top here there is a listing for each of these, so you can quickly navigate to them. I am going to drop out of Live view here and then just go right to the list that you see here.
So the first thing that we'll do is make sure that we have all of the IDs that we need. And I'm going to go into Split view. And the first one goes right to this first section here for the technical communication suite, and I am going to give this an ID in the h2 tag of tcs, and then let's scroll down to the next one, which happens to be Captivate. And for Captivate, we'll do an id of cp, and then the next one is for the Dreamweaver C5 Bible, and let's give that an id of bible.
Now to save time, I have done the last three. Because we've added these IDs, all of the sections now can be targeted individually. If we wanted to create a link on the same page, now we are ready to create those internal links. Let's scroll back up to where we see Adobe Technical Communication Suite, select the text here, and in the Property Inspector put in a hash mark. And if you recall, the heading for that item was tcs. Now let's do Captivate, which would be hash mark cp. And finally, for the Dreamweaver CS 5 Bible, #bible. And as I said, I went ahead and already did it for the next three.
This one is #dw and so forth. All right, let's give it a spin. We'll go to Design view, enter into Live view, and I am going to go ahead and make sure that I have follow links continuously set up. Let's close down my Properties, and I should be able to go to any of these directly just by clicking on the link. So I'll click on Adobe Technical Communication Suite, and that works. I'll scroll back up, and let's try the Dreamweaver CS 5 Bible this time. Yes, that works just as well. And let's go to the one towards the bottom, the MX 2004.
Now the page will only go as far as it can, and that's why this title doesn't go all the way up to the bottom, because the page does not extend any further. Now granted, scrolling back up every time is a bit of a drag, so the solution most designers opt for is to include another internal link that takes you back to the top of the page. Let's follow that route. Let's go into Split view, and at the end of the Technical Communication Suite, I am going to put in another paragraph tag and give this is class of top link so I can style it later. And this will consist of a anchor tag with an href of #header and I'll close off that tag, put in the content of top and then close the anchor tag.
Now instead of inserting a named anchor, we'll take advantage of an existing header div and link to that--with the leading hash mark of course. So let's see how that looks. That's fine. That's showing up there. I am going to go ahead and copy that, and let's place it after each of these elements here. So after the end of the Captivate one, I will paste that in. At the end of the Bible quote, I'll paste that in, and let's go ahead and do it for the remaining three here, two, and then the final one is here.
So now I should have little top links there. Notice they are kind of inconsistently placed along. So let's add in a little CSS rule in order to move them over to the right, and we'll also kind of shrink them down a little bit. So I'll open up my CSS Styles panel and create a new rule. You can see that the selectors are quite large here. I am going to go ahead and reduce that somewhat. I need a number of these items in order to maintain the specificity, but I don't need quite that many.
So here we have outerWrapper content, and we're going to go ahead and throw in a p tag here. So this will address the toppling classes that are found within paragraphs that are within the content class and also within the otherWrapper. Click OK and let's change the font size to 12, which is a little bit smaller than my text, switch to the Block category and let's align that over on the right. Okay, let's see how that works. Now, I have a top link consistently over on the right.
That looks pretty good. Let's give it a try. Let's go to the CS5 Bible and then click top, and it comes back up to the header div, which is the top of my page. So the one downside I've found of using this technique rather than inserting a Dreamweaver named anchor is that it doesn't allow Dreamweaver to display that wonderful little ship anchor for the name anchor in visible elements in Design view. On the other hand, it's far better coding all around.
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.