Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
In this movie I'm going to demonstrate how to create your own custom font list. You do this inside your CSS style sheet. I've already created an HTML document, and I have attached a CSS style sheet. I put them all in one folder and define the site. In order to create a style for the fonts, I'm going to create it for the body tag. So I'm going to click at the Tag Inspector, then come over to my CSS styles, and create a new rule. This is going to be based on a tag and as you can see this will automatically show up here, and it knows that I've already attached the style sheet called Customfontlist.css. I'll click OK.
The CSS Rule Definition dialog box always opens with Type as the first category. In this case I'm actually making a style for the Type category. I want to define what my font family is going to be. Dreamweaver ships with a number of pre- built very commonly used font families. As you can see, here are some of the ones that ship with Dreamweaver. But I want to make my own custom font list. In order to create your own custom font list, you come down to the bottom of the list, and click on Edit Font List.
This brings up another dialog box. It will show you all of the fonts that you have on your computer. But you want to make sure that you use the fonts that your targeted audience most likely will have on their own machines that they can use inside the browsers that they'll be using. The first font that I want to use is Trebuchet. Select down here and start to type that font name. As I start typing, it automatically starts looking for that in my font list and finds it right there.
So I can go ahead and click on that, and add it to one of my chosen fonts. The second font that I want is Helvetica. I'll go ahead and add that to the list. Notice that it didn't appear in my available font list, but I do know it exists on many, many machines. For my third font I'll type in Geneva, click on the button and add it to my font list. For my fourth font, I'll type in Arial. This one does appear in the list, so I'll click on that, and then add it. And finally for my fifth, Sans-serif, and then add it.
So I've created a font list that will search first on the user's desktop for Trebuchet, next Helvetica, third for Geneva, fourth for Arial, and finally a default Sans-serif. Whatever Sans-serif font that user has, go ahead and display that. Remember, it will look for these font in the order that I request, and Trebuchet is my most weighted or the font I would like the user to have selected on their desktop if they have that font on their computer. I click OK and now I have to select that custom list from the drop-down menu.
As you can see it will appear at the bottom of the font list. All of the Dreamweaver fonts that ship with the package will show up first and then your custom fonts will show up at the bottom. I can go ahead and click Apply to see how that will look at an HTML page and then click OK. So there we have it. I've now created a custom font list. If I double-click on the CSS style sheet, you can see that I've created the rule for that style. If you want you can copy and paste this into any of your CSS styles and then you'll be ready to go and use that style for your own projects.
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.