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.
Our online resume is finished and it does look like a professional did it. But we do need to keep talking about the print, and how it will look when we go to the printer. So let's go and look at it in the browser one more time in Firefox. If I click on File > Print Preview, you can see that by making those adjustments to the vertical spacing, and to the line height, we actually have gotten the resume to all fit on one page. That's great. And we could just leave it at that and go from here.
But we'd really like to create a custom print style sheet so that it prints exactly the way we want it. Some of the things that I think are important in printing is that we don't need color for the resume. It could be just black and white. And maybe we don't need this margin dotted line. So we're going to eliminate and change some of these things. But I'm going to show you an easy way to create a print style sheet. Let's close out of Firefox, and go back into Dreamweaver. So make sure that you have your online resume Version 3 CSS open.
I'm going to click on that to bring it forward. And I'm going to choose File > Save As. And I'm going to navigate to my CSS folder and mine already opened up. It knew I was doing CSS. And I'm going to call this one print.CSS and go ahead and save it. So now you see that Version 3 and the print right now are exactly the same style sheets. The next thing I'm going to do is go into my HTML, because this print style sheet is not linked to this HTML document.
So I'm going to go to my last version of the website, go into Code view, go to the top to the header, where all the instructions to the browser are, and look for that Link tag. I'm going to select that Link tag that links my original CSS style sheet, do a Ctrl+C or Command+C, put my I-beam at the end of that closing tag for the link, and then Paste. But this time I'm going to change the Media to print and delete the screen and comma.
And I'm going to delete the comma and print in the topline. So I'm going to have one style sheet for screen and one style sheet for print. There's one other thing I need to do. I need to change the name of the print style sheet to print, and then click Refresh. So now I have two different style sheets attached to the same HTML document. With this done, I can now go into the print CSS style sheet and make the changes I want so that it works just for printing only.
Now there's a very cool feature in Dreamweaver, which I'm going to show you. If I go up to View and scroll all the way down, and it's way down here, to Toolbars, you can have a toolbar opened called Style Rendering. Once I've got my Style Rendering toolbar up here, the first button will show me what it would look like with the screen mode. The second button does print, and as you can see there is a variety of other ones that you can select, but screen and print are probably the two most important ones.
I'm going to go ahead and click on Render Print Media type, and then I'm going to go into Split View. Currently I have my Code View and my Design View, but I want to be showing my print style right here. Once you've got your print style showing here, you can start making changes inside of that. I want to eliminate all the background or background related selectors, because I don't need any images in my print document. So I'm going to go through and look for wherever I've put a background image.
So right here is a background image, and I'm going to go ahead and delete that, and I want to keep moving down, as I look through. Let's see if I have got them anywhere else. There I have one in the header. So I'm going to go ahead and select that and delete that. Because I only want a text document to print in my print CSS style sheet and I also have one in the sidebar, so I'll delete that. Let me quickly scroll down to the bottom and see if I have any other background styles.
So I've eliminated the three background styles that I have and now I'm going to go into Design View. When we look in Design View, you'll see that all the background images have been eliminated by taking them out of the print CSS style sheet. The next thing that I want to do is make sure that everything prints as black and white, or shades of gray. So I want to make sure that I'm not printing color. So I'm going to go back into my Split View and move up to the top, and I know that in my header area I've chosen a color, but now I can let my body color override that, which is the dark gray or a shade of black.
So I'm going to eliminate the purple blue color, and if I click on my Design View, it updates, so that now everything in the site is that color. There's one other place where I have called out the blue and that's in the Decision List. So I'm going to down to Decision List area and that's in the Definition Term, because this is the definition term part of the Decision List, and I'm going to eliminate the color style there. So if I go into Design View, again, you'll see that now it's all black and white.
Now one thing you do see is you see just a little bit of our rounded rectangle, and I don't want that to be showing up and that's in the actual HTML. So there is a way that we can get rid of that and we can do that by using a really interesting tag that doesn't appear in the CSS Style Definition dialog box. So, we need to go back to Split View and let's find our image tag. I'm going down to my image tag and I don't want any images to appear at all.
So I'm going to take all the styles for the image tag and delete them. And right here I'm going to type visibility, and choose Hidden, and then put my semicolon. When I click back into the Design View or hit the Refresh button, you will still see it there. But if I do File > Save All, and go out to my Internet site in Firefox and then choose my File > Print Preview, you'll see that I have no images whatsoever showing up in my printed document, and everything is in black and white, and it will print just fine on a laser printer without using up all kinds of colored laser ink or toner.
This is exactly the way I would want to print my resume showing up on one piece of paper. Now the only other thing that you might want to eliminate is this border, and this border showed up in our content DIV. So let's close this up and close up Firefox and let's go back into our Design View, and remember I'm looking at it in Print Preview mode. If I switch back to the Screen mode, you are going to see the website just as we designed it before. That hasn't changed. We are using two different style sheets now.
So back in print, I'm going to down to the content DIV. I'm going to take that border right and eliminate that. Go ahead and hit Refresh, go back into Design View. Yay! I have got in all Black and White, simple text document, styled well with good typographic principles. Let's go ahead and do a File > Save All, and let's go preview our website and our print style sheet in Firefox.
So this is the way it looks with the screen CSS showing. And if we going into File > Print Preview, this is the way it would look with the print style sheet. So the browser is performing correctly. It realizes that we in fact have two style sheets. It's using the screen style sheet for the monitor, and it's following along with the rules that we've set up in the print style sheet for our printing. Just what we want. Go ahead and click out. You can also see these things in your Web developer toolbar, if you go up to the CSS menu, and you can display by Media, and see it in print by just clicking on this.
And that will give you a preview as well. So there's a lot of different ways using the browser, using the Web Developer toolbar, and using the special toolbar inside of Dreamweaver to preview other kinds of style sheets. Well, we finished our website. It looks like a pro online website to me. We've made it so that anyone can access our information, contact us, download a PDF, or print our webpage directly from the browser. We've done what we've set out to do, create an online resume that looks like a pro.
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.