adobe dreamweaver cs5 on demand part 68 pptx

ptg 420 Chapter 17 If you choose not to update a library item when you edit it, you can still update it later using the Update Current Page or Update Pages com- mands. The Update Current Page allows you to update the active docu- ment in the Document window, while the Update Pages command allows you to update the entire Web site. In addition to updating library items, you can also rename individual items or delete the ones you no longer use. Working with Library Items Update Library Items on a Page or an Entire Site Open the Web page with library items you want to update. Update the library items using either of the following methods: ◆ Update Current Page. Click the Modify menu, point to Library, and then click Update Current Page. ◆ Update Entire Site. Click the Modify menu, point to Library, click Update Pages, specify what to update in the Look In list arrow, select the Library Items check box, and then click Start. 2 1 1 2 Did You Know? You can customize the highlight color of library items. Click the Dreamweaver (Mac) or Edit (Win) menu, click Preferences, select the Highlighting category, select the Library Items check box, select a high- lighting color, select the Show check box, and then click OK. You can show or hide highlighting. Click the View menu, point to Visual Aids, and then click Invisible Elements. From the Library of Wow! eBook ptg Chapter 17 Using Code Snippets and Libraries 421 Rename or Delete a Library Item Open the Web page with library items you want to rename or delete. Click the Window menu, and then click Assets to display the Assets panel. Click the Library category. Select the library item you want to rename or delete. Use any of the following methods: ◆ Rename a Library Item. Right- click the library item, click Rename, type a new name, and then press Enter (Win) or Return (Mac). ◆ Delete a Library Item. Right- click the library item, click Delete, or click the Delete button, and then click Yes to confirm the deletion. 5 4 3 2 1 2 4 1 5 Did You Know? You can recreate a missing or deleted library item. Select the item on one of your pages, open the Properties panel, and then click the Recreate button. From the Library of Wow! eBook ptg 422 Chapter 17 As you develop a site, you use some Dreamweaver behaviors and JavaScript code constantly. The basic rollover image, for example, is so useful for navigation bars, you may end up putting it on every page of your site. Unfortunately, each time you add a behavior to a page, Dreamweaver adds lines of JavaScript code as well, and more code means slower downloads. You usually end up using the same behaviors repeatedly, so it makes sense to collect these functions and save them in an external JavaScript file. External JavaScripts help you speed up the download of your Web pages. When the scripts are downloaded, they are cached on the visitor's computer. Once your scripts are cached, each subsequent page that is downloaded only requires the browser to download the HTML… and not the scripts, which saves time. You can create a JavaScript file (.js) in Dreamweaver or an exter- nal editor, and then copy the JavaScript code that Dreamweaver pro- duces or enter your own code in the JavaScript file (.js) and save it in your site folder (typically in a folder called Scripts) for easy access from the Assets panel. Creating an External JavaScript Library Create a JavaScript File in Dreamweaver Click the File menu, and then click New. The New Document dialog box opens. Click the Blank Page category. Click the JavaScript page type. Click Create. Enter your JavaScript code, or copy and paste Dreamweaver generated JavaScript code (located in Code view) in the JavaScript file. Click the File menu, and then click Save. Navigate to the folder location in your local root site folder where you want to store the script file, typically called Scripts folder. Enter a name for the script file. Click Save. 9 8 7 6 5 4 3 2 1 4 3 2 From the Library of Wow! eBook ptg Chapter 17 Using Code Snippets and Libraries 423 Create an External JavaScript Library Item by Dragging Open the local root site folder for your Web site from the desktop. Drag the user-created JavaScript file from the desktop into the internal folder named, Scripts. Open Dreamweaver. Click the Site menu, point to Manage Sites, select the site that you dragged the JavaScript code, and then click Done. Click the Window menu, and then click Assets to display the Assets panel. Click the Scripts category. Click the Refresh button. The new JavaScript code appears in the Assets panel. 7 6 5 4 3 2 1 1 2 7 4 6 5 Assets panel Did You Know? You can create an external JavaScript library item by dragging a JavaScript file directly to a page. Open a page in Dreamweaver, drag the user-created JavaScript file (.js) from the desktop directly to the page in Dreamweaver, and then click Yes to save the code in the active site folder (recommended). Open the Assets panel, click the Scripts category, and then click the Refresh button to display the JavaScript file. From the Library of Wow! eBook ptg 424 Chapter 17 After you create an external JavaScript file in Dreamweaver or another external editor and store it in a folder, typically called Scripts, in your local root site folder, you can insert the JavaScript into any page in your site and reduce page download times. If you need to make a change to an external JavaScript file, you can do it directly from Dreamweaver using the Assets panel. When you make a change to a JavaScript file, the new code is automatically used when the script is called. Inserting and Editing an External JavaScript Insert an External JavaScript Open the Web page you want to insert an external script. Click in the document where you want to insert the JavaScript code. NOTE If the script is to be attached to the entire Web page, click the <body> tag in the tag selector at the bottom left of the Document window. Click the Window menu, and then click Assets to display the Assets panel. Click the Scripts category. Select the script you want attached to the page. TROUBLE? If the script is not available in the list, click the Refresh button. Click the Insert button. Dreamweaver inserts the script into the page. 6 5 4 3 2 1 6 3 2 4 5 1 Did You Know? You can get free javascripts on the Web. Check out the free scripts at www.java-script.net . You can also per- form a search for free javascripts from additional Web sites. From the Library of Wow! eBook ptg Chapter 17 Using Code Snippets and Libraries 425 Edit External Scripts Click the Window menu, and then click Assets to display the Assets panel. Click the Scripts category. Select the script you want to edit. Click the Assets Options button, and then click Edit. The script appears within a window, the same size as the current document window. Make the necessary changes to the script. Click the File menu, and then click Save. Click the Close button to close the JavaScript document. 7 6 5 4 3 2 1 1 2 3 4 7 5 6 From the Library of Wow! eBook ptg 426 Chapter 17 A server-side include is a file that the Web server uses in your pages when a browser opens the page. In Dreamweaver, you can insert server-side includes in your pages, edit the includes, or preview pages containing includes. When you insert a server-side include in a Web page, Dreamweaver places a reference to an external file; the actual contents of the server-side include are not placed in the file. However, Dreamweaver displays the contents of the server-side include in Design view to make it easier to create and layout your pages. In addition, you can preview your pages in your browser to display them as if they were on your Web server. When you dis- play a page with a server-side include in your browser, the server creates a new page insert- ing the contents of the file and displays the result. This can make updating files more flex- ible, however it does take a little longer to dis- play the page. There are two types of server-side includes: Virtual and File. The type you need depends on the Web server you use. Some servers can only use certain types of files for server-side includes, so check the documenta- tion of your server software to determine which is the best type for you. Or, you can just try each type to see which one works for you. Insert a Server-Side Include Open the Web page where you want to place the server-side include. Click the Insert menu, and then click Server-Side Include . Locate and select the server-side include file you want to insert. Click OK . Modify a Server-Side Include Open the Web page with the server-side include you want to modify. Select the server-side include. Open the Properties panel. Use the options in the Properties panel to modify server-side settings or change/update the server-side include file. ◆ If your server is an Apache Web server, click Virtual. This works well for Apache Web server where File doesn’t always. ◆ If your server is a Microsoft Internet Information Server (IIS), click File. This works well for IIS where Virtual only works in certain circumstances. 4 3 2 1 4 3 2 1 Using Server-Side Includes From the Library of Wow! eBook . click the Delete button, and then click Yes to confirm the deletion. 5 4 3 2 1 2 4 1 5 Did You Know? You can recreate a missing or deleted library item. Select the item on one of your pages,. Web site. In addition to updating library items, you can also rename individual items or delete the ones you no longer use. Working with Library Items Update Library Items on a Page or an Entire. list, click the Refresh button. Click the Insert button. Dreamweaver inserts the script into the page. 6 5 4 3 2 1 6 3 2 4 5 1 Did You Know? You can get free javascripts on the Web. Check out