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 to style the header area and the h1 tag, we are going to create two styles. One style will be for the div by the name of 'header,' and the other one will be for the h1 tag inside the header. So let's start by creating the header one first. I'll put my I-beam inside the name Takashi Ito. This will focus Dreamweaver on that div area. Then I'll come over to my CSS Styles panel, and select New CSS Rule. Again, Dreamweaver is kind of an overachiever.
It puts too much stuff in here. All I want to style is simply the div by the name of 'header.' So I'll delete everything else, I should say #header, select OK. When the CSS Rule Definition dialog box opens, select Box. I want to override all of the default browser settings. So I'm going to do what we call, zeroing-out from Margin by putting a zero, and a zero for Padding and leaving them both checked Same for All. I'll also want to ensure that this box is exactly the same width as the wrapper.
So I'm going to give it a width of 780. When I click Apply, watch this line right here. This will slightly change the size of this box. You can see that the top of the box now goes to the top of the page. The last thing I want to do inside the header tag is to create a background image. So I'm going to the Background image area and select Browse. The graphic I'm looking for is the background dot and you won't see it. It's very, very tiny but when we repeat it, you will. Select OK, and then choose Repeat and then click on Apply.
So now we've got that nice subtle graphic background for the name Takashi Ito. All we have left to do now is to style the h1 tag. Now you might possibly, in other web pages, have more than one h1. In this webpage, I only use each h1 one time. But if I only want to style just this particular h1, I can do that by creating a compound selector that truly addresses just this h1 inside this div box called 'header.' So I'm going to leave my I-beam right there, return to the CSS Styles panel and click on the New CSS Rule.
This time I'm just going to delete div by the name of 'wrapper.' By creating this kind of selection I'm saying, "Only style the h1s inside the header." Any other h1s will keep the same settings or same styles they already have. This makes me have a very specific style in a very specific context. They call these contextual selectors. Click OK. Go to the Box category, and we're going to work on Padding first. So at the Top I'm going to put 15 pixels, then on the Right zero, and at the Bottom I'm going to put 15, and on the Left I'm going to put 50 to move that negative indent away from the left edge and then click on Apply.
That looks really good. And then the last thing I'm going to do, because I'm being very careful as I create my styles this time, is to zero out the margins to override any default browser styles. So now that header looks very professional and really cool. Let's click OK. Let's do a File > Save All, and check it in the browser. So this website is really coming along. It has a very nice pro look. Looking great. And showing off some of our skills as a web designer as well as showing off our skills as professional.
I'm going to close out of Firefox, and go back in, and then we'll continue to work on designing the sidebar.
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.