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.
Some alternatives to creating your own tiles are some online tile generators. Let's take a look at two useful online applications that do all the work for you of generating tiling backgrounds. One is more image-oriented and the other is simply stripes. Now this are sort of like communities and you can actually end up spending a great amount of time sitting here, trying to create tiles, sharing tiles, looking at other people's tiles. I'll just warn you. And both of them let you support, suggest, log in and create places where you can save your tiles.
The first one I want to show you is called BgPatterns and it's more image-oriented. So it has this kind of recipe card style of working. And you'll start by clicking on Colors and choosing your foreground and background color. The foreground color I'll choose is 'B' as in boy, 4, 'C' as in cat, cat, cat, 'A' as in apple. And then I'm going to hit my Enter key. Now this is the same color I used when I was doing the background gradient. Then I'll click down on the Background color and I'm allowed to put a color in here and I'm going to choose medium gray that I have been using all along, which is 999999 and hit my Enter key.
Notice that as I change the foreground and background color, these updates are being shown over here on the right in a Preview Window. Next, I'll click on Canvas. Just going step-by-step. And I don't want my image tile to be this large. So I'm going to reduce this size to 50x50 pixels, but you could make it whatever size you want. And then for my Texture opacity, I have, by default, sort of a linen texture selected, but I'm going to reduce this down to 0%, which will give me no texture at all.
You can see that I have reduced the size of the actual tile and I have no texture now. The third choice is Image and you have a number of default images available. Going down here. And I'm going to select this crazy cross symbol right here. And in this area you can choose the scale that you want. I'm going to make this 80% because I want to make a grid-like tile. If you click here, you can use the scrollbar if you want to. There are two ways you can tile things: either centered like this or you can do a grid-like, like that.
And again you see an update. I'm going to switch back to the Diagonal mode. Then for Image opacity, I'm going to bring this down to 35. Last thing is the Rotation, which is very cool. I just simply select this intuitive little handle here, drag it up to 315. And now I've made all of the changes or attributes that I want for my tile, and I can click here and apply this background. So right inside this website, I can see what that tile is going to look like as a background pattern.
Once I'm satisfied and I've made all my changes, the next thing to do is just go ahead and download the image. You want to go ahead and save it to your file and it will probably go into your Downloads folder. As you can see, it will generate a name that's unique to your particular design that you created and is being generated by the website. I'm going to close out of that and I'm going to minimize Firefox and show you how to find your download file. Going to my user account name and then click on Downloads and there is the pattern tile that I created right there.
I'm going to drag it to my Desktop because I don't want it in this location and I'm also going to rename it a meaningful name. I'm going to call it bg_pattern.jpg. And close up my Download window. Now I'm going to maximize Firefox and bring it back into view again and click on my tab to get to my Stripe Generator site. This one is a little different. It also has an interactive space right here in front of you. And again it has a community and a way you can support this site, and a way you can share your things, and keep a library of all the things that you're doing on this site.
It only generate stripes. That's all it does. So I have played already and I'm going to go ahead and create one that I've already tried out and like. I want the stripe size to be 2. I want the spacing to be 1. For the stripe color I want it to be a pale gray, so I'm going to pick in right about here and then close that up. I want my background to be solid color. I don't want any shadow. And for my background color, I want it to be white.
And for my choice I want it to be horizontal. If I go over to the Preview Window and click on these two arrows, it'll give me a little preview, but if I want to see what it looks like full screen, I'll just click right here on Full Screen. And I get a preview of what that would look tiled behind my entire page. Just click to close. Takes you right back into your design area. Once you're satisfied with all the changes and attributes that you've made, go ahead and click on Download. Again, it's going to generate a unique specific number for the tile that you've created.
Go ahead and check Save File and then click OK. Close your download. And I'm going to close up Firefox. Go down here to my user account. Find my Downloads. This will be a very small tile. So there it is. I'm going to pull it out again because this is not where I want it to be. Close up my Download folder. Give it a new name that's meaningful. And I'm going to call this stripe_gen.png.
Now I have got these two images that I want you to use as tiling background, so I want to go to my project folder. Open it up. Pull it over to the side. Open up my images folder, because that's the images I want to use on my webpage. And just drag a selection around both and pull them into this folder right here. Terrific! I have got two more tiles, so I can use Fireworks or I can use this online applications and create all kinds of different background tiles that I can use inside of my web pages.
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.