Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In Creating an Online Resume: Hands-On Training, interactive design professor and enthusiastic educator Laurie Burruss teaches how to produce an online resume—and create a first web site in the process. Laurie suggests structure and information needed to create a winning resume, and shows how to design the pages with simple typographic principles and effective layouts. She explains how to use Cascading Style Sheets (CSS) and control the design and structure of HTML documents through hands-on development. Exercise files with additional supporting materials accompany the course.
The next and last kind of list that I want to show you is the definition list and it's not one that's available for you in the Properties Inspector, but it's not hard to use and there is a lot of reasons to use the definition list. The definition list also has a parent tag, which is the dl tag, but it has two tags inside of it. One is the dt for the definition term and one is dd for definition data. We have a perfect location or a perfect place where this would make semantic sense to use the definition list.
We have the website and then this description of the website, and so we have two parts to the list that we want to format. So this would be a great example of using the definition list. So I'm going to select all of the three website examples and their descriptions, and you've to be clever to find the definition list in Dreamweaver. You right-click on that entire selection, because remember a list has an outside tag so you need everything in the list first, and when I right-click, I can scroll up to List and you'll see that one of the list that appears there is Definition List.
Although it's not available for you down in your Properties Inspector. Kind of sneaky, huh? So I'm going to click on Definition List and notice how this works. The actual website line is now hanging out and the description is indented. It works really, really well for what we're trying to do. Let's look at this in Split view so we can really see what the different tags are doing. So if I select Example all the way down, so I'm going to line this up side-by-side first before I do the selection.
That will make a little bit easier for you to see. So here is the three examples and here is the three examples in the Design view. I'm going to select these three examples. As you can see they all get highlighted. Here is the close tag for dl and then I'm going to scroll up on the Code side, up to the top of that dl. So that is the entire grouping right there. That is the definition list or the parent tag. If I only select the dt, which is the definition term, notice it's only the website and if I select just the dd and its close tag, I get the description of the website.
By default the dd is indented and the dt or the term is hanging out to the left. We can then in our style sheet, later on, have three things that we can style to control the look and feel of this particular list. This list is a very effective list and designers like to use it a lot because it does give you all kinds of choices and all kinds of variety that you can do to establish a more complicated list. At this point, I'd want to save the site and then preview it in the browser.
So to save the site, I'll go up to File > Save, go to my Browser Preview button and check it out in Firefox. Again, you can see that we're making a rock-solid HTML document that's based on correct semantic HTML markup and our definition list is appearing correctly.
There are currently no FAQs about Creating an Online Resume: Hands-On 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.