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.
It's important to make your resume available in a number of different ways. I've talked about how we need to make it available through email, through print, online, but also a PDF is a handy thing to have. And creating a PDF link on your online resume is a great idea. So we are going to do that right now. I'm going to stick my I-beam at the end of the email address, hit my Enter key or Return, and I'm going to type the name of the document that I'm going to attach, which in this case is just a generic name resume.PDF.
Now if you look over here down in my Files area you will see that I have already created a folder called PDF, and when I open up that folder I've already created a dummy resume.pdf. You can tell by the icon that in fact it is a PDF. It's very easy to add PDFs and link them to your documents. It's similar to the way we created URL links in email addresses. So the first thing you do is select the words that you want to attach the link to. Make sure they are selected, then go down into your Property Inspector, and we are going to use this very cool stretchy tool, this Point to File tool, and you're going to click on that tool and drag. Don't let go.
And as you drag across the screen you're going to look for it to make a blue line around the document you want to link to. In this case, the resume.pdf and then let go. Now you can see that the link was created. That says it's in the PDF folder of your root folder and you're looking for the document resume.pdf. So you did it. If I deselect right now you'll see that in fact it shows up like a link. That's how you link to other documents within your root site.
You could also link to other HTML pages in your site this way too. If you wanted to link to a gallery page or a portfolio page, you would just link to portfolio.html or gallery.html. So now you have got all kinds of ways that you can show off your resume online. So I'm going to go into Split View now and see what kind of tag that currently is in that I'm looking at right now and I'm going to go back into Source Code, and when I look at that I see that Dreamweaver inserted a tag around that resume.pdf.
So I'm going to go back into my styles, and change that just a little bit.
Now I can do that over here in my CSS Styles, but we've learned this new
quick way of doing it.
So I'm going to click on my CSS style sheet right here in Split View, deselect
everything, then go locate my tag right here, and I've changed my margin to
tag right here, and I've changed my margin to.25, but I also want to be consistent with my line height. So I'm going to go in here and change that to 1.2, just like I did in my List Items for my unordered list and my Definition List, and then click on Refresh.
So that just tightens it up just a little bit. Let's go back into Design View and to really see this change that we did by linking, we need to preview it in the Browser. So I'll select File > Save All, go out to the button Preview in Browser and choose Firefox. Now when I rollover the email, notice what happens in the bottom left corner of the browser window. It actually shows the code or the link that I have created. That also is true for the URL links.
So this is a cool way for you to see how your links are working, in fact, if they are correct. It's a great way to troubleshoot. When I roll over resume.pdf, you'll see that I actually get a directory route to exactly where that resume is located on the desktop of the computer I'm using currently. If I click on resume.pdf, voila! I now have a PDF that is opening up and I can print this, save this and do all kinds of things. I've simply attached the template that I've given you as a PDF here.
This is not the website that we were working on earlier, just reminding you I have included a template in here that you can use for your project. So to get out of this you just simply click on the X and you're back in Dreamweaver, ready to go. Now if you want this to open in a new window you can select this and create a target as well. Notice that when I clicked on the resume.pdf it replaced that with my current online resume. If you're working on the Macintosh platform, this will work very differently. On the Macintosh, if you click on the resume.pdf in the browser, it will actually open up either Preview or PDF, depending on the way you've set it up on your operating system for the Macintosh.
It will not open up in a browser. Let's go ahead and do one more File > Save All and I think our resume is done. Yeah. It's visually doing exactly what we want and the only thing left is to do some cleanup behind the scenes and create our print style sheet.
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.