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.
We need to create some content for the sidebar area, as well as get rid of the sidebar dummy content. It's going to be easier to do this if we do this in Split view, because remember whenever we're doing divs, we want to be sure that we get both the opening and closing tags. So I'm going to go into Split view right now and I'm going to move it, so that we can see what we were working on, and put my I-beam in the area, and bring that up so we can see it. So right now, there is our sidebar and there is the content that we have in there.
I'm going to select that content carefully and then delete it, and this is the important part. Don't move your mouse. So I have my I-beam inside this div, and I want to put another div or box inside of there. The way I like to think of this is you probably all have a drawer at home where you put another box inside of it for your silverware. That's called nesting. So we're going to put another box inside the sidebar box that will hold the content. I'll go up to the Common insert bar and choose the Insert Div Tag and notice again Dreamweaver checks and sees that I have an insertion point there, and I'm going to give this a specific ID name because it will only appear once.
I'm going to call this sidebar_content. Remember, meaningful names. Click OK. Again it inserts some dummy text, but we're going to replace this text with what we want to put in here. So at this point you can either work in Split view or in Design view. I'm going to go ahead and work in Design view, so you can see the screen a little bit better. So I'm going to select that text and when I start typing that text, we'll delete, I'm going to put in here Contact Info, followed by a colon, then I'm going to put in my firstname.lastname@example.org email address, then I'm going to list my computer skills to highlight those and then type in a bunch of my computer skills.
And I'm hitting Return each time I type a name in. So I've got all my contact info and all of my computer skills listed and now just like I've done before, I'm going to go ahead and select different things and applies some HTML formatting to that. So I'm going to select Contact Info. I'm going to choose h4. We haven't used an h4 yet, but it's a smaller header. And because we created this h1 through h6, remember I told you this would be handy to create them all at the same time, t's putting the same kind of styling as it did on h1, h2 and h3.
I also going to select Computer Skills and give that an h4 heading. I am going to select all my skills and make that into a bulleted or unordered list, and finally I'm going to select my email address, and remember I told you there is two ways we can do this. We can go down here and type mailto: with no spaces followed by the email address, or I can go up to my Common menu and click on Email Link, and it says, "You have selected this text. Is that the Email?" And the answer is yes and select OK.
So if I deselect that you can see that I've got all of my text in, and I now have given it format and I can go ahead and start styling these things. Let's do a File > Save All, at this point. And the next thing we want to do is put our I-beam inside this nested box here, it's the outside box, which is the sidebar. Here is the nested box, which is the sidebar content, and we're going to make a style for the sidebar content. So I'll go over to my CSS Styles panel and check New CSS Rule and the only thing I want to style right now is sidebar content.
So I'm going to delete everything else, just sidebar content, click OK, and I'm going to go to the Box category and I'm moving my dialog box over so you can see what's going on. I'm not happy with the way this is because the text is pushing against the box. There is no breathing room, so I need to create some breathing room, and I could do that with margins or I could do that width. In this case, I'm going to make this box inside slightly smaller to give that breathing room. So I'm going to type in 180, and click Apply, and as you can see I just made the box smaller, but now I need to give it a centeredness inside the other one and I can use that same trick of Auto that we've used before.
So I'm going to deselect Same for All in Margin, type zero, then choose Auto and then 20 at the Bottom and then Auto, and click Apply. Isn't that cool? So you can use Auto a lot of different ways, if you're trying to center a box inside another box in nesting, this works really, really well. And then for Padding I'm going to deselect Same for All and I'm going to put zero in the first three places, Top, Right, Bottom, but this is too tight right here. Again, I'm trying to create some breathing room so on the Left.
I'm going to put in 20 pixels to move that over just slightly. Wow! That looks great. I'm really happy with that. Lots of breathing room and a good background. Now I've made a fixed width and height background. If I had more content just to show you, this would fall out. So if I hit Return, Return, Return notice that my box is not expanding back here. That's because I have a fixed width graphic image in here. I'm going to show you later in this tutorial how to do this with an expanding graphic, but I just want to show you that was made exactly for what the content I was going to put in here.
Again, I'm going to do a File > Save All, and since I've made so many changes both with the divs and the with styles, it's a good idea to go out to the browser one more time and preview this. As you can see it's working really great. I've got the space and breathing room that I need on the left and right. The style of the h4 looks it like it's part of the whole style of the whole webpage and of the resume. And I'm now able to call out in a special way my special skills and how to contact me, which are ultimately two the most important things that you want to do in a resume is make sure that people can contact you and see what your special skills are.
I'll close out of Firefox and then we'll go back and do some more styling.
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.