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.
I'm going to try a second method using a rounded rectangle look. As I told you in this one, this is a fixed width and height background graphic and there is a number of reasons why you might want to use it. One it's just simple and easy to do. But also if you wanted to do a drop shadow or have a special effect like a glow or something, this would be an easier way to do that, and you wouldn't have to worry about connecting different parts together and making them all line up. But another great way is to make three different graphics. I have a graphic at the top that's the rounded rectangle and a graphic at the bottom with a rounded rectangle, and you have a box or div in between then you can add as much or little content as you want, because you're not defining the vertical height, like we did in this one.
So I'm going to show you the second method, which is the flexible flowing method and uses a graphic at the top and at the bottom. To do this, let's go into Split view of our webpage. So the important thing here is I know that the wrapper is defining the page-like look up this online resume, and I want the rounded top image and bottom image to appear above and below this box. So I'm going to look for the opening body tag and insert my I-beam after the body tag, but before the wrapper.
Then I'm going to hit the Enter Key, and go up to my Common insert bar and choose Insert Image. This takes me out to my images folder and I'm going to scroll until I find the top white round graphic. You get an image preview. You can see that I have already created that and this is a transparent GIF. One of the reasons I told you that using GIFs is a good idea is that you can have transparency. So the transparencies were the rounded edges are and so any background I have will show through that transparency.
I'm going to click OK. Since this is not informational graphics, someone who is visually impaired does not need to know that this graphic exists, and I don't need to put alternate text. It's just part of the graphic design. I'm going to go ahead and leave that blank and click OK. So if I go back into Design view right now, you can see that I do in fact have that graphic appearing at the top. It doesn't look great inside of Dreamweaver, but in a few moments we'll save and go see how it looks inside of our browser.
Let's go back to Split view and insert the one at the bottom. Again, I'm going to look for the end of the wrapper div and this is when those code comments are so important. This indicates to me that this is the close tag for the wrapper, insert my I-beam here, hit Enter, go up to my Insert bar and choose Images, and now I'm looking for the bottom white rounded rectangle. Now I just made one of these in Fireworks and then copied it and rotated it to do this and then click OK.
I was very careful though to make it the exact width of the wrapper that I'm using. My wrapper is 780 pixels wide, so I had to make this graphic exactly 780 pixels wide for this to work. If I made it smaller, they are not going to fit together. Again as I explained before, since this is not an issue where you wouldn't understand the page without the Alternate Text, I'm not going to insert Alternate Text. It's just a graphic element. Come back to my Design View, and you can see that it's showing at the bottom.
Now it looks like it's all going to be okay, but in a second after I Save All, you'll see as we go out to the browser, we're going to have a few problems. It's okay at the top, the flow is correct. It's going from the image straight into the wrapper box. But at the bottom we are having some flow issues, and this occurs when you use floats. Once you use floats everything tries to float up next to that floated box and that's exactly what's trying to happen right here.
This image here thinks it's part of the float. This text floated up by the sidebar and this image, even though it's too wide, is trying to float. We want to restart the flow of the document after we use a float and we do that by doing something called Clear Float. So in the next steps, we are going to learn how to create a clear float to start the flow of the document over again.
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.