Using Bullets in HTML or Macromedia Dreamweaver

Tool(s) Required:

HTML Editor: Any
Recommended: Adobe Dreamweaver CS3

This article deals with how to use bullets in HTML or Macromedia Dreamweaver. To summarize, bullets can be displayed in the following ways:

1. Using the <ul> and <ol> tags with or without the type attribute set.
2. Using CSS styles by specifying a class attribute to the <ul> or <ol> tags. The bullet type can be either the regular HTML types or bullet images.
3. Using Tables and image bullets, lists can be created within small areas. For example take a look at the related links in the left menu. Notice how image bullets are used for listing out the Fireworks Tips.

1. Using <ul> and <ol> tags with or without the type attribute

Bullet Type HTML Code Example Default (disc) <ul><li>List Item 1</li></ul> List Item 1 Square <ul type="square"><li>List Item 1</li></ul> List Item 1 Circle <ul type="circle"><li>List Item 1</li></ul> List Item 1 Numbers <ol><li>List Item 1</li></ol> List Item 1 Lower Roman <ol type="i"><li>List Item 1</li></ol> List Item 1 Upper Roman <ol type="I"><li>List Item 1</li></ol> List Item 1 Lower Alpha <ol type="a"><li>List Item 1</li></ol> List Item 1 Upper Alpha <ol type="A"><li>List Item 1</li></ol> List Item 1

2. Using CSS styles by specifying a class attribute to the <ul> or <ol> tag

Create a CSS style called bullet by using the HTML code below or by using Dreamweaver.

HTML Code: <style type="text/css"> <!-- .bullet {list-style-type: disc;} OR .bullet {list-style-image: url(/images/icons/bullet.gif);} --> </style> <ul class="bullet"><li>List Item 1</li></ul> Create Using Dreamweaver: Open the CSS Styles pallet by clicking on Window > CSS Styles Click the New CSS Style button and give the name of the style as .bullet. Define it for either only the current document or for a Style Sheet file. In the CSS Style definition window, go to the List Category and set the type or bullet image and Save the style. Create your list of items using the default bullet. To apply the style, select the <ul> or <ol> tag in the tag selector located at the bottom left of the Document window. Right Click and Set Class to bullet.

Change the list-style-type property to get the different bullets and the image property to give an image as the bullet.

Bullet Type CSS Style Code Example Disc .bullet {list-style-type: disc;} List Item 1 Square .bullet {list-style-type: square;} List Item 1 Circle .bullet {list-style-type: circle;} List Item 1 Numbers .bullet {list-style-type: decimal;} List Item 1 Lower Roman .bullet {list-style-type: lower-roman ;} List Item 1 Upper Roman .bullet {list-style-type: upper-roman;} List Item 1 Lower Alpha .bullet {list-style-type: lower-alpha;} List Item 1 Upper Alpha .bullet {list-style-type: upper-alpha;} List Item 1 Image Bullet .bullet {list-style-image: url(/images/icons/arrow.gif);} List Item 1

3. Using Tables and image bullets, list can be created within small areas

For this create an image bullet and do the following:

1. Create a Table with each row having the same height. Now place the list items into their respective rows.
2. Now in front of the first item place the bullet image.
3. For the selected bullet image give the align property as absolute middle.
4. Now copy-paste the bullet in front of all the other list items and your table bullet list is ready.

Absolutely FREE Web Templates
Check out these quality free web templates and download them without any registration or sign-up!

FREE Flash Actionscript & Animation Guide
Learn Flash the easy way using these easy-to-follow tutorials! Get your basics right or learn advanced flash actionscript!

Quality Dreamweaver Templates
Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization