wiley adobe dreamweaver cs5 bible phần 2 doc

99 Setting Your Preferences IN THIS CHAPTER Dreamweaver made to order Customizing Dynamic HTML specs Extending preferences outside Dreamweaver Specifying your code formatting E veryone works differently. Whether you need to conform to a corpo- rate style sheet handed down from the powers that be or you think, “It just looks better that way,” Dreamweaver offers you the flexibility to shape your Web page tools and your code output. This chapter describes the options available in Dreamweaver’s Preferences and then details how you can instruct Dreamweaver to format source code your way. Customizing Your Environment The vast majority of Dreamweaver’s settings are controlled through the Preferences dialog box. You can open Preferences by choosing Edit ➪ Pref- erences (Dreamweaver ➪ Preferences) or by using the keyboard shortcut Ctrl+U (Command+U). Within Preferences, you find 20 different subjects listed on the left side of the screen. As you switch from one category to another by selecting a name from the Category list, the options available for that category appear in the main area of the dialog box. Most changes to Preferences take effect immediately after you close the window by clicking OK. This chapter covers all the options available in each category; the cat- egories are grouped by function rather than by order of appearance in the Category list. 100 Part I: Laying the Groundwork in Dreamweaver CS5 General preferences Dreamweaver’s General preferences, shown in Figure 3-1, cover the program’s appearance, user operation, and fundamental file settings. The appearance of the program’s interface may seem to be a trivial matter, but Dreamweaver is a program for designers and coders, to whom work envi- ronment is extremely important. These user-operation options, described in the following sec- tions, are based purely on how you, the user, work best. Figure3-1 Dreamweaver’s General Preferences enable you to change your program’s appearance and certain overall operations. Document options The first area of the General category, Document Options, determines how you work with HTML and other files. Tip In choosing all the preferences, including the General ones, you can work in two ways. If you are a seasoned Web designer, you probably want Dreamweaver to work in your established manner to minimize the learning curve. If you’re just starting out as a Web-page creator, work with the default options for a while and then try other options. You should know right away which style works for you. n 101 Chapter 3: Setting Your Preferences Open Documents In Tabs option This Macintosh-only checkbox tells Dreamweaver whether you want files to open in tabs instead of separate windows. Documents in tabs keep the workspace orderly and allow you to easily switch between open files. If you click the additional Always Show Tabs option, Dreamweaver will dis- play every document with a tab, even if there is only one. Show Welcome Screen option The welcome screen is a very helpful innovation that gets you up and running right away in Dreamweaver — whether you’re just starting out or in the middle of editing a full site. If you’re new to the program, Dreamweaver’s welcome screen gives you quick access to tutorials and a tour of the key features. After you’ve worked with the program for a while, you’ll appreciate the immediate access to the more recently opened files and one-click creation of static or dynamic pages. The welcome screen displays when Dreamweaver launches or when no document is cur- rently open. The welcome screen is extremely handy, but if it doesn’t fit with your workflow, you can disable it. Clear the Show Welcome Screen checkbox and, depending on your other settings and actions, the next time Dreamweaver opens you see either a blank, documentless environment or your pre- viously opened files. The welcome screen changes from time to time because it includes a Flash movie (located in the lower-right corner) that uses dynamically set parameters to display different information if you’re connected to the Internet when running Dreamweaver. Reopen Documents On Startup option In an ideal world, a Web designer works on one page at a time, carefully crafting each and every detail. Well, it’s far from an ideal world and often designers are working on several pages simultaneously — and over multiple sessions. If your workflow fits into this real-world model, the Reopen Documents On Startup option makes your life a little easier. When I’m working on a Web application, I often have four to six pages (or more) open simulta- neously. If I’m continuing my work from one day to the next, the first thing I do is to make sure I’ve opened all the files that I need. With the Reopen Documents On Startup option selected, Dreamweaver automatically opens any files left unclosed when I last quit the program. If this option is left unselected, you see either the welcome screen or a documentless environment. Warn When Opening Read-Only Files option Read-only files have been locked to prevent accidental overwriting. Optionally, Dreamweaver can warn you when such a file is opened. The warning is actually more than just an alert, however. Dreamweaver provides an option on the warning dialog box to make the file writable (or check it out if you’re using the Check In/Check Out feature). Alternatively, you can just view the file. 102 Part I: Laying the Groundwork in Dreamweaver CS5 Cross-Reference See Chapter 31 for more on the Check In/Check Out feature. n Although Dreamweaver enables you to edit the file either way, if the document is still read-only when you save your changes, the Save As dialog box opens, and you’re prompted to store the file under a new name. Enable Related Files option With the Enable Related Files option selected, Dreamweaver displays a link to any file referenced in the primary source document in the Related Files bar. Click any related file link to view its source code while continuing to show the rendered main page in Display or Live view. Related files can be CSS external files, server-side includes, Library items, JavaScript source files, or any other type of file that is linked, included, or imported. The associated Discover Dynamic Related Files list determines whether you want Dreamweaver to process the server-side code in a PHP, ColdFusion, or ASP page to identify any additional related files on demand (the default Manually option), all the time (Automatically) or never (Disabled). Most content management systems such as WordPress, Drupal, or Joomla rely on server-side code to combine files for needed functionality. With the Discover Dynamic Related Files option, you can locate specific functions or styles that would otherwise remain hidden. Cross-Reference Chapter 5 has all the details on how to make the most of the Related Files feature. n Update Links option As your site grows in complexity, keeping track of the various links is an increasingly difficult task. Dreamweaver has several enhanced features to help you manage links, and the Update Links When Moving Files option is one of them. Dreamweaver can check each link on a page when a file is moved — whether it is the Web page you’re working on or one of the support files, such as an image, that goes on the page. The Update Links option determines how Dreamweaver reacts when it notes an altered link. By default, the Update Links When Moving Files option is set to Prompt, which causes Dream- weaver to alert you to any link changes and requires you to verify the code alterations by clicking the Update button, as shown in Figure 3-2. To leave the files as they are, click the Don’t Update button. You can elect to have Dreamweaver automatically keep your pages up-to-date by select- ing the Always option from the Update Links drop-down list. Finally, you can select the Never option, and Dreamweaver ignores the link changes necessary when you move, rename, or delete a file. As a general rule, I keep my Update Links option set to Always. It is a very rare circumstance when I intentionally maintain a bad link on my Web page. Likewise, I recommend using the Never option with extreme caution. 103 Chapter 3: Setting Your Preferences Figure3-2 Dreamweaver offers to update all links when a file is moved or renamed. Editing options The second main section of the General category of the Preferences dialog box consists of numer- ous checkbox options you can turn on or off. Overall, these options fall into the user-interaction category, reflecting how you like to work. Take the Show Dialog When Inserting Objects option, for example. Some Web creators prefer to enter all their attributes at one time through the Property inspector and would rather not have dialog boxes appear for every inserted object. Others want to get their file sources in immediately and modify the rest later. The choice depends on how you want to work. The following sections describe various other options. Show Dialog When Inserting Objects option By default, almost all the objects that Dreamweaver inserts — via either the Insert panel or the Insert menu — open an initial dialog box to gather needed information. In some cases, the dialog box enables you to input a URL or browse for a source file. Turning off the Show Dialog When Inserting Objects option causes Dreamweaver to insert a default-sized object, or a placeholder, for the object in this circumstance. You must then enter all attributes through the Property inspector. Tip To selectively avoid the prompts, leave this option checked, but press Ctrl+click (Option+click) on an object to skip the prompt. n Enable Double-Byte Inline Input option Some computer representations of languages, primarily Asian languages, require more raw descriptive power than others. The ideogram for snow, for example, is far more complex than a four-letter word. These languages need twice the number of bytes per character and are known as double-byte languages. In versions of Dreamweaver before 2, all double-byte characters had to go through a separate text-input window, instead of directly into the Document window. Dreamweaver now simplifies the page creation process for double-byte languages with the Enable Double-Byte Inline Input option. If selected, this option enables double-byte characters to be entered directly into the Document window. To use the old method of inserting such characters, deselect this option. 104 Part I: Laying the Groundwork in Dreamweaver CS5 Switch To Plain Paragraph After Heading option This may seem like a small thing, but this nifty little feature is one of my favorites. If the Switch To Plain Paragraph After Heading option is not enabled, pressing Enter (Return) after a heading tag ( <h1> or <h2>, for example) causes the next line to maintain the heading style. Select the Switch To Plain Paragraph After Heading option so that the next line is a standard paragraph ( <p>) tag. Use this option to speed up your workflow. You’ll almost always want a heading followed by a plain paragraph. This option gets rid of one more click of the mouse or shortcut key, making your workflow that much faster. Allow Multiple Consecutive Spaces option Some designers prefer adding two spaces after every period, or they like to use multiple spaces to indent paragraphs to maintain a print-type appearance. Without this option selected, this type of spacing requires that you press Ctrl+Shift+Space (Command+Shift+Space) to add an &nbsp; to the document. Select the Allow Multiple Consecutive Spaces option, and Dreamweaver adds the necessary code for you, without requiring the additional keyboard shortcut. Tip This option may seem wonderful at first, but I recommend leaving it unchecked. Having a single space after a sentence is the standard online and is even becoming standard practice in most print applications. (You’ll find no double spaces in this little tome.) Enabling this option only encourages bad habits. n Use <strong> And <em> In Place Of <b> And <i> option In new HTML and XHTML standards, the <b> and <i> tags are deprecated because they don’t imply any structural significance to the text they surround. Many screen readers may even com- pletely ignore the <b> and <i> tags. Check the Use <strong> And <em> In Place Of <b> And <i> box to use the more syntactically correct <strong> and <em> tags in their place. The option to use <strong> and <em> tags enables you to create more descriptive HTML code. Individuals using screen readers benefit, and you make your code more syntactically correct, fur- ther separating style from content. Warn When Placing Editable Regions Within <p> Or <h1>-<h6> Tags option Sometimes Dreamweaver adheres a bit too strictly to the rules for my taste — and this prefer- ence addresses one of those times. In Dreamweaver templates, editable regions define areas of the page that can be altered in the pages derived from templates. Most often, designers wrap editable regions around block elements such as headings or paragraphs. However, there are occasions when it is advantageous to make just the content within block tags editable and lock the sur- rounding tags themselves. I, for example, apply this technique when I want a template-derived page to always start with a single <h1> heading, but know that the heading will always be differ- ent. Dreamweaver regards this approach with suspicion because such an editable region will not allow the user to press Enter (Return) and add more block-level tags. 105 Chapter 3: Setting Your Preferences To prevent novices from inadvertently limiting the expansion of content within an editable region, Dreamweaver displays an alert whenever a template is saved that has an editable region within a block element. You can continue the save — and the subsequent updating of template- derived pages — or you can cancel and correct the situation. In previous versions, Dreamweaver displayed this error without recourse, even when the coding it was protesting was intentional. By disabling the Warn When Placing Editable Regions Within <p> Or <h1>-<h6> Tags option, you can avoid having to repeatedly dismiss the alert. If you’re new to Dreamweaver and its template technology, I recommend that you enable this option. Doing so will likely save you grief on your initial template-derived pages and prevent you from having to redo the templates. However, once you’ve worked with templates for a while, I suggest you disable this option; the technique of embedding editable regions within block tags is a common one and not having to acknowledge the alert over and over again is a major time-saver. Maximum Number Of History Steps option Almost every Dreamweaver action, except the mouse click, is listed in the History panel. These steps can be undone by moving the slider on the History panel or choosing Edit ➪ Undo. A limit exists, however, to the number of steps that can be tracked. By default, this option is set to 50. Although 50 history steps are more than enough for most systems, you can alter this number by changing the Maximum Number Of History Steps value. When the maximum number of history steps is exceeded, the oldest actions are wiped from memory and made unrecoverable. The his- tory steps are not discarded when a file is saved. Spelling Dictionary option The Spelling Dictionary option enables you to select a spell-checking dictionary from any of those installed. In addition to the standard English-language version, which has 15 options — Danish, Dutch, English (American), English (British), English (Canadian), Finnish, French, German (Classic), German (New Spelling), Italian, Norwegian (Bokml), Portuguese (Brazilian), Portuguese (Iberian), Spanish, and Swedish — additional dictionaries exist online. As of this writing, dictionaries in the following other languages are also available: German, Spanish, Swedish, French, Italian, Brazilian- Portuguese, and Catalan. You can download these dictionaries from Adobe’s Dreamweaver Exchange at www.adobe.com/support/dreamweaver/documentation/dictionary.html. After a dictionary is downloaded, save the .dat file in the Configuration\Dictionaries folder and restart Dreamweaver. To select a different dictionary for spell checking, select the Dictionary option button and choose an item from the drop-down list. Dreamweaver also maintains a personal dictionary (although it’s not visible on the list) to hold any words you want Dreamweaver to learn during the spell- checking process. So the next time you spell check a technical document, just click Add for each word Dreamweaver catches that you want it to remember. That word is added to the personal dictionary, and you never have to worry about it again. 106 Part I: Laying the Groundwork in Dreamweaver CS5 Preferences for invisible elements By their nature, all HTML markup tags remain unseen to one degree or another when presented for viewing through the browser. You may want to see certain elements while designing a page, however. For example, adjusting line spacing is a common task, and turning on the visibility of the line break tag <br> can help you understand the layout. Dreamweaver enables you to control the visibility of 13 different codes, as well as dynamic data and server-side includes — or rather their symbols, as shown in Figure 3-3. When, for example, a named anchor is inserted, Dreamweaver shows you a small gold shield with an anchor emblem. Not only does this shield indicate the anchor’s position, but you can also manipulate the code with cut-and-paste or drag-and-drop techniques. Moreover, clicking a symbol opens the perti- nent Property inspector and enables quick changes to the tag’s attributes. Tip Temporarily hide all invisible elements by deselecting View ➪ Visual Aids ➪ Invisible Elements. n The 13 items controlled through the Invisible Elements panel are as follows: Named Anchors L Scripts L Comments L Line Breaks L Client-Side Image Maps L Embedded Styles L Hidden Form Fields L Form Delimiter L Anchor Points For AP Elements L Anchor Points For Aligned Elements L Visual Server Markup Tags (ASP, CFML, . . . ) L Nonvisual Server Markup Tags (ASP, CFML, . . . ) L CSS Display: None L Most of the Invisible Elements options display or hide small symbols in Dreamweaver’s visual Document window. Several options, however, show an outline or another type of highlight. Turning off Form Delimiter, for example, removes the dashed line that surrounds a form in the Document window. 107 Chapter 3: Setting Your Preferences Figure3-3 You can show or hide any or all of the 13 invisible elements listed in the Preferences dialog box and determine the appearance of recordset fields and includes. Tip You may have noticed that the PHP, ColdFusion, Active Server Page, and .NET tags are combined into one symbol, Server Markup tags. Dreamweaver’s capability to handle dynamic pages generated by data- bases makes these invisible elements essential. I generally leave the Nonvisual Server Markup Tags option unchecked because these icons flag server-side coding in the page and tend to interrupt the flow of the design. n Dreamweaver-developed pages often include references to dynamic text. Dynamic text is replaced by an entry from a recordset when the page is processed by the application server. Dreamweaver uses what is called dot notation in programming circles to fully display these names, such as {rsMaillist.EmailAddress}, enclosed in curly braces. When designing a page, the field names may be longer than the actual data, and the full dot notation becomes a visual hindrance rather than an aid. In these situations, you may want to use Dreamweaver’s alternative dynamic text syntax, an empty pair of curly braces: {}. Enable this option from the Show Dynamic Text As drop-down list on the Invisible Elements panel. [...]... paragraphs New Document preferences Dreamweaver has greatly improved the New Document interface You can now quickly choose which type of document you want to create, as well as select from built-in page designs and CSS The New Document dialog appears each time you press Ctrl+N (Command+N) or choose File ➪ New Use the New Document preferences (shown in Figure 3-8) to refine how you interact with the New Document... New Document dialog Figure 3-8 Choose your default document extensions, encoding, and HTML version 116 Chapter 3: Setting Your Preferences Default Document option The Default Document menu contains all the default document types in the New Document dialog box (File ➪ New) Choose the document type you want to be the default for quickly creating new documents If you design ASP applications more often... Show New Document Dialog Box On Control+N option If you consistently use the same document type, clear the Show New Document Dialog Box On Control+N (Command+N) box to prevent the New Document dialog box from coming up when you press Ctrl+N (Command+N) This can measurably speed up creating new documents Leave this box checked to see the New Document dialog box every time you create a new document 117... Windows, are integrated with Dreamweaver to varying degrees Both of the editors can be called from within Dreamweaver, and both have Dreamweaver buttons for returning to the main program ​  ​ witching between the editor —s and Dreamweaver automatically updates the page Like Dreamweaver s internal HTML editor, BBEdit highlights the corresponding code to a selection made in Dreamweaver; this property does... images One optimal choice is Adobe Fireworks, a graphics editor designed specifically for the Web, which integrates seamlessly with Dreamweaver In fact, it integrates so nicely that this book includes an entire chapter on it, Chapter 24 n Copy/Paste preferences Dreamweaver has beefed up its copy-and-paste prowess when it comes to text Now, when a copied section of any text document ​  ​ncluding those... Steps 2 through 6 Click OK when you finish Caution You don’t have to enter the word “pixels” or the abbreviation “px” after your values in the Width and Height columns of the Window Sizes list box, but you can If you enter any dimensions under 20 , Dreamweaver converts the measurement to its smallest possible window size, 20 pixels n 110 Chapter 3: Setting Your Preferences Connection Speed option Dreamweaver. .. decide whether to update them within Dreamweaver L Always: Updates the file in Dreamweaver automatically when the file is changed in an outside program L Never: Assumes that you want to make all updates from within Dreamweaver yourself Personally, I prefer to have Dreamweaver always update my files I find that it saves a couple of mouse clicks ​  ​ ot to mention time —n 1 12 Chapter 3: Setting Your Preferences... external editor, Dreamweaver prompts you to save it regardless of your preference settings If you opt not to save the file, the external editor is not opened, because it has no saved file to display n Fireworks option Dreamweaver enjoys a tight integration with its sister graphics program, Adobe Fireworks To empower Dreamweaver with Fireworks capabilities, such as Launch and Edit, Dreamweaver has to... checkboxes under Use Shorthand For to have Dreamweaver write your style code in this fashion 122 Chapter 3: Setting Your Preferences The second option on the CSS Styles category determines how Dreamweaver edits styles in previously coded pages If you want to retain the format of the original page, click Use Shorthand If Original Used Shorthand If you want Dreamweaver to write new code in the manner... box Dreamweaver then asks if you want to continue to wait or to disconnect when the time limit is reached, but you can maintain your FTP connection regardless by deselecting this option 125 Part I: Laying the Groundwork in Dreamweaver CS5 FTP Time Out option Client-server communication is prone to glitches Rather than hanging up your machine while trying to reach a server that is down or slow, Dreamweaver . Brazilian- Portuguese, and Catalan. You can download these dictionaries from Adobe s Dreamweaver Exchange at www .adobe. com/support /dreamweaver/ documentation/dictionary.html. After a dictionary is downloaded,. languages. In versions of Dreamweaver before 2, all double-byte characters had to go through a separate text-input window, instead of directly into the Document window. Dreamweaver now simplifies. can just view the file. 1 02 Part I: Laying the Groundwork in Dreamweaver CS5 Cross-Reference See Chapter 31 for more on the Check In/Check Out feature. n Although Dreamweaver enables you to