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.
Now to style the content area so it's right margin makes room for the sidebar and keeps the text from wrapping around the floating column, Let's click our I-beam into the content area. Then over in the CSS Styles panel click on New CSS Rule. Dreamweaver kind of goes overboard in choosing the Selector Name. All we want to style is just the content area. We are not interested in styling the wrapper or the h2. So go ahead and delete those two parts, then click OK. Then let's choose the Box category, and first thing that we are going to do is come in here and start working with the Margins.
So let's deselect Same for All. The Top margin is going to be 15, and if I hit Apply you'll see that, drop it down just a little bit. But the important thing is this Right margin. The Right margin, I'm going to move my Style dialog box over so you can see this dramatic effect, is going to be 250. Now how did I know the number was 250 pixels? I did my layout in Fireworks using those pixel rulers. When I hit Apply, watch what happens. There we go, now we have our two boxes side by side, and we actually even have created a gutter because in the floating box for sidebar we've put a little bit of margin here that pushes it away.
For the Bottom we just need it to be 0, and the Left we are going to leave at 0, and then go ahead and click Apply. We do have some problems over here with that left negative indent. So in Padding we can change that and make that work out okay. At the Top we'll use 0, at the Right we'll use 10, which will push it away from the right edge of the sidebar. At the Bottom we'll put 0, and at the Left we'll put 50, a slightly larger padding area because we want to push that negative indent in.
Go ahead and click Apply. And you can do this interesting thing in Dreamweaver, which is to move a dialog box around, which is great, so you can see what you're doing. That looks good. We have got it lined up across the top here. We have got nice spacing so the text is not butting up against the edge of the box. We've created a gutter and it looks good. So go ahead and click OK. At this point, we've really achieved what we wanted to do which is to create a two column fixed layout. In this example, we are not using relational measurements. We are actually using pixel measurements, so this won't change. Let me show you.
Let's go ahead and do a File > Save All, and let's preview this in the browser. When you're using div boxes, frequently go out and check in the browsers. Different browsers render div tags differently, especially some of the older browsers. So as you can see, this is a fixed-width layout, if I change the size of my viewport window, nothing about this is going to change. It's like having a static piece of paper inside the viewport. And this is what we mean by fixed width or absolute values.
I am going to close out of Firefox. As I look at my page now, I see I have some work to do in the header area, and probably some cleanup work here and there around there, but I'm getting close to what I want to achieve.
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.