Text and Fonts: Formatting, Linking, lists, Flash text.

The Property Inspector

To add words, simply type as you would normally. To change how the words look, highlight them and use the Property Inspector to alter them:

The Property Inspector.

The Property Inspector will be your most useful tool in Dreamweaver. It will change depending on what you are trying to do. For example, if you are working with text, it will look like it does in the image above. If you are working with an image, it will change to show you information about that image.

Let’s look at what each section of the Property Inspector does:

Text format and font style

The pull-down menu next to Format controls the size of text. For example, if you have a main heading, you can highlight your text and choose Heading 1 from the menu. For a subheading, choose Heading 2, etc.

Tip: I find Heading 1 to be quite large. I usually begin at Heading 2 and continue from there.

The second pull-down menu allows you to choose the font style of text. As mentioned above, it is best to use only one or two font styles on your website. You will notice that each font selection doesn’t list just one font style, but three or four. This is in case your visitor's browser version cannot use the first font style, in which case the second or third style will be used.

Tip: A good idea is to wait until you have finished a page, highlight it all, and then choose the font style. This will also help you remember not to use many different styles on one page.

Font size

By highlighting text and then choosing a number from this pull-down menu, you can change the size of the text. The default (automatic) size is 3, so if you choose "none" or 3, there will be no change. If you choose 2, the text will be one size smaller. If you choose 4, the text will be one size bigger, etc. If you choose a number with a + or – sign in front of it, the size of the text will go that much larger or smaller than 3. For example, -1 will give you a size of 2.

Tip: I find the default size of font to be slightly large, so I have the text on my website in size 2.

Tip: Remember that text on Apple and Mac computers is a little smaller. You will need to test your site on a Mac to make sure people can still read it. Also, think about your audience. If they are older, you will need to make sure your text is large enough.

Text Color

To change the color of your text, highlight it and choose a color from this box . When you click on the box icon, this larger window will pop up with a choice of colors to choose from:

Text color pallet.

You can also type in the exact number of a color in the space next to it if you like. For a chart of colors available to you, see my color table page. Once you find a color you like, you can copy and paste the number of it into the space.

Tip: Remember to keep your colors easy to read. For example, don’t choose a light color for your text if your background is light.

Bold and Italic

Just like a word processor, these allow you to bold and italicize your text.

Justify (Align)

These are options for aligning your text to the left, center,right or both right and left of your page. Remember to highlight your text before choosing one of these options.

Tip: Sometimes Dreamweaver might show text in a browser as centered or to the right when you didn’t ask it to do that. When that happens, simply highlight the text, right-justify it and then left justify it again.

Linking to other pages

This box is to allow you to create links using text or images on your page. You can link to either another website, or another page in your own site.

To link to another website:

1. Using a browser, go to the website you want to link to.
2. Go back to Dreamweaver and highlight the image or text you want to make the link to.
3. Copy and paste the address of the website into the box next to Link.
4. Hit <F12> to preview test your page in a browser.

Tip: Remember that Dreamweaver is not a web browser, so you can’t click on the link in Dreamweaver. You have to use a browser to do that.

Opening a page in a new window

If you want to make the link open in another window, choose _blank from the Target pull-down menu.

Tip: To keep visitors from leaving your website when they click on a link to another website, use the _blank option. This will open a new window, keeping your website open on the first one. Don’t do this with links to other pages to your website.

Lists

Lists make things much easier to read. There are two types of lists you can make: bulleted and numbered.

To make an ordered or numbered list of your favorite food:

1. Type in the first word.
2. Choose in the Property Inspector.
3. Hit <Enter>.
4. Continue to add each word to your list, hitting return after each one.
5. Press <Enter> twice to get out of the list mode.

Your list should look something like this:

1. Pizza
2. Ice cream
3. Fruit
4. Chocolate

To create an unordered or bulleted list, follow the same steps as above but use the icon.

Nested lists

Nested means inside or indented. To create a nested list, or list inside a list, simply highlight the text you want to indent and click the indent icon. Here is an example of a nested list (a list within a list):

• Pizza
• Ice cream
• Fruit
• Apples
• Pears
• Peaches
• Chocolate

Indents

These icons also allow you to indent or outdent text.

Inserting spaces

To add two spaces in a row: hold down the <Shift> key and the <Ctrl> key at the same time, and press the <Space> bar for each space you want.

Inserting paragraphs

To insert a paragraph, simply press <Enter>. This will create a blank line and start at the left side.

Moving to the next line without leaving a space

To move to the next line without leaving a blank space in between, hold down the <Shift> key as you press <Enter>.

Horizontal Line Breaks

To insert a horizontal line, go to the Insert menu and choose Horizontal Rule.

Changing Background Color

To change the color of the page background:

1. Go to Modify.
2. Choose Page Properties.
3. In the Page Properties box, click on the square next to Background: .
4. Click on a color from the selection.
5. Click Apply.
6. Click OK.
   

Inserting Flash Text

Dreamweaver allows you to create text in Flash very quickly. The advantage of this is that you can choose from over 30 fonts. Normally you can only use about four because there are limited number of fonts that browsers can read: Times, Arial, Georgia, Verdana, etc. Another advantage is that you can make the color change when a person puts their mouse over the text.

To create text in Dreamweaver:

1. Put your pointer on your webpage where you want to insert the text.
2. Go to Insert.
3. Go to Interactive Images.
4. Choose Flash Text.
5. A box will open where you can now type in text. Type in some text, such as “Welcome!” in the big Text window.
6. Highlight your text, and from the Font pull-down menu select a font.
7. In the Size window choose a font size such as 16.
8. Next to Color, click on the box and select a color.
9. If you want the color of the text to change when you mouse over it, choose a rollover color.
10. Click OK.
11. Preview your changes in a browser by pressing <F12>. Move your mouse over the text to test your rollover color.

To edit or change your Flash text, simply double-click on the text and the Flash text editing box will open again.

Review

1. How do you insert more than one space in a row?
2. What happens if you hold down the <Shift> key and press <Enter>?
3. What Inspector will you be using most in Dreamweaver?
4. Why is it a good idea to use lists whenever possible?
5. What can you do to use a font on your page if it isn't a browser font?

Practice

1. Double-click on your index.htm page and either type in some text or copy and paste some text from somewhere else. Practice changing the text size, color, alignment and style.
2. Make an ordered list of three items, such as your favorite websites. Test the links in a browser by hitting <F12> while in Dreamweaver.

The Site Map

Keyboard shortcuts