The three types of lists

There are three types of lists in web documents. Their name and examples are shown below. I have deliberately used long lines for some of the items so you can see what happens if you enter longer pieces of text.

Unordered or bulleted lists	Class locations include: The Arizona Health Sciences Center Library on Campbell Avenue The Maricopa County County Office located at 4341 E. Broadway Road, in Phoenix The Tucson Public Library
Ordered or numbered lists	Class locations include: The Arizona Health Sciences Center Library on Campbell Avenue The Maricopa County County Office located at 4341 E. Broadway Road, in Phoenix The Tucson Public Library
Definition lists	Web searching class October 15, 7-9 pm, in the Maricopa County County Office, at 4341 E. Broadway Road, in Phoenix

The definition list gets its name because it was set up as a two part entry, as in a definition. The first line or the definition term (the Web searching class text) is flush to the left margin. The subsequent lines for the definition section is indended but there are no bullets or numbering here.

Creating lists in Dreamweaver

The Properties panel located at the bottom left area of the general workspace has icons for creating bulleted (unordered) and numbered (ordered) lists.

If you have no text and click on either of these icons, the program immediately inserts a bullet or a number, depending on which icon you select, and you type away. Press the Enter key to go to the next item. When you are through with the list, click on the icon again (to unselect it or turn off the list code) or press the Enter key twice.

If you have text typed, you can make it a bulleted or numbered list, but you have to work some with the text. (You might want to look at the video about making lists for an example.) If you have several lines of text (separated by a line break command), and you pick bulleted or numbered list for one of these lines, Dreamweaver treats all lines the same until it finds an ending paragraph. That is, all lines are indented, but only the first item has a number or is bulleted. To fix this, you have to move the insertion point to the end of the line, press Enter, then, when sitting on the next line down, press the Delete key to bring the lower line up. You continue with this pattern until all the lines are completed.

To create a definition list, choose Text from the menu bar, then List and pick the Definition List option. A definition list puts your cursor at the left margin, and you type in the first part (the definition term section). Press the Enter key to go to the indented section. You type that part, and then press Enter, and Dreamweaver assumes you are ready for the "next definition". There are no bullets or numbers with this type of list. When you press the Enter key again (so you have pressed it twice in a row without typing anything, Dreamweaver exits you from the definition list. You can also go back to List, and unselect the definition option to turn off the definition list coding.

When you create either unordered lists or ordered lists, when your cursor is "inside" the list area, the button labeled List Item.. underneath the two list icons is activated. Clicking on this button brings up the List Properties dialog box. Use this dialog box to change the style of bullets for an unordered list or the style of numbering for an ordered list.

You can create lists within lists, if you are using unordered or ordered lists. Select the text in an existing list that you want to reformat with a different style. With the insertion point inside the text area, choose the Indent button in the Properties panel (or you can select the Text, Indent command from the menu bar). Dreamweaver indents the selected text and creates a separate list. You can change the properties of the list as already described.

This pretty much covers the basics of creating the three types of lists supported on the web. There will be documents which do not require this feature, but it is useful many times. I personally use definition lists a lot, to help provide some visual "variety" on a web page. All three types of lists as well as changing of the style of the bulleted or numbered list are shown in the video Creating Lists in Dreamweaver.

Set up your directory structure now

Before you start creating links, especially links to other documents in your own "site," be sure that you have created the structure for your website on your local computer, as it will be on the host server. Dreamweaver allows you to move files, in the "site panel" (we will discuss this in Lesson 6). However, it is worth the time to take a few minutes to think out your website structure. There is no set way to set up a site. It is perfectly reasonable to create a site in which all the files are kept in one folder (or directory). You may decide to put all of your images in one folder and your HTML files in another within the "parent" folder. You may be working with a group of people on the site, and decide that each person should have a separate folder.

I am a big believer in keeping your directory structure as simple as possible. If you are planning on a modest site with perhaps 20 documents, including graphics, just keep the files in one directory. If you plan on expanding your website within the next year, then start thinking about logical folders for the parts of your site.

Whatever your structure for your site, make it the same on your local computer as it will be on the host computer.

Absolute versus relative addresses for links

Again, as background before you start adding links to your web pages, keep in mind that there are different types of "addressing". Although right now we are talking about web documents, this also applies to references to web images.

Absolute addresses require the complete URL, such as

http://www.arizona.edu - to reference the University of Arizona's home page
http://w3.arizona.edu/~english - the home page for the University of Arizona's English Department
http://www.reeusda.gov/1700/statepartners/usa.htm - a site that links to land grant institution home pages
http://www.aceweb.org/ - a site about a professional organization for communicators and technologists, especially those affiliated with land grant institutions

If you are linking to a page not found on your host server, you need to make the address absolute. All absolute addresses require starting with http:// or whatever the complete URL is (some page linkes can begin with https:// or ftp://).

Site root-relative addresses are indicated with a leading forward slash

/aginfo.html to link to the College of Agriculture's home page, when you have a site on the CALS server
/extension/ to link to the Extension's home page, when you have a site on the CALS server
/PLP/plpext/ to link to the Plant Pathology Extension area, when you have a site on the CALS server

You would use this type of coding if the page or image were on another site on the same server as you are located. In essence, you are dropping the leading http://cals.arizona.edu part of the URL. You would have to type these addresses in, since they would not be part of the site you control and thus would not be on your local computer.

Pretend that this is a picture of your current website, in terms of its directory structure. There are three folders with files in the folders, and some files at the "root" or main area. You would use links here called document-relative addresses.

Document-relative addresses assume that the link is within the current folder (your folder) or folders under your main folder.

readings/burningissues.pdf would reference the file burningissues.pdf within the readings folder
exams/quiz1.html would reference the file quiz1.html within the exams folder
syllabus.html would reference the file syllabus.html within the same folder as the document with the link

Dreamweaver will create this coding for you, as long as you know which file you want to link to and the file is found on your local computer. Note: the file could be an empty file initially, but the file needs to be listed in the "files panel" area.

Where you can, you should use either relative links to reference pages on the same server as your site, or document-relative addresses. This facilitates moving the files to another site (server) without having to change all of the links.

Creating textual links to other documents

The heart of the web is linking to other documents. I cannot image any web document that does not have a least one link (this would be true certainly for HTML documents). If nothing else, you need to have a link back to your "parent" unit, like a class linking to the affiliated department, a project linking to the department or county or college, etc. You will probably create most of your links using the Properties panel window. So be sure the Properties panel is displaying. Be sure that the document you are adding links to has been saved on your local computer. You begin by highlighting the text in your open document that you want to become a link.

The above illustration shows the three ways to indicate the document to be linked to.

• The Link text box lets you type in or paste in the filename or the complete URL
• The Point to file icon lets you click on this icon and, while holding down the mouse, drag the mouse to a filename you can see on your computer (probably a filename in the site (or files) window display).
• The Folder icon lets you open up your local hard drive and navigate through folders to find the file.

Which method you use is a matter of taste and what you get used to. Remember, however, that if you use the Point to file method or the Folder method, the file you "select" must be part of your website. If you use one of these methods, look at the resulting text that is put in the text box. Be sure that it is NOT referencing your local hard drive, or the link will not work once the file is put on the host server.

As you plan your website and your links, be careful about leading people away from your website, especially on your initial page or with links found at the top of your web page. If at all possible, try to make the text on your links as clear as possible (so the user knows that type of information will come up on the link). Also do not use a link with a name of "click here". This is considered poor web design, and also it is not helpful to a person using a screen reader and hearing the links read.

You will notice in the Properties panel a window labeled Target. If you leave that option blank, when you create a link, then as the user selects the link he/she is moved from your current page to the linked page. If you select the option of _blank from the drop-down options, then a NEW window is opened when that link is selected. Some people like to use this option of opening a new window when the link is going to an external website. Be careful about over-using this option, or inexperienced users visiting your site can end up with numerous windows open on their local computer. Using the _target option and general links are shown in the video Creating Links and Mailto Links in Dreamweaver.

If you create a link on your document and want to remove the link, put your insertion point somewhere inside the link, and select Modify from the menu bar, then Remove link.

Linking to a part of a document

HTML coding permits you to link to a section of a longer web document. This is not a type of link that is used a lot, since the general trend is to provide shorter web documents. However, you can still see occurrences of "navigating with anchors." A typical application would be an initial "table of content" listing at the beginning of a (longer) document, with links which take the user to a particular part of the document. Actually you can direct people to another part in the current document or a specific location in another document. Creating this type of link is a two-step process:

First you place a named anchor somewhere on your web document. Highlight the text where the anchor will be put and the click on Insert from the main menu bar, then Named Anchor. The dialog box shown to the left appears.

Type in the anchor name (this is an invisible code which the user will not see). Keep it short but meaningful to you. Use one word, even if it is a long word. Once you have assigned names to parts of your document, you can link to those named areas. After placing a named anchor, you will see a (yellow) anchor marker. If you click once on this anchor marker, the Properties panel for this anchor appears.

You reference these anchors in the normal link section of the Properties panel. However, rather than reference a filename, if the anchor is in the same document as the link, you would type in the anchor name proceeded with a # symbol. In the example shown below, the link is #grades.

You can also reference via a link a "named area" in another web document. Rather than just reference the HTML document name, you would reference the filename and then the anchor name, such as syllabus.html#grades. Named anchors is demonstrated in the video Using Named Anchor Links in Dreamweaver. This is not a feature used by many people.

Link colors

In Lesson 2, I introduced the option for assigning colors used on a web page, through the Modify, Page Properties menu.

Besides assigning colors to the page background, and regular text, this dialog box allows you to assign colors to links (before the link is selected by the user), visited links (links seen already by the visitor during that session) and active links (the link currently being selected), as well as rollover links (the link's color when the mouse is over the link). Again, as you start changing the color for the background or use an image for the background, consider changing the link colors to make sure they can still be seen clearly against the background. General advice from web designers is to make the "unvisited" link a darker or more noticeable color, and the visited link less dominant. Sometimes you might just change the link color and the visited link and other times you might want to change the colors for all four options.

The 2004 release provides another option through the Page Properties window, shown above. There is an option to turn off the display of underlining in links, but if you used this, you need to provide a color change on the link when the mouse is over the link. Explore this feature on your own, if you wish. This choice was not found in earlier releases of Dreamweaver.

Email links

A final type of link that you may want on your page is an email link. The official HTML coding is called a MAILTO code. When an email link is clicked, an email message dialog box pops up, which lets the user send an email message immediately to the person associated with the link. To create an email link, put your cursor where you want the tag to be and click on Insert, then Email Link and this box appears:

Another method of entering an email link is to pick the email icon in the Common set of Insert objects, above the document section.

The email link is an easy way to add some interactivity to your page but recognize that not everyone will be able to send email through this link. The user's browser must be set up for emailing for this tag to work.

Although most faculty and staff using their browser in a work location would have this feature activated, inexperienced users who installed their own copy of Netscape or Internet Explorer may not have turned on this feature. Furthermore, this feature is often turned off on public machines, like in a library or computer lab, since a single person is not using these machines. (Or if the feature is turned on, it is giving as the return email a generic email for that lab.)

Therefore, it is a good idea to not bury your email address in the link, but to spell out the email address, as in the above example, so someone can print the page or read the page and jot down your email, to later send you an email through a regular email program. In other words, don't make the text part of the email input box your name, but have it show the email.

This document is part of a series of lessons on Dreamweaver Basics for the 2004 release, given by Linda Ffolliott, College of Agriculture and Life Sciences at the University of Arizona.