Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction....

21
Materials Credited to DMACC Ag Technology Class Web Design Unit Dreamweaver #4 Lesson Chapter 1 Introduction The two most important aspects of any Web site are what it says and how it looks. In this lesson on text formatting, we'll double our efforts by learning how to control the look of text in our Web pages. In certain respects, formatting text with Dreamweaver is very similar to formatting text in your word processor. The most important thing to understand, however, is that Dreamweaver is not a word processor. And perhaps more importantly, word processing and Web design are totally different worlds. Dreamweaver makes its text formatting tools look and feel like those you're used to in a word processor for a very simple reason—you're most likely familiar with them already. Toolbars, buttons, drop-down menus, and certain icons have become standard across many different applications that deal with text, so why recreate the wheel and add a level of confusion to the Dreamweaver learning curve? So, how does HTML text formatting differ from word processing? Think about it this way: You don't write letters and term papers in the code your printer understands, do you? Your printer responds to a language called PostScript. You format your text by clicking toolbar buttons and making menu selections. Your word processor provides a WYSIWYG view of your document, and takes care of the PostScript for you. If it didn't, few typists would be able to word process without learning PostScript first. This is exactly the same process Dreamweaver follows when you format text. The only difference is in the code each program creates. Your word processor generates PostScript code for your printer, while Dreamweaver generates HTML code for a Web browser. Chapter 2 Inserting Text When you open a file in Dreamweaver, the cursor is always blinking in the upper-left corner. From here you can start typing away, just like in your word processor. It's that simple.

Transcript of Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction....

Page 1: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

Ag Technology ClassWeb Design Unit

Dreamweaver #4 Lesson

Chapter 1

Introduction

The two most important aspects of any Web site are what it says and how it looks. In this lesson on text formatting, we'll double our efforts by learning how to control the look of text in our Web pages.

In certain respects, formatting text with Dreamweaver is very similar to formatting text in your word processor. The most important thing to understand, however, is that Dreamweaver is not a word processor. And perhaps more importantly, word processing and Web design are totally different worlds.

Dreamweaver makes its text formatting tools look and feel like those you're used to in a word processor for a very simple reason—you're most likely familiar with them already. Toolbars, buttons, drop-down menus, and certain icons have become standard across many different applications that deal with text, so why recreate the wheel and add a level of confusion to the Dreamweaver learning curve?

So, how does HTML text formatting differ from word processing? Think about it this way: You don't write letters and term papers in the code your printer understands, do you? Your printer responds to a language called PostScript. You format your text by clicking toolbar buttons and making menu selections. Your word processor provides a WYSIWYG view of your document, and takes care of the PostScript for you. If it didn't, few typists would be able to word process without learning PostScript first.

This is exactly the same process Dreamweaver follows when you format text. The only difference is in the code each program creates. Your word processor generates PostScript code for your printer, while Dreamweaver generates HTML code for a Web browser.

Chapter 2

Inserting Text

When you open a file in Dreamweaver, the cursor is always blinking in the upper-left corner. From here you can start typing away, just like in your word processor. It's that simple.

You'll also find that selecting text in Dreamweaver's Document window is done in much the same way as in other programs:

To select a full line of text, move your cursor over to the left margin. When it switches to a right-pointing arrow, click once. You can then drag down the left margin to select multiple lines.

To grab a range of text, click your mouse where you want to begin your selection. Then hold down your SHIFT key, and click the mouse button where you want the selection to end.

To select text from your keyboard, place your cursor where you want to begin selecting and hold down your SHIFT key. Then move your cursor using the arrow keys. Moving the cursor to the left and right selects characters, while moving it up and down selects entire lines.

Page 2: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

Dreamweaver also takes advantage of your operating system's Clipboard, which means you can copy and paste text between different Dreamweaver documents, as well as from other programs—just like your word processor. Once you have some text selected, you can cut, copy, or paste using these menu commands:

Edit > Cut Edit > Copy Edit > Paste

Or, any of the standard keyboard shortcuts:

  Windows Macintosh

Cut CTRL + X COMMAND + X

Copy CTRL + C COMMAND + C

Paste CTRL + V COMMAND + V

Like almost everything in Dreamweaver, these commands are also available from Dreamweaver's context menus. Simply right click or COMMAND + click your selected text, and choose Cut, Copy, or Paste.

Like all good WYSIWYG applications, Dreamweaver also supports drag-and-drop operations. This simply means that in addition to the standard cut and paste functions, you can move a chunk of selected text by clicking it and dragging it to your desired location with the mouse.

Dreamweaver also allows you to import text from the most widely used word-processing program on the market: Microsoft Word. The added benefit here is that this will retain most of the Word document's original formatting.

In order to import Word documents, you need to use Word's Save as Web Page command located on its File menu. This allows users to quickly reformat Word documents as HTML files. The only problem with Word-generated HTML files is they're chock-full of Microsoft's proprietary code. By this I mean code that only really works well in Microsoft's Internet Explorer. This means these documents won't always look as good in other Web browsers unless you can remove that Microsoft-specific markup.

Dreamweaver has this problem solved. When you import Word HTML files, Dreamweaver removes a large quantity of the proprietary code that Word generates. You're left with a document that is cross-browser compatible and that retains much of the formatting it had as a Word document.

To import formatted text from a Microsoft Word document, follow these steps:

1. In Microsoft Word, save the document using the Save as Web Page command from Word's File menu.

2. In Dreamweaver, go to the File menu and select Import > Import Word HTML. This opens the Clean Up Word HTML dialog box, as shown in figure 4.1.

Page 3: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

Fig. 4.1. Clean Up Word HTML dialog box

Dreamweaver automatically selects the version of Word that the imported document was written in.

3. Now, click OK. Dreamweaver lists all the corrections it made to the HTML code.

So, getting text into a Dreamweaver document is fairly painless. You can type it, copy and paste it, or import it. Other than importing Word HTML, however, how do you actually control its properties once it's there? How do you select a font, modify the size, or change the color of your text? Let's move on to chapter 3 and find out.

Chapter 3

Formatting Text

Remember the Property inspector from lesson 2? The Property inspector is Dreamweaver's central formatting tool—not only for text, but for everything. Remember what I said about the options of the Property inspector changing to suit what's selected in the Document window? Well, since placing the cursor right in the Document window leads Dreamweaver to believe you're going to start typing, text is kind of the default form of content the Document window expects to see. Consequently, the Property inspector's default tools are also geared for formatting text.

When working with text, each drop-down menu and button on the Property inspector affects a specific aspect of your text's appearance, as shown in figure 4.2.

1. Format drop-down menu 2. Font drop-down menu 3. Size drop-down menu 4. Text Color box 5. Bold and Italic buttons 6. Align Left, Align Center, Align Right, and Justify buttons 7. Text Indent and Text Outdent buttons 8. Unordered List and Ordered List buttons 9. List Item button 10. Link field

Page 4: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

Fig. 4.2. Property inspector

Paragraph and Heading Styles

Let's begin with the Format drop-down menu on the Property inspector. You will use this to format paragraphs and headings. In HTML, these are considered block-level elements. Block-level elements force a blank line above and below it, except where to do so would create two blank lines. For example, where you have two paragraphs in a row, there's only one line forced between them because two would look a little odd.

Here's another place where HTML and word processing show differences. To you and me, a paragraph is a series of sentences that relate to a specific topic. There are rules about how a paragraph should be structured, as well as certain formatting conventions, such as the indenting of the opening sentence. To Dreamweaver and your Web browser, a paragraph is purely a formatting technique that affects how a browser displays a block of text. Indenting the first sentence isn't a real possibility, and it's up to you to be grammatically correct.

Let's talk about HTML for a second. Don't worry—this will be really simple. In HTML, the tags used to define a paragraph are <p> and </p>. The browser recognizes the tags as demarking a paragraph, and displays the text in between them accordingly.

When you begin typing in a blank Dreamweaver document, no tag is associated with your text until you press the ENTER key for the first time. At that point, the opening and closing paragraph tags are placed around everything you typed before pressing ENTER, and a second set of paragraph tags are inserted to receive the next block of text.

You can go on typing text like this—just as you would in a word processor—pressing the ENTER key each time you want to begin a new paragraph. If you've brought text in from another application, however, its formatting won't carry over into Dreamweaver.

To apply paragraph formatting to a block of selected text, select Paragraph from the Format drop-down menu on the Property inspector, as shown in figure 4.3.

Fig. 4.3. Format drop-down menu

But what do you do when you don't want an empty line between two text elements. Say you only

Page 5: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

want a line break. No problem. Instead of pressing the ENTER key, use SHIFT + ENTER. A line break (whose tag is written <br>) is inserted without applying the paragraph formatting associated with the ENTER key.

Headings are also block-level elements, forcing a blank line above and below. Just like headlines in the newspaper, you can use a heading to introduce a topic. There are six heading styles, which range from heading 1 (the largest) to heading 6 (the smallest), as shown here:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

You can format selected text as a heading by either selecting a heading style from the first Format drop-down menu on the Property inspector, or choosing Text > Paragraph Formatting and then selecting a heading style from the menu bar.

Choosing Fonts

To set your text font, simply choose a font from the second drop-down menu on the Property inspector, as shown in figure 4.4. Again, this is identical to doing so in your word processor. You can assign a font to selected text, or you can choose a font before you begin typing. If you want to remove font formatting from selected text, choose Default from the Font drop-down menu.

Page 6: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

Fig. 4.4. Font drop-down menu

You'll probably notice a significant difference in the way font values are assigned in Dreamweaver and how it's done in your word processor. In a word processor, you have access to every font on your machine, while Dreamweaver has specific font groupings—listing three or four at a time. Why isn't font formatting the same in both situations?

It comes down to how the final product is delivered. In word processing, the ultimate destination is a printed piece of paper. No matter how many copies you make, they all look exactly the same because the printer gets all its font information from the computer sending it the print job.

On a Web site, the finished product is displayed on the visitor's monitor, and they get their font information from their own machine, not yours. They may not have the font you specified in the HTML document. So then what happens? This is why fonts are specified in groups. You're defining a kind of wish list. It's as if the document is saying to the visitor's browser: "Hi. If possible, I'd like you to use the first font in this list. If by some chance you don't have that font available, here's my second choice. Of course, if you don't have that font, there's always the third or forth choice. Thank you!"

Let's take a closer look at the list of font groups on the Property inspector. For example, one grouping has Arial, Helvetica, and sans-serif. Arial and Helvetica are very similar fonts. The difference is that Arial is common to the PC, while Helvetica is common to the Mac. So, the assumption here is that the designer wants visitors to see Arial, but in case they're on a Mac that may not have Arial, they can use they're Helvetica font, which they are more than likely to have. Lastly, if the visitor doesn't have either font, their browser is instructed to use its default sans-serif font.

What's a sans-serif font? Serif comes from the Latin word seraphim, which is a type of angel. Serif then can be loosely defined as angel's wings. How does that relate to text? Serifs are the little flourishes on the ends of letters depending on the font being used. For example, Times New Roman is a serif font, while Arial is not (which means it's sans-serif, or without serifs). So, when a font group ends with serif or sans-serif, the instruction to the browser is to use whatever default serif or sans-serif font it has if it doesn't recognize the other fonts in the group.

Setting Font Sizes

Setting the size of a font in Dreamweaver is a little different from doing so in a word processor. Instead of the typical word-processor font sizes like 8 points through 72 points, Dreamweaver offers you font sizes of 1 through 7, followed by +1 to +7, and -1 to -7. This requires a short discussion of HTML.

Unlike word processors, HTML uses numbered scales instead of point sizes. There are two scales you can use to format your font sizes: absolute and relative.

Page 7: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

The absolute scale is numbered 1 through 7, with a size of 3 being equal to the default font size set in the visitor's browser. Consequently, this scale isn't exactly absolute, because any font size you set with this scale will still be relative to whatever default font size the visitor's browser is set to. This default font size is called the base font size.

The relative scale is numbered -7 through +7 and will set the font size in relation to the base font size of the visitor's browser. So, if the visitor's browser is set to a base font of 12 points, setting the font size to +1 would make the text appear one size larger, or 13 points.

To format the font size of selected text, choose a value from the Size drop-down menu on the Property inspector (figure 4.5). Or you can select Text > Size to apply an absolute scale value, or select Text > Change Size to apply a relative scale value from the menu.

Fig. 4.5. Size drop-down menu

I suggest sticking with the absolute scale, for a number of reasons. First, the relative scale was kind of a failed experiment, which involved manually setting the default font size for a document in the HTML code instead of leaving it to the browser. Second, the tags you'd have to insert in the code aren't equally supported in all Web browsers.

Defining Text Color

There are two basic ways to format text color. You can define the color of specific selections of text, and you can also define a document's default text color. Typically, you wind up doing both. When you format the color of an individual selection in the Document window, you use the Property inspector's Text Color box. Simply click the color box to bring up the color picker, as shown in figure 4.6.

Fig. 4.6. Color picker

The color picker is a palette of colors that you make selections from using the eyedropper tool that your cursor converts to whenever you're using Dreamweaver's color tools.

After clicking the Text Color box, choose a color using either of these techniques:

Select a color from the palette using the eyedropper.

Page 8: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

Hold down the left mouse button, and drag the eyedropper to any location on your screen, inside or outside of Dreamweaver. Then release the mouse button over the color you want to select.

When setting a document's default text color, don't select all of your document text and then change its color with the Property inspector. Instead, change the default page properties.

To define a document's default text color, follow these steps:

1. From the menu, select Modify > Page Properties. This opens the Page Properties dialog box, as shown in figure 4.7.

Fig. 4.7. Page Properties dialog box

2. In the Page Properties dialog box, locate the text color box, and click it to access the color palette.

3. With the eyedropper, select a color from the palette. Or hold down the left mouse button, and use the eyedropper to select a color from anywhere on your screen.

Creating Text Links

If you look at the direct center of the Property inspector, you'll see something that looks remarkably like the point-to-file icon we learned about in the last lesson. In fact, that's exactly what it is. You can turn any piece of selected text into a link by simply dragging the point-to-file icon onto any file in the Site window. You can also click the folder icon beside the point-to-file icon to browse for a document in your site.

Sometimes you'll want to create a link to a page on a completely different Web site. This requires entering the complete URL into the Link field on the Property inspector. Simply select the text

Page 9: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

you want to assign a link to, and type the page's full URL (e.g., http://www.your_favorite_site.com) into the field. To be sure you don't make a typo entering the URL, open that address in your Web browser, and then select the URL from the browser's address bar. Just copy the URL and paste it into the Link field.

Defining Hyperlink Colors

Just like text color, you also have control over link colors. There are three colors you can define, one for each of the different states a text link possesses:

A link the visitor has yet to click A link a visitor has already been to (a visited link) A link a visitor is currently viewing (an active link)

An active link is really only visible in cases where a link opens a document in another browsers window or a frame. We'll learn more about this in a future lesson, I just want you to be aware of all three link states. Having a different color for each state provides visual cues to your visitors so that they can see where they've been and where they've yet to go.

You define your link colors via the same dialog box you used to set your default text color: the Page Properties dialog box. The color boxes for the three link states are located directly beside the one for your default text color. Again, to open the Page Properties dialog box, simply choose Modify > Page Properties from the menu bar.

You will also notice a field for your document's background color. Granted, the background of your document is not exactly a text feature, but it is text-related. You see, you want to choose colors that produce a visually pleasing color scheme. You don't want to make your visitors' eyes go buggy with really harsh or clashing colors, and you certainly want your text to be easy to read.

Physical and Logical Styles

If you've ever made text bold or italic when using a word processor, you're already familiar with something called physical styles. They tell the browser how text should look when displayed. Dreamweaver supports five physical styles:

Bold Italic Underline Strikethrough Teletype

To make selected text bold or italic, simply click the Bold or Italic button on the Property inspector.

To strike through selected text, give it an underline, or a teletype style; choose Text > Style from the menu bar, and then either Strikethrough, Underline, or Teletype.

HTML also has styles called logical styles. Instead of having definitive names like bold or italic, they use names like emphasis and strong. Dreamweaver supports all the logical styles, which include the following:

Page 10: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

Citation Code Definition Emphasis Keyboard Sample Strong Variable

Logical styles have no buttons on the Property inspector. Therefore, you apply them by choosing Text > Style and then the appropriate logical style name from the menu bar.

So how do these logical styles appear in a browser? Well, to date, the major browsers just treat logical styles like physical styles. For example:

Citation, Definition, Emphasis, and Variable = Italic Code, Keyboard, and Sample = Teletype Strong = Bold

You might wonder, If the logical styles don't offer any real display options, what's the point? I tend to think of them as future possibilities. With the increasing sophistication of text-to-speech technology, browsers may be able to read my documents one day and then alter their pronunciation of words formatted with logical styles. In Dreamweaver MX, the actual code used is that of the logical styles. This is to be more compliant with Extensible Hypertext Markup Language (XHTML) which is the most current hypertext markup specification.

Text Alignment

As you've probably noticed, when text is placed in the Document window, it will naturally align itself to the left margin. Of course, you can also align selected text to the right, in the center, or justified from margin to margin. Simply use either of these methods:

Using the Property inspector, click the Left, Right, Center, or Justify alignment buttons. Choose Text > Alignment and then Left, Right, Center, or Justify from the menu bar.

Blockquotes

Just beneath the Left, Right, Center, and Justify alignment buttons are the Text Indent and Text Outdent buttons. Indenting and outdenting text works a little differently in HTML than in your word processor.

In HTML, and by extension, Dreamweaver, you're applying something called a blockquote when you indent text. This indents the left and right margins of your text, and because a blockquote is a block-level element as well, it forces blank lines the same way paragraphs and headings do. This is why you can't indent the first line of a paragraph in HTML. There's just no mechanism for it.

Use blockquotes to set off a section of text that you're quoting from another source, like an excerpt from a book or other publication.

To apply a blockquote to selected text, simply click the Text Indent button on the Property inspector, or choose Text > Indent from the menu bar.

Page 11: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

The more you click the Text Indent button, the greater the distance between your selected text and the left and right margin. You can remove blockquotes using the Text Outdent button, or choose Text > Outdent from the menu bar.

Creating Lists

Just to the left of the Text Indent and Text Outdent buttons are the two buttons used for the creation of ordered and unordered lists. (You're probably used to calling them numbered and bulleted lists, but HTML always wants to be different.)

You can click one of the list buttons and then begin typing your list items, or you can apply list formatting to selected text. The choice is yours.

To create a new list from scratch, follow these steps:

1. In the Document window, place your cursor where you want your list to begin.

2. On the Property inspector, click the Ordered List or Unordered List button, or choose Text > List and then Ordered List or Unordered List from the menu bar.

3. Begin typing your list items. Press the ENTER key to begin each new list item. 4. Press the ENTER key twice to end your list.

To turn selected text into a list, follow these steps:

1. For each word or sentence that you want to be a separate list item, format it as a paragraph.

2. Select the complete range of text that represents your list. 3. On the Property inspector, click either the Ordered List or Unordered List button, or

choose Text > List and then either Ordered List or Unordered List from the menu bar.

With ordered lists, you aren't limited to the traditional 1-2-3 sequence. You can modify your ordered lists to use letters or Roman numerals. You can also change the style of the bullets in your unordered lists, choosing between circular or square bullets. This is accomplished via the List Properties dialog box, as shown in figure 4.8.

Fig. 4.8. List Properties dialog box

To access the List Properties dialog box, select a list item in the Document window, and click the List Item button on the Property inspector.

Page 12: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

If you don't see the List Item button on the Property inspector, click the arrow in the lower-right corner of the Property inspector to expand it to its full size.

The List Properties dialog box provides the following fields, which pertain to the list as a whole:

List Type: Specifies whether the list is bulleted or numbered. Style: Specifies the style of the list items (Your options change depending on the list type

selected. For ordered lists, your options are numeric, uppercase and lowercase Roman, and uppercase and lowercase alphabetical. Unordered-list bullet options are bullet and square.)

Start Count: Sets the value for the first item in a numbered list.

These fields affect the individual list item selected:

New Style: Lets you select a different style for the selected list. Reset Count: Lets you modify the number or letter sequence of an individual list item in

an ordered list.

In the List Type field, you'll notice two other list types: menu and directory. This is another example of Dreamweaver's optimism. HTML had originally planned to include these two other list types. The menu list was to have no bullets, and the directory list was going to support multiple columns.

Browser manufacturers have yet to build support for these two list types, and today treat both as bulleted lists. Dreamweaver keeps these options available because with the ever-changing state of HTML, you just never know.

Character Entities

How would you type a copyright symbol or the currency symbol for the British pound? In your word processor, you'd use something like Word's Insert Symbol command. Dreamweaver has a similar option, allowing you to insert what HTML refers to as character entities.

To insert character entities into your document, follow these steps:

1. Place your cursor where you want to insert the character. 2. Click the drop-down menu in the upper-right corner of the Insert bar and select

Character.3. Click the button for the character you want to insert. Alternatively, you can choose Insert

> Special Characters, and then select the character of your choice from the menu bar.

If you want to insert a character not represented by a button on the Insert bar, click the Insert Other Characters button in the lower-right of the Insert bar character's face, or choose Insert > Special Characters > Other from the menu bar. This opens the Insert Other Character dialog box, as shown figure 4.9.

Page 13: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

Fig. 4.9. Insert Other Character dialog box

From there, you can select from the full range of preset Dreamweaver character entities.

Flash Text

There's one last thing about text formatting I want to teach you—Flash text. This is not so much text as it is a tiny piece of Flash animation. Flash text allows you to create formatted text content that isn't restricted by the fonts on a visitor's computer. Flash text can be formatted as a link and can change color when it's rolled over by users. What's more, you don't have to know anything about Flash animation to make Flash text work. You simply enter information in a dialog box.

To insert Flash text, follow these steps:

1. If you haven't done so already, save your Web page document. 2. Click to position your cursor where the Flash text should appear. 3. Access the Insert bar's palette menu and choose Media.

The Insert Flash Text button shows the Flash logo with a capital letter A beside it. Click this button, or choose Insert > Interactive Image > Flash Text from the menu bar. Either method launches the Insert Flash Text dialog box, as shown in figure 4.10.

Page 14: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

Fig. 4.10. Insert Flash Text dialog box

4. Choose the font for your text in the Font drop-down menu. You're not restricted to any limited list of common font groups. You can choose any font that's on your computer.

5. Pick a size for the text in the Size field, apply bold or italic (or both) if you want, and choose an alignment (Left, Center, or Right) for the text.

6. In the Color field, pick the initial color the Flash text will be when the page loads. 7. In the Rollover Color field, pick the color the text will turn when someone rolls his or her

mouse over it. 8. In the Text field, enter the actual text you want to use. 9. In the Link field, click Browse to select the site document you want the Flash text to link

to. Or, if you want to link to an outside site, type the complete URL. 10. In the Bg Color field, pick a background color for the text. Typically, you'll match this

background color with the background color of the document. 11. Type a new name in the Save As field. Be sure to include the .swf file extension. 12. Click OK to close the dialog box and insert the Flash text. If you want to keep tinkering

with the text and want to see it on the page first, click Apply rather than OK. The dialog box will stay open, and you can continue to make changes to the text and its appearance.

You can edit Flash text at any time by double clicking it. You can also select the Flash text and click the Edit button on the Property inspector.

The Property inspector offers these tools for selected Flash text:

Width and Height: These settings affect the dimensions of the Flash text. V Space and H Space: These settings can be adjusted to increase or decrease the

amount of space above and below (V Space), and on both sides (H Space) of, the Flash text object. This space is measured in pixels.

Bg Color: The background color can be changed, just as it can through the Insert Flash Text dialog box.

Play: By clicking this button, you can observe the mouse-over effect in the Document window instead of having to test the document in a browser.

Page 15: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

Okay. Now imagine you have your document pretty much the way you want it, as far as the written word is concerned. You may still have a little work left to make sure the text content is perfect. For example, you might have some incorrect terminology you want to flush out, and of course you always want to check your spelling.

There isn't a word processor out there that doesn't offer tools to help you with this, namely Find and Replace and Check Spelling. Dreamweaver certainly appreciates your need for these features, too, and that's what we'll look at in the next chapter.

Chapter 4

Find and Replace

If you've ever typed anything with your word processor longer than a laundry list, I'm sure you've used Find and Replace. Dreamweaver's Find and Replace features allow you to locate text not only in the current document but also in a series of files, an entire folder, or your whole local site. If you're HTML-savvy, you can also use Find and Replace to search through the source code of your documents.

To use Find and Replace, follow these steps:

1. Choose Edit > Find and Replace from the menu bar. This opens the Find and Replace dialog box, as shown in Figure 4.11.

Fig. 4.11. Find and Replace dialog box

2. In the Find In field, select the file(s) to search. Your options include the following: Current Document: Searches your present document. Selected Files in Site: Searches only files and folders currently selected in the

Site window. You must choose Find and Replace from the Site window's menu bar for this option to work.

Entire Local Site: Searches every file in the site you have open. Folder: Searches a specific directory folder. Click the folder icon to browse and

select the folder you want to search. 3. In the Search For field, select the kind of search to perform. In the text box to the right,

type the text you want to find. Your options for search type include the following: Text: Searches the Document window for the specific text you enter.

Page 16: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

Text (Advanced): Allows you to search for text based on the HTML tags applied to it. For example, if you needed to find all the occurrences of the word Enter that are formatted in bold (<b></b>), you would select Inside Tag from the drop-down menu, and then select b from the list to the right. To find all the occurrences of the word Enter not associated with a particular tag, select Outside Tag from the drop-down menu.

Source Code: Searches through the HTML code of your document for the specific piece of text you've entered.

Specific Tag: Searches for exact HTML tags and their associated attributes and values.

4. Click the Find Next button to highlight the first occurrence of your text, or Find All to highlight all of them.

5. If you want to replace the found text with something else, type your replacement text in the Replace With text box. Use the Replace button in conjunction with Find Next to replace text on a case-by-case basis, or Replace All to replace all occurrences of the text you specified.

Check Spelling

Personally, I can't spell to save my life. If I had to copy all my text into another program in order to check my spelling I'd probably get annoyed. Fortunately, Dreamweaver's spelling checker is right up there with any word processor's.

To launch the spelling checker, simply choose Text > Check Spelling from the menu bar. If Dreamweaver finds a misspelled word, the Check Spelling dialog box, shown in Figure 4.12, appears.

Fig. 4.12. Check Spelling dialog box

Dreamweaver starts at the top of the current document, and works its way down, displaying misspelled words in the Word Not Found in Dictionary field.

The Check Spelling dialog box provides suggested spellings in the Suggestions field. You can then click the suggestion you want to have placed in the Change To field. You can choose to change or ignore misspelled words, using the buttons on the right of the Check Spelling dialog

Page 17: Printer Friendly Version of Lesson 04  · Web viewDreamweaver #4 Lesson Chapter 1 Introduction. The two most important aspects of any Web site are what it says and how it looks.

Materials Credited to DMACC

box. You can also add the word in question to Dreamweaver's personal dictionary so that it will not be singled out as a misspelling in the future.

Chapter 5

Summary

In this lesson, you've learned that, with a few exceptions, working with text in Dreamweaver is very similar to using a word processor. You've looked at the different ways to get text into your document, and then how to format that text once it's there.

You learned about paragraphs and headings; setting fonts, sizes, and colors; building lists; creating text links; and using Dreamweaver's Flash text features. Lastly, you learned how to proof your documents for spelling or other errors.

Now it's time to turn our attention to Web content's other primary component: images.