Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Occasionally when writing code you'll need to take existing content, and wrap it inside of another parent tag. Well, this is usually fairly simple. It's sometimes rather difficult to do manually and still keep track of exactly where the proper position for opening and closing tags needs to be. Let's take a look at how Dreamweaver can help us out when we need to wrap content in our tags. So I've the Index file open this time from the 05_04 folder, and the first thing I'm going to do is scroll down to about line number 51. Down in this area we have an unordered list that has a calendar of events.
Now you'll notice that the structure of the final list item is little different than these, in the fact that it lacks the span tag that identifies those numbers as belonging to the date class, so that's what we need to add. Well, we could go ahead and do it the hard way, which would be to go ahead and put the opening span tag on this side, and then go back over on the side of the day and close it, but again, that's going to take a little bit longer. I'd rather just wrap in the tag and have Dreamweaver do it for me. So what I'm going to do is just highlight just the date number itself, 5/21 and then going over the Coding Toolbar, I see what looks to be a pencil on a tag and that is exactly the icon.
That's called Wrap Tag. It's actually the Tag Editor icon, but when you have code highlighted like this, any content highlighted it changes its functionality, when I hover over it, it's going to say Wrap Tag. As soon as I click on that I get a little tool tip that comes up, this is okay. What do you want to wrap this in? Well, I want to wrap it in a span tag like everybody else, but I also want an attribute applied to that, and that's the class attribute. So I'm going to hit space and you'll notice that all of my code hinting comes right along with me right here in this tool tip. So this is awesome. I can just go ahead and do class. I can type in date, but I don't even need to type in date, Dreamweaver does it for me.
Now how does it know? Well, what it's doing is, it's going out to my styles, and it's finding all the IDs and all of the classes that are defined within my external stylesheet. It's going to make those available to me, whenever I do an ID attribute or a class attribute. So then I can just pick them out from a list. Now if I'm typing my code from scratch, and I don't have any styles applied, then each time I'm going to need to go ahead and type that in. So this is a really good reason where you should go in and just sort of define some classes that you know you're going to need within your CSS file, because this is going to give you quick and easy access when applying those classes within your code.
All right to finish this up, all I've to do is hit Return to choose date, and hit Return one more time. You'll notice that the opening and closing tag are taken care of for me. It's going to wrap that content in the tag, very simple, very easy. Now that is simple, but it gets a little bit more difficult when your content becomes more complex. Let me show you what I mean. If I scroll down towards the bottom of the page, down towards the footer, I'm going to go down to about line 91 or so. I think I went a little too far, yeah I did. You can see that the footer basically has several sections of links inside of it, and within those individual sections, there are individual columns, so that links can sort of sit right side by side each other, and the way that that is structured, each of the columns is inside of a div tag.
So I've separate unordered list that are grouping these links together, and then they're incased within a div tag which is then further incased inside this section. Okay, so sometimes you can sort of forget some of that content, and in this case, we don't have the div tag for column 1, so I need to surround this unordered list. Well, that can sometimes be very difficult to do. I can't tell you how many times I've seen people do this, watch this. Did you see what I did wrong? Notice I've the very end of the closing angle bracket (>) there, left unselected. So now if I was to wrap this, or modify this code in anyway, I'd basically be messing my code up.
So I'm going to use the Coding Toolbar to help me out here. I'm going to click inside any one of these links, then I'm going to use this little icon right here which is the Select Parent Tag icon. I can click on that once and twice, and as soon as I click on it twice, I get to the unordered list and it wraps all the way around that. Now I could go right over here again to the coding toolbar, that was pretty easy and click the Wrap Tag icon. But there is a second way for you to quickly and easily wrap tags and that is the exact same method that we used earlier in the title, when we were talking about using the Quick Tag Editor in Design view.
The Quick Tag Editor works here in Code view as well, which makes it even more of an amazing tool. So if I do my keyboard shortcut, which if you remember it, it's Ctrl+ or Cmd+T based upon your platform. So I'm just going to of Ctrl+T. As soon as I do that, notice that the tool tip comes up for the Quick Tag Editor. Now I can say div class="col1". Hit Return twice. It's going to finish that for me and wrap that and now if I save this and preview this in my browser, I can see that my column1 is showing up properly.
I can also see in my account of events, last one is styled properly and is being represented as a date as well. So there we go, taking advantage of Dreamweavers' ability to wrap content in a tag with a single shortcut. Not only is it going to speed up your coding, but it's also going to help you reduce errors, by making sure that the opening and closing tags are in exactly the right location.
Get unlimited access to all courses for just $25/month.Become a member
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.