Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Creating a Bulleted List

  • It is easy to create a bulleted list in HTML but you need to set up your text correctly first
  • Open the destinations.html page from your course files
    • Convert the first line to an H1
    • Create a 3 level nested list of destinations
    • Go through the next 3 lines of text on the page & explain how a list should be within paragraph tags in order to work easily within Dreamweaver
    • Always be sure to create the paragraphs first
    • You use Indent to nest one list within another
  • You use the List Item button to select the type of list & the style
  • In HTML:
    • The UL tag creates the indent for the list
    • The LI tag creates the bullets

Creating a Bulleted List

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Formatting Content 0:42
    • Add Title
    • Insert Heading Tag
  • Creating a List 2:13
    • Creating an Unordered List
    • Example of Incorrect List Formatting
  • Creating Nested Lists 5:16
    • Indent List
  • Changing List Type 7:50
    • Change to Numbered List
    • Change Bullet Type

Transcription: Creating a Bulleted List

We are now going to take a look at creating bulleted numbered and definition lists within Dreamweaver and we are going to start working on a page for our Wanderlust travel, fictitious travel agency website. 0000

This not a real website so you do not have to be too concerned and I am going to open up the Destinations page from the course files. 0015

Now, in case you do not have the course files set up you will want to define a website in Dreamweaver and you will also want to go out and take a look at the Exercise files and download those either for the course or for this particular chapter.0026

But I am going to go and open up the destinations.html page and we have some content already set up on the page.0043

If I scroll down you can see there is a fair amount of content on this page and we are going to use this page to set up a few lists to organize this content because it is pretty scattered on the page right now.0052

The first thing I want to do is check my title and it is untitled, so I am going to go in and select travel destinations and copy it and I will go up into the title area and paste and I can do a basic paste within this area.0067

There is my proper title, notice the * here means I have not saved my page, so I will go ahead and do that using the File menu. 0088

Now what I want to do is add some structure to the page this page does not have a Heading tag right now, so I am going to go ahead and add one, I will put my cursor in travel destinations and hit control or command-1 and that will make it a heading1.0099

Now, once I do that notice there is an H1 tag listed here also if you have your Properties area opened you can see in the Format area there is a heading1 so it tells you in both locations that that is now a heading1.0117

Now, when working with list in Dreamweaver it is important to have your content set up correctly before you start the list and if you do that and pay attention to it lists are very simple in Dreamweaver. 0133

Now I have quite a long page here so if I scroll down you will see there is a lot of information here, so first of all every piece of text is on its own line and that is an important piece of doing proper lists within Dreamweaver.0149

So, I am going to select starting with the United States here and I am just going to put my cursor down lower on the page.0166

As I scroll down I will go all the way down to Auckland so I have all of the text that is all on its own line selected.0175

Now that I have done that when I go down to the Properties area I can click the Bullets down in here and what it is going to do is give every one of those pieces a bullet and you could see it pulled it up very nicely. 0187

Let me show you what happens if it is not all organized that same way, so I can always control or command-Z the backwards.0203

But what I am going to do this time is up at the top I am going to take New York and hit a backspace or the backwards arrow delete key on your keyboard, on the Mac side… 0212

…and I am going to put these two on the same line first and then I am going to use Shift enter or Shift return to put them close. 0226

Now, let me highlight the text now and see what happens so I will scroll all the way down to New Zealand and I will add Auckland to this, oups, let us try that again. 0237

I tend to find when I go backwards I always select much better, anyway I have it all highlighted these two are directly under one another.0251

So, now if I click the Bullet notice that New York because it was directly under Las Vegas -- in this example anyway -- it did not get a bullet.0261

The things that get a bullet when you click either one of these two icons are things that are in their own paragraph space before you click the Bullet and that is an important concept.0273

I am going to put New York back in its own space so it is in its own paragraph tag and will try this one more time.0288

I will go ahead and scroll down here, I have a crazy going mouse so bear with me a second and there we go, going to Auckland nice to go to Auckland actually and we will click on the Bullet here and I have a nice list.0298

Now, the idea is I have these organized so that I can set them up and start nesting lists and if you are going to do that just make sure every item has a Bullet before you start and this works really well. 0317

Everything here is underneath United States for now so what I want to do his grab everything that is in the US underneath United States and I want to make it another list and indented list. 0331

Now, if I clicked this Bullet right here to do it what is going to do is remove the list so that is not how you do it, control or command-Z gets me right back here.0347

In order to make another list inside of this one what I do is click the Indent button and that pops it right in very nicely.0360

Now, I do have a few things in here somewhat organized and notice I have a West Coast area here so I am going to create a third level of bullets so underneath West Coast I have California Oregon and Washington.0371

I will do that same thing, I will click the Indent and now it is nested under West Coast and basically what you are seeing are the three different types of bullets that you can create by default using HTML and notice as I moved to a new layer it automatically adjusts them for me. 0387

Within the Midwest I am going to do the same thing I will take these three cities click the Indent and we have a nice list for the US. 0408

The idea is to do that same concept going down here and start indenting based on the area of the world.0418

So, under Europe I am going to select United Kingdom down to Austria I will click the Indent and there are the European countries. 0427

I will do the same thing here for Asia I will go ahead and select those and indent and down in this area the South Pacific I will go ahead and do all of these indent.0439

And within New Zealand we have Auckland within Australia we have Sydney so I will indent this one and I will do the same for Auckland so you can see it is really nice to be able to work with that. 0455

Now, what if I wanted to change the bullet types or I want to make it a numbered bullet instead of a regular bullets. 0470

Well, what I want to do let us say in Asia I want to make these three listed instead of a bullet I want to change it to a number, let me show you how to change it within Dreamweaver.0479

What I do is click anywhere in that area I want to change I cannot select it I just need to click it because what I want to get to is this list item button down at the bottom in the Properties area. 0490

If I select these three notice the list item is grayed out so you just need to put your cursor in that area so Dreamweaver understands which list it is you want to modify.0505

I will click List item, right now it is a bulleted list what I am going to do is change it to a numbered list and when I do that I have five different styles of numbers I can choose so what I will do is make it a Roman large. 0517

When I click okay here you can see it gets the Roman numerals set up so that is how you can modify the list types.0536

If I decided I did not want this list to have these circular bullets can do the same thing I can click list item under bulleted list I can choose a bullet or a square so I could change this to a square if I want.0545

Now does not really make sense to do that because our third nested list is using that so control or command-Z takes me right back such a handy feature. 0562

So, what we did was we just organize our travel destinations into a much easier list for users to scan and they can scan based on areas of the country.0573

What I am going to do is put Asia right back into a bulleted list by placing my cursor, clicking the list item button and I will switch it over to bulleted list so that it matches all the rest of them.0585

But that is how you create numbered or bulleted lists within Dreamweaver, on your HTML page.0600

The important piece is just make sure each one of the items you want in your list is in its own paragraph tag before you click these buttons and you will be in good shape you should not have any trouble working with lists within Dreamweaver. 0607

But that is how you create numbered and bulleted lists within Dreamweaver.0624