Learn about duplicating existing Styles in this Adobe Dreamweaver CS3 Essentials training video series.


More DIY videos at 5min.com

Video Transcription

So now if we wanted this same row of links across the bottom of the page that we have across the top, we can completely recreate all those Styles, or we could use leveraged what we have already done. So let's do it that way, shall we? Let's start by just Copying and Pasting this row of links, so I want to select all of this, and if you want to make sure that you are really selecting everything you want here, you want to grab Split, and look what's happening behind the scenes, not really getting everything I need. What I want here is everything within the ul tags. And another way you can do that is to click on ul in the Tag selector to make sure you are getting all of that Content. So let's just Copy that. Now let's go down to the bottom of the page, to the Footer and here where it says, Content of the Footer goes here. I am going to Paste that into place. Now remember if you Copied it out of the code, you need to Paste it into the code, if you Copied it from the Design View, you need to Paste into Design View. And as soon as I click over here in Design View, Dreamweaver refreshes, and I can see the change in Design View. Now I said we are going to reuse those files, but this looks just like what we started out with, right. It's still underlined, we still have the Bullets. Remember that we defined the ul, the LI, the Anchor and the Anchor hover tags, so that they would be different only if they appear within the nav ID. Now all of those tags are contained within an id called Footer, see up here, this id is Footer. So what I want to do now. Is to define these tags. So that they display the same way in the Footer as they do in the Header, and the easiest way to do that is just to Duplicate them. So let's go back to Design View, so we can better see what we are doing here, and over here in the CSS Panel, stretch this out a little bit. Now I have a ul tag, and if I right click without selecting it, be careful, because if you select it like this, you can change the name, but what I really want to do, is just right click over it, and choose Duplicate. Now I am Duplicating the Style, so I am going to get everything that I just set in the Style ,but instead of nav here, now I want Footer, click OK, and Dreamweaver is jumping around on me. But just see, remember the ul Style just took out all the extra Margin and Padding Spacing. Now let me grab the nav li, again being careful not to actually select it so much that you would change the name. So if I just have my cursor over it, and I right click, Duplicate, and here again, instead of nav, I want to redefine the li tag in the Footer div, and you see now I have removed the Bullets, I have changed it to inline and I have added my own Margin spacing. Now I can Duplicate the Anchor tag in Footer. Oops! there we go, and if I scroll down here you can see, as I am Duplicating these, they are being listed here in the CSS Styles Panel. So the final one Duplicate the Hover setting, click OK, and I have now got exactly the same Styling at the bottom. Now you may be wondering why I didn't just redefine the ul and li tags, so it would apply to everything on that page? In this particular case that would have worked just fine, but by doing it this way, I open myself to more options in the future. So if down the road I decide that at the top of my page I want a different Color, or I want a different Styling for these links, that I would have at the bottom of the page, I can now redefine the Anchor Hover or the Anchor tag in the nav area, and have it look different from how it looks in the Footer. So by separating these Styles, and redefining the tags specific to their container, I give myself more options later, if I want to redesign this page.