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 let's add the links for the website URLs. You'll have three website links under the section called Web Sites (selected URLs). I'll scroll down so you can see it in the monitor. I'm going to select the URL and notice it's the entire URL with the HTTP protocol. In order to copy it into the link area, I'm going to use Ctrl+C or if you are on the Mac Command+C, click my I-beam into the link area, and then do Ctrl+V or Command+V if you're on the Macintosh.
Then I'm going to Tab to the Target area. In the Target area I'm going to click on the drop-down menu and choose Blank. When the user clicks on this link, I want this URL to open up in a new browser window on top or in tab mode on top of the resume. To make sure this gets entered or sticks, go ahead and hit your Enter key. If I go into Split view now, you'll see that we've created what we call an anchor or a tag. This will now make a link and in fact your document has actually changed colors.
You'll see that you get the blue underlining. There are two parts to this. There is the a tag, which is the anchor tag, and then there's the href, which is the reference on the Web or the Internet to the site that you're trying to go to. Target is another attribute which tells the browser how to open up this URL when user clicks on it. Let's go ahead and continue adding two more. So I'll again select the URL, copy it with Ctrl+C or Command+C, click in the Link box in the Property Inspector, Ctrl+V or Command+V click on the drop-down menu for the Target area, choose Blank, so that the browser window opens in a new window or a new tab, and hit the Enter Key so that it sticks.
Finally, the third one I'll select again, do a Ctrl+C to Copy, click my I-beam into the link, do a Ctrl+V to paste, select the drop-down menu of the Target and again choose Blank and hit my Enter key to make sure that that sticks. So if we look at the side-by-side now, you'll see that in each area we have the a tag or the anchor tag added, and that all three of those areas now have the underline in blue to indicate that they are hot links.
We are almost done formatting, but there is a little bit more that we'd like to do. As I scroll up to the top, you can see that we also have an email address. Now, there are several ways we can do the email address. We can simply select the email address, and go up to our Common menu and choose Insert Email, and automatically the Dreamweaver application will take the text that we've selected and assume that that is in fact the email. When we click OK, notice down in the Target area it actually wrote mail to: takashi@Itoandactive.com, with no spaces.
I'm going to undo that so you can see how to do it manually. I am going to use Ctrl+Z or Command+Z to Undo. So the first thing we would do is select this and if we are going to do it manually, we would again copy this with Ctrl+C or Command+C on the Mac, then we'd come down to the Property Inspector to the Link box and type mailto: but no spaces, and then paste our email address into the box. I've used Ctrl+V to do that.
You don't need to target for this, because when you use an email address, the a tag will then open up an email client, if there is one on the user's desk. So let's refresh our screen and look at that. Again, it's the same tag. It's the anchor tag, but in this case to indicate that it's an email address we see the special way of writing mailto:. That's the big difference between a URL link and an Email link. If we go back out to Design view and just check to make sure that we found all of our URL links and all of our Email links.
Now, we can save this document and then preview it in the browser. The only way you can really check your links is to go out to the browser and that way you can see if they work. If I haven't saved the document and I click on Preview in Firefox, Dreamweaver automatically ask me to save the changes. Notice this time I didn't save before I clicked on the Preview in Browser. So in order to preview you'll notice you do have to save all your changes. I'm going to click Yes and then I'll go out and try this. Now these are just dummy sites, these won't really go anywhere, but if I clicked on one it would try to find that URL, and again notice it opens up on top of our resume in a tabbed form.
I'm going to close Firefox and return back to Dreamweaver. Again, I'll take one more look but I think I've done a pretty good job of semantically marking up all the content, making it read well and now at this point, I'm ready to start styling my content and making it look like a great typographic experience on the web.
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.