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.
Once you've defined your site in Dreamweaver, it's important to set up your workspace. By default, Dreamweaver opens up in the Designer workspace. If you click on the word Designer, a drop -down menu appears and you can see that there are many, many different kinds of workspaces according to the kinds of jobs or kinds of things you might be doing in the web design industry. To save some real estate, we're going to choose the Classic workspace. As soon as we do that, you see that the Insert bar appears at the top with the Common buttons right there.
We use these all the time, and by saving space, we make it easy to reach them and easy to see and do. As I demonstrate how the Common bar works, I'm going to go ahead and choose File > New, so you can see what a file looks like inside this window. There you go. Now you can see how our Insert bar appears. I also want to set it up, so that I can do Split view vertically, and this is a new feature that you can do inside of Dreamweaver CS4. If I go over to the Layout button and click on Layout, you can see that I'm in Code and Design view, but now I can choose Split Vertically.
This makes it much easier to see your code right alongside of your Design view and you can see things right across. I love working this way. Finally, once I get my website pretty much set up the way I like, oops! I like my CSS Styles to be open too, because I'll be working in that panel a lot. So I'm going to double-click on CSS Styles and open up that panel. Then you can make adjustments about how much you want to see and how you want to do that. You can also make adjustments this way as well, but I try to leave a lot of room for my page.
Now I have a workspace that I feel very comfortable in and I work like this all the time. I go up to Windows, down to Workspace Layout and I can now set this New Workspace. I'm going to call this Laurie's Favorite. Go ahead and click OK and now if I click on Window again and go down to Workspace Layout, you'll see that my workspace is the one that is selected. If at any time, things get changed or I want to go back to that, I can reset this or I can go down to Manage Workspaces and delete that and choose new kinds of workspaces that I want to work in.
For now, I'm going to leave it at Laurie's Favorite. Another important thing to do when you're opening Dreamweaver for the first time, and when you're working is to set up your preferences in an application. Preferences can make a lot of difference in how you work inside an application. To set your preferences in Windows, go up to Edit and go all the way down to the bottom to Preferences. If you're working on a Macintosh, go up to the upper left-hand corner to the word Dreamweaver and look for Preferences in the drop-down menu.
The first preference that I'm going to set is CSS Styles. I like to use shorthand. It makes it a lot easier to change and correct and edit, and it's easy to understand. So I'm going to select Background, Margin and padding, Border and border width and List-Styles. I'm going to leave Font as it is. It makes it a little bit easier to understand what's going on with fonts. Secondly, make sure that you have this selection checked according to the settings above. And finally, when you double-click in the CSS panel, you want it to open using the CSS dialog box.
The next thing I'm going to select is Fonts. As you can see, Dreamweaver chooses a very small font size for the Code view, making it really difficult and tiresome as you're working. So I'd like to go in here and change this to a more normal size. That makes it easier on your eyes and makes it easier to work with others. I'm going to check 12 points. When I click OK, you'll notice in the webpage that that made it a lot larger and a lot easier to see. There is a few more preferences that I want to set, so I'll return to Edit > Preferences.
The next thing I want to make sure is setup is that if I use my keyboard shortcuts, they'll work. So make sure this is checked so that if you do Ctrl+N or Command+N, you can open up a new document or a new HTML document. Next, I'll choose my Accessibility category, which is very, very important. What Dreamweaver will do here is anytime it thinks that you need to add some accessibility feature, it will send a prompt to you. I like to have all of these checked except Frames. If you're doing current best standards are best practices in web design, you won't even be using frames, so go ahead and deselect that.
And last but not least is to preview in the browser. We already have selected two browsers that we're going to use inside Dreamweaver, Firefox and IE. Select your browser or go out to the desktop and find your browser to set these up, by clicking on this Edit button. I want Firefox to be our primary browser, so I'm going to select this down in the defaults. IE will be my secondary browser and I'll go ahead and select that as my secondary browser. The reason I've chosen Firefox as the primary browser is I want to be able to use my Web Developers toolbar and my Firefox tool, so that I can check my websites out on the browser and see how they're doing.
Now that I've set all my preferences and have completely got my workspace set up the way I like to work, I'm ready to start designing my webpage. I'm going to go ahead and close out this HTML document. This was just for showing you how the toolbar and the code looks in the Preferences.
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.