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.
You should really be getting the hang of creating styles now. The next thing we're going to style is our definition lists. Let's scroll down to the websites. Let me remind you that there are three parts. There is the definition list, which is the entire grouping. There is the definition term, which is just this part, and there's the definition data, which is just this part. If you ever forget this, you can always go back into Split view and remind yourself, because you'll see that order and that parenting inside there.
There are two children, the definition term and the definition data. I'm going to go back to Design View, so we can see it while we're styling it. If I put my cursor inside here, we found out that when I go to create a new style, this will help us somewhat when we start creating them. I'm going to click on New CSS Rule, choose Tag, and it guessed dt but we want to use dl for the entire definition list. Go ahead and click OK and we're back into our CSS Rule Definition dialog box.
So let's go right to Box because we are dealing with margins and padding, trying to get all that spacing done right and guess what, I'm going to put .35 em because we are using the relational measurement system of ems, and then put 0 in the other areas. And then for Padding, I'm going to also put 0 and this will override the default settings of the browser. That's great. It pushes it right up next to our header, keeps it in a nice block. It's looking really, really good.
Again, I'm working from the outside in. I'm working with the parent tag first, and then I'll go in and start styling the two child tags. So I'll click OK. So the next one in the order they appear would be the dt or definition term. I'm going to stick my I-beam right there in the definition term, click on the style sheet, click on the New CSS Rule, go ahead and pick Tag. This time it shows up as dt or the definition term, click OK, and this time I'm going to go to Block.
Remember Block refers to block of text, and in Block, I'm going to do another negative text indent. Right now, this example.com is not aligning up with the word Web Sites. So I'm going to come to Text-indent and type minus or negative, and then type in .5 em. Go ahead and click that Apply button, so you can see that, and that pushes that out and makes that hold better for that whole section. We're kind of creating those margins and blocks of texts so that that content all looks like it belongs together, and isn't too spacey and too ragged to read.
Then we'll go into the Type area, then we're going to go into Color. I'm going to type that color using hatch mark and using shorthand 339 and then tab out. Go ahead and click Apply. So now you can see that we've made those different websites have that same dark blue color as our headers and then last, I'm going to go into the Box area and work on my margins and padding again. This time I'm going to change the Top to 1 em, which will be slightly larger than anything else we've done, but you'll see that I'll move the spacing between things a little bit more.
There we go. It keeps the dt and the dd together, but separates each of those areas by
putting only the margin on the top.
If I put it on the top and the bottom, it's going to double up the space.
So I only need it on the top and then I'm going to go into padding and make
that Same for All, and I make these other margins 0.
So I override the default browser and click Apply.
Looks good, click OK, so there is only one tag we have left to style and that
would be the
So we'll work on our Line-height there, because this is where we have more than
one line of type and we'll look at our margins again and try to override what
the browser is doing.
So I'll stick my I-beam into the definition data area, click on the New CSS Rule,
choose Tag, the
That gives a little breathing room between that title right there and the body text right there. Zero out the rest and then for the padding, also zero that out, and then go into Type. Remember type is where line height or leading is, and I'm going to type 1.2 em. Make it slightly smaller than some of the other areas. Now a lot of this you may say is how does you know or how do I know what to do here, and a lot of this is just subjectivity.
You're looking at your site and you're just trying to figure out what really works here, and how you want to group things so that they hold solid and read well. And as you can see, I'm trying to make this more uniform, a little bit easier to read, not make it to chunky or too indented in and out. So that's clearly easy to see on its first scan, but then on a deep read it's also easy to read. I'm going to go ahead and do File > Save All and then of course, preview it in the browser.
It's looking really tight, really good. It's almost there. There is a few more finishing touches, but I'm beginning to see a nice page that looks like a website that's also a resume. Back into Dreamweaver and get ready to do some more styles.
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.