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.
Before we go on and create the clear float, I want to make sure that these images don't move around and that they stay put and that the browser style sheets don't override anything we are doing with these images. So, I'm going to create a couple styles for both the Image tag and I'm also going to create two classes, Image Top and Image Bottom. So let's start out by doing that. Over in the CSS Style panel, click on New CSS Style. And this is going to be a tag and it's the Image tag. Now, if you were using more than one image in this online resume you might want to do this by using an ID for your image, because you wouldn't maybe want this style to be applied to all the images inside this webpage, but since I only have one kind of image, I'm going to apply this to my image style.
In the Box category, I'm going to make the Margin and Padding 0. That's zeroing it out again. And in the Width I want to make it 780 and the Box Height 20. I don't want it to be able to move around at all. Again, you may be asking where am I getting these numbers? The graphic itself is 780 pixels wide and it's 20 pixels tall. The width was determined by the width of the wrapper. If I click Apply, you really won't see any changes inside of Dreamweaver. But I'm doing this mostly to control what the browser style sheets might do.
Then I'm going to create two classes. So, I'll go back to the CSS Style panel, click on New CSS Rule and this first class is going to be for the Image Top. I'm going to type imgTOP. And because I have set class, watch as I click OK. That will appear with the period, and remember the period means that this is a class. Again, I'll select the Box category, and I want the webpage now to move away from the top of the viewport of the browser.
So in Margin, I'm going to put 25 pixels and click Apply. Nothing happens. Why does nothing happen? Because this is a class and we have not applied the class to this image yet. We are just going to create both classes first and then I'll apply those classes to those images. Let's create the second class. Come over to the CSS Styles panel. Click on New CSS Rule. Again, we're going to create a class and this one is going to be called image img, bottom Bot. I like to keep my names very short, very meaningful, because misspelling can be the rue of a web designer.
Choose the Box category in the CSS Rule Definition dialog box. I want to work on the margin for the imgBot. I'm going to deselect Same for All. I want the Top to be 0, Right and Left should be 0, but the Bottom I want it to be 50 to move it away from the bottom of the viewport window of the browser. And then for Padding I'm going to choose Same for All. Again, if I click Apply you'll see no update because I haven't applied the class to any tags yet, so I'll click OK. So, if I come up to the top, and select the image and I go down to my Properties Inspector, over here in the class box in the drop-down menu, I'll see image top and that moves the page down 25 pixels.
Let me scroll down to the bottom and click on the image at the bottom and again choose Class > imgBot and that moves us away from the bottom. Let's go ahead and do a File > Save All and make sure that moving the page away from the top and bottom of the viewport works in Firefox. Yeah. That looks good. Again, we're looking for space, breathing room, vertical spacing. Giving an overall look and feel, so that it feels uncrowded by using negative and positive space, but not too spacey, looking like we don't know what we were doing.
So, we still have this mistake down here where the flow isn't working right and we're going to create a clear float to solve that problem. I'm going to close out of Firefox and get ready to work on my clear float.
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.