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.
This document is starting to look finished. A couple of details will complete the look. At the bottom of the resume is a list of jobs with corresponding dates of employment. The dates are important, but detract from the more important job descriptions. Because they're the same size, they have equal weight. It would be nice to flag these short paragraphs in the document and tell the browser to display them at a smaller size and perhaps in a more subdued color. Decreasing the vertical whitespace would also be nice, so to do that we're going to create a custom class.
A custom class always begins with a period and a custom class can be used as many times as needed in one HTML document. It's sort of like a Band-Aid style that you can put anywhere you need it in the page as many times as you want. Classes when combined with an HTML tag are called advanced selectors. There's also another kind of advanced selector called IDs, and IDs can only be used once per page, and start with a hatch mark symbol. They can also be combined with a tag.
But for this particular project, all we need to do is create a class, because we have more than one date, so we want something we can use more than one time, and that would be a class. So we're going to go over to our CSS Styles panel, click on the New CSS Rule, and make sure that we have Class selected. We don't have to write the period. Dreamweaver will automatically put that in there for us, and we're going to type date and then click OK.
And as you can see, if you look over here in the CSS Style, you can see that it says .date, which indicates that it's a class. In the Type area, we want to type in and give it a new color. The color we want is 999, which is a medium light gray. So let's pick that medium light gray, 999. And if we had applied, we're not going to see it because we haven't attached the class to any of the different tags or formatting that we have in our HTML document. We are going to make the font size 0.8em, which is slightly smaller than all the other fonts that we have, less than one.
And we're going to make the Line-height 1em. Again, if I click Apply, we can't see this because we haven't applied this class to any item on our page. So I click OK and now I'm going to show you how to apply a class throughout your page. I said I would like to make the dates slightly smaller and less powerful in the document, so I select the area that I want to apply the class to, go down to my Property Inspector and where it says Class, there is a drop-down menu. If I've created a class, it will appear in this menu and as you can see there's date.
This is really fun. You can just race through your site, selecting all those dates, click on that style down at the bottom, and you can add them quickly. But before I leave here, I don't want you to think that just magic happens all the time in Dreamweaver. It's writing correct code for you, so I'm going to go to Split view. So if we want to look at this particular one, right here, the very first one we did, notice that after the p tag opens, but before it closes right here, we've added the attribute of class and we've said, insert or attach the date class.
That gives it that style. So this is an easy way to put a style on a number of items throughout your page and use it over and over again. Remember a class is indicated by the period and can be used more than once on a webpage. Let's click on Design view. Let's do a File > Save All and preview it in the browser. Scroll down to the bottom to look at that and we've done a good job now of making this have presence.
But making this way more important, the job description, letting people know what we've done on the job and what kind of skill sets and what kind of achievements we have. This is a really important way to differentiate things from one to another. I'm going to close Firefox, go back into Dreamweaver, and check to see if there are few more areas where we can work. And in fact, there is. We could work on this date as well.
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.