Home arrow Web Standards arrow Page 4 - Web Standards in Dreamweaver, Part 1

Web Standards in Dreamweaver, Part 1

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.)

Author Info:
By: Apress Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 23
August 04, 2004
  1. · Web Standards in Dreamweaver, Part 1
  2. · The Rules of Writing XHTML
  3. · Empty Elements
  4. · Lists
  5. · XHTML in Dreamweaver MX 2004
  6. · Authoring Valid CSS
  7. · The Basics of CSS

print this article

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.

Ordered Lists

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

Unordered Lists

Use unordered lists for a list of unordered items, for example, a list of attributes.

     <li>list item one</li>
     <li>list item two</li>

    This is displayed in most browsers as shown in Figure 2-3.


    Figure 2-3. Unordered list in a browser

    Definition Lists

    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.

         <dt>the term</dt>
         <dd>the definition</dd>
         <dt>another term</dt>
         <dd>another definition</dd>

    This markup is displayed in most browsers as shown in Figure 2-4.


    Figure 2-4. Definition list in a browser

    Special Characters

    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.

    Buy this book now.

    blog comments powered by Disqus

    - Mozilla Popcorn Maker 1.0 Makes Videos More...
    - Completing a Configuration for Chrome and a ...
    - Getting Connected with Firefox and Chrome
    - Configuring Servers and Databases with Chrome
    - Configuring Firefox for Chrome and a Server
    - Designing the Elements of a Web Page
    - Matching div heights with CSS and JavaScript
    - Forms
    - Get Down With Markup
    - If I Said You Had a Beautiful Body...
    - Web Standards in Dreamweaver Part 3
    - Web Standards in Dreamweaver, Part 2
    - Web Forms
    - Making Lists Using XHTML
    - Web Standards in Dreamweaver, Part 1

    Watch our Tech Videos 
    Dev Articles Forums 
     RSS  Articles
     RSS  Forums
     RSS  All Feeds
    Write For Us 
    Weekly Newsletter
    Developer Updates  
    Free Website Content 
    Contact Us 
    Site Map 
    Privacy Policy 

    Developer Shed Affiliates


    © 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
    Popular Web Development Topics
    All Web Development Tutorials