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.
So we have completed steps one and two of creating the graphic and slicing the graphic, and now we're ready to optimize and export our graphics. In order to do this, we go up with our Selection tool, select the graphic, and it does help to see it a little bit larger. So I'm going to move this up to 300%. And then I'll take my Hand tool, by pressing on the spacebar, and move that up where you can see what I'm doing. And when I'm doing optimization you'll notice that as soon as I select an item, the Optimization panel is already showing that it's GIF Adaptive 256.
Now this is just by accident it happens to be the right choice because this is the way Fireworks, in fact, ships. But I want to go into the 2-Up Preview mode, so that you can see that there is the original and then here is the one that I'm actually previewing for export. Now GIF Adaptive is the correct one because what I want to do is make sure that the colors that are actually used inside this graphic are the ones in fact that Dreamweaver selects out. That's what adaptive means. Pick the colors of the palette inside that graphic.
A lot of people get this confused with what we call 'Web Safe' or 'WebSnap 256.' This means you can only use the 256 colors that are Web Safe between Windows and Macintosh. This is not what we want. So make sure you keep it with GIF Adaptive. The other thing that's good about GIF Adaptive it is particularly good for solid colors and for transparency, which is exactly what I have in this graphic. After you have made that selection, go down to the bottom of your Preview Window and make sure that it's the right size for what your website or web development team require and that your download speeds are okay.
Then lastly come down to your Property Inspector. And down here make sure that this says GIF Adaptive 256 because whatever you have selected here is how Fireworks will export this graphic. I'm going to go back up here to my image and I'm going to put my finger on the spacebar and move it over so that we can select that gradient. Now at this point, you can see that GIF Adaptive is not a good choice for the gradient. The gradient is a continuous tone and typically continuous tone images or photographic images look much better using JPEG.
So I'm going to go up here and choose JPEG. And by default, again, Fireworks chooses JPEG-Better Quality, which is a quality setting of 80. Just to show you what happens if you move this down, I'm going to take that slider and move it down around 17 or 20 and notice I get banding. This is not what I want with the gradient, I want continuous tone. So this is too low a quality setting. It's always a hard choice when you're optimizing. You're trying to make the graphic image size as small as possible but make the quality of the image look as much like the original.
So I'm going to move this quality setting back up to 80 because I know this is a very small graphic and won't really affect its file size. 60 to 80 quality is often the selection that I make. Again, I'll go down and make sure this is JPEG. I'll check to see what size it is and how long it's going to take to download, and finally I'll check to make sure that JPEG-Better Quality is what I have selected down in the Property Inspector and that this is what I'm going to use for my export settings. Now I can go back to my original view and then double-click on the magnifying glass to set it back to 100%.
Now if I want to export a number of images and slices on this page, I need to select, with my Selection tool, anything I want to export, and by using my Shift-click, add that to the selection. Or I can simply draw a line around this to make sure that I have got them all selected. But if you want to export multiple selections, make sure that you have more than one selected on your page. Now I can go up to File > Export and this will be a daunting dialog box, but I'm going to lead you through it.
So you'll go back to your Desktop and you're going to locate your project file, which is called, in this case, online_resume_lb. Double-click. And then you're going this time to choose your images folder. We do not want our source folder because these exported images are the ones we want to use on our webpage. Now don't be surprised, but I have already pre-baked or pre-made a number of images that you can play around with in this exercise, and pretty soon you're going to be able to see the two that we've created also inside this folder. By default, Fireworks puts down here that you want to use your myResume file to export to a webpage and images.
But that's not what we're doing at all. We already have a webpage in Dreamweaver. All we want to do is export only the images. So click on the drop-down menu. Select Images Only. Now HTML is completely grayed out, which is great, and we want to export these slices. So let's check carefully here. We only want to export the selected slices, which is why I emphasize make sure that you have everything on the page you want selected before you go into the dialog box. But we do not want to include the gray area around those slices. So deselect this.
And by gray area, I mean any of these background areas. I don't need all these gray rectangles to be exported. And I only want the current page. This may not make sense to you, but in Fireworks you can have a multi-page document. And we only want this page to be exported. So I've made sure that my images are in the right folder. I have made sure that I'm only exporting slices that are selected, and only images. And I can go ahead and click Save. At this point, there is nothing more that I can do in Fireworks, other than save my document.
So I'm going to go up here and go File > Save and choose File > Exit. But I do want, just so we can ensure that our images are in that folder, to go check back at my root level folder. Go into my images folder, and there is our background gradient and our background texture, just like we thought. So we're ready to jump back into Dreamweaver and start creating our webpage using background tiles in our style sheets.
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.