wiley adobe dreamweaver cs5 bible phần 3 pptx

233 Chapter 5: Accessing the Code Directly To call up the Quick Tag Editor, use any of the following methods: Choose Modify L ➪ Quick Tag Editor. Press the keyboard shortcut Ctrl+T (Command+T). L Click the Quick Tag Editor icon on the Property inspector. L The Quick Tag Editor has three modes: Insert HTML, Wrap Tag, and Edit HTML. Although you can get to all three modes from any situation, which mode appears initially depends on the cur- rent selection. The Quick Tag Editor’s window (see Figure 5-29) appears above the current selec- tion when you use either the menu or keyboard method of opening it or next to the Property inspector when you click the icon. In either case, you can move the Quick Tag Editor window to a new location onscreen by dragging its title bar. Tip Regardless of which mode the Quick Tag Editor opens in, you can toggle to the other modes by pressing the keyboard shortcut Ctrl+T (Command+T). n The Quick Tag Editor offers built-in code hinting, just like that found in Code view. See the side- bar “Working with the Hint List” later in this chapter for details about this feature. Figure5-29 The Quick Tag Editor is great for quickly tweaking your code. 234 Part II: Designing and Crafting Basic Pages Insert HTML mode The Insert HTML mode of the Quick Tag Editor is used for adding new tags and code at the current cursor position; it is the initial mode when nothing is selected. The Insert HTML mode starts with a pair of angle brackets enclosing a blinking cursor. You can enter any tag — whether standard HTML or custom XML — and any attribute or content within the new tag. When you’re finished, just press Enter (Return) to confirm your addition. To add new tags to your page using the Quick Tag Editor Insert HTML mode, follow these steps: 1. Position your cursor where you would like the new code to be inserted. 2. Choose Modify ➪ Quick Tag Editor or use the keyboard shortcut Ctrl+T (Command+T) to open the Quick Tag Editor. The Quick Tag Editor opens in Insert HTML mode, as shown in Figure 5-30. 3. Enter your HTML or XML code. Figure5-30 Use the Quick Tag Editor’s Insert HTML mode to add tags not available through Dreamweaver’s visual interface. 235 Chapter 5: Accessing the Code Directly Tip Use the right arrow key to move quickly past the closing angle bracket and add text after your tag. n 4. If you pause while typing, the hint list appears, selecting the first tag that matches what you’ve typed so far. Use the arrow keys to select another tag in the list and press Enter (Return) to select a tag. 5. Press Enter (Return) when you’re finished. The Quick Tag Editor is fairly intelligent and tries to help you write valid HTML. If, for example, you leave off a closing tag, such as </strong>, the Quick Tag Editor automatically adds it for you. Wrap Tag mode Part of the power and flexibility of HTML is the capability to wrap one tag around other tags and content. To make a phrase appear bold and italic — or as the best Web practices have it, strong and emphasized — the code is written as follows: <strong><em>On Sale Now!</em></strong> Note how the inner <em> </em> tag pair is enclosed by the <strong> </strong> pair. The Wrap Tag mode of the Quick Tag Editor surrounds any selection with your entered tag in one easy operation. Working with the Hint List The Quick Tag Editor has a rather nifty feature referred to as the hint list. To make it even quicker to use the Quick Tag Editor, a list of tags pops up when you pause in your typing. When you’re entering attributes within a tag, a list of appropriate parameters pops up instead of tags. These lists are tied to what, if anything, you’ve already typed. Suppose, for instance, you’ve begun to enter blockquote and have only gotten as far typing b and l. When the hint list appears, it scrolls to blink — the first tag in the list starting with those two letters. If you continue typing o, blockquote is selected. All you have to do to insert it into your code is press Enter (Return). Following are a few other hint list hints: Scroll to a tag by using the up or down arrow keys. L Double-clicking the selected hint list item also inserts it into the code. L After the hint list is open, press Esc if you decide not to enter the selected tag or attribute. L If an attribute has a set series of values that can be applied (for example, the L <div> tag’s align attribute can only be set to left, right, or center), those values are accessible via the hint list. Control how quickly the hint list appears — or even whether it appears at all — by altering the L Quick Tag Editor preferences. 236 Part II: Designing and Crafting Basic Pages The Wrap Tag mode appears initially when you have selected just text (with no surrounding tags) or an incomplete tag (the opening tag and contents, but no closing tag). The Wrap Tag mode is visually similar to the Insert HTML mode, as you can see in Figure 5-31. However, rather than just include exactly what you’ve entered into the Quick Tag Editor, Wrap Tag mode also inserts a closing tag that corresponds to your entry. For example, you want to apply a tag not available as an object: the subscript, or <sub>, tag. After highlighting the text that you want to mark up as subscript (the 2 in the formula H 2 0, for example), you open the Quick Tag Editor and enter sub. The resulting code looks like the following: H₂0 Caution You can enter only one tag in Wrap Tag mode; if more than one tag is entered, Dreamweaver displays an alert informing you that the tag you’ve entered appears to be invalid HTML. The Quick Tag Editor is then closed, and the selection is cleared. n Figure5-31 Enclose any selection with a tag by using the Quick Tag Editor’s Wrap Tag mode. 237 Chapter 5: Accessing the Code Directly To wrap a tag with the Quick Tag Editor, follow these steps: 1. Select the text or tags you want to enclose in another tag. 2. Choose Modify ➪ Quick Tag Editor or use the keyboard shortcut Ctrl+T (Command+T) to open the Quick Tag Editor. 3. If you select a complete tag, the Quick Tag Editor opens in Edit Tag mode; press the keyboard shortcut Ctrl+T (Command+T) to toggle to Wrap Tag mode. 4. Enter the tag you want. 5. If you pause while typing, the hint list appears. It selects the first tag that matches what you’ve typed so far. Use the arrow keys to select another tag in the list and press Enter (Return) to select a tag from the hint list. 6. Press Enter (Return) to confirm your tag. The Quick Tag Editor closes, and Dreamweaver places the tag before your selection and a corresponding closing tag after it. Edit Tag mode If a complete tag — either a single tag, such as <img>, or a tag pair, such as <h1> </h1> — is selected, the Quick Tag Editor opens in Edit Tag mode. Unlike the other two modes (in which you are presented with just open and closing angle brackets and a flashing cursor), the Edit Tag mode displays the entire selected tag with all its attributes, if any. You can always invoke the Edit Tag mode when you start the Quick Tag Editor by clicking its icon in the Property inspector. The Edit Tag mode has many uses. It’s excellent for adding a parameter not found on Dreamweaver’s Property inspector. For example, when you are building a form, some text fields have pre-existing text in them — which you want to clear when the user clicks into the field. To achieve this effect you add a minor bit of JavaScript, a perfect use for the Edit Tag mode. Therefore, you can just select the <i> tag from the Tag Selector and then click the Quick Tag Editor icon to open the Quick Tag Editor. The <imgnput> tag appears with your current parameters, as shown in Figure 5-32. After you have opened it, tab to the end of the tag and enter this code: onFocus=”if(this.value==’Email Required’)this.value=’’;” In this example, Email Required is the visible text in the field — the value, which automatically clears when the field is selected. 238 Part II: Designing and Crafting Basic Pages Figure5-32 In Edit Tag mode, the Quick Tag Editor shows the entire tag, with attributes and their values. To use the Quick Tag Editor in Insert HTML mode, follow these steps: 1. Select an entire tag by clicking its name in the Tag Selector. 2. Choose Modify ➪ Quick Tag Editor. 3. To change an existing attribute, tab to the current value and enter a new one. 4. To add a new attribute, tab and/or use the arrow keys to position the cursor after an existing attribute or after the tag, and enter the new parameter and value. Tip If you don’t close the quotation marks for a parameter’s value, Dreamweaver does it for you. n 5. If you pause briefly while entering a new attribute, the hint list appears with attributes appropriate for the current tag. If you select an attribute from the hint list, press Enter (Return) to accept the parameter. 6. When you’ve finished editing the tag, press Enter (Return). 239 Chapter 5: Accessing the Code Directly In addition to this capability to edit complete tags, Dreamweaver has a couple of navigational commands to help select just the right tag. The Select Parent Tag command — keyboard shortcut Ctrl+[ (Command+[) — highlights the tag immediately surrounding the present tag. Going in the other direction, the Select Child Tag — keyboard shortcut Ctrl+] (Command+]) — selects the next tag, if any, contained within the current tag. Both commands are available under the Edit menu. Exercising these commands is equivalent to selecting the next tag in the Tag Selector to the left (parent) or right (child). Caution Although it works well in Design view, unfortunately the Select Child command does not function in Code view. n Adding Java Applets Java is a platform-independent programming language developed by Sun Microsystems. Although Java can also be used to write entire applications, its most frequent role is on the Web in the form of an applet. An applet is a self-contained program that can be run within a Web page. Java is a compiled programming language similar to C++. After a Java applet is compiled, it is saved as a class file. Web browsers call Java applets through, aptly enough, the <applet> tag. When you insert an applet, you refer to the primary class file much as you call a graphic file for an image tag. Each Java applet has its own unique set of parameters — and Dreamweaver enables you to enter as many as necessary in the same manner as plugins and ActiveX controls. In fact, the Applet object works almost identically to the Plugin and ActiveX objects. Caution Keep two caveats in mind if you’re planning to include Java applets in your Web site. First, most (but not all) browsers support some version of Java — the newest release has the most features, but the least support. Second, all the browsers that support Java offer the user the option of disabling it because of security issues. Be sure to use the Alt property to designate an alternative image or some text for display by browsers that do not support Java. n A Java applet can be inserted in a Web page with a bare minimum of parameters: the code source and the dimensions of the object. Java applets derive much of their power from their configurabil- ity, and most of these little programs have numerous custom parameters. As with plugins and ActiveX controls, Dreamweaver enables you to specify the basic attributes through the Property inspector and the custom ones via the Parameters dialog box. 240 Part II: Designing and Crafting Basic Pages To include a Java applet in your Web page, follow these steps: 1. Position the cursor where you want the applet to originate and choose Insert ➪ Media ➪ Applet. You can also click the Insert Applet button from the Media group on the Common category of the Insert panel. The Insert Applet dialog box opens. 2. From the Select File dialog box, enter the path to your class file in the File Name text box or click the Browse button to locate the file. An Applet object placeholder appears in the Document window. In the Applet Property inspector (see Figure 5-33), the selected source file appears in the Code text box, and the folder appears in the Base text box. Figure5-33 Use the Insert Applet button to insert a Java Applet object and display the Applet Property inspector. Note The path to your Java class files cannot be expressed absolutely; it must be given as an address relative to the Web page that is calling it. n 3. Enter the height and width of the Applet object in the H and W text boxes, respectively. You can also resize the Applet object by clicking and dragging any of its three sizing handles. 241 Chapter 5: Accessing the Code Directly 4. You can enter any of the usual basic attributes, such as a name for the object, as well as values for Align, V, and/or H Space in the appropriate text boxes in the Property inspector. 5. If you want, enter the online directory where the applet code can be found in the Base text box. If none is specified, the document’s URL is assumed to be this attribute, known as the codebase. 6. To display an alternative image if the Java applet is unable to run (typically, because the user’s browser does not support Java or the user has disabled Java), enter the path to the image in the Alt field. You can use the folder icon to locate the image as well. Text may also serve as the alternative content if you don’t want to use an image. Any text entered into the Alt field is displayed in the browser as a tooltip. 7. To enter any custom attributes, click the Parameters button to open the Parameters dia- log box. 8. Click the Add (+) button and enter the first parameter. Press Tab to move to the Value column. 9. Enter the value for the parameter, if any. Press Tab. 10. Continue entering parameters in the left column, with their values in the right. Click OK when you’ve finished. Tip Because of the importance of displaying alternative content for users not running Java, Dreamweaver pro- vides a method for displaying something for everyone. To display an image, enter the URL to a graphics file in the Alt text box. To display text as well as an image, you have to do a little hand-coding. First select a graphics file to insert in the Alt text box and then open Code view. In the <img> tag found between the <applet> tags, add an alt=”your_message” attribute by hand (where the text you want to display is the value for the alt attribute). Now your Java applet displays an image for browsers that are graphics-enabled but not Java-enabled, and text for text-only browsers such as Lynx. In this sample code, I’ve bolded the additional alt attribute. <applet code=”animate.class” width=”100” height=”100”><param name=”img1” value=”/images/1.jpg”><param name=”img2” value=”/images/2.jpg”><img src=”animation.gif” alt=”Animate for Life!” width=”100” height=”100”></applet> n Some Java class files have additional graphics files. In most cases, you store both the class files and the graphics files in the same folder. Managing JavaScript and VBScript When initially developed by Netscape, JavaScript was called LiveScript. This browser-oriented language did not gain importance until Sun Microsystems joined the development team and the product was renamed JavaScript. Although the rechristening was a stroke of marketing genius, it has caused endless confusion among beginning programmers — JavaScript and Java have almost 242 Part II: Designing and Crafting Basic Pages nothing in common outside of their capability to be incorporated in a Web page. JavaScript is used primarily to add functionality on the client-side of the browser (for tasks such as verifying form data and adding interactivity to interface elements) or to script Netscape’s servers on the server-side. Java, on the other hand, is an application-development language that can be used for a wide variety of tasks. Conversely, VBScript is a full-featured Microsoft product. Both VBScript and JavaScript are scripting languages, which means that you can write the code in any text editor and compile it at runtime. JavaScript enjoys more support than VBScript. JavaScript can be rendered by all modern browsers (as well as other browsers such as WebTV, Opera, and Sun’s HotJava), whereas VBScript is read only by Internet Explorer on Windows systems and is rarely used today. In Dreamweaver, both types of code are inserted in the Web page in the same manner. Inserting JavaScript and VBScript If only mastering JavaScript or VBScript were as easy as inserting the code in Dreamweaver! Simply go to the Script menu on the Common category of the Insert panel and click the Script button, or choose Insert ➪ HTML ➪ Script Objects ➪ Script and enter your code in the Insert Script dialog box. After you click OK, a Script icon appears in place of your script. Of course, JavaScript or VBScript instruction is beyond the scope of this book, but every working Web designer must have an understanding of what these languages can do. Both languages refer to and, to varying degrees, manipulate the information on a Web page. Over time, you can expect significant growth in the capabilities of the JavaScript and VBScript disciplines. Cross-Reference Dreamweaver behaviors have been instrumental in making JavaScript useful for nonprogrammers. To learn more about behaviors, see Chapter 11. n Use the Script Property inspector (see Figure 5-34) to select an external file for your JavaScript or VBScript code. You can also set the language type by opening the Language drop-down list from the Script window and choosing either JavaScript or VBScript. Because different features are available in the various releases of JavaScript, you can also specify JavaScript 1.1 or JavaScript 1.2. Choose a specific version of JavaScript when you initially insert the script — you cannot change the setting from the Script Property inspector. Naturally, you can also make the adjustment in Code view. When you choose JavaScript or VBScript as your Language type, Dreamweaver writes the code accordingly. Both languages use the <script> tag pair, and each is specified in the language attribute, as follows: <script language=”JavaScript”>alert(“Look Out!”)</script> Figure5-34 The generous Script dialog box provides plenty of room for modifying your JavaScript or VBScript. [...]... color: #33 333 3; } and another rule that sets the color of a class called alert to bright red: alert { color: #FF0000; } What would happen when the browser encounters code like this: Attention all shoppers! As you might suspect, the alert rule would be applied and the tag would appear red This occurs because the alert selector is more specific than the tag selector The W3C... as you build your Web page Dreamweaver s advanced CSS rendering helps you create the design you visualize every step of the way; best of all, Dreamweaver renders CSS according to the W3C specifications, today’s standard for Web designers In this chapter, you find out how CSS works and why you need it As you work through a Dreamweaver Technique to remove underlines from 2 53 In This Chapter Cascading... shown —t in Figure 5 -37  ​  ​ nveils two options: —u L Validate Current Document: Checks the onscreen document against the validation preferences L Settings: Displays the Validation category in Preferences Figure 5 -37 You can easily validate your XML pages from within Dreamweaver using the Validation feature Cross-Reference To get a full overview of all your options, see Chapter 3 n 247 Part II: Designing... Web site Dreamweaver was one of the first Web-authoring tools to make the application of Cascading Style Sheets user-friendly ​  ​ nd in this latest ver—a sion, Dreamweaver has integrated CSS throughout the program Through Dreamweaver s intuitive interface, the Web designer can access more than 70 different CSS settings, affecting everything from type specs to multimedia-like transitions Dreamweaver. .. same external page can govern the interactivity of multiple pages Dreamweaver has long created a barrier to this ideal because all of its JavaScript behaviors are embedded in the page containing the interactivity To bridge the gap between the standard Dreamweaver approach to client-side scripting and the more modern method, Dreamweaver CS5 offers a new command: Externalize JavaScript When the Externalize... JavaScript file with DOM functions and CSS IDs 3 If you chose to externalize JavaScript only, Dreamweaver lists a single option, Remove JavaScript From Head Leave the option selected and click OK 4 If you chose to externalize JavaScript and attach unobtrusively, Dreamweaver displays all the attributes that act as triggers and suggested IDs, as shown in Figure 5 -36 To remove all of the triggers, leave all... rules and concepts? Dreamweaver offers many routes to explore CSS, but perhaps the easiest entry is through the Property inspector Set a font face, font size, or color on any bit of text and Dreamweaver applies your formatting either as a modification of an existing rule or as a new style that is added to the list of available styles, right in the Property inspector Caution Dreamweaver CS5 is much smarter... symbol, which cannot be previewed in Dreamweaver but is supported in Internet Explorer Tip Those characters that you can type directly into Dreamweaver s Document window, including the brackets and the ampersand, are automatically translated into the correct named characters in HTML Try this when in split-screen Code and Design view You can also enter a nonbreaking space in Dreamweaver by pressing Ctrl+Shift+spacebar... your Dreamweaver behaviors no longer are editable in the Behaviors panel L Special extended characters such as symbols and accented letters require the use of HTML character entities, which can either be named (as in ") or in decimal format (as in & #34 ;) In the next chapter, you learn how to work with Cascading Style Sheets ​  ​ lso known as CSS ​  ​ —a — to style and lay out your Web pages in Dreamweaver. .. Chapter 5: Accessing the Code Directly Tip To make sure your HTML pages are valid, you’ll need to use any of the Web’s numerous validation services Perhaps the most notable one run by the W3C at http://validator.w3.org n With Dreamweaver s Validation feature, you can check a single XML page After it is checked, the resulting errors and warnings, if any, can be stored in an XML file for future output Any error . shown in Figure 5 -30 . 3. Enter your HTML or XML code. Figure5 -30 Use the Quick Tag Editor’s Insert HTML mode to add tags not available through Dreamweaver s visual interface. 235 Chapter 5:. Applet Property inspector (see Figure 5 -33 ), the selected source file appears in the Code text box, and the folder appears in the Base text box. Figure5 -33 Use the Insert Applet button to insert. Out!”)</script> Figure5 -34 The generous Script dialog box provides plenty of room for modifying your JavaScript or VBScript. 2 43 Chapter 5: Accessing the Code Directly With Dreamweaver, you are