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.
Up to this point, we've created a very well-styled online resume, but what if we want to do more? What if we wanted to have a more page-like appearance with background graphics and tiles and patterns? We can do that. But if we want to, the first thing we should do is go into Fireworks and create those graphics so that we are ready to design and style inside of Dreamweaver. The first thing you should do is locate Fireworks. If you're working on Windows, that will be in your C drive in the program files And if you're working in Macintosh, that will be in the Applications folder.
I've already created an alias icon on my desktop, so I'm going to double-click on Fireworks. Just like all of the Adobe products in CS4, the first thing you see is a Welcome screen, and again it works just like it did in Dreamweaver. It goes out and checks for what you've done or haven't done, and it connects to Adobe and gives you patches and updates and all kinds of things, as well as give you some typical kinds of task that you would be doing inside of Fireworks. The first thing we want to do is create a new document. You can create it right here in the Welcome window, or you can go up to the File menu and select New.
The way I like to work in Fireworks is to create a background canvas, something that I can work on and create a lot of my elements all for the same website or webpage. The reason I do this is I could be creating many, many teeny-tiny small files, but they're very hard to look at and to manage. If I put everything on one canvas, and then slice and export them and optimize them, I have them all in one location and can see how they look relatively to each other as I'm designing, so that I can control proportion, and contrast, and positioning, and all kinds of things.
So I'm going to create a 500 pixel x 500 pixel background, and for Resolution I'm going to make it 96 instead of 72 pixels. This is because many of the Windows monitors are 96 pixels per inch, and I'd rather have it downsample than upsample, And then for the canvas color, as I've said before, I want to choose a custom canvas color, and the color I'm going to choose is the color that's going to be the background color for my webpage, which is 9999999, a medium gray. By choosing the color of the main background color, any graphics that I create will anti-alias to this color, and look better when they're placed in the webpage and have a seamless appearance.
Once you've created your canvas drawing space, the next thing you should do is do a File > Save. So I'll come up to File > choose Save, which is Ctrl+S or Command+S, and navigate out to your desktop, locate your project folder, and this time we are going to put this main graphic into our Source folder, because this will be a backup or an original source material. We are going to give it the name myResume. Remember I'm a big stickler for having meaningful names. And notice that the native file format of Fireworks is PNG: Portable Network Graphic.
It's a wonderful file format. It's being used more and more inside of browsers and on web pages, but make sure that your target user has the browsers that actually can show PNGs. Not all of the older browsers support the PNG format. Now if you're also working in Photoshop, what you should know is if you bring a Photoshop document into Fireworks, that works very well, but if you take a PNG with layers into Photoshop, it will flatten that PNG. If you're going to take a PNG into Photoshop, you need to do a File > Save As, and save it as a PSD before you go into Photoshop.
The next thing I like to do is go over and get my Rulers. There's a lot a measurement that goes on in websites, so I keep that up all the time. I'm going to select View, show Rulers. And the Rulers will show along the top and left of the document window. Notice that the measurement is in pixels. I would not change that. Whenever you're designing for on-screen graphics or any on-screen project at all, pixels is the correct measurement that you should be using. I also check to make sure that View > Guides > Show Guides and Snap to Guides is checked. These are just toggles on and off.
And it should be, by default, the first time you load Fireworks. The way guides work are that they draw on top of the document window, and they only show in Edit view. You just drag them from the left or you drag them from the top, and there certainly just there for you, as the designer, to be able to snap things accurately. After I've saved, and after I've set up my rulers, I like to set up my workspace too. There are a couple helpful windows that don't automatically open when you use Fireworks. The first thing I like to do is go over into the panels area, and I'll be working in layers, not States or Pages. And I'm going to close up the Styles.
Give myself a little bit more room here. Because I'm creating web graphics, I do want to leave the Optimize window open. And then I'm going to go up to Window and locate Info. And then I'm going to go up to Window and locate Align. These are two tools that I use all the time. Now notice align just popped into the Optimize window. I'm going to drag that off and then take the Info and drag it into the Align. Notice that the blue box is completely outlined around the rectangle.
Now I've created my own little custom palette, I'll grab it by the bar at the top, and bring it over to my panel area, and I don't want it to pop into Optimize and History. I want to drag up a little bit higher so that I see the blue bar completely at the top of the panel section. Now it's its own little area and I click on Align and close that panel up. I don't need the mixer or the URL or behaviors at this time. Just like all of the other Adobe products, if you clicked up on the Expanded mode, you'll see that there are numbers of ways of having all kinds of workspace layouts.
Before I started this, I upgraded my own custom workspace called 'Laurie's Workspace,' but I just to warn you that unlike the other Adobe products, it's it's very difficult to remove a custom workspace. So you would have to actually go into your operating system, into your program files, and manually delete your workspaces. It's a little bit difficult to do, so I'm not suggesting that you do it at this time, especially if you're just starting out in Fireworks and have never used it before. So with my workspace setup and with my canvas ready to draw on, I'm ready to start creating graphics.
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.