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.
Our online resume is complete, but we have a little bit of organizing and commenting to do behind the scenes. It's a good idea to clean up your files, put in comments and make it so that the next time you come back into your file, or you pass it on to one of your team members, you all know what you're doing and what you have done. One of the cool things in Dreamweaver CS4, if you go to your Styles menu, is that you can move your styles up and down in this area. I like to group my tags by HTML tags, then classes, and then ID areas.
That way I can easily find them when I return back to my CSS style sheet. The way that Dreamweaver add styles here is as you create styles it adds it to the bottom. If you have a style selected and then create a new style, it will create that style right after the selected style. So this can get pretty junky by the time you're done doing a small website. So as you can see I have my body, my hs, my ps, which are the three big standard ones. Here is my unordered list together. Here's my Definition List together, and then things get a little crazy.
So I'm going to bring the image up here right under the Definition List and then I'm going to bring the two classes for the image right below that. And as you can see now I've got class, class, class, and I'm also going to bring my last class, the clearfloat, up under date. At this point I now have all my IDs together, and I have my wrapper, sidebar, content. But I'm going to put my header above sidebar and my header 1 right above that, and then I'm going to put my sidebar content right by the sidebar.
Now I have my styles organized in a convenient and meaningful way. It won't be hard for me if I need to come back and update the site to see where they are and what I've done. So that's the first thing, and it's very easy to do it inside of the CSS Style panel. The next thing is actually to leave some comments inside of your CSS. Now we've been leaving comments inside of the HTML Code View all along. We've been commenting wherever there is a close tag for our DIVs and now that's going to make it easier for us to see how we structure this document.
But you can also do this with your CSS style sheets. So I'm going to click on my CSS style sheet right now. Notice it's not saved right now, because I just changed the order of all of those. So this order over here is now reflected in the CSS document. If I scroll through this document now, those have been re-ordered just the way I did in the CSS panel, and that's great. And it's way easier to do it in the panel. But it doesn't allow me to add comments in the panel. To add a comment you need to use a forward slash, asterisk, and then end that comment with an asterisk forward slash. One of the easiest way to do this quickly is to simply take one comment that's already there, copy it with Ctrl+C, come down to the next line, and paste it. Where it says CSS document, simply put HTML tags.
Go ahead and click Refresh. This is not going to change anything in your page. All you're doing right now is making your comments. And you can tighten up the space if you need to and we'll go down through. I'm going to look now for where my classes start. So here's where my classes start, because I can recognize them by the period in front of each one of them. I'll put my I-beam at the end of the last HTML tag style and then go ahead and paste again, and these I'll call classes. And then finally I'll scroll down some more until I get to my IDs, and again paste this one more time, and I'll call these my ID Selectors.
So I go ahead and save that document, and if I need to pass this off to a team member or two months from now I come back in, it's very easy for me to find these and to search through. Remember we have got that great tool up here called Edit Find and Replace or Find Selection or Find Next. So by putting these comments in here, I'm actually making it very easy for me to go through a long list of styles and be able to find whatever I need. I've put them here semantically the way I marked them up, and then in the classes I've marked them up the way I've created them.
And then in the IDs I put them the way I've created the actual layout. So I've got a real structure and commenting to make it easy to go back in here, and update, or change any of my styles at any time. Again, if we go back to Design view, you'll see nothing has changed, but I've made it a lot better for myself, and anyone else working with me on my web design and development team, to come back into this website and be able to update, borrow, use or change any of the styles or code that I've created.
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.