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.
Next we'll learn how to style the div with an ID of wrapper. Keep in mind that you could have styled any of the div tags, but if you want to make a div tag have a specific function, you'll give it an ID name to identify it and then that ID name can only be used once per page. And you create styles for that. So from the CSS panel on the upper-right let's select New Style button. And let's choose a contextual selector type of ID. And in this case we want it to be the wrapper, so we'll do by the name of Wrapper and make sure that it's being saved into our CSS Style Sheet. Then let's click OK.
The first category we're going to choose is Background. And in Background, we're going to select white for the background color. Now, this won't make much of a difference now, but when we get ready, in the body tag, to add background colors, we want it to be white, so that we don't see the gray showing through. So I'm going to go ahead and click Apply, and as I said you won't see a difference at this point. The second thing we are going to do is choose Block, and we are going to make the Text-align left. Again, we are doing this because when we go into the body tag, in order to do a fix for an IE 4 or IE 5 browser, we're going to have to make the body tag Text-align centered, so this is a little fix that we're doing and it will override that.
And finally, we're going to go into our Favorite category, which is Box. And here we're going to go ahead and set the Width to 790 pixels. Now in our last example we did everything relationally. And in this example, we are going to do what we call a 'fixed width column.' So as soon as I click Apply, you'll see that the div box is now 790 pixels wide. Then we'll come over to Margins and for the Top, we'll create zero pixels, but in Right we'll choose Auto. Bottom will be zero and Left will be Auto.
Now Auto is a new selector for us and what you'll see is as soon as I apply it, it will center your div box for you. This is a great styling tag because what it does is no matter what size the viewport is in the browser, the right-margin and the left-margin automatically adjust to be equal on either side, so that this div box will always be centered. Then finally, let's go into our Padding and try to correct what this negative indent is doing. So at the Top, we'll make it 5 pixels. Click Apply. Then on the right, we'll add 50 pixels. Click Apply. And notice what happens.
It's now 790 pixels plus 50 pixels of padding. At the Bottom, we'll add 10 pixels, and on the Left we'll do another 50 pixels. And click Apply. So that takes care of our negative overhang, but I do want to remind you we've added 50 pixels here, 790 pixels here, and another 50 pixels. So it's 790+100 pixels, so it's now 890 pixels wide. Just so you keep that in mind. It's not doing inside the box. We're adding it to the inside of the box and then click OK.
So it's looking better. It's looking much more page-like. I am going to go ahead and choose File > Save All. And now I'm going to go into the body style and work on that, so that we can start creating a background look to this. We can actually use this body tag. as sort of like you would use layers in Fireworks or Photoshop, because this body tag is outside of that. So let's go ahead and double-click. And go to the Background category. And for the Background color I'm going to choose that default gray that I've been using 99999. I'm going to go ahead and click Apply.
As you can see, it now makes perfect sense that we gave a background color of white to our wrapper tag. And then I'm going to go into the Block to do the fix for IE 4, IE 5 by making this Text-aligned center. Now, because we've already made the Text-align left in the wrapper, which overrides the style in the cascade, you'll see that nothing changes when we apply this. Finally, I'll go into the Box category and zero out all the padding and all the margins. I want to make sure that the default browser styles don't override any of the styles that I'm creating.
So I'm going to go ahead and click Apply, and then click OK. Let's do a File > Save All. Then let's go over to our Preview in browser and look at it in Firefox. So as you can see we've got a page-like feeling, but it's butted right up to the viewport Top and Bottom. We can change that later on. And no matter what size we make this Window, the margins on the right and left are staying equal. Now, if we go smaller than the 890 pixels - notice because we're using fixed width layout, nothing changes - it will always be that width.
But if we go larger, the outside margins adjust themselves. Another thing I want to show you is be free and feel free to experiment. If I turn on Firebug right now, and open up my body tag, and then click on my Wrapper tag, I can come over here and demonstrate to you what would happen if I had not made that background color white. This allows me to preview and turn off different margins. So that shows you, if I took off the centered styling, the Auto tag, I would have it going all the way to the left, and if I turned off the color, I would see a gray online resume.
This is a great way to check your website, try things out, see if you're doing the right things and experiment. You should be trying things out all the time, and not lock yourself into what a tutorial tells you to do. I'm going to close out a Firebug, and then go out of Firefox, and back into Dreamweaver. Now there is one more thing I'd like to try. We have some images in our folder that are background graphics and I'd like to apply some of those into our background area. So I'm going to close up this image file and through our CSS Style Sheet, we can create those.
I am going to double-click on the body style, go to my Background category, and you'll notice there is an attribute called Background Image. Let's go out and browse. Now, what you need to do is go out to your main folder, and make sure that whatever you do, you go into your Images folder where you have been accurately and carefully managing your site. And all your images that are prepared are right here in your Image folder. As you can see, there is a background texture that we can try. We're going to select that background texture that was made in Fireworks, click OK, and then we're going to apply.
We want to go ahead and be very careful and add that repeat. So that it goes both horizontally and vertically. Notice if we only go Y, it will only repeat on the left-hand side over here, or if we only use x, it will only repeat across the top which we can't see at all, because it's very, very small. But we want this to be repeated in both directions. I'd also say, take the time to try out some of the other background images that we have. So before you make up your mind, you're styling and your designing as you go along, so I'm going to try some other of the background images.
I am going to click on Browse. And I know that we have one for the background gradient. And I would like to see if a background gradient is more what I had in mind, so I click on the background_gradient, select OK, and then instead of it being a repeat, I only wanted to repeat across the horizontal dimensions of the web page. So that would be the x. Go ahead and Apply. And now you see, if I click OK and go out for just a moment, I have this nice transitional page that looks as though it's going on on a screen that you're shooting against for commercial products or something like that.
It's actually this nice blend behind it. If I do a File > Save All and go out to my Browser window, you can see I have that nice transition which gives it a completely different feel. So whatever background graphic you choose will give it another kind of feel or look to your resume site. Now that I've looked at this inside the browser, I really like what I was doing before with that corduroy look, so I'm going to close out of here, double-click again on the body tag, go back to the Background, go Browse out one more time, find that texture or even try some other texture, so I can even try this background one for a while, and see if I like that one.
It's a little large, I'm not sure it will look that good. But I'm going to go ahead and play and experiment, and that may be a little too busy for our resume. It might be good on another kind of site, maybe for a restaurant or a menu for a restaurant, but I think for my resume, I want it to look really professional and not detract from the content that I want people to look at. So after looking at three or four different choices, I'm going to go back in and pick the one I think works best for the content and for the purpose of this site, which is to display my online resume, and go ahead and click Apply, and then do OK.
Yeah. That's exactly what I want. Do one more File > Save All. And as I said, always check it in the browser to make sure that what you have in Dreamweaver is what you want out on the Internet. Now that looks great, very professional, very tight.
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.