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.
At this point, let's take a moment to look at a drawing, or wireframe, of the layout that we're trying to create. The div tags, or boxes, give you an idea of what we are trying to achieve. In this layout, we want the name on the resume to have its own box, or div, or division called the 'header.' We also want to create two columns: a column or div on the left with the main content of the resume called 'content,' and a column on the right with additional skills called 'sidebar.' We are going to achieve this effect using the float property and in order to use the float, one div moves up in the flow of the document and one needs a margin to allow the other div to float up.
Back in Dreamweaver, let's start by creating our first div area, which is for the header. Let's go into Split view so you can see what's going on in both Code view and in Design view. If I select Takashi Ito, the name of the person on the resume, and this is where I want to put my header box, notice that in Design view it selects the text but in Code view I do not get the opening and closing tag for h1 selected. I want to make sure that my div box, or header box, goes completely around all of this content, including the tags.
So I'm going to go in Code view and select both the closing and opening tag for h1, then come up to your Insert bar and locate in the Common area, the Insert Div Tag button, click on it. The Insert Div Tag dialog box opens, Dreamweaver has already made a guess that you have a selection and that you want to wrap the div tags around the selection, and that's correct. Now, don't get confused here by Class or ID. Remember a Class is a style you can use many, many times, but we use IDs only once per page.
And layout, or div boxes, is a perfect example of something that you would only use once per page. We're going to give it a meaningful name, and in this case that name would be header. Then click OK. In the Design view, you can see that in fact we have now done that and, because of that negative indent, it's still hanging out over this. So we have successfully created a div box by the name of 'header.' We can also see, down in the Tag Inspector, that we have succeeded in putting the h1 tag inside of this header, or division box.
It's nested inside and it's showing that in the lineup right here. You have to think of this as sort of like that story of there was an old woman who lived in a shoe. So h1 lives inside of the header, which lives inside of the wrapper, which lives inside of the body. This is a good way to remember to read from right to left to understand how your tags are nested in the cascade. The next thing we want to do is we're going to be creating a lot of divs for content areas and for areas of our web page. So we want to make sure that we identify where the closing tags are.
I'm going to insert my I-beam just before the close tag for the header div. Then I'll come over to the Code toolbar, select Apply Comment, and then choose Apply HTML Comment. Where the blinking I-beam is I'm going to type 'close header.' This will keep my div tags' opening and closing very organized and make it easy for me to see what's going on in this page as I begin to add more and more div tags. Go ahead and click on Refresh, and as you can see, this comment doesn't change anything in Design view.
It's just a notation for the web designer or developer to understand how they were thinking as they were laying out their page. The last thing we want to do is come up to File > Save All. Now we're ready to start creating our two column look.
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.