Expression Web Tutorials: Learn How to Build Web Sites with CSS & HTML ~ A Place For Beginners
Getting Started Steps
Expression Web Tutorials For Beginners: The Unordered List <ul>
The unordered list tag <ul> creates a bulleted list. More commonly, we use the unordered list tag to form the foundation of a Navigation Menu. So here we have a tag that serves a few purposes.
Now, when we make an unordered list,
every item in the list will be enclosed in a <li> tag.
The <li> tag stands for list item.
One Prerequisite for Making Navigation Menus is the unordered list
The HTML tag used to create an unordered list is the <ul> tag. The Tutorial below will show you how to insert <ul> on your web page in order to create a list.
Then you will learn how to style the <ul> and <li> elements
with CSS in order to make a nav menu.
Making Bulleted Lists Using <ul>
CSS "List" Property and XHTML <ul> unordered List Tag
The Unordered List is the most common way to create a navigation menu. However, you may also find times when you want to create a bulleted list anyway.
That's exactly what the <ul> tag will do by default. If you want a list to have bullets, apply the xhtml tag <ul> to the list. That is done by using the style drop down box located on the formatting tool bar at the top of the EW interface.
Notice the box that has "Paragraph" is the drop down menu I am referring to. Click the little arrow and you will see a set of html tags. In step 2 below, you will go to this menu and choose the <ul> tag to make a bulleted list.
***If you would like a Numbered List, then choose <ol> , ordered list.
Above is the drop down list.
Here are the specific steps:
1. Type in the first word of your list.
2. Then highlight that word, and go to the drop down menu and choose the <ul> tag.
3. Now that word you typed in for step 1 will have a bullet in front of it.
4. Press the enter key and add your next word, and so on.
Next, Create a CSS style to style the unordered list :
1. Click "New Style" in the apply styles task pane.
2. Choose an appropriate selector. A descendent selector will work in this situation. So if you placed this list inside the #main_content or #page_content area, your selector will be #main_content ul.
3. Or you can make the selector ul
4. Click on the List category and choose the type of bullet you would like. It can be a square or circle, etc. .
Notice, you can use an image of your own for the bullets.
Likewise, you can remove the bullets from your list simply by choosing list-style:none. If making a Navigation menu, please select none for your list-style-type.
Use an Element Selector
ul {
list-style-type: disc;
}
This style will style all the unordered lists on your page. It's better to specify the exact div your list resides in.
OR.......
Use a Descendent Selector
#main_content ul {
list-style-type: disc;
}
This rule will only style an unordered list that is within the main_content div of your page.
Use an Image for your Lists
ul {
list-style-image: url('picture.jpg');
}
In Expression Web, click on the List Category in the Style Builder and notice the option to locate an image for your bulleted list. Just click Browse to locate an image.
The image will be automatically placed as a bullet as long as you styled your list with <ul>.
If you want a different image for each bullet, then you will need to create different styles for each <li>. Otherwise, style the <ul> with the image for the list, not <li>.
You can also adjust the margins of the <ul> while you are at it. Most browsers add a default margin when the <ul> is applied. So feel free to zero out margins and padding.
Summary
- Type the first word of your soon to be list.
- highlight the word
- Next, apply the <ul> tag by choosing it from the drop down menu in the formatting tool bar.
- Continue to add more items to your list by placing your cursor at the end of the first list item and press enter. A new <li> will be created and you can type in your next item. (each word you are placing in the list will become a link in your nav menu.)
- Next, we need to style the <ul> and <li> tags. This is done in the next tutorial.
Style the horizontal Navigation Menu
Ordered List
You can make an Ordered List the Exact Same Way. The ordered list is a numbered list:
1.
2.
3.
etc.
