The first half of this chapter focuses on the use of XHTML and CSS when working in Dreamweaver. Discover why developing in XHTML instead of HTML is a good idea and how to start working in valid XHTML Transitional. Some basics of CSS design are also covered. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, Rachel Andrew and Kevin Marshall, published by Apress, 2004, ISBN: 1590593480.)
Web Standards in Dreamweaver, Part 1 - Lists (Page 4 of 7 )
Mark Lists As Lists
In HTML 4.01 and XHTML there are three nondeprecated list definitions to choose from: ordered list, unordered list, and definition list. It is important to use the correct type of list when entering your informationódo not simply choose one for visual effect. Once again, if you are going for a certain look, use CSS to achieve it.
Use ordered lists for a list of items numbered in sequential order, for example, a list of step-by-step instructions or ranked items.
<li>list item one</li>
<li>list item two</li>
This is displayed in most browsers as shown in Figure 2-2.
Figure 2-2. Ordered list in a browser
Use unordered lists for a list of unordered items, for example, a list of attributes.
This is displayed in most browsers as shown in Figure 2-3.
Figure 2-3. Unordered list in a browser
Use a definition list if you have a list of items and explanations. By using this type of list, you make it clear to someone using an assistive technology such as a screen reader (or other device that can only see the structure of the document) that the list contains items and their definitions.
If you create this kind of list just by altering the presentational aspects of the page, your intentions may not be clear to someone who cannot see that presentation. The definition list includes <dt> tags for terms and <dd> tags for definitions.
This markup is displayed in most browsers as shown in Figure 2-4.
Figure 2-4. Definition list in a browser
When inserting special characters such as brackets (< >) or the ampersand (&), you should always use the correct Unicode character entities. When you enter common characters into Design view, Dreamweaver MX enters the correct character code for you, for example, Dreamweaver adds < in place of < and & in place of &. However, if you are working in Code view or need to insert a character that is not on your keyboard, there are additional characters available from the Text tab of the Insert toolbar that you can insert into the document. The Text tab is shown in Figure 2-5.
Figure 2-5. Character entities in the Insert toolbar
The more unusual characters can be found by clicking the button on the right of the Characters tab (or clicking the arrow on the far right and selecting Other Characters). This opens a panel of characters to choose from and insert into your document, as shown in Figure 2-6.
Figure 2-6. More character entities
This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.