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.
The goal of a resume is to present the prospective employee to the employer in the best possible light. It needs to be readable, highlighting the person's achievements, without being too distracting. Let's go out for a moment and look at this website currently, or our online_resume in the browser. I've got to save my changes before I go out, and one of the things you will notice, as I changed the viewport size, the width of the text is changing constantly, and sometimes it's getting very, very wide.
If I make the browser as wide as my screen right now, you'll see that it gets almost impossible to read that. Your eye would have a hard time following all the way across. And if the user opens up their window like this, this could get ridiculous as well, because this will take forever to read this webpage, because it goes and scrolls on for ever and ever. This is quite a problem, but we can take care of this problem by going back and styling our body tag. So let me return to Dreamweaver and close out of Firefox. We can use CSS to control the width of the text, making it more readable, an important consideration for our resume.
We are going to start by modifying the presentation of the body tag. Lots of people ask me where should I start when I start styling, and one of the things you can think about is working from the outside in. If the HTML tag is the outside tag and you are working on the page or the body of the page, you can go to the body and then keep working inward on your page. So we are going to start with the look and feel of the page first, which would be all residing in the body tag. The body tag is usually styled for sort of a general or universal or overall look of the page.
I'm just going to click my I-beam anywhere in the document and then I'm going to go over to the CSS Styles panel and click on the Plus button at the bottom of the CSS Styles panel. This will create a new CSS rule. You'll get a kind of a scary dialog box, but you are going to get used to it as we do this tutorial. We are creating a new CSS rule, and we are applying it to the body tag. So when we are looking for our Selector Type, we are going to click on the drop-down menu, and make sure that we choose Tag, because body is an HTML tag.
Now currently our I-beam is residing in an unordered list. So it prompts us with an unordered list, but if I click on the drop-down menu, you'll see that all of the tags show up that we have available in HTML. And we are looking for the body tag, which is in alphabetical order, and we can click on body and choose that tag. The last thing we want to do is make sure that we are styling it in the correct location. We want it to be styled and saved into our external style sheet, which is appearing at the bottom. Since we already had selected that we want to link to a style sheet, Dreamweaver has automatically set it up to be this way.
But be sure and check the first time you are creating your styles. Sometimes you can accidentally put them into the head of the document and then it will just appear as a style or an inline style. Now I'm going to click OK. Again, a rather overwhelming dialog box pops open. It's called the CSS Rule Definition dialog box, but it indicates to you that the current thing to your styling is the body and it tells you in which document you're styling this. What we want to work on right off the bat is the look and feel of the page and the page is sort of the box.
So Box is one of the most frequently used categories when you're doing styles, because it creates sort of the layout of the page. So think of them as large boxes. Now I know that Block and Box may seem confusing, but Block usually refers to blocks of type. The way type is clustered in lines or multiple lines, and think of Box is being layout areas, or big areas of a webpage. So we are going to click on Box. And in the Box, we are going to go over to our Margins, and start playing around with some of our margins that we can do.
Now I'm going to make this a proportional margin, meaning I'm not going to put in absolute measurements like you are used to doing in InDesign or other layout programs. I'm going to deselect Same for All and for the Margin Left, I'm going to type in 7 and in the drop-down I'm going to select %. This means 7% of whatever the viewport window is open. So if the user has the window open very large that 7% would be larger.
If the user has the window open small that 7% would be smaller, but it will be still the right proportions of whatever is open in the viewport. I'll show it to you in just a sec after we do this. Then in a Padding Left I'm going to deselect Same for All, and I'm going to put up 5%. Now a little bit about padding and margins before we go forward. Margin is always going to be outside of the box and padding is like working for FedEx and packing something around something.
Padding will always be inside the box and push away from the box. So if I add padding it moves it this way, and if I add margins it moves it to the left. I'm going to click Apply to show you. So now what we're seeing here is not only the 7%, but also the 5% padding, and when we preview this in the browser you'll see this very accurately. The last thing I want to do is create a width, but again I want it to be proportional and I'm using percentages. So I'm going to type 80.
So I want the width of my page or my resume to be 80% of whatever the browser viewport width is. This means that no matter what size the user chooses for the viewport, it's going to look proportionally the same. And this makes it a very adaptable website for all kinds of users on all kinds of machines, in all kinds of browsers. If I click Apply and move my dialog box, you can now see that it's not scrolling clear across at all.
I'm going to click OK and I'm going to go ahead and Save All. And as soon as you add a style sheet, really the only way to save both the HTML and CSS is to choose File > and then choose Save All. Otherwise you're only saving one document or the other. So that's an important thing to remember when you want to save all the documents, choose File > Save All. Now I'll click on the Preview in Browser button, go out to Firefox, and there we go. Now how can I show you? I'm going to make this smaller and notice, because I'm doing the percentages, I still have 7% Margin, 5% Padding, and I still have 8% of the browser width.
So no matter what size I open this up to it proportionately looks the same and has the same look and feel. I want to show you, by using the Web Developer toolbar, a couple other things. If I click on Outline and choose to Outline the Current Element and then I roll over the body tag, it's a little tricky, but now you can see by looking in the Web Developer text bar at the top, that I'm over the body tag. You can now see the 7% margin and the 5% of the padding.
The padding is on the inside of the box, and the 7% is on the outside of the box. And this a great way to go in to Web Developer, choose that Outline, a block level element or a box element, and see where the margins are, and where the padding is. This has saved me time and time again when I'm designing, so that I can understand. In fact, as I roll over every single part of this resume, you'll see that actually every single thing is a box, and every bit of this website has margins and padding. These are all affected by the browser and its own style sheet that it comes with, but we are overwriting those styles of the default browser by creating our own styles.
So again, if I roll over the body tag, you can see the margin on the outside and the padding on the inside. An invaluable tool when you're checking your website. So let's close out of Firefox and let's return back into Dreamweaver. So I would like to style a few more things in the body tag, but I have it looking page-like now in the browser, and that's really important. And I have it looking proportionately the same, no matter what size browser viewport the user chooses, which is a real achievement. So if I want to continue to edit the body tag, I simply double-click on body, and again the CSS Rule Definition dialog box opens.
This time I want to work on the Category of Type. I want to work on the fonts. Now I know that black on white is a good contrast and a good typographic principle. But because of the nature of the screen being light using a slightly dark gray is actually a little bit easier on the eye when you're reading a lot online. So I'm going to go over to the Color and click on the drop-down chip here and choose the dark gray, which is #333. Now you can't get rid of the hatch mark.
The hatch mark is a way in code of saying 'by the name of.' And this is an example of that shorthand that I talked to you about. This hexadecimal color is really #333333. But by using the shorthand method wherever we duplicate number we can just show the number three once. So if I click Apply, you'll now see that it turns to a dark gray and it's a little softer and a little easier on the eye to read, because we are looking at light when we look at the screen. The other thing I would like to do is create sort of my own font list.
Now I've talked before about fonts, but fonts have to be on the user's machine, or they can't be seen. So what web designers do is create what we call font stacks, or list of fonts. And we want them to go from the first to second to the third until finally the last might be Sans-serif or Serif, meaning whatever you've got like that, put it onto my screen. But we try to indicate what we want as a preference to begin with. Dreamweaver CS4 ships with a lot of font stacks as you can see. And the one that we would like to use right now is Trebuchet, Arial, Verdana, Lucida, Helvetica, and as you can see it doesn't exist in this current list.
So how can I make my own font stack list? I just click on the Edit Font List and I come down here and start working on that. So the first font I want is Arial and I can type in here Arial and it goes to that section in my Available Fonts that are currently installed on my computer. I click on Arial and then add it to my Chosen font list. If they don't have Arial, my second choice would be to use Verdana. So now you see I'm going through my list of choices.
So I'm going to type in Verdana. Verdana starts to show up. You can just simply type a V and it will pop right up. Click on Verdana. Add that to my font list. The next one is Lucida. So I'll come in here type Lucida and you can see there is a lot of different Lucidas available. But I just want Lucida itself. I don't want all of these different ones and I can check to see if there is one like that. There really isn't. I can try a couple other things.
On Windows this might be Lucida Bright and on Mac this might be Lucida MS. It doesn't really matter but you can also just put a generic name if you want, but I'm going to go ahead and add Lucida Bright. And then Helvetica, a font I know a lot people have installed. And a lot of the Microsoft Word fonts will be installed right here as well, because many, many people on Mac and Windows have Microsoft products, which would install those. And then the last one I want is if they don't really have any of these, I have no idea what they have, I'm going to give myself a backup, which is sans-serif.
So I find my sans-serif font, click on it and add it to the list. So here is my first choice, here is my drop-dead bottom choice, and all of my choices in between, ones that work both on Mac and both on Windows. I want to make sure that my list is strong, so that if it has to default to the next one, it can. Now this means I can't guarantee what font anyone is going to see my website in, but have a pretty good chance of knowing that Arial and Verdana are installed on all machines on both platforms. So I'm going to click OK. Now when I go to my Font-family that customized list that I just created shows up at the bottom of the list and I can select that.
And if I go ahead and apply, there you go. There is my new customized list and as you can see Arial is displaying everywhere. The next category I want to go to is Background. I want to make sure that this displays on a white background. So I'm going to choose Background- color white and just put my eyedropper into the chip color. Again, this is an example of the shorthand and then I'm going to click OK and go ahead and do File > Save All.
Now if we go out to the website and preview in the Browser it has all of these properties and it has a nice 80% width, no matter what size I'm in, and it's looking really good. Now there is one problem. Let's check out what this problem is. If I start making it bookmark shaped, what's happening here? This is getting too small. So another thing we would want to do here is create a minimum width. We don't want it to get smaller than a certain width because we know that's too hard to read too.
So how can we do that? Let's close up our browser window, go back in here and change our body one more time. Now there are lots of different places to change your styles. You can change them in your style sheet. You can change them as you saw in the dialog box. But we can also click on the body style, click on Current and come down here and add a property, and the property that I want to add is called Minimum Width. So I'm going to type min and then do width, then tab to the next one and the minimum width is going to be 700 pixels.
If the browser viewport is less than 700 pixels I don't want it to collapse. So I'm going to go ahead and do another, File > Save All, and I'm going to go out to the Preview in Browser button and choose Firefox. And again, I'm going to see if that's going to collapse. Now I can prove to you it's not collapsing and it won't collapse after 700. If I choose Resize in my Web Developer toolbar and choose Display Window Size In Title, you'll see that at 700 pixels, just check up here in the toolbar, it will not collapse.
So I'm going down and resizing and as you can see I'm now less than 700 pixels and it's not collapsing. So I have created a minimum width and a maximum width of 80%. I have got a very flexible design that looks good in all browsers and is readable, no matter what the user does with their viewport window. I'm going to deselect and go back into Dreamweaver and I'm feeling very good that I have bossed those styles around, created a page-like effect in an HTML document.
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.