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.
Now let's take a moment to style our lists.
The first list that we're going to style is the unordered list.
And just to recall, there are two parts to the unordered list.
There is the parent tag, the
, and there is the child tag, the
and you can have as many of those as you want within the parent tag.
So let's go over to New Styles and let's again choose Tag and let's come
in here and type ul.
would be the parent tag.
So again working on the idea that we worked from the outside in, we're going to
style the parent tag before we style the child tag.
Make sure it's in the right CSS style sheet and then click OK. So when we are styling the unordered list and we are doing the entire one, we're looking at the whole block, not line by line but the entire block. We're thinking of it as one big shape. So we are going to go again to Box, because we're working on our margins and our padding. And in Margin, we're going to deselect Same for All. Now you can probably guess already that for the top margin, I'm going to use .35 em, because I'm using this proportional system. .35 em of whatever em width I'm in.
So it's going to reflect whatever the size of that font is that I'm currently styling. So if it's a small font, .35 em will be smaller. If it's a big font, .35 em will be larger. So I can be very consistent in the way I'm styling by keeping them all around .35. So, the Top is going to be .35 and choose em. And then for the Margin Left, I'm going to choose 1 em, because I want to slightly indent, and then I'm going to hit Apply. And you can see that it affected that quite a bit, but that went on the whole ul, remember that.
It didn't just affect the lines. So I have .35 at the top and I shifted it over 1 em on the left. Now we are going to go over to padding and I'm going to zero that out, because I don't want add anymore spacing around any of the sides. So I'm going to go ahead and select 0 and click Apply and that will to keep that just the same. Now I'll click OK. Now that I have styled the entire outside box or the outside ul, I can go in and now do the tag for li, or list item.
So I'm going to put my cursor inside here, come over to New, and choose Tag again. And notice because my cursor was already inside the list, Dreamweaver figured out that I'm trying to style the li. So that's a little hot tip for you, that if you put your cursor into the area which you're trying to style, it will make a guess at which format tag you're trying to style. So I'm going to go ahead and click OK. And for the Line-height, I really only need to deal with the fact that this looks too tight right now.
I need to work on what we would call in print, leading, and in the Type category, that would be Line-height. So again, using my relational, proportional measurement, in the last example, I used 1.5, so I'm going to stay with 1.5, and make it em. Go ahead and click Apply and that gives it a little bit of breathing room, so that those two lines aren't butted up so closely together. It looks good. So if we scroll down the page and look at our two unordered lists, we see that they have a good relationship with their header.
That they have a nice space around on top and on the left, and that they're
indented correctly, and there is good line spacing.
So we formatted that grouping to look like it goes together and yet it has
some breathing room.
Now we styled our
currently sitting next to, and we've used proportional or relational
measurements using ems to make this site look like it works well for topography.
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.