Adobe Dreamweaver CS3 Unleashed- P4

Adobe Dreamweaver CS3 Unleashed- P4: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars forstreamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver providesnumerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why somany windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowingdevelopers complete control when building websites and applications....
Nội dung trích xuất từ tài liệu:
Adobe Dreamweaver CS3 Unleashed- P4Youll also notice in Figure 2.65 that the Snippets panel is organized into two halves. The top half includes apreview of the code snippet selected within the categorized list of snippets in the bottom half. HTML snippetsare usually shown in a design view (showing what the HTML looks like in the browser), whereas JavaScriptand other code snippets are shown in Code view so that you can see the actual code. Inserting a snippet ismerely a matter of selecting the appropriate snippet and either dragging it into the code environment orchoosing the snippet and clicking the Insert button located in the bottom left of the Snippets panel.Creating your own snippet is just as easy but slightly more involved. To create your own snippet, followthese steps:1. Create a new folder for your snippet by right-clicking (Control+click) in the Snippets window and choosing New Folder. Give the snippet folder a descriptive name, remembering that other developers might want to use your snippets, too. If the folder is created in the wrong place, you can drag it to the level you want. Ill call my new folder Table Row Rollover.2. Right-click (Control+click) the folder and choose New Snippet from the context menu. Alternatively, you may have already written the snippet code in the page—if so, highlight the code you want to use as the snippet and right-click (Control+click) to choose Create New Snippet from the pop-up menu.3. You will then be presented with the Snippet dialog box. Fill in the snippet name and description. If you have highlighted existing code, the code box will already be filled in. Ill add the following HTML code to the Insert code text box: Code View: Home HelpDesk Company Directory Employee Store Admin This code will effectively create a new table complete with rows, that, when the users mouse rolls over them, changes the background color to a gray color. If you dont feel like typing all this code in yourself, you can open the SampleSnippetCode.html file that Ive included for you within the Assets folder of the chapter downloads.4. If you want the code to flow around a selected object, such as an image or table cell, select the Wrap Selection option, specifying which part of the code goes before the object and which after the object. If the code is a standalone block, choose the Insert Block option. Ill choose Insert Block. The completed Snippet dialog box should resemble Figure 2.66. Figure 2.66. Create the new snippet within the Snippet dialog box. [View full size image]5. When youve finished editing the Snippet dialog, click OK. The new snippet will appear within its folder and the Preview pane will display the HTML.To use the snippet, drag the snippet into the code environment and choose Preview in Browser or press F12(Option+F12) to test the results.Editing, moving, and deleting snippets are also a snap. To edit a snippet, right-click (Control+click) thesnippet and choose Edit from the context menu. The Snippet dialog appears, and you can edit the code orchange the description. To move snippets into other folders, drag them to the folder you want. To delete asnippet or its respective folder, right-click (Control+click) the snippet (or folder) and choose Delete.SummaryAs you have seen, building web pages in Dreamweaver is extremely intuitive and quick to pick up. Flankedby key panels and inspectors, building web pages in Dreamweaver is merely a matter of dragging anddropping objects onto the development environment and formatting attributes using the Property inspector,the Tag Inspector, and so on. This introductory chapter opened a new world to some important featureswithin Dreamweaver and should serve as a foundation for future development. In the next few chapters,well step away from development for a bit and discuss one of the most important topics as it relates toDreamweaver—site management.Chapter 3. Dreamweaver Site ManagementIN THIS CHAPTER The Importance of Defining Sites in Dreamweaver Defining a New Site in Dreamweaver Managing a Website in Dreamweaver Advanced Site Management OptionsIn the previous chapter, you learned how to build a simple web page within Dreamweaver. Some of themore notable concepts that you learned were page formatting, handling images, and linking. Although itseems obvious that Dreamweavers sole purpose is to create web pages, any web page editor can provide adeveloper with this functionality. What makes Dreamweaver truly unique and powerful at the same time arefeatures and functionality built in to its framework for managing your web pages, and more importantly,your webs ...