In this lecture, our instructor, Candyce Mairs, demonstrates how to create a definition list. She shows how to create a definition list from selected text using the format menu and discusses the HTML tags used in definition lists.
A definition list is a special type of list in HTML
It allows you to list a term, and then add a description of that term on the next line
The destinations.html page has a list of terms at the bottom of the page
To turn that text into a definition list
Select the text
Choose Format->List->Definition List
Note the HTML tags for this type of list
A Definition List
Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.
We are now going to take a look at creating a definition list, which is probably not a type of list you are accustomed to hearing about.0000
A lot of people understand bulleted or numbered lists, but a definition list is a bit unique to HTML.0009
I have the destinations.html page open; you can see, mine has an asterisk on it; so, what I want to make sure is that I save this page.0017
Now that I have saved it, what I am going to do: down towards the bottom (and this is directly under the numbered list I just added), we have some terms that we are going to list for people to understand what these terms mean.0029
That is what a definition list is designed to do: so basically, what a definition list does is allow you to add a term and add a definition--that makes sense: it's a definition list.0044
Let's set it up; and this one--you don't use the Properties area to find it; so a lot of people don't even know that this type of list exists within Dreamweaver.0058
Let's take a look: I am going to highlight...just like everything else, I want each item to be in its own paragraph; as you can see, this page already is; and I am going to select everything I want to be in that list.0069
I want both the term and a definition; once I have all that set up, what I do is go up to the Format menu; and this is another method for creating bulleted and numbered lists, as well, but I think it's a bit buried--it is usually easier to do this from the Properties area.0084
But under Format, you can see, there is a List option, and unordered and ordered lists; this is your bulleted list and your numbered list.0107
But notice, we have another one--it is a definition list; and I am going to click on that.0118
And you can see what a definition list does: this is really a nice feature, because HTML has no such thing as a Tab key--you cannot tab in order to move around or indent content.0125
And there are many times when this type of thing comes in handy, because you don't have the ability to tab like you do in a word processing program.0142
It just doesn't exist; so how do I get some space in front of content in order to get it indented just a little bit?0151
Now, I may want to make these terms bold; I'll go ahead and wait on that; but I may want to change that--we will see; these are the types of things that you think, "Oh, maybe I should do it that way," but then you look at it and you're not quite sure.0164
Anything that is like that--I tend to wait to do something with it.0181
That is a definition list; it is a special HTML type of list that takes the first line and has it even with the left margin, and then the next paragraph following it is indented.0186
And if I click inside the term, notice, there is a <dt> tag; if I click inside the definition, it's a <dd> tag; and there is also this <dl>, which selects everything.0202
So, as you are building your pages in Dreamweaver, make sure you are taking a look at that Tag Selector to see what is going on.0219
Basically, this entire thing is a definition list; but I have a definition term within the list (and that becomes left-aligned), and I have a definition definition, a dd, and that becomes indented.0228
That is how you can create a definition list in Dreamweaver--a very handy feature that changes the margin of content and puts it into a nice, neat list format for you.0245
That is a cool feature you can find under Format, List, Definition List within Dreamweaver.0258
Educator.com recommends Adobe Dreamweaver CS6 for use with the Educator Dreamweaver course. Adobe Dreamweaver CS6 software enables you to make cutting-edge web designs and mobile apps while generating HTML5 and CSS3 code. Use the fluid grid layout system and HTML editor to design projects for smartphones, tablets, and desktop screens. Support for CSS3, jQuery Mobile, and Adobe PhoneGap Build frameworks streamlines the mobile app development process. Check your designs with Live View and Multiscreen Preview. Add rich typography and CSS3 transitions to create compelling projects.
Educator.com recommends the Adobe Dreamweaver CS6 Digital Classroom to go with our Dreamweaver course. In this book-and-DVD package, expert instructors provide a complete course in basic Dreamweaver that you can access at your own speed. Step-by-step instructions in the book are supported by lesson files and video tutorials on the DVD, presenting the newest version of Dreamweaver in 16 self-paced lessons. You'll learn to use style sheets, dynamic HTML, multimedia, databases, and much more to design, develop, and maintain your website.