ptg While embedding physical tags or logical styles into a document is a very common way to change the look of text, the Web design commu- nity is moving to Cascading Style Sheets. Cascading Style Sheets can be used in conjunction with logical styles to define how that style works when viewed by the visitor, and give you more control over what your visitors will see. It's also important to understand that the visual look of standard HTML styles and tags are defined by the browser application, and may appear different when viewed on different browsers. If you modify a style, you make the change once, but all text tagged with that style changes to reflect the new format. 116 Chapter 5 Creating Text Styles Create a CSS Text Style Open the Web page you want to create a customized style. Click the Format menu, point to CSS Styles, and then click New. ◆ You can also click the New Style button on the CSS Styles panel. Choose from the following options: ◆ Selector Type. Select the Class (can apply to any tag) option. ◆ Selector. Enter a name for the style. NOTE Class names should begin with a period (if you don't add it, Dreamweaver will), and have no spaces or additional punctuation. ◆ Define In. Select the This Document Only option or select an existing external style sheet. Click OK. Click the Type category. Format the font based on the available options. Click OK. 7 6 5 4 3 2 1 4 3 7 5 6 From the Library of Wow! eBook ptg Chapter 5 Working with Web Page Text 117 Apply a CSS Text Style Open the Web page you want to apply a CSS text style. Select in the paragraph that you want to apply the custom style. Remember the style you created can only be used within the original document. If you open another document, you will not be able to use this new style. Click the Format menu, point to CSS Styles, and then click the name of the new style, or click the Targeted Rule list arrow in the Property Inspector for CSS, and then click the name of the new style. TIMESAVER You can also change the Style in the Properties panel. Click the Style list arrow, and then select the style you want to apply. The new style is applied to the selected text. 3 2 1 2 3 3 Targeted Rule l is t ar row CSS Styles submenu From the Library of Wow! eBook ptg 118 Chapter 5 If you no longer like the name you specified for a style or the name doesn’t adequately describe the formatting style, you can rename it using the Style list arrow in the Properties panel. The Style list arrow provides access to the Rename command where you can change the name of a style. Renaming Styles Rename a Style Open the Web page you want to rename a style. Click the Window menu, and then click Properties to open the Properties panel. Click HTML in the Properties panel. Click the Style list arrow, and then click Rename. Click the Rename Style list arrow, and then select the style you want to rename. Type a new name for the style. Click OK to close the dialog box and save your changes. The Results panel appears, displaying the selected style. 7 6 5 4 3 2 1 2 4 Style list arrow 5 6 7 3 From the Library of Wow! eBook ptg Chapter 5 Working with Web Page Text 119 If you need to quickly find another instance of a word or phrase in a Web page, you can use the Find Selection command instead of the Find and Replace command. All you need to do is select an instance of the text or phrase you want to find, and then select the Find Selection com- mand on the Edit menu, or press Shift+F3. After you find the selection, you can use the Find Next command to locate the next occurrence of the selection. Finding Text Find Text by Selection Open the Web page you want to find text. Select a word or phrase. Click the Edit menu, and then click Find Selection. TIMESAVER Press Shift+F3 to find the current selection. Dreamweaver goes through the document, finds and highlights the next occurrence of the selected word. To lo ca te the next occu rre nce of the word, click the Edit menu, and then click Find Next. TIMESAVER Press F3 to find the next occurrence of the current selection. 4 3 2 1 3 2 Locates the next instance of “Upload” From the Library of Wow! eBook ptg 120 Chapter 5 Suppose that you discover you need to change a word throughout a Web page or entire site. You do not need to read through the document to find every instance of the word and manually change it. The Find and Replace command can do that for you. Dreamweaver can find every instance for you, and walk you through the Web site from page to page until all the corrections have been made. In addition to text, you can also find and replace code. You can search one or more Web page or an entire Web site. The results of performing a Find All and Replace All appear within the Results window under the Search tab, and results remain there until the next time you perform a Find All or Replace All. If you select a word or group of words before opening the Find and Replace dialog box, the words automatically are added to the Find box. Finding and Replacing Text or Code Find and Replace Text or Code Open the Web page you want to find and replace text. Click the Edit menu, and then click Find and Replace. Choose from the following Find and Replace options: ◆ Find In. Click to determine what documents you want to search; everything from the current document to the entire site. ◆ Search. Click to determine what logical parts (Text or Source Code) of the document you want searched. ◆ Find. Enter the text that you want to find. ◆ Replace. Enter the text (optional) that you want to use to replace the text entered in the Find input box. ◆ Load Query. Click Load Query button to load a previously saved Find and Replace query. ◆ Save Query. Click Save Query button to save the current Find and Replace query. 3 2 1 3 Finds text From the Library of Wow! eBook ptg Chapter 5 Working with Web Page Text 121 Choose from the following Find and Replace options: ◆ Match Case. Select to make the Find text case sensitive (charlie, as opposed to Charlie). ◆ Match Whole Word. Select to match whole words. ◆ Ignore Whitespace. Select to treat all whitespace as a single space for the purpose of matching. ◆ Use Regular Expression. Select to use string expressions to help locate information. Choose from the following controls to find what you want: ◆ Find Next. Find the next occurrence of the Find input field, based on the current position of the cursor. ◆ Find All. Find all occurrences of the Find input field. ◆ Replace. Find the next occurrence of the Find input field and replace it with the text in the Replace field. ◆ Replace All. Find all occurrences of the Find input field and replace with the text in the Replace field. Click Close to exit the Find and Replace dialog box. The Results panel appears for the Find All and Replace All. TIMESAVER Press F3 (Win) or A +G (Mac) to perform a search again without displaying the Find and Replace dialog box. 6 5 4 4 6 5 Finds all the instances of the word “video” in the Results Panel. From the Library of Wow! eBook . begin with a period (if you don't add it, Dreamweaver will), and have no spaces or additional punctuation. ◆ Define In. Select the This Document Only option or select an existing external. can also click the New Style button on the CSS Styles panel. Choose from the following options: ◆ Selector Type. Select the Class (can apply to any tag) option. ◆ Selector. Enter a name for. the Find Selection com- mand on the Edit menu, or press Shift+F3. After you find the selection, you can use the Find Next command to locate the next occurrence of the selection. Finding Text Find