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.
Before we start styling the sidebar and actually creating the two column layout using the float, we need to go back and make a few changes in our wrapper styles. So I'm going to over to my CSS style sheet and double-click on wrapper. Go ahead and select our favorite Category, Box and we are going to change the Width for this layout to 780. Again, I figured out all these measurements doing my wireframe inside of Fireworks. Then down in Margin area we want it to be 0 at the Top and 0 at the Bottom, and go ahead and click Apply so you can see that that.
And then for Padding we want it to be Same for All but 0, and again click Apply. We are trying to make the wrapper be exactly what I said, just wrap tightly like Saran Wrap, around our two column fixed-width layout. Now looking at it, it's pretty ugly and it's not exactly what we want. But sometimes you have to go through a little ugliness to get to what you need to do. So don't despair. With some more styling everything is going to be okay. At this point I'm going to go ahead and do File > Save All. The next div, or container, will be the sidebar and it's literally going to float up and to the right in the flow of the document.
And then the rest of the content area, that div, will wrap around this div. We are also going to insert a background graphic, a rounded gray rectangle with a fixed size. So let's click our I-beam into the words, 'Content for "sidebar" Goes Here.' Click on the plus button in the CSS Styles panel, and because we put our I-beam into that div area, Dreamweaver makes a guess for us. Now we only need to style sidebar. This is a very detailed way of doing our selectors, but we don't need to do the wrapper and the sidebar, just the sidebar.
So I'm going to delete the #wrapper. Make sure you're saving it into your v3 CSS, and then click OK. Let's go to the Background category first. In the Background category I want to put an image, I've created a rounded rectangle image. So I'm going to click on Browse, and go out to my root folder, and find my Images folder, and I have something called gray_rnd_rect.
Go ahead and select this and then select OK. And then click Apply. Notice what's happening right now. That rounded rectangle, first of all is not showing completely, because we don't have any space or depth in our box. And secondly, it's repeating as a pattern, but we don't want it to be a repeat. So this time, unlike the background tiles, we do not want a repeat. We want this image to show only once. So we'll use no-repeat as our style. Go ahead and click Apply. So we took care of that problem, but we still don't see the whole rounded rectangle showing up here.
In order to do that, we need to go in for our Box area and define what our Box is going to be like, its dimensions, and how we want it to display. So we want it to have a fixed width, and I'm going to give it 215. And you may be asking, well, where did this number 215 come from? That is the actual width of the graphic that I've inserted in the graphic background. So that helps a little bit, but it still doesn't show the entire box. And I know the height of this graphic is 315. So I'm going to give this box a Height of 315, and click Apply.
Now you can see on the left here, I have the entire background image showing, because I've made my box exactly the width and height of the background image. Next, we can't forget to do our Margin and Padding. I'm going to deselect Same for All, and I'm going to give 20 pixels at the Top. Go ahead and click Apply. That pushes the content down. And then 20 pixels on the Right, 0 pixels at the Bottom, and 20 pixels on the Left. So now I have got it moving away from the edges on the right and left, but I still haven't floated it.
Now this is a fantastic thing. Watch. I'll go over to the Float property, and choose Float: right. Go ahead and click Apply, and then let's click OK. Notice what happened, the sidebar floated up and the rest of the content came swooping in around it. If you scroll down, you'll see right now that all the content area is wrapping around that. Now we don't want that content to wrap around that and this is an easy fix by creating a right margin for the content area. We can keep it in two separate columns.
I am going to go ahead and do File > Save All. And this is a good time, because we haven't done it for a while, to go out and check what our web page looks like in the browser. So it's messy, but it's beginning to shape up. The content area for sidebar is not moving up and the content div here is wrapping around everything. We still need to work on our Styles. So let's start styling that content area.
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.