Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Whenever you enter text in Dreamweaver, it's a good idea to run Dreamweaver's spell checker (Text > Check Spelling), which works just like the spell checker in your word processor. And remember, the only thing worse than missing spelling mistakes in your work is having your boss or even worse, your clientcatch them for you. Save yourself the embarrassment by taking 30 seconds to spell check your pages.

Another way to move text on a page is to select the text and then drag it to a new location.

1.

In your word processor, select the text you want to copy.

2.

Still inside your word processor, choose Edit > Copy.

3.

Switch to Dreamweaver and place your insertion point where you want the text to appear.

4.

Choose Edit > Paste.

When text is pasted into Dreamweaver, the formatting is stripped away.

Noteworthy

If you don't want to be bothered with all the text reformatting you'll have to do when you paste content into Dreamweaver, consider saving your Word file a103. When the file is opened in Dreamweaver, most of the text formatting should be retained.

The copied (and now unformatted) text is placed where you clicked, ready to be formatted.

1.

Select the text on your page that you want to format.

2.

From the Font menu in the Property Inspector, choose a font list.

When someone visits your site, the browser will try to display your page using the first font listed. If that font cannot be displayed, the browser will try to use the second font, and so on. For more on how fonts work, see the sidebar "How Fonts Work on the Web."

When you choose a font, the text is reformatted. Note too that the Style menu in the Property Inspector displays Style1an automatically created style.

Noteworthy

As you're working in Dreamweaver, you sometimes may goof up. Hey, nobody's perfect. Although you can use Edit > Undo to correct a mistake, Dreamweaver packs an even better tool: History (Window > History). The History panel tracks all the steps you perform as you're working. If you want to go back a number of steps, just drag the vertical slider on the left to literally step back in time.

3.

With your text selected, open the Size pull-down menu in the Property Inspector and choose a size. To change the unit of measurement being used, select an option from the Font Unit menu.

Noteworthy

It's good design practice to keep fonts to a minimum on your page. Use only two or three fonts to help visitors distinguish among headlines, body copy, and navigation elements.

You can also type a value directly in the Size field. The menu also offers relative sizing (xx-small, medium, larger, and so on), but it's best to stick with values.

Next, you'll apply some color to your text.

4.

Select the text on your page.

5.

In the Property Inspector, click the Text Color box to open Dreamweaver's web-safe color palette.

Having the ability to sample a color that's used in another piece of text or in a graphic helps keep color consistency throughout your pages.

When Dreamweaver's color palette is open, your cursor changes to an eyedropper. With the eyedropper, you can not only pick a color from the color palette, but you can sample a color from anywhere onscreen. For more on working with web-safe colors, see the sidebar "Choosing Web-Safe Colors."

6.

Choose a color from Dreamweaver's color window, or sample a color from another area of your screen.

Noteworthy

To ensure that your text appears in your visitor's web browser just as it does in yours, stick with sizing text in pixels.

How Fonts Work on the Web

Unless you use Flash Text or save your text as a graphic, if you want your text to appear as you designed it, you can use only fonts that your visitors have installed on their machines. To understand why, you've gotta understand how fonts work in web design.

Whenever you apply a font to text on your page, a reference to that font is created in your page's background code. Fonts are not embeddedthey're not uploaded to your web space when you publish your site. That's critical to remember. When a surfer opens your web page, the person's browser reads the code and looks for font references. When a reference is found, the browser looks for the font on the surfer's hard drive. If the browser can't find the font, it uses a default font instead, usually something like Times New Roman or Courier. So if you've used a font that isn't very common, there's no way for the visitor to see the font (because the visitor won't have it on his or her computer).

To make sure that you use only fonts that everyone else has, just choose one from Dreamweaver's font list. Open the Font menu in the Property Inspector to take a look. The list consists of groups of fonts that are common to both Windows and Mac machines. When someone visits your site, the browser will look for the first font, and if it can't find that font, the browser will look for the next font, and so on.

So trust Dreamweaver's font list for your text, and whenever you want to throw in some artsy or decorative text, use Flash Text or save your text as a graphic in a program like Photoshop or Fireworks.

Even though Windows and Mac OS X machines have similar fonts (such as Arial and Times), the fonts can still be quite different. Fonts on Macintosh computers are usually slightly smaller than their Windows counterparts, making it important to test your site on both platforms.

Retaining Formatting with Paste Special

Using the regular Paste command blows away the formatting that your original text had. Paste Special, which is new to Dreamweaver 8, lets you control the formatting of the text as it's being pasted. This command provides four formatting options that take some of the aches out of reformatting your pasted text.

Here's how to paste with Paste Special:

The text is placed on your page using the formatting setting you specified. If your text appears formatted in a way that you didn't expect, then you may have to choose Edit > Undo and try again, selecting a different Paste Special option.

Choosing Web-Safe Colors

Consumer-grade monitors are terrible at displaying color. If you have a print design background, I need not say more. But if this is news to you, try previewing your site on a variety of computers in a variety of lighting conditions. Your reds and blues may look like scarlets and purples. Don't be alarmedthat's just the way it is.

To get around this limitation, a palette of 216 web-safe colors was created. These colors remain consistent on monitors and accommodate the color differences between Windows and Macs.

Thankfully, technology has progressed, and sticking with web-safe colors is not as important as it used to be. Still, some designers strictly limit their color work to the 216-color palette. By default, Dreamweaver plays conservative and sticks to web-safe colors, but these days you can use pretty much whatever colors you like.

In web design, color is determined using something called the hexadecimal color system. If you happen to know the hexadecimal value of the color you want to use, you can type it directly in the Text Color field.

If you're working with a blank new document and haven't saved it yet, Dreamweaver won't let you use Flash Text. Make sure to save your file firstthen you can get started with Flash Text.

1.

Click your Dreamweaver page where you want your text to appear.

2.

Choose Insert > Media > Flash Text.

3.

In the Insert Flash Text dialog box that appears, type your text in the Text field, or paste in text from elsewhere. Press Enter (Windows) or Return (Mac) to set any line breaks you want.

[View full size image]

Imminent Doom

As you type or paste text in the Insert Flash Text dialog box, make sure to press Enter (Windows) or Return (Mac) at the end of each line, before you click OK. Otherwise, your Flash Text will appear as a very thin gray line on your page (in other words, Dreamweaver will try to fit all the text in the paragraph onto a single line). Once you click OK, this cannot be fixedthe only solution is to delete the text and start again.

4.

Use the formatting options at the top of the dialog box to set the look of your text.

Set the font options as usual. Click the swatch in the Color field to set the color of your text. To change the color of your text when the visitor's mouse rolls over it, select a color for Rollover Color. Then click the Apply button on the right to see how your text will appear on your page.

5.

If you want to set a hyperlink for the text, enter the link's URL in the Link field.

Geek's Delight

By default, Flash Text SWF files are saved at the root level (the top level) of your local site. If you want to save the SWF file in a different location in your site, click the Browse button at the bottom of the Insert Flash Text dialog box to specify where you want the file stored.

We'll talk more about hyperlinks shortly.

6.

If you want, set a background color for your Flash Text by clicking the swatch in the BG Color field and choosing a color.

7.

In the Save As field at the bottom of the dialog box, name your Flash Text file (or you can use the default name) and click OK.

8.

If you have Accessibility turned on (it's on by default), set the Title, Access Key, and Tab Index information in the Flash Accessibility Attributes dialog box that appears, or just leave the fields empty for now and click OK.

Your Flash Text appears on your page.

When you upload your site live to the web, make sure to upload all the SWF files for your Flash Text, too. Otherwise, they won't appear on your pages.