There are occasions when you want to add a list of items to your web page with dots or "bullets" appearing before each point. This tutorial shows you how you can do this using the free Microsoft Expression Web editor. I will also discuss how to use your own customized bullets in place of the default bullet points provided by HTML and CSS.
Note: if you are not sure what a bullet point list (technically, an unordered list) is, see the "Prerequisites" section below, where it is used.
As implied by the subject matter, this article assumes the following.
You already have a website. If not, please read How to Create a Website first.
You have at least some basic knowledge of how to use Expression Web to maintain it.
Open your web page in Expression Web and put your text cursor at the spot where the list is to begin. You can do this by moving your mouse pointer to the location and clicking it.
Click "Format | Bullets and Numbering" from the menu. That is, click "Format" from the menu bar, followed by the "Bullets and Numbering" line in the submenu that drops down.
A dialog box with the title "Bullets and Numbering" will appear.
Click the "Plain Bullets" tab near the top of the dialog box. (Don't worry, I'll discuss the "Picture Bullets" tab in the section below.)
You are given a few built-in choices for the bullets, namely the solid-colour ("solid-color" in US English) round bullet points, the outline-only circle bullet points, and the solid-colour square bullet points. Click the one that suits your fancy, followed by the "OK" button.
A bullet point of the type you selected earlier will appear in your document. Type your content for that point, and when you are done, hit the ENTER key. You will notice that Expression Web automatically creates a new bullet point for you when you do this. If this is the last item on your list, just hit the ENTER key again and the editor will remove the final blank item on the list and put you in a normal paragraph.
You can also use your own pictures instead of the round, hollow circle or square built-in bullets. For example, you may want to use ticks before each point, like those you find in a checklist, or perhaps even change the points to arrows.
Copy the image file containing your bullet to your website's images folder. For those who have followed my
main Expression Web tutorial (specifically
chapter 2),
this is the subfolder named images located in the directory on your computer containing your website
files. It will be listed in the "Site View" tab in Expression Web.
If you are wondering, "What's this image file? Where do I get it?", it's just a picture that you draw yourself with an image editor. If you can't figure out how to create one, just use the built-in bullets (see above section). There's no point getting stressed over something that is actually just a minor cosmetic change.
Click "Format | Bullets and Numbering" from the menu.
Click the "Picture Bullets" tab, if it is not already activated. (If you're not sure, just click it anyway. It'll do no harm.)
Click the "Specify picture" radio button, followed by the "Browse" button.
In the "Select Picture" dialog box that appears, go to your "images" folder and select the picture you want to use as your bullet point. Click the "Open" button when done.
Click the "OK" button to dismiss the "Bullets and Numbering" dialog box.
Your picture should appear instead of the usual bullet point. If you have made one that is too big, it will not be resized, but will appear as-is. In such a case, simply hit your backspace key to delete the list, redo your picture and try again.
Otherwise, type your content for the list. The list behaves exactly the same way as the built-in ones mentioned earlier, with new bullet points automatically appearing when you hit the ENTER key, and the final empty bullet point removed by Expression web when you hit ENTER a second time.
If you only want to use the solid round bullet for your unordered list, you can also click the "Bullets" button on the toolbar at the top of the Expression Web window (see picture below).
For the other options (circle, square and customized bullets), you will need to invoke the Bullets and Numbering dialog box by using the menu.
Copyright © 2017-2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Insert a Bullet Point (Unordered) List into Your Website with Expression Web
