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.
Lists are the next items we'll format and we'll use the Unordered List or the ul tag or what some people call bulleted lists to do that. There are a couple of places where we might want an unordered list. Now keep in mind once we start using styles, they may not look the way we think an unordered list looks, but there are reasons to use an unordered list. One is it's a tag that has a parent tag and a child tag and you can style the outside tag as well as the inside tag. We'll get into that more later.
But another reason is it groups things together and emphasizes them again. So we have some lists in this resume that could use some of that styling or formatting. The first one is going to be the Academic Experience. I'm going to select those two lines and then I'll come down to the Properties Inspector and select the Bulleted List or the Unordered List. I'm going to switch to Split View, so you can see what that looks like with the HTML formatting. Notice that, just as I explained, there is a parent tag, the ul tag, which stands for Unordered List and there is an inside tag or the li tag for list item.
You can have as many list items as you want inside an unordered list and that makes it a great tag. You can style each line the way you want and then you can give the overall list a style as well. So scrolling down, there's a couple of other places where I might want to use an unordered list and it looks like in the Publications, that would be an appropriate place to use an unordered list, to group these tighter together and cluster them so they look as though they're part of the same group, but have separate meanings on each line.
So I'm going to select the Publication area and I'm doing it in Split View this time, so you can watch the update happen automatically in the code side. I'll click in the Properties Inspector on the Unordered List button, and again, right off the bat, Dreamweaver updates that code, replaces the p tag with the Unordered List tag. Remember, the Unordered List tag must go around all of the line text. Another thing you should be noting is that you have to have an opening and closing tag for everything that you do in HTML documents.
I'm going to scroll down and look a little further and see if there are any other place where I'd like to use an unordered list, check out the rest of my document and it looks good. At this point, we'd be ready to save. So now I'm ready to preview this website in the browser and make sure that these look very similar to what we do in Dreamweaver. We can never trust that Dreamweaver is emulating exactly what the browser experience is like. So I'm going to save or Command+S if you're on the Mac, come over here to the button for previewing in browser and choose Firefox.
As you can see that formatting is now showing up and it looks very similar to what we have inside of Dreamweaver. With each iteration of Dreamweaver, Dreamweaver has done a better and more accurate job of emulating what it looks like inside the browser. You should also be testing in multiple browsers. I'm going to close the Firefox window, come back into Preview in Browser and check it what it looks like in IE Explorer. If you're doing web design, you'll be looking at things in many, many browsers on both platforms, because your target audience may be using all kinds of operating systems, all kinds of monitors, and all kinds of browsers.
You have no control over what your user decides to use at the other end, looks good. So there are a couple of other kinds of lists that we can use and we'll explore those as we continue to format our HTML web resume.
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.