Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Discover how to build web sites, prototypes, and more in this course on Adobe Dreamweaver CS6. Author James Williamson shows designers how to take control of their site by properly naming and structuring files and folders; how to create new documents and web pages from scratch or with starter pages; and how to add content such as text, images, tables, and links. James also provides a background on the languages that power projects built in Dreamweaver—HTML and CSS—and introduces the programming features in the application, for developers who want to dig right into the code. The last chapter shows how to finesse your project with interactive content such as CSS3 transitions and Spry widgets.
In our last movie, we focused on two of the most common types of lists you will be using for your projects, the ordered and unordered list. Well, in this movie, I want to talk about a third type of list and that would be the definition list. Definition list might not be used as widely as the ordered and unordered lists but they do offer us an extremely powerful way to organize structure in group content. So I want to talk about not only the list and how it's structured, but what some of the possible uses for it might be. So I have the alumni.htm page open here from 04_05 directory and you can see this is a profile of an alumni of the Roux Academy and in the very middle column here we have an interview. So we have the question and then we have the response.
Now that's content that really should be grouped together in some way to let people know that there is a relationship. But there is actually sort of if you will, relationships inside of relationships. So this question and this answer are related to each other, while all the rest of the questions and answers are also related to each other and in turn, they're all related to each other in a way of being part of the same interview. So you can see there is a structure that's going on there that really doesn't lend itself to say an ordered or an unordered list, even though we certainly could nest those unordered or order lists, it still doesn't give you the same type of functionality.
So we're going to create what's known as a definition list. Now the creation of a definition list visually, if you are not hand coding it, is something that is really sometimes pretty tricky. So you have to be very, very careful in how you select your content. Essentially, a definition list contains three structural elements. There is the dl tag which is sort of the parent definition list tag, which we will see in just a moment and then you also have a dt for term, and a dd for definition. So you have got two items within the list itself. You have a term and you have a definition. The order in which you select items matters.
The order in which you select items controls what's a dt and what is a dd. If you select the list from the bottom up, the terms are actually the bottom elements. If you select it from the top down, it's actually the top element. So be really careful about this. I want to make sure I am selecting it from the top down. I am going to start with the first question, I am just going to highlight all the way down through the interview, to that last paragraph right there. So these are all currently right now, they're just paragraphs. I am going to go up to my Menu and I might choose Format>List>Definition List.
So you will notice there really isn't an option on the Properties Inspector for Definition Lists. If you want one, you are going to have to go up to the Menu here or you are going to have to code it by hand. I am going to choose Definition List and now my formatting is going to change. Now the Formatting is being controlled through Styles. So using CSS, I essentially just said, hey dts should look like this, dds should look like this. So you can indent things, you can italicize things; it's totally up to you. But what I'm really interested in is the structure of the list. So I have minimized my doc down to icons and I am going to switch back to the Split screen view, so I can see our new list.
Okay, so at the very top we have a dl or Definition List tag, and below that we have the start of our terms, and our definitions, and you'll notice the terms obviously are the questions, the answers are the definitions and these dts and dds are related to each other. So this answer obviously relates to this particular question and then the grouping of the question and answers inside the Definition list gives it a larger overall structure. So if I kind of scroll down, I can see right here, here is the closing definition list, here is the end of the interview.
So it's really nice way of structuring some of the complex content within your files. I've seen people use it to structure product details, where they will have the title of the project in the term and they will have the description of the product in the definition. I have seen it used a lot for interviews, things like that. So these complex structural elements really lend themselves well, to a definition list. They are also very easy to Style through CSS. So there are very logical choices to use when you need to group content together in a complex way that doesn't necessarily lend itself to a simpler list, like an unordered list or an ordered list.
There are currently no FAQs about Dreamweaver CS6 Essential Training.
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.