The Property Inspector

Everything you insert into a page—including text, graphics, tables, and horizontal lines—is considered an "object" that has certain "properties." When you select any object, the Property Inspector—the flat window that first appears at the bottom of the work station—displays all the formatting properties associated with that object, including any links.

Often the Property Inspector will have a small arrow in the lower right corner, indicating that there are further options. If you click on the arrow, you will see them. These options are listed below:

• Properties of text: Style, font, size, text decoration, alignment, bullets, numbering, indent, and links.
• Properties of images: Height, width, source (path of the image), alignment, link, and alternate text (text displayed when the mouse rolls over the image).
• Properties of horizontal lines: Width, height, alignment, and shading.

Using the Text Properties Palette:

The text properties palette is used for formatting the text on your page. It contains the following functions:

• Format: Heading styles are used to apply a standardized hierarchical structure to formatted text. The smaller the number of the heading, the bigger the heading will be. For example, Heading 1 describes the largest heading. To change the format, click on the heading on your page and then, on the properties palette, click on the arrows next to the word "Format." Select the desired format from the drop down menu.
• Text style: This is set as default font. The default font is the one defined in Dreamweaver preferences. You can change the default under the preferences menu (which will then ensure that any pages you create use the same default font) or you can change it on a particular page, either for the whole page or for selected text on the page.
• Text size: Applies either a specific font size (1 through 7) or a font size (+ or -1 through + or -7). Font size is relative to the BASEFONT size (the default is 3). There is no way to specify a particular point size for fonts in an HTML tag (since the end users can change the way their browser displays text on their screens).
• Text color: You can choose the color of the text. However, not all colors will appear on the end user's screen in the same color you selected. Thus you should choose a browser-safe color by clicking the color box, or enter a hexadecimal value (for example, #FF0000) in the adjacent text field.
• Text alignment: This aligns text left, center, or right (in much the same way as you do when using a word processing application).
• Link: This makes the text that you have selected into a a hyperlink. You can create a link in a number of ways. (1) Copy the URL from your web browser and paste into the link box (2) drag the Point-to-File icon to a file in the Site window (3) Click the folder icon to browse to a page in your site (4) type the URL in the link box
• Ordered list: This turns the selected paragraph or heading into an item in a numbered list. If no text is selected, a new number list is started. ( )
• Unordered lists: This turns the selected paragraph or heading into an item in a bulleted list. If no text is selected, a new bulleted list is started. ()
• Indent and Outdent: This indents or outdents the selected text. In a list, indenting creates a nested list, and removing the indentation unnests the list. ()
• Target: This specifies the frame or window in which the linked page should load (not needed unless you are using frames).

Use the Text Indent button to create subheadings.

Creating links:

• Absolute link = a link to to another site or page that is not on your web site. They include all of the information about the site and begin with http:// An example would be: http://www.d.umn.edu/~hrallis
• Relative link = a link to another page within your site. An example would be OfficeHours.html which is a page within my ~hrallis site.
  • Creating an absolute link:
  • Highlight the word that you want to make into a link. In the properties palette, click in the blank link box.
  • Type in the URL of the page to which you wish to link. [Note: It is actually better to copy the page URL from your browser so that you avoid typing in an incorrect address. (highlight the URL --> choose Edit --> Copy) and then paste it into the link box in Dreamweaver.

  

  • To create a relative link (to a file within your site):
    • Highlight the word that you want to make into a link.
    • In the properties palette, click on the icon of a folder (this is in the middle of the palette).

  

• Browse through your computer to your web site and locate the file to which you want to link.
• Click on the "open" button (this is a bit confusing as you aren't trying to open the file -- you just want to link to it! Nevertheless, by clicking on "open" you creating the link command). Make sure the Relative To is set to document, before clicking OK.

• Creating an e-mail link This is used when you want users to be able to send an e-mail without having to type in the e-mail address. When users click on an e-mail link a new message window will open using the mail program associated with the user's browser (e.g. Outlook Express will open, and a new message window will appear with the e-mail address already entered).
• 

• To insert an e-mail link, place the cursor on your web page in the place in which you want to insert the link or highlight the text words that you want to appear as the e-mail link.
• Click on the Insert E-Mail Link on the object palette.
• In the E-mail field, type the e-mail address mail should be addressed to.
• Click OK.

Begin entering text, images, and horizontal lines to your homepage. Try using the different options listed for each on the property inspectors toolbar.