Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
So staying with my theory of working from the outside tag and going inside, the next tags we would look at would be the h tags. Now, there is no reason since we're using this proportional method that we can't style more than one h tag at the same time. This is called a Compound Selector. So to do this we'll go over to our CSS Style Sheet, click on New CSS Rule, but this time in the Selector Type instead of Class or Tag, we're going to choose Compound.
Inside of the Selector Name we're going to type all the h1 tags that we think we might use inside of this webpage. So we'll type in h1, h2, h3, h4, h5, h6. Now you're probably saying we'll we only used h1, h2, and h3. But what if later on I need to use 4, 5, and 6 for something, for a smaller little call out, or something like that? I'm using this proportional method, so I'm going to go ahead and do all of the h tags that I have available.
They have to be separated by a Comma. Now I'm going to click OK, and at this point, I'm going to go to the Block. Now, remember I told you Block is not box. Block usually refers to things that you do with type. It's really your typographic toolkit. You'll see things like Word-spacing and Letter-spacing, which has to do with kerning and horizontal spacing, Vertical -alignment, Text-alignment, indenting, White-space and how things display. This all has to do with the way blocks of type look on a page.
So, this time I'm going to go into Text- indent and we're going to do something unusual. We're going to do a negative indent, which would move it to the left, not to the right. I'm going to type -0.75 and instead of using percentages this time, we're going to use em. Now em is another way to measure things proportionately. It's a relative measurement. Em is based on the width of the em that you have in that particular type that you're looking at. So if you're looking in an h1 it's based on that em.
If you are looking at an h2 it's based on that em. So it changes according to what context you find the em in, and it makes it all scale down at the same rate. So we can have a .754 for h1 that won't look the same as an h2, because it's based on the em that each one of them has, the width of that em. So if I go ahead and hit Apply right now so you can see that, you'll see that it just moved everything to the left slightly and .75 would be three-quarters of the width of an em. Whatever that em is for that type.
Now we're going to do Letter-spacing, and Letter-spacing is a little bit more like kerning or horizontal spacing. Again, I'm going to base it on em, so for Letter-spacing I'm going to put in 0.1 em, which is 1/10th of an em, which will be just a slight space between all the letters, but give it some breathing room. Watch as I hit Apply. Now that gives you a nice kind of title/header feeling. It makes it look special and sets it apart from the rest of the page. Then we'll go onto the Box and start working with our Margins and Padding.
In Margin, I want to create a top space so that nothing can butt up on top of each of the headers. So I'm going to deselect Same for All, but I never want text to be butted right up on top of the h1, h2, h3, h4, etcetera. So here I'm going to type in 1.5 em. Again, keeping it relational and then for Right, Bottom, and Left, I'm going to go ahead and zero it out by putting all zeros in. So when I hit Apply, you'll see a little bit of vertical spacing added.
Notice it moved this down the page, because now we have 1.5 em from the top of this T to the edge of that box. So that it cannot push right up against the edge of the viewport window. Then for Padding I'm just going to keep it Same for All, because I don't want to double things up. You don't want to have Padding and Margin and end up with these very large, large spaces. I am going to go back to the Type category and I want my headers to look a little bit different than everything else. So for my Text-transform, I'm going to choose uppercase.
And I'm going to select that right now and go ahead and apply. Again, as you can see quickly it changes the look and feel of that and I'm also going to pick a different color. Now the color I want to choose is 333377, but I can use shorthand because I know those numbers are repeating. So I'm going to put 'by the name of,' which is hatch mark, 3377, hit my Tab, and as you can see it's a dark ultramarine blue and I'll click Apply.
So even though the text is heavier, larger and all upper-case, by putting that softer color it holds the page in a softer way and we see the emphasis, but it doesn't take over what our body text and the rest of our content information is doing. And last, I'm going to create my own gont- family or my own card stack, again my font stack. So I'm going to go up to my Font- family and what I want to choose-- Well, actually I'm going to make my own font list again and I think it's a good exercise for you too, so you can get practice doing this.
I'm going to choose my font list, and the first one I want is Trebuchet. Now I want to use Trebuchet MS and select that. The next one I want is Helvetica. The third font I want is Geneva, the fourth font is Arial, and the last font would be the generic font or sans-serif.
Now, I'm being very careful to choose fonts that I think are installed on both operating systems and available to users everywhere. Trebuchet will give it a slightly different style than Helvetica or Geneva and give it a kind of a nice look, as I hit OK and then apply this one, you'll see that it gives a little bit more panache, some little extra punch. The one I made should be at the bottom of the list and I'll click Apply. So you can see it's a little bit softer, a little bit thin and thickness to the stroke of the font, and it gives it a nice look and feel.
I am going to go ahead and click OK and if I look at this now, I've softened it up by using the dark gray. I've made my headers stand apart, but not take over the content. And by using proportional measurements and a compound selector, I've given an even feel to the entire website, and an even hand that looks as though there is consistency throughout, and it gives it a lot of clarity as you're looking at the resume. It's a lot easier to read than it was before and it's looking really, really good.
The last thing you'd want to do is go ahead and do a File > Save All, go ahead and preview it in your browser, and make sure that the experience that you are having inside of Dreamweaver is always like what you're seeing out in the browser. So as you can see it's looking really good, easy to read, very legible. But there are a few problems. We're starting to get what I called vertical space. As you start stacking all these boxes on top of each other, you start seeing that you create a lot of vertical white space. If I go ahead and click on Outline and say Outline Block Level Elements, you're going to see all that spaciness that's starting to occur,and that's going to make this webpage get longer and longer.
So as we continue to style, we'll be continuing to adjust for a vertical spacing and I'll show you how to do that using your top margins. I'm going to click out of Firefox, go back in to Dreamweaver and we're ready to style some more.
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.