macromedia Dreamweaver MX Bible phần 3 doc

201 Chapter 5 ✦ Setting Up a Site Cloaking folders Cloaking excludes cloaked folders from the following operations: ✦ Put, Get ✦ Check In, Check Out ✦ Reports ✦ Select Newer Local, Select Newer Remote ✦ Sitewide commands, such as Check Links Sitewide and Find And Replace Entire Site ✦ Synchronize ✦ Asset panel contents ✦ Template and library updating Cloaking and uncloaking site folders is a breeze: 1. In the Site panel, select the desired site from the drop-down list box. Note that this site must be cloaking-enabled, which is the default site setting. If, how- ever, you should need to cloaking-enable a site, select it in the Site panel and choose Site ➪ Cloaking ➪ Enable Cloaking. 2. Select the folder(s) you want to cloak or uncloak. 3. From the Site panel menu, choose Site ➪ Cloaking ➪ Cloak or Site ➪ Cloaking ➪ Uncloak. Alternatively, you can right-click (Control+click) a selected folder and use the context menu. A red, diagonal line across the selected folders appears or disappears to show that they are cloaked or uncloaked, as shown in Figure 5-9. Uncloaking folders (and files) Dreamweaver enables you to easily uncloak folders (and the files they contain) in a site. Just perform the following steps: 1. In the Site panel, select the desired site from the list box. Again, this site must be cloaking-enabled. 2. Select the desired site folder. 3. To uncloak only the selected folder (and the files it contains), choose Site ➪ Cloaking ➪ Uncloak from the Site panel menu or the context menu that appears when you right- click (Control+click) the selected folder. To uncloak all site folders (and files), choose Site ➪ Cloaking ➪ Uncloak All from the Site panel menu or the pop-up context menu. The red, diagonal lines across all specified folder and file icons disappear, indicating that they are uncloaked. When you uncloak an entire site, you cannot undo it! If you want to recloak folders, you’ll have to do so manually. Caution 074931-6 ch05.F 7/18/02 6:57 AM Page 201 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 202 Part I ✦ Dreamweaver MX Basics Figure 5-9: You can easily cloak or uncloak your site folders. Managing Site Info You can change any of the information associated with your local site roots by selecting Site ➪ Edit Sites from the Site panel or main Dreamweaver menu. Choose the site you want to modify from the Edit Sites dialog box, and click the Edit button; you’ll see the corresponding information for you to edit. After your participation in a project has ended, you can remove the site from your list. In the Edit Sites dialog box, choose the site you want to remove, and click the Remove button. Note that this action removes the site only from Dreamweaver’s internal site list; it does not actu- ally delete any files or folders from your hard drive. Before you remove a site, make sure you jot down the site user name and password for ref- erence in case you need to resurrect the site someday. With the local site root folder established, Dreamweaver can properly manage links regard- less of which address format is used. The various address formats are explained in the follow- ing section. Tip 074931-6 ch05.F 7/18/02 6:57 AM Page 202 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 203 Chapter 5 ✦ Setting Up a Site Creating and Saving New Pages You’ve considered message, audience, and budget issues. You’ve chosen a design. You’ve set up your site and its address. All the preliminary planning is completed, and now you’re ready to really rev up Dreamweaver and begin creating pages. This section covers the basic mechanics of opening and saving Web pages in development. Starting Dreamweaver Start Dreamweaver as you would any other program. Double-click the Dreamweaver program icon, or single-click if you are using Internet Explorer’s Desktop Integration feature in Windows. After the splash screen, Dreamweaver opens with a new blank page. This page is created from the Default.html file found in Dreamweaver’s Configuration/DocumentTypes/ NewDocuments folder. Of course, it’s likely that you’ll want to replace the original Default.html file with one of your own —perhaps with your copyright information. All of your blank pages will then be created from a template that you’ve created. As mentioned in Chapter 2, you can run Dreamweaver MX in two workspace modes: the “classic” Dreamweaver 4 mode or the new Dreamweaver MX mode. In Dreamweaver 4 mode, each document resides in its own window, and panels reside in floating windows. In Dreamweaver MX mode — which is supported by Windows only — all Document windows and panels reside in a single application window. The screen shots in this chapter are of Dreamweaver running in its new MX mode. Note Building Placeholder Pages One technique you might find helpful — and especially so with the use of document-relative addressing in Dreamweaver Web projects — is what I call placeholder pages. These placeholder pages can fill the need to include links as you create each Web page, in as effortless a manner as possible. Suppose, for example, you’ve just finished laying out most of the text and graphics for your home page and you want to put in some navigation buttons. You drop in your button images and align them just so. All that’s missing are the links. If you’re using document-relative addressing, the best way to assign a link would be to click the Browse for File button in the Property inspector and select your file. But what do you do if you haven’t created any other pages yet and there aren’t any files to select? That’s when you can put placeholder pages to work. After you’ve designed the basics of your site and created your local site root, as described previ- ously in this chapter, start with a blank Dreamweaver page. Type a single identifying word on the page and save it in the local site root. Repeat this step for all the Web pages in your plan. When it comes time to make your links, all you have to do is point and click to the appropriate placeholder page. This arrangement also gives you an immediate framework for link testing. When it comes time to work on the next page, just open up the correct placeholder page and start to work. Another style of working involves using the Site panel as your base of operations, rather than the Document window. It’s very easy in Dreamweaver to choose File ➪ New File from the Site panel menu several times and create the basic files of your site. You can even create a file and imme- diately link to it by choosing Site ➪ Link to New File from the Site map. A dialog box opens, which enables you to specify the filename, the title of the new document, and the text for the link. Moreover, you can create any needed subfolders, such as ones for images or other media, by selecting File ➪ New Folder. 074931-6 ch05.F 7/18/02 6:57 AM Page 203 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 204 Part I ✦ Dreamweaver MX Basics If you do decide to create your own Default template, it’s probably a good idea to rename the Dreamweaver Default template — as Original-Default.html or something similar — prior to creating your new, personalized Default template. Opening existing files To open an existing file that belongs to a site you’ve defined in Dreamweaver, select the site in the Site panel, and double-click the file icon. To open an existing file that does not belong to a site defined in Dreamweaver — or that was created in a different program — choose File ➪ Open or Ctrl+O (Command+O), and choose the file from the File Open dialog box. You can enable/disable Dreamweaver from automatically repairing HTML syntax errors in your files when it opens them. Choose Edit ➪ Preferences to open the Preferences dialog box, select the Code Rewriting category, and check/uncheck the desired options: Fix Invalidly Nested and Unclosed Tags, Rename Form Items when Pasting, Remove Extra Closing Tags, and so on. To have Dreamweaver report its syntax repairs, select the Warn When Fixing or Removing Tags option. To add an entry, place your cursor at the end of the line above where you want your new file format to be placed, and press Enter (Return). Type in your file extension(s) in capital letters followed by a colon and then the text description. Save the Extensions.txt file and restart Dreamweaver to see your modifications. Opening a new file You can work on as many Dreamweaver files as your system memory can sustain. When you choose File ➪ New or the keyboard shortcut, Ctrl+N (Command+N), and choose a file type from the New Document dialog box, Dreamweaver opens a new blank file of your specified type. (For more on this, see the section “Creating New Documents” later in this chapter.) If you are using the Windows MX flavor of Dreamweaver and are working with maximized documents, you can easily switch among open files by clicking their respective tabs (at the bottom of the Document window) or by using the Window menu. Each time you open a new file, Dreamweaver temporarily names the file Untitled-n, where n is the next number in sequence. This naming convention prevents you from accidentally overwriting a new file opened in the same session. Using the New Document dialog box to create new documents of all types (HTML, JavaScript, ASP, ColdFusion, and so on.) is discussed in detail later in this chapter, in the sec- tion “Creating New Documents.” Saving your file Saving your work is very important in any computer-related task, and Dreamweaver is no exception. To initially save the current file, choose File ➪ Save or the keyboard shortcut, Ctrl+S (Command+S). The Save dialog box opens; you can enter a filename and, if desired, a different path. Note Tip Tip Tip 074931-6 ch05.F 7/18/02 6:57 AM Page 204 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 205 Chapter 5 ✦ Setting Up a Site By default, all HTML files are saved with an .htm filename extension for Windows, and an .html extension for Macintosh. Different file formats are saved with different extensions; XML documents, for example, are stored with an .xml extension. To save your file with another extension, such as .shtml or .xhtml, change the Save as Type option to the specific file type and then enter your full filename, with the extension. Although it may seem kind of backward in this day and age of long filenames, it’s still a good idea to choose all-lowercase names for your files without spaces or punctuation other than an underscore or hyphen. Otherwise, not all servers will read the filename correctly, and you’ll have problems linking your pages. Caution Opening Other Types of Files Dreamweaver defaults to searching for HTML files with an extension of .htm, .html, or .xhtml. To look for other types of files, select the Files of Type arrow button. Dreamweaver allows several other file types, including server-side includes (.shtml, .shtm, .stm, or .ssi), Active server pages (.asp), and ColdFusion (.cfm , .cfml, or .cfc). If you need to load a valid HTML file with a different extension, select the All Files option. If you are working consistently with a different file format, you can add your own extensions and file types to Dreamweaver’s Open dialog box. In the Configuration folder, there is an editable text file called Extensions.txt. Open this file in Dreamweaver or in your favorite text editor to make any additions. The syntax must follow the format of the standard Extensions.txt file: HTM,HTML,XHTML,SHTM,SHTML,HTA,HTC,STM,SSI,JS,AS,XML,XSL,XSD,Æ DTD,XSLT,LBI,DWT,ASP,ASPX,ASCX,ASMX,CONFIG,CS,CSS,CFM,CFML,Æ CFC,TLD,TXT,PHP,PHP3,PHP4,LASSO,JSP,VB,VTM,VTML,INC,JAVA,Æ EDML,WML:All Documents HTM,HTML,XHTML,HTA,HTC:HTML Documents SHTM,SHTML,STM,SSI:Server-Side Includes JS:JavaScript Documents XML,DTD,XSD,XSL,XSLT:XML Files LBI:Library Files DWT:Template Files CSS:Style Sheets ASP:Active Server Pages ASPX,ASCX,ASMX,CS,VB,CONFIG:Active Server Plus Pages CFM,CFML,CFC:ColdFusion Templates AS:ActionScript Files TXT:Text Files PHP,PHP3,PHP4:PHP Files LASSO:Lasso Files JSP,JST:Java Server Pages JSF:Fireworks Script TLD:Tag Library Descriptor Files JAVA:Java Files WML:WML Files EDML:EDML Files 074931-6 ch05.F 7/18/02 6:57 AM Page 205 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 206 Part I ✦ Dreamweaver MX Basics Closing the file When you’re done working on a file, you can close it by choosing File ➪ Close or the key- board shortcut, Ctrl+W (Command+W). If you’ve made any changes to your file since last sav- ing it, Dreamweaver prompts you to save it. Click Yes to save the file or No to close it without saving your changes. You can easily tell whether a file has been altered since the last save by looking at the title bar. Dreamweaver places an asterisk after the filename in the title bar for modified files. Dreamweaver is even smart enough to properly remove the asterisk should you reverse your changes with the Undo command or the History panel. Quitting the program Once you’re done for the day — or, more often, the late, late night — you can close Dreamweaver by choosing File ➪ Exit (File ➪ Quit) or the standard keyboard shortcut, Ctrl+Q (Command+Q). Creating New Documents Dreamweaver MX provides two methods for creating new documents: ✦ You can use the New Document dialog box to create a new document of a type that you select from a comprehensive list within the following categories: Basic Page, Dynamic Page, Template Page, Other, CSS Style Sheets, Framesets, and Page Designs. If you work with multiple document types, this is the way to go. ✦ You can create a new document of a default type that you’ve specified in the Prefer- ences dialog box. If you work mostly with one document type — HTML, ColdFusion, or ASP, for example — this method can prove very convenient. Using the New Document dialog box To create a new document using the New Document dialog box: 1. Choose File ➪ New to open the New Document dialog box, shown in Figure 5-10. 2. In the Category list of the General panel, select the category of document that you want to create: Basic Page, Dynamic Page, Template Page, Other, etc. 3. In the Document Type list, select the specific type of document you want to create: HTML, ColdFusion, JavaScript, etc. 4. If desired, select the Make Document XHTML Compliant option. Note that this setting is sticky; once you set it, Dreamweaver will remember your setting each time you use the New Document dialog box to create a file of this type. 5. Click Create to create a new, blank document of the selected category/type. If you want to create a new document based on a custom template, use the Templates — rather than the General — panel of the New Document dialog box. For more information on creating/using templates, see Chapter 28. Note 074931-6 ch05.F 7/18/02 6:57 AM Page 206 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 207 Chapter 5 ✦ Setting Up a Site Figure 5-10: Choose the type of new file you want to start with through the New Document dialog box. Creating a new default document If you often create one type of document — HTML or ColdFusion files, for example — you can take advantage of Dreamweaver’s default document feature to save yourself some document creation time and trouble. By using the techniques described in this section, you can open a new document of your default type (HTML, ColdFusion, and so on) with one quick keyboard shortcut — in other words, without having to work your way through the powerful, but clunky, New Document dialog box. It’s a must for the Dreamweaver power user! Use the following steps to create a new default document: 1. Choose Edit ➪ Preferences to open the Preferences dialog box, and select New Document to view the New Document panel. If your desired document type is not already defined as the Default Document Type, do so now. Note the Show New Document Dialog on Control+N (Command+N) option. Turn this option off if you want Ctrl+N (Command+N) to create a new default document without showing the New Document dialog box; turn it on if you want Ctrl+N (Command+N) to show the New Document dialog box. If you are a Windows user, no matter what Show New Document Dialog on Control+N set- ting you choose, Ctrl+Shift+N always creates a new default document without showing the New Document dialog box. If desired, select the Make Document XHTML Compliant option. As mentioned earlier, be aware that this setting is sticky; once you set it, Dreamweaver will remember your setting each time you use the New Document dialog box to create a file of this type. When you’re done, click OK to close the Preferences dialog box. Tip 074931-6 ch05.F 7/18/02 6:57 AM Page 207 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 208 Part I ✦ Dreamweaver MX Basics 2. After you perform the preceding step, you’re done. To create a new default document, simply choose Ctrl+Shift+N (Windows only). If you turned off the Show New Document Dialog on Control+N option, you can also choose Ctrl+N (Command+N). If, when defining your site, you specified a server model to be used, the new default docu- ment will be the file type that corresponds to that server model — despite the Preferences dialog box setting you have chosen. Previewing Your Web Pages When using Dreamweaver or any other Web authoring tool, it’s important to frequently check your progress in one or more browsers. Dreamweaver’s Document window offers a near- browser view of your Web page, but because of the variations among the different browsers, it’s imperative that you preview your page early and often. Dreamweaver offers you easy access to a maximum of 20 browsers — and they’re just a function key away. Don’t confuse Dreamweaver’s View Live Data mode with the Preview in Browser feature. With View Live Data, Dreamweaver can only show you an approximation of how your page will look on the Web, and not all aspects — such as links and rollovers — are active. You need to preview and test your page in a variety of browsers to truly see how your page looks and behaves on the Web. You add a browser to your preview list by selecting File ➪ Preview in Browser ➪ Edit Browser List or by choosing the Preview in Browser category from the Preferences dialog box. Both actions open the Preview in Browser Preferences category. The steps for editing your browser list are described in detail in Chapter 4. Here’s a brief recap: 1. Select File ➪ Preview in Browser ➪ Edit Browser List to open the Preview in Browser Preferences category. 2. To add a browser (up to 20), click the Add (+) button and fill out the following fields in the Add Browser dialog box (see Figure 5-11): • Application: Type in the path to the browser program or click the Browse button to locate the browser executable (.exe) file. • Name: When you choose the browser application, Dreamweaver automatically provides a name for the browser. You can accept this name, or change it by typ- ing a new name in the Name field. • Primary Browser/Secondary Browser: If desired, select one of these checkboxes to designate the current browser as such. • Preview Using Temporary File: When this option is on, Dreamweaver creates and submits a temporary copy of the current file to the previewing browser. You can see this by looking in the browser’s Location field; the file will begin with TMP, as in TMP3roxnugqf6.htm. When the option is off, Dreamweaver submits the actual file to the browser. Note Note 074931-6 ch05.F 7/18/02 6:57 AM Page 208 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 209 Chapter 5 ✦ Setting Up a Site Figure 5-11: In the Preview in Browser Preferences category, you can add, modify, and delete preview browsers. 3. After you’ve added a browser to your list, you can easily edit or delete it. Reopen the Preview in Browser Preferences category and highlight the browser you want to modify or delete. 4. To alter your selection, click the Edit button. To delete your selection, click the Remove (–) button. 5. After you’ve completed your modifications, click OK to close the dialog box. Once you’ve added one or more browsers to your list, you can preview the current page in these browsers. Select File ➪ Preview in Browser ➪ BrowserName, where BrowserName indi- cates the particular program. Dreamweaver saves the page to a temporary file, starts the browser, and loads the page. In order to view any changes you’ve made to your Web page under construction, you must select the Preview in Browser menu option again (or press one of the function keys for pri- mary/secondary browser previewing, described in the following paragraph). Clicking the Refresh/Reload button in your browser will not load in any modifications. The temporary pre- view files are deleted when you quit Dreamweaver. Dreamweaver saves preview files with a filename like the following: TMP5c34jymi4q.asp; a unique name is generated with each preview to ensure that the browser does not load the page from the cache. If Dreamweaver unexpectedly quits, these TMP files are not deleted. Feel free to delete any such TMP files you find in your site; or use them as backups to restore unsaved work should a crash occur. Tip 074931-6 ch05.F 7/18/02 6:57 AM Page 209 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com 210 Part I ✦ Dreamweaver MX Basics You can also use keyboard shortcuts to preview two different browsers by pressing a func- tion key. Press F12 to preview the current Dreamweaver page in your primary browser, and Ctrl+F12 (Command+F12) to preview the same page in your secondary browser. These are the primary and secondary browser settings you establish in the Preview in Browser Preferences panel, explained in Chapter 4. You can easily reassign your primary and secondary browsers. Go to the Preview in Browser Preferences category, select the desired browser, and select the appropriate checkbox to des- ignate the browser as primary or secondary. In the list of browsers, you’ll see the indicator of F12 or Ctrl+F12 (Command+F12) appear next to the browser’s name. In addition to checking your Web page output on a variety of browsers on your system, it’s also a good idea to preview the page on other platforms. If you’re designing on a Macintosh, try to view your pages on a Windows system, and vice versa. Watch out for some not-so-sub- tle differences between the two environments, in terms of color rendering (colors in Macs tend to be brighter than in PCs) and screen resolution. Putting Your Pages Online The final phase of setting up your Dreamweaver site is publishing your pages to the Web. When to begin this publishing process is up to you. Some Web designers wait until everything is absolutely perfect on the local development site and then upload everything at once. Others like to establish an early connection to the remote site and extend the transfer of files over a longer period of time. I fall into the latter camp. When I start transferring files at the beginning of the process, I find that I catch my mistakes earlier and avoid having to effect massive changes to the site after everything is up. For example, in developing one large site, I started out using mixed-case file- names, as in ELFhome.html. After publishing some early drafts of a few Web pages, however, I discovered that the host had switched servers; on the new server, filenames had to be entirely lowercase. Had I waited until the last moment to upload everything, I would have been faced with an unexpected and laborious search-and-replace job. Once you’ve established your local site root — and you’ve included your remote site’s FTP information in the setup — the actual publishing of your files to the Web is a very straightfor- ward process. To transfer your local Web pages to an online site, follow these steps: 1. Choose Window ➪ Site or F8 to open the Site panel, and select the desired site from the Site drop-down list. 2. In the Site panel, click the Connect button. (You may need to connect to the Internet first.) Dreamweaver displays a message box showing the progress of the connection. 3. If you didn’t enter a password in the Remote Info category when you defined the site, or if you entered a password but didn’t opt to save it, Dreamweaver asks you to type in your password. Once the connection is complete, the directory listing of the remote site appears in the Site panel. Tip 074931-6 ch05.F 7/18/02 6:57 AM Page 210 Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com [...]... code from a Dreamweaver blank Web page Listing 6-1: The HTML for a New Dreamweaver Page Untitled Document We’ll cover the opening tag a little later in this chapter in “Doctype and Doctype Switching”... in XHTML doctype and doctype Switching The very first element of an HTML page — even before the tag — is, increasingly, a doctype declaration As the name implies, a doctype declaration specifies the language or, more specifically, the DTD (Document Type Definition) in use for the file that follows To validate their page, many authors include doctype statements like the following: . mentioned in Chapter 2, you can run Dreamweaver MX in two workspace modes: the “classic” Dreamweaver 4 mode or the new Dreamweaver MX mode. In Dreamweaver 4 mode, each document resides in its own window,. close Dreamweaver by choosing File ➪ Exit (File ➪ Quit) or the standard keyboard shortcut, Ctrl+Q (Command+Q). Creating New Documents Dreamweaver MX provides two methods for creating new documents: ✦. New Document dialog box. Creating a new default document If you often create one type of document — HTML or ColdFusion files, for example — you can take advantage of Dreamweaver s default document