Wile Adobe dreamweaver CS5 Bible phần 6 pps

638 Part III: Adding Advanced Design Features Figure15-13 Choose your frame target from the Property inspector’s Target drop-down list. The generic nature of these reserved target names enables you to use them repeatedly on different Web pages, without having to code a particular reference each time. Caution A phenomenon known as recursive frames can be dangerous to your site setup. For example, say you have a frameset named index_frame.html. If you include a link to index_frame.html in any frame on your current page and leave the target empty or set the target as _self, when the user selects that link, the entire frameset loads into the current frame — including another link to index_frame.html. Browsers can handle about three or four iterations of this recursion before they crash. To avoid the problem, set your frameset target to _top. n Targeting specific frames in your frameset Recall the importance of naming each frame in your frameset. After you have entered a name in the Name text box of the Frame Property inspector, Dreamweaver dynamically updates the Target list to include that name. This feature enables you to target specific frames in your frame- set in the same manner that you target the reserved names noted previously. Although you can always type the frame name directly in the Target text box, the drop-down list comes in handy for this task. Not only can you avoid keeping track of the various frame names in your Web page, but you prevent typing errors as well. Targets are case-sensitive, and names must match exactly or the browser won’t be able to find the target. Updating two or more frames at once Sooner or later, most Web designers using frames need to update more than one frame with a single click. The problem is, you can’t group two or more URLs together in an anchor tag. Here is an easy-to-implement solution, thanks to Dreamweaver’s behaviors. Cross-Reference If you’re not familiar with Dreamweaver’s JavaScript behaviors, you might want to look at Chapter 11 before continuing. n 639 Chapter 15: Using Frames and Framesets To update more than one frame target from a single link, follow these steps: 1. Select your link text or image in the frame. 2. If you selected text for your link, type javascript:; in the Link field of the Text Property inspector. The behavior cannot be attached directly to the text; instead, it must be associated with an anchor or an image. Typing javascript:; in the Link field creates the necessary anchor tag. Tip If one of the multiple links targets the frame that contains the hotspot, instead of typing javascript:; in the Link field, you can enter the path to the file that will load in that frame. n 3. Open the Behaviors panel by choosing Window ➪ Behaviors. 4. Click the Add (+) button at the top of the Behaviors panel, and in the drop-down menu, choose Show Events For ➪ 4.0 and Later Browsers. 5. Click the Add (+) button again to display the list of available behaviors and choose Go To URL. 6. Dreamweaver displays the Go To URL dialog box (see Figure 15-14) and scans your document for all named frames. Select a target frame from the list of windows or frames. Figure15-14 You can cause two or more frames, marked by the trailing asterisk, to update from a single link by using Dreamweaver’s Go To URL behavior. Caution You won’t be able to use this behavior until you name your frames as detailed in the section “Naming Your Frames” earlier in this chapter. n 7. Enter a URL or click the Browse button to select one. Dreamweaver places an asterisk after the targeted frame to indicate that a URL has been selected for it. You can see this in Figure 15-14. 640 Part III: Adding Advanced Design Features 8. Repeat Steps 6 and 7 for any additional frames you want to target. 9. Click OK when you’re finished. 10. If onClick is not already listed in the Events column of the Behaviors panel, click the arrow button next to the event and choose (onClick) from the event list. Now, whenever you click your one link, the browser opens the URLs in the targeted frames in the order specified. SettingFrameTargets In this Technique, you set the text navigation links to work properly with the frameset. Three links open pages within the frameset and a fourth opens a page outside the frameset. 1. Re-open the frameset previously saved, frames_start.htm. 2. In the bottom frame, select the text Home. 3. From the Property inspector, drag the Link point-to-file icon to the home_fr.htm file. 4. Select mainFrame from the Target list. Dreamweaver automatically adds the names of frames in the current frameset to the Target list. 5. Repeat Steps 2–4, with the text Sales and the file sales_fr.htm. 6. Repeat Steps 2–4 again, with the text Rentals and the file rentals_fr.htm. Make sure that you set the Target list to mainFrame for both the previous links. 7. Select the final text phrase, About Us, and drag the Link point-to-file icon to the about.htm file. Because about.htm is a standard HTML file and not part of the frameset, you’ll choose a different target. 8. From the Target list, choose _top. 9. Save your page and press F12 (Option+F12) to preview the frameset in your primary browser. When you try the navigation links, you notice that the first three links open their pages within the frameset as expected whereas the fourth link, about.htm, replaces the frameset with a single page. If you click the Home link at the bottom of this page, the frameset re-opens. 641 Chapter 15: Using Frames and Framesets Handling Frameless Browsers Some older browser versions, still in use to a small degree today, do not support frames. Netscape began supporting frames in Navigator version 2.0; Microsoft didn’t start until IE version 3.0 — and a few of the earlier versions for both browsers are still in use, particularly among AOL users. HTML has a built-in mechanism for working with browsers that are not frame-enabled: the <noframes> . . . </noframes> tag pair. A more vital reason to use the <noframes> tag than supporting older browsers is that most of the search-engine indexing systems (called spiders) don’t work with frames. If your frameset is index.html and you want the spider to find the rest of your site, the <noframes> content must include descriptive text as well as navigational links to other pages in your site. Many Webmasters also include links to current versions of Communicator or Internet Explorer to encourage their nonframe-capable visitors to upgrade. When you begin to construct any frameset, Dreamweaver automatically inserts a <noframes> area just below the closing </frameset> tag. If a browser is not frames-capable, it ignores the frameset and frame information and renders what is found in the <noframes> section. Note If you are manually coding a frameset, in Code view, you can insert the <noframes> . . . </noframes> tag pair by clicking the No Frames button in the Frames menu of the HTML category of the Insert panel. n What should you put into the <noframes> section? To ensure the widest possible audience, Webmasters typically insert links to a nonframe version of the site. The links can be as obvious or as discreet as you care to make them and, if used, are placed on the site’s home page. Dreamweaver includes a facility for easily adding and modifying the <noframes> content. Choose Modify ➪ Frameset ➪ Edit NoFrames Content to open the NoFrames Content window. As you can see in Figure 15-15, this window is identical to the regular Dreamweaver Document window, with the exception of the text NoFrames Content in a label at the top of the editing area. In this window, you have access to all the same objects and panels that you normally do. When you have finished editing your <noframes> content, choose Modify ➪ Frameset ➪ Edit NoFrames Content again to deselect the option and return to the frameset. Keep the following pointers in mind when working in the NoFrames Content window: The page properties of the L <noframes> content are the same as the page properties of the frameset. You can select the frameset and then choose Modify ➪ Page Properties to open the Page Properties dialog box. While in the NoFrames Content window, you can also right-click (Control+click) in any open space to access the Page Properties command. 642 Part III: Adding Advanced Design Features Dreamweaver disables the File L ➪ Open commands when the NoFrames Content window is onscreen. To move existing content into the <noframes> section, use Dreamweaver’s Copy and Paste features. The L <noframes> section is located in the frameset page, which is the primary page examined by search engine spiders. It’s a good idea to enter <meta> tag information detailing the site in the frameset page. While you’re in the NoFrames Content window, you can insert the <meta> tags using the Head category of the Insert panel. Figure15-15 Through the Edit NoFrames Content command, Dreamweaver enables you to specify what’s seen by visi- tors whose browsers are not frame-capable. Investigating Iframes The <iframe> tag (short for inline frames) is an HTML 4.0 specification worth noting. An iframe is used to include one HTML document inside another — without building a frameset. What makes iframes visually arresting and extremely useful is their capability to display scroll bars automatically, as shown in Figure 15-16. Iframes are supported by Internet Explorer 4 and later, Firefox, Netscape 6 and later, and Safari. 643 Chapter 15: Using Frames and Framesets Figure15-16 The iframe — also known as an inline frame — is a cutting-edge technique for including one HTML page within another visible in Live View or when previewed in a browser. The <iframe> tag uses the src attribute to specify which HTML file is to be included. Any content — text, images, or whatever — found between the opening and closing <iframe> tags is displayed only if the browser does not support iframes. In other words, it’s the no-iframe content. Here’s an iframe code example: <iframe src=”/includes/salespromo.htm” name=”promoFrame” i style=”position:absolute; width:200px; height:300px; top:139px; i left:530px”>Iframes are not supported by this browser.</iframe> If you’re familiar with Cascading Style Sheet AP elements, you may notice that the style attri- bute is identical in iframes. This has an interesting effect in Dreamweaver: iframe code with the style attribute set to position:absolute is displayed like an AP element, as shown in Figure 15-17. This makes positioning and resizing the iframe straightforward. To see the actual iframe content, preview the page in a compatible browser. 644 Part III: Adding Advanced Design Features Figure15-17 When you view an absolutely positioned iframe tag in Dreamweaver, it appears like an AP element, complete with resizing handles. Note An iframe is depicted in Design view as a solid rectangle, even if absolute positioning is not used. Although you can’t see the content at design time in Dreamweaver without previewing the page in a browser, the iframe dimensions are rendered correctly to preserve the layout. n Caution Specifying position:absolute in the style attribute enables you to exactly position a floating frame on the page. However, if you specify position:absolute and your other content is not contained within AP elements, your floating frame may overlap the other content on your page. For this reason, it is best to use floating frames in combination with a CSS-based layout. You can also specify a style of position:relative. In this case, browsers display the floating frame on the page relative to the other page content, even if that content is not contained within AP elements. Note, however, that Design view does not always correctly display floating frames that are positioned relatively, and sometimes the floating frame overlaps existing content, making it difficult to edit. Again, it is best to lay out your content using CSS positioning and specify position:absolute for your <iframe> if you are using floating frames. n 645 Chapter 15: Using Frames and Framesets In Dreamweaver, iframes are referred to as floating frames. Dreamweaver facilitates the inclusion of iframes in your documents with the Floating Frame button in the Frames menu of the HTML category of the Insert panel. Note Two Frames menus are available in Dreamweaver: one in the Layout category and one in the HTML category. Be sure you switch to the HTML category before attempting to insert an iframe (floating frame). n To insert a floating frame in your document, follow these steps: 1. If you are working in Design view, switch to Code view by choosing View ➪ Code. 2. Position the cursor after the <body> tag in your document. 3. Insert the <iframe> tag by clicking the Floating Frame button on the Frames menu of the Insert panel (HTML category). Note You cannot access the floating frame command while you are in Design view. If you are in Code and Design view, the cursor must be in the Code window for the command to be available. n 4. Specify the attributes for the <iframe> tag. To do this, right-click (Control+click) the tag and choose Edit Tag <iframe> from the drop-down list. 5. The Tag Editor for iframes opens. In this dialog box, specify at least the following: Source: L This is the file that will be displayed within the floating frame. Scrolling: L This attribute specifies whether scroll bars will appear in the frame. Style: L In the Style Sheet/Accessibility category, type position:absolute in the Style box. If you want to add other style options, separate them with semicolons. Alternate Content: L Select the Alternate Content category and then specify the text that will be displayed in browsers that don’t support floating frames. 6. In Design view, you can size and position the floating frame as you would any AP element. Cross-Reference Refer to Chapter 10 for more information about positioning and sizing AP elements. n 646 Part III: Adding Advanced Design Features Summary Frames are a significant tool for Web designers. With frames and framesets, you can divide a single Web page into multiple, independent areas. Dreamweaver gives Web designers quick and easy access to frame design through its drag-and-drop interface. When you’re working with frames and framesets, keep these points in mind: A framed Web page consists of a separate HTML document for each frame and one L additional file that describes the frame structure, called the frameset. A frameset comprises columns and rows, which can be sized absolutely in pixels as a L percentage of the browser window or relative to the other columns or rows. Dreamweaver enables you to reposition frame borders by dragging them to a new loca- L tion. You can also add new frames by Alt+clicking (Option+clicking) as you drag any existing frame border. Framesets can be nested to create more complex column and row arrangements. L Selecting the frame border displays the Frameset Property inspector. Select any individual frame through the Frames panel. After you select the frame, you L can display the Frame Property inspector. Make your links appear in a specific frame by assigning targets to the links. Dreamweaver L supports both structured and named targets. You can update two or more frames with one link by using the Dreamweaver Go To URL behavior. You should include information and/or links for browsers that are not frame-capable L through Dreamweaver’s Edit NoFrames Content feature. Floating frames, as defined in HTML 4.0, can be implemented in Dreamweaver by ini- L tially hand-editing the <iframe> tag in Code view. After inserting the tag, the floating frame can be sized and positioned in Design view. In the next chapter, you learn how to work with Ajax technologies, which combine XML, JavaScript and CSS, in general and Adobe’s own Ajax implementation, Spry, in particular. 647 Powering Ajax Pages with Spry IN THIS CHAPTER Understanding Ajax Learning about Spry Incorporating Spry XML data Dreamweaver Technique: Adding Spry Data Validating with Spry form widgets Advancing layouts with Spry widgets Applying Spry effects R emember the first time you saw Google Maps? If you’re like me, after you’d spent a good amount of time clicking and dragging the map around or zooming in on a satellite view, you did a right-click to confirm your suspicion that it was done with Flash. Wrong! The magic of Google Maps ( http://maps.google.com), as well as other sophisticated sites such as Flickr ( http://flickr.com) and Yahoo! Tech (http:// tech.yahoo.com ), all rely on a relatively new technology known as Ajax. Ajax combines advanced JavaScript coding, Document Object Model (DOM) manipulation, and XML data to allow partial page refreshes without long waits for a new page of HTML to arrive from the server. Ajax is highly touted as a key component of the next-generation Internet, known in designer circles as Web 2.0. To make it possible for more and more people to integrate Ajax techniques into their sites, numerous implementations have been developed. One such implementation, Spry, was developed by Adobe and released for use by the general public. The Dreamweaver engineers took Spry to the next level and developed a series of objects and features to make it easy for designers to incorporate the advanced functionality of Ajax into their sites. This chapter explores the relationship between Ajax, Spry, and the new Spry tools in Dreamweaver. After an overview that provides the back- ground you’ll need on Ajax and Spry, you learn how to use the Spry data tools to create interactive page regions that update instantly, without requiring a full page refresh. You also get a look at a series of Spry widgets, [...]... their sites Adobe jumped on the Ajax bandwagon with Spry in early 20 06 through a public release of the technology on the Adobe Labs site (see Figure  16- 1) Spry is officially known as a framework for Ajax: a framework is a set of JavaScript libraries combined with methods for applying the JavaScript functions in standard Web pages Figure  16- 1 Investigate the Spry framework at the Adobe Labs site 64 9 Part... Design Features Note Adobe continues to develop the Spry framework As of this writing, the version available on the Adobe Labs site and the one available in Dreamweaver CS5 are the same, version 1 .6. 1 It is possible ​  ​ nd, in fact, highly —a likely ​  ​ hat a new version of Spry will be released on Labs before the next major release of Dreamweaver If —t that is the case, the Dreamweaver team will... view: each is contained by a blue border with an identifying tab, as shown in Figure  16- 16, much like editable regions for Dreamweaver templates To select any widget to modify the values of its Property inspector, click the blue tab Figure  16- 16 Select a widget’s blue tab to invoke its Property inspector 67 2 Chapter 16: Powering Ajax Pages with Spry As with the Spry Data objects, support files ​  ​ ne... layout options has its own Set Up dialog box These options are the same as those offered for XML data 65 5 Part III: Adding Advanced Design Features Figure  16- 6 Dreamweaver provides a range of layout options, including a completely custom one 13 Choose the desired display option for your Spry data: L L 65 6 Insert Table: Adds a standard table to the page, enhanced to include sortable columns Click Set Up... reloaded You can find a good example of —c this type of Spry-driven interaction on Adobe Labs (http://labs .adobe. com/technologies/ spry/demos/products/index.html), shown in Figure  16- 2 Figure  16- 2 Choose any Adobe product from the master region on the left to see related info in the detail region on the right Caution In Dreamweaver CS4, integrating data became a whole lot easier, thanks to the totally... shown in Figure  16- 10 3 Select the type of tag you’d like to use ​  ​ ither DIV or SPAN ​  ​ rom the Container —e —f options 4 Choose the type of tag ​  ​ tandard Region or Detail Region ​  ​ rom the Type options —s —f 5 Select the desired data set from the Spry Data Set list 6 If you have a current selection, choose either the Wrap Selection or Replace Selection option 66 2 Chapter 16: Powering Ajax... data column that contains the filename of the image 6 If the images are stored in a folder different from the current page, enter the path to the folder in the URL field before the inserted code, as shown in Figure  16- 12 7 When you’re done, click OK Figure  16- 12 Any connected Spry Data Set can be accessed through the Select Image Source dialog box 66 5 Part III: Adding Advanced Design Features The methods... flexible and robust and is recommended for situations where the data might be 66 6 Chapter 16: Powering Ajax Pages with Spry filtered or conditionally displayed For more details on these scenarios, see the sidebar “Restricting Repeated Spry Data” later in this section 5 Select the desired data set from the Spry Data Set list 6 If you have a current selection, choose either the Wrap Selection or Replace... spry:when=”’{city}’ != ‘New York’”>No New York entries were found For more details on Spry conditional coding, see http://labs .adobe. com/technologies/spry/ articles/data_set_overview/#ConditionalConstructsSection 66 8 Chapter 16: Powering Ajax Pages with Spry Figure  16- 15 The same data can be presented in a multitude of ways through the Spry Repeat List object Enhanced CSS for Spry  Because Spry... included columns, as shown in Figure  16- 9 66 0 Chapter 16: Powering Ajax Pages with Spry In Code view, the data set object is declared through the JavaScript keyword new: var ds1 = new Spry.Data.XMLDataSet(“example.xml”, “events/event”,{sortOnLoad:”name”,sortOrderOnLoad:”ascending”}); Next, you learn how to identify specific areas of the page as Spry regions Figure  16- 8 With the Insert Table layout, you . type of Spry-driven interaction on Adobe Labs ( http://labs .adobe. com/technologies/ spry/demos/products/index.html) , shown in Figure 16- 2. Figure 16- 2 Choose any Adobe product from the master region. box. These options are the same as those offered for XML data. 65 6 Part III: Adding Advanced Design Features Figure 16- 6 Dreamweaver provides a range of layout options, including a completely. functions in standard Web pages. Figure 16- 1 Investigate the Spry framework at the Adobe Labs site. 65 0 Part III: Adding Advanced Design Features Note Adobe continues to develop the Spry framework.