Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Since XML allows you to generate any tag you want, it occasionally will actually try to parse text that you don't intend it to. So I am just going to use our existing code as an example here. Let's say I am in the description of the Blistery Show by Chris Mattia. So maybe we were describing something about the show and we are like 'Chris > Picasso.' The use of this tag is going to cause us a little bit of a problem, because parsing engines could actually interpret that as a piece of a tag which could sort of just ruin all the parsing through the rest of the movie. Now, we can use encoding character. So we could use something like >. So you can see, as we start to encode this, Dreamweaver helps us out.
So if you are not 100% certain what the encoding is for the character that you'll need just type in the ampersand symbol. You will get this code hinting that comes up with Dreamweaver and you can go down and find exactly the character you are looking for. So here we are looking for greater than, so we find > and that would work. But the problem with that is that's a lot of manual labor if the text is already finished. plus what if it's automatically generated and you are not in charge of that encoding process? Okay. So there is another way to do this. One of things we can do is surround our literal strings with what's known as a Character Data Statement, or more commonly referred to as CDATA. CDATA informs any agent parsing your XHTML that all the content inside of the CDATA statement should be parsed as a literal string.
Now here is how we do that. If I started right before the C and opened up a tag and an exclamation point, I can then type in a bracket, and then in all caps type in CDATA. I would follow that up by another bracket and that's the opening part of the CDATA statement. The closing part would come at the end of this text. So you get right down to the end of the text and I will type in two closing brackets, then a closing single brace. So here we have our text surrounded by CDATA statement. It's not that difficult to do, but that's a lot of typing to remember. Where do I put this bracket, where do I put this bracket, and who closes and who opens? So there is an easy way to do this inside of Dreamweaver.
Dreamweaver doesn't automate it for us, but we can automate the process ourselves, and we can do that by creating a snippet. So in this exercise we are going to create a CDATA snippet and then we will surround all the descriptive text with our snippet. So let's go over to our Snippet panels. It's docked with our Files and our Assets panel, and I am going to go ahead and create a new folder. Now remember to sort of deselect any current folders before you create a new folder because it will place your new folder inside of any selected folder. And I am going to go ahead and call this XML. So I will highlight the XML folder and I will click on the New Snippet icon and that brings up my Snippet dialog box, and I am going to go ahead and call this snippet CDATA and for a description, I will go ahead and type in Character data section for XML files.
Snippet type is going to be to wrap the selection and I am going to go ahead and in the Insert Before, open up an angle bracket there and type in an exclamation point, type in a left bracket and then in all caps CDATA. So it's really nice that we only have to do this once, once when we make a snippet, and then we will finish the Insert Before by typing another left bracket. Now in the Insert After all we have to type in are two right brackets and then a closing angle bracket. Okay, so there we have it. Just go ahead and double check this because you really want to make sure this is correct so it's not interpreted as part of the literal string. Let's go ahead and click OK, and there is my CDATA snippet.
Now another thing you might want to do is to go ahead and create a keyboard shortcut for your snippet, and we can do that by going up to our keyboard shortcuts, and down the Mac I will go to Dreamweaver > Keyboard Shortcuts and on the PC you go to Edit > Keyboard Shortcuts. And I happen to have a copied set, James' keyboard shortcuts. If you don't have one of those, you can duplicate them by clicking the button right there. You can go ahead and do that. We are not going to try to change the menu command; we are going to try to change a snippet. So go ahead and click on your Snippets. I can see there is my XML snippets, I open them up, and there are CDATA. So you will get a list of all your snippets. I am going to go ahead and add a shortcut. So it's sometimes difficult to find one that hasn't already been used. So let's use Command+Shift+B. That one has not been mapped and we will hit Change, and now we just have to remember that Command+ Shift+B is going to give us our CDATA code snippet. So I am going to click OK. Go back to our upcoming.xml file and I going to highlight my description and I go ahead and hit my shortcut key Command+Shift+B, Ctrl+Shift+B on the PC, and it's going to go ahead and surround all that text with CDATA text. I will do the same thing for my next description.
So the one above that and finally we have got our fourth one, Josh's, to do. So I am going ahead and do that one as well. So now I will save this file, and all of our literal string data is going to be protected in the CDATA statement. So now that our XML file is finished, we are ready to discuss using XML to style our content and we will be doing that in our next exercise.
Get unlimited access to all courses for just $25/month.Become a member