| In Lesson 4, you created an external style sheet and attached that style sheet to another document. The steps to add a style sheet to a document are not difficult, but they can be time-consuming if you need to attach a style sheet to multiple pages or throughout an entire site. By using the Find and Replace feature, you can accomplish that task in a matter of minutes. In this exercise, you attach the external style sheet sangha.css to multiple pages. 1. | Open the asana.html file from the Lesson_17_FindReplace/Training folder and select Design view. Choose Edit > Find and Replace.
The Find and Replace dialog box opens with the same settings that were used in the previous exercise.
| | | 2. | The Find In menu should be set to Folder. Click the browse folder icon to the right of the folder text box and choose the Lesson_17_FindReplace/Training folder. Set the Search menu to Source Code. Type </head> in the Find text field. In the Replace text field, type the following code: <link href="sangha.css" rel="stylesheet" type="text/css"></head>.
 Note The <link> tag specifies that the style sheet is attached by linking it to the document, which is the recommended way to attach the first style sheet (as opposed to the import method of attaching style sheetsboth methods were covered in Lesson 4). The location of the style sheet is specified by href="sangha.css", the relationship between the current document and attached stylesheet is defined by rel="stylesheet", and the output header type="text/css" specifies the kind of content through the Multipurpose Internet Mail Extensions (MIME) type, allowing browsers that do not support style sheets to ignore the link tag. When you use the Attach Style Sheet icon, Dreamweaver adds the <link> tag within the <head> tag. You are using Find and Replace to search for the end head (</head>) tag and then add the <link> tag before it by replacing it with the <link> tag followed by a </head> tag.
Tip To get a new line when you are within the Replace text field, press Shift+Return (Macintosh) or Shift+Enter (Windows). Using the Return or Enter key alone activates the Find Next button in the dialog box. Because the </head> tag is usually on a different line, you might want to place a line break in the code before the </head> tagthis is not a <br> (break); it is simply a new line in the code.  There are a total of five HTML documents in the Training folder that need to have the external style sheet attached. None of the documents in the Training folder uses <font> tags, so you don't need to use the Find and Replace feature to strip the <font> tag from the documents as you had to do with index.html in the previous exercise.
| 3. | All The Options should be unchecked. Click the Find Next button.
The first document in the folder in which Dreamweaver finds the </head> tag opens in Code view; asana.html is now shown in Code view, and Dreamweaver selects the </head> tag.
| | | 4. | Click Replace.
Dreamweaver makes the replacement, and the next document that meets the search criteria is opened automatically in Code view with the </head> tag selected.
| 5. | Click the Replace All button. Click Yes when asked to verify whether you want to replace matches in unopened documents.
Note For demonstration purposes of this exercise, there is a duplicate of the sangha.css file inside the Training folder. In your own sites, however, it is recommended that you not duplicate external style sheets in this manner because if you make a change in one, the documents that draw on a duplicate of that style sheet do not reflect the changes unless the duplicate is also updated. To link documents in different folders to the same CSS file, you might want to use site-root relative links, which ensure that no matter where the HTML documents are located, they still link to the correct CSS file. (Site-root relative links were covered in Lesson 4.) You might not see the change applied to the background in the open documents until you close the Find and Replace dialog box, and either click in the document window or click the Refresh button as you might be prompted to do by the Property inspector.
| 6. | Click the Options menu in the upper-right corner of the Results panel and choose Clear Results. Close the Results panel (Macintosh) or collapse the Results panel (Windows).
|
The style sheet is now attached to all documents in the folder. You can save all open documents and close them.  |
