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.
When we made changes to how the headings were presented, we used the Margin property to control the top margin. We set it to 1.5 em for each heading on the page. We also set all the other margins and padding to 0. Let's go look at this back in the browser and see what's going on here. Now when you look at the resulting page in the browser, you might expect all the text underneath the headings to appear butted up against the bottoms of the headings, but this is not the case. This is because each browser has its own internal style sheet that it uses, if there is no style sheet applied to the document.
So if I go up to CSS and say Disable Styles > Browser Default Styles, then you get what I just explained. Everything is butted up to each other. But in order for this to appear, you have to override all the default browser stylings. So let's disable that again and go back to way we have it. So as you can see, we've been increasing and increasing the vertical spacing, and we want to go back in with our paragraph tag, and try to decrease some of that. There are default values in every browser for things like margin, padding, font faces, sizes, colors, even paragraphs list items, all the things that we've been styling and formatting all along.
The default values vary from browser to browser. So you need to set explicit styles if you want to have your page appear identical in every browser or on every platform. It is a good idea to get into the habit of setting both the padding and the margin. As sometimes one browser will use margin, and another browser will use padding in their internal style sheets to control the white space. This is particularly true when it comes to how browsers create their indents for lists. If you want to see more about this or learn more about this, go see Jeffrey Zeldman's website, A List Apart, and look at his article called Taming Lists.
So let's go ahead and style the p tag. We'll click over here on New CSS Rule in the CSS Style panel, choose Tag, and there we have our p styled into the right style sheet and click OK. So I guess you are getting into the rhythm of this. The first thing we want to go style is the Box, because that's where the padding and margin is. We'll deselect Same for All, and our Top margin is going to be 0.35 em.
Remember we are continuing to use the relational or proportional measurement system, and we're going to zero out and override what the default browser style sheets are by putting zero in for the rest of them. So that increased or decreased some of that white space, and then the next thing we'll do is also do the same in Padding. In Padding, we're going to get or override all of that default white space by putting zero there and click Apply. Then finally, we're going to go into Type and actually add Line-height or what if you were in the print industry we would call leading.
So essentially, our font right now is about 1 em and we're going to put in here 1.5 em and this will change our line spacing. I'll go ahead and Apply. Now that added a little vertical space, but we also tightened up a little vertical space. It's a game. You have to kind of go back and forth. It's like pickling when you're trying to chase bases in baseball. So let's click OK. Take a look at this. Looking pretty good down here, look through the whole site, then go up to File > Save All, check it one more time in the browser, and remember it's a process where you're always changing one thing and then looking that change in relationship to the other elements that are on the page.
Remember, the web page is kind of a living thing. It's not like print. It's not static. It's not going to be the same. It's going to change depending on the user, the monitor, the operating system, and browser, and we're trying to get a consistent look and feel throughout our web page that makes it easy to read the information and to scan the site. I'm going to close Firefox and return back into Dreamweaver and I just think a few more little finishing touches and we'll have this document almost styled and ready to go.
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.