How to Add Lists in Adobe Dreamweaver

Learn how to create ordered, unordered, and definition lists in Adobe Dreamweaver.

This feature works the same in all recent versions of Adobe Dreamweaver: CS5, CS6, and Creative Cloud (CC).

Ordered and Unordered Lists

To create an unordered list from existing items:

1. Place your cursor on the line where you need a list and then click on the Unordered List icon in Properties.
   
   

   Your page will appear as follows:

   



2. Place your cursor at the end of the first list item and delete the dividing bar.
   


3. Press Enter, and the remaining items will move down.
   


4. Place your cursor at the end of the next item (in this example "A Mad Tea-Party"), delete the dividing bar, and press Enter. Continue to do so with any remaining items.
   


5. To add another bullet at the end of the list, place your cursor at the end of the last item and press Enter. Type the desired name. Repeat to add more bullets.
   

You create ordered (or numbered) lists in the same way. In the first step above, you would simply click the Ordered List icon instead of the Unordered List icon.

To create an ordered or unordered list from scratch, simply start a new paragraph and press the appropriate list icon in Properties.

Nesting Lists

Unordered and ordered lists may be nested any number of levels deep. To illustrate, we will create a grocery list.

1. The page is currently empty. Type "Grocery List" and make it a Heading 1.


2. With the cursor below the heading, begin an unordered list by clicking on the Unordered List icon in Properties.


3. Type "Fruit" and press Enter.
   


4. To create the nested list, press Tab (or click the Indent icon in Properties) and type a list of fruits, pressing Enter after each one.
   


5. When you want to type in the next list section, there are multiple ways to get back to the parent list. You can:
   1. Press Enter again.
   2. Press Shift+Tab.
   3. Click the Indent icon in Properties.


6. Type your next list section name (in this example "Meat") and press Enter.
   


7. Add another nested list. Continue with your list until it looks something like this:
   


8. To exit a list, place your cursor at the very end of the last item in the list and press Enter twice.

Converting Lists

To convert an unordered list to an ordered list (or vice versa), click somewhere within the list (or sublist) and then click the appropriate list icon in Properties.

Definition Lists

Definition lists, which are used less frequently than unordered and ordered lists, are used to create lists containing terms and definitions. Dreamweaver does not provide a way to create them using the Properties Inspector. To create a definition list in Dreamweaver, follow these steps:

1. Select the location to place the list.


2. Choose Format > List > Definition List.
   


3. Enter the list items.

To add a definition list to a page, follow these steps. We will create a list of abbreviations.

1. Create a new HTML page.


2. The page is currently empty. Type in a heading and make it a Heading 1.


3. With your cursor below the heading, begin a definition list by choosing Format > List > Definition List. You will not notice any change on the page, but if you look at the Tag Inspector on the bottom left, you will see this:
   
   This indicates that you are in a definition term (dt) within the definition list (dl).


4. Next, type your list items and enter.
   • ol Enter
   • Ordered List Enter
   • ul Enter
   • Unordered List Enter
   • dl Enter
   • Definition List Enter Enter


5. After pressing Enter twice at the end of the list, you will no longer be in the definition list, and your page should look as follows:
   

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

• Adobe Dreamweaver

Courses

• Introduction to Dreamweaver Creative Cloud (CC) Training see Class Schedule
• Introduction to Dreamweaver CS6 see Class Schedule

Tracy has been a senior graphic designer/programmer, instructor, and consultant since 1993 and has developed hundreds of logos, marketing materials, websites, and multimedia solutions for customers worldwide, including involvement in large corporate software rollouts. She has helped many organizations optimize and streamline data solutions. She teaches both onsite and online courses and has her CTT (Certified Technical Trainer) certification. Tracy specializes in teaching graphics, desktop publishing, web design, reporting/productivity applications, as well as the creation of online courses with software from leading vendors.