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.
External style sheets are an easy way to manage your Dreamweaver and your HTML documents. Now I know you can create styles inside our in-line in the head of the document, but it's much, much easier to manage your site and to manage your HTML with an external style sheet, and you can also swap, replace and change that external style sheet without ever going into your original HTML document and changing the structure or the code in any way. This makes it very, very useful and easy to update, and it makes it easy to change later on if you change your mind.
So I'm going to show you how to create an external style sheet. We start by actually creating a new document. So we'll go up to File > New, which is Ctrl+N or Command+N, and this time instead of selecting HTML we'll select CSS. Notice there are no layout choices. A Cascading Style Sheet or a style sheet is just a set of instructions about the attributes or the way you want something to look inside of your HTML document.
So you won't get a layout at all. Let's click on Create and as you can see it's just an empty page. Now we want to save this into our CSS folder. So again, we'll go up to File > Save. We want to give it a meaningful name, but we also want to make sure that we save it into our CSS folder. We want all our CSS to be in the same folder. So I'm going to click right up here, go back out into my main folder, look for my css folder, double-click on that.
I have an example CSS and therefore one of the extra samples that I already put in there, but we're getting ready to create our first CSS for ourselves and we're going to call this online _resume_lb.css and click Save. Now, I know this is your first time to make one. So I think it's really worthwhile to go over to your File panel and look down in your CSS file folder to make sure that it is in fact appearing there.
Yes. It is. Now that's just part one of creating an external style sheet. The second part of creating an external style sheet is to link it to your HTML document and a lot of people make the mistake of thinking you can link it from the CSS document, but that's not the way it works. We need to focus or re-click back onto the HTML document, and link that CSS to this HTML document. It doesn't work the other way around. Remember, link your CSS to your HTML document.
If I click over here in my CSS Styles panel on the right on All, you'll see that currently there are no styles defined either in the head or externally. But if I move down to the bottom of this panel, you'll see there is a link and that's the hint to attach a style sheet, so I'm going to click on that link. Now, we can go browse out toward the CSS that we just created. So I'm going to click on the Browse button, find my css folder, find the CSS style sheet that we just named, online_ resume_lb, and it appear inside there.
I want to link it and the media type that I want is screen. I want it to show up on a computer screen. Notice there are lots of different kinds, but we're just going to focus on making this look good in the browser window on a monitor. I'm going to go ahead and click OK. If I hit Preview right now, we wouldn't see anything because I haven't created any styles. So there is no point in clicking on that button right now. But if you had a style sheet that you already created and wanted to use again, you could see how it looks at this point.
So I'll click OK. To make sure that we've done this right, how do I know that in fact I just linked it, let's again go into Split view. If you look at the top of your document in the head area which is where all the instructions about how your website should be seen by the browser, you'll will see there is a link tag right here. This link tag gives another href. This href attribute is directly referring to the CSS style sheet that we just created. It's inside the CSS folder and it's called online_resume_lb.css.
It also gives a couple other pieces of information, that it is a style sheet and that this done in text and we did select that it would be for screen only. Another hint to let you know that you've actually linked it besides looking into the Code view is to now look back over in the CSS Styles panel. If we click over here now, you can now see that in the CSS panel it says we have a linked CSS style sheet called online_resume_lb and it setup for the media type screen. So now that we've created an external style sheet and linked it to our HTML document, we're ready to start creating styles and give this a great typographic look, feel and layout.
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.