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.
Now, we'll create a box, or a div tag, around the content. A div tag means division. By giving the div tag an ID attribute, or a name that is used only once per page, we can define an area or a layout box. This div tag, or box, will create the layout of the page. To create the div tag in Design view, select everything using the Ctrl+A or Command+A command, then select Split view. Notice how we got everything on the page, except for the body and the body close tag, and the HTML tag.
This is exactly what we want to do. Now we want to enclose, or encapsulate, all this content into a div tag. By going up to our Common menu and choosing the button that says Insert Div Tag, which is between the Table button and the Image button, we get an Insert Div Tag dialog box that says 'Wrap around this selection,' which is exactly what we want to do. We want to put the opening and closing tag around this selection. We're using an ID name because we are only going to do this once for this page.
We're going to call this ID name, wrapper. So make sure you don't use class but you choose wrapper. Wrapper is kind of a generic name that a lot of web designers and web professionals use, to talk about wrapping the content and then styling that wrapper. I like to think of it as sort of like Saran Wrap or wrapping paper. Then go ahead and click OK. As soon as you return back to your page, you'll see that there is a dashed black line that if you hover over, it turns red. Whenever you've created a div with an ID name, Dreamweaver has a visual aid to show this for you. And if you look down in your Tag inspector now, you'll now see that there is a new tag appearing that says div by the name of wrapper.
Let's take a look up here in the Code view. There you see it. Now, the problem with the div tags is that we're going to start making a lot of these and sometimes they get nested and it's difficult to tell which is the close tag for which div tag. So every time I create a div tag, I immediately scroll down to the bottom and find the close tag for that div. In this case, I know that it's right before the close tag of the body. I am going to insert my I-beam right here before the close tag of that div. Then I'm going over to the Code toolbar and choosing Apply Comment.
When I click on that button, I'm going to then choose Apply HTML Comment, and right here, to give myself a note, I'm going to write 'close wrapper.' This is very important to do and it will keep your files very organized, so that you can select things easily, in Code view, and know that you've got both the opening and closing tag, if you need to delete things, add things, or nest things. I put the note, or comment, to myself before the div tag, because this way if I decide to delete this div, all I have to do is select both the opening and closing and it will also delete the comment at the same time.
If I refresh my screen right now, you'll see that it makes no change at all in the Design view. These grayed out areas of comments are just for the designer or developer to give notes on how they're structuring their web page. Now when I return to Design view and do a File > Save All, the negative margin that I talked about is showing up again. You're seeing that because of the negative indent that we created in our style sheet, the P is hanging to the left of this div tag. As we start styling this div tag, we'll add margins and padding and make this look like a page.
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.