Syllabus

---------------------

Calendar/Schedule

---------------------

Lecture Notes

---------------------

Projects

---------------------

Resources

---------------------

Student Work

 

 

 

      

Art 444 Lecture Notes

Creating Ordered/Unordered Lists & Named Anchors

The List tag creates numbered, bulleted and/or indented text. There are three types of lists; Ordered, Unordered and Definition lists.

Unordered Lists -creates an indented list with solid circle bullets

  • nose
  • eye
  • ear

<UL> -specifies an Unordered List
<LI> -denotes each item in the list

Example:
<UL>
<LI> nose
<LI> eye
<LI> ear
</UL>

Dreamweaver: select the text and click the text Unordered List button in the Properties palette.

Different bullets types for Unordered lists:

<LI TYPE=circle> -the default shape for an Unordered List
<LI TYPE=square> -changes the default circle bullet to a square

Nested Unordered List -creates indented sub-lists within a list

Parts of the body:

  • Head
    • eye
      • pupil
    • ear
    • mouth
  • Hand
    • thumb
    • finger

     

Ordered Lists -creates an indented list in a numbered sequence which is the list type default. Other types of ordered lists can be created by changing the list type in the <LI> tag. Notice that the type face for the sequential number can't be modified.

  1. purple
  2. orange
  3. black

<OL> -specifies an ordered list
<LI> -denotes each item in the list

Dreamweaver: select the text and click the text ordered list button in the Properties palette.

Different types of ordered lists:

<LI TYPE=1> -Numbers
<LI TYPE=A> -Uppercase letters
<LI TYPE=a> -Lowercase letters
<LI TYPE=I> -Uppercase Roman numerals
<LI TYPE=i> -Lowercase Roman numerals

Dreamweaver: add these to the first <LI> tag to change the type of Ordered list within the HTML code inspector.

Definition List -creates text indents/outdents with no bullets or numbers. Uses the <blockquote></blockquote> tags.

This text is indented.

Dreamweaver: select the text and click the text indent/outdent buttons next to the ordered/unordered list buttons in the Properties palette.

Named Anchors -these allow you to move to a specific part of a HTML page. Named anchors are incorporated into the <A Href> tag.

Example: Clicking here will bring you to the top of this page.

How it is done in Dreamweaver: First you need to create a Named Anchor in your page where you want the specified link to direct the user to. This is the tag in HTML: <A name="top"></A> To place Named Anchor using Dreamweaver, go to Insert> Invisible Tags> Named Anchor. Type out the name of your anchor in the text field with no spaces, keeping it short! Click o.k. You will see a little yellow anchor icon appear at this spot. If you click on the anchor you can change the name of it. Because it is an invisible you will not see it appear when you preview your page in the browser.

Now you will need to add the directive to a link to go to the Named Anchor. After creating a text or image link, add the number sign (#) and the name of the anchor. It should look something like this in the Link text field: #top. If you need to link the user to a different page at a specific spot, first type the name of the new page and then add the number sign (#) and the name of the anchor with no spaces between the end of the file and the # and name. Here is an example: newpage.html#top. You need to preview your page in the browser to see the Named Anchor in action.

 

Back to top of page | School of Art, Design and Art History | SDSU Main