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.
Takashi Ito's resume looks very professional and the typography works both as information and as a graphic element. The text is legible. The negative and positive spaces seem balanced and well proportioned, and the user could easily print this page. But we are going to explore how to make the resume look more like a centered page with the background tile, added in CSS, to make the resume really stand out but retain its original objective of capturing your professional skills and experiences using typographic styles and elements. In addition, we'll add a print style sheet to get just what we want if the user prints the resume from the browser.
If you don't already have your Dreamweaver application open be sure and go ahead and open it. Let's take a look at our Files panel in the bottom right hand corner. Currently we're in online_resumelb. html or, in your case, it might be online_resumeinitials.html. So what I want to show you now is how to save out different versions of your HTML document as well as different versions of CSS so that you can create different versions of your webpage. So let's go up to File > Save As. Make sure you're in your root folder. And we are going to name this 'onlineresume_,' and insert our I-beam right there and do 'v2_.' This will indicate to us that this is version 2 of our online resume.
Now, as you can see, we have version 2, but if we look in the Code View, you'll see that we still have our original CSS style sheet and we want to be able to change the style sheet without changing the first version. So we also need to create a copy of our CSS style sheet. I'll go back to Design View. So I'm going to go ahead and open up the CSS style sheet for our online resume version 1. Now I have my online resume for the version 1 open and I'm going to go ahead and save it as version 2.
File > Save As. Come down to online_resume, again put I-beam right here before my initials, type 'v2_lb.' And do a Save. Now if you check in the CSS folder, you'll see, if you click on the Update Files button, you'll see that now I have two versions of the CSS file. They're both the same right now, but as I continue on version 2 is going to change and I want version 2, this CSS to be connected to my version 2 HTML.
So I'm going to close my version 1 HTML and I'm going to close my version 1 CSS so that I only have the version 2 and version 2 CSS. Let's go back into the HTML because we know in order to attach a CSS, we have to be inside of our HTML document. If I go into Code View and look at the link line for my style sheet, you can see that I have the first version of the CSS style sheet here. All I need to do is put my I-beam in here, look up at the name that I have up here at the top, and type 'v2_.' Now it's important that this name right here looks exactly like the name of the one I just saved.
If they're not the same, this won't link correctly. Now I'll click on Refresh. And if I go into Design View, even though I've changed the name of the CSS, it should look exactly identical to the version 1. It does. By doing this, it allows me to keep version 1 exactly like it is and move forward with what I already have and try experimenting and doing other things. So in this part two section, we're going to make it more page-like and put some background tiling into it.
Last thing you need to do is go ahead and do a File > Save All. We'll also need to change a few things in the style sheet, but we're almost ready to get going.
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.