Coronavirus (COVID-19) information: All courses at all locations are available as live online classes. Limited in-person classes in some locations. Our offices remain open. Learn more.


Dreamweaver Tutorial: Creating lists using Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Creating lists using Dreamweaver

This tutorial provides you with a foundation for working with Adobe Dreamweaver lists. It is the first lesson in the Adobe Dreamweaver CS6 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Dreamweaver Tutorial: Creating lists using Dreamweaver

Bulleted lists may be familiar to you if you have worked with word processing or desktop publishing applications. Lists are a helpful way to present information to a reader without the formal constraints of a paragraph. They are especially important on the Web. Studies indicate that people typically skim web pages instead of reading them from beginning to end. Creating lists will make it easier for your visitors to get the most from your website without sifting through several paragraphs of text.

1 On the events.html page, click and drag to highlight the four lines below Spring Events.

2 Make sure you have the HTML button selected in the Property Inspector at the bottom of your page, and click the Unordered List button. The highlighted text becomes indented, and a bullet point is placed at the beginning of each line.

Sample Lesoon Image

Use the Unordered List button in the Property Inspector to create a bulleted list.

3 Click the Ordered List button to the right of the Unordered List button. The bullets change to sequential numbers.

4 Choose Format > List > Properties to open the List Properties dialog box. Choose Bulleted List from the List type drop-down menu to return to your first style of list. The Numbered List and Bulleted List options in the List type drop-down menu also allow you to switch between ordered and unordered lists.

5 From the Style drop-down menu, choose Square. This changes the default circular bullets to square bullets. Press OK to exit the List Properties dialog box.

Sample Lesoon Image

Change the bullet style to square in the List Properties dialog box.

You may have noticed that the four lines of text in your list have lost their style. They are slightly larger than your paragraphs and they are black, not dark gray. This is because a style has been defined for paragraphs, but not an unordered list. You will now create a new CSS rule for the appearance of all unordered lists in the document.

6 With all four lines still highlighted, click on the CSS button in the Property Inspector at the bottom of your page. Click on the arrow to the right of the Size field. Choose 14 from the Size drop-down menu in the Property Inspector. The New CSS Rule dialog box appears. This dialog box appears because it is the first time you have attempted to style an unordered list. After you define the properties, all text formatted as an unordered list will appear the same.

7 From the Selector Type drop-down menu, choose Tag. In the Selector Name text field, the selector ul has been chosen for you; ul is the HTML tag for an unordered list. If ul is not chosen for you, type ul inside this text field. Press OK to apply the changes; in this case the font size is set to 14 pixels. Now you need to change the color of the unordered list to match the color of your paragraph.

8 In the Property Inspector, if the Targeted Rule drop-down menu does not read ul, choose ul from the menu. Click on the color swatch and in the top-left corner of the colors panel, locate the dark gray swatch, which is hexadecimal color #666. Click on the swatch to apply the color.

9 Choose File > Save. Leave this file open for the next part of this lesson.

Continue to the next Dreamweaver Tutorial: Using Dreamweaver’s Text Insert panel >



These tutorials are created by and the team of expert instructors at American Graphics Institute.