Dreamweaver MX 2004 Bible phần 3 ppsx

203 Chapter 5 ✦ Setting Up Sites and Servers Creating New Documents Dreamweaver provides three methods for creating new documents: ✦ Select your preferred document type from the Create New column of the Dreamweaver Start Page. ✦ 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, Page Designs (CSS), Page Designs, and Page Designs (Accessible). 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 Preferences 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, follow these steps: 1. Choose File ➪ New to open the New Document dialog box, as shown in Figure 5-15. 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, and so on. 3. In the Document Type list, select the specific type of document you want to create: HTML, ColdFusion, JavaScript, and so on. 4. If desired, select the Make Document XHTML-Compliant option. Note that this setting is sticky; after you set it, Dreamweaver remembers 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. Figure 5-15: Choose the type of new file you want to start with through the New Document dialog box. 543504 ch05.qxd 12/10/03 10:22 PM Page 203 204 Part I ✦ Dreamweaver MX 2004 Basics 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 27. 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 New Document dia- log box. It’s a must for the Dreamweaver power user! To create a new default document, follow these steps: 1. Choose Edit ➪ Preferences (Dreamweaver➪ Preferences) to open the Preferences dia- log box, and select New Document to view the New Document panel. If the document type you want is not already defined as the Default Document Type, define it now. Note the Show New Document Dialog on Control+N (Command+N) option. Uncheck this box if you want Ctrl+N (Command+N) to create a new default document without show- ing the New Document dialog box; check it 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; after you set it, Dreamweaver remembers your set- ting each time you use the New Document dialog box to create a file of this type. When you’re finished, click OK to close the Preferences dialog box. 2. After you perform the preceding step, you’re done. To create a new default document, simply press Ctrl+Shift+N (Windows only). If you turned off the Show New Document Dialog on Control+N option, you can also press Ctrl+N (Command+N). If, when defining your site, you specified a server model to be used, the new default docu- ment is 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. Note Tip 543504 ch05.qxd 12/10/03 10:22 PM Page 204 205 Chapter 5 ✦ Setting Up Sites and Servers 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. Not all aspects of your page—such as links and rollovers—are active. You need to preview and test your page in a variety of browsers to see how your page looks and behaves on the Web. You add a browser to your preview list by choosing 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 category of the Preferences. The steps for editing your browser list are described in detail in Chapter 4. Here’s a brief recap: 1. Choose 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-16): • 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. • Application: Type in the path to the browser program or click the Browse button to locate the browser executable (.exe) file. • Primary Browser/Secondary Browser: If you wish, select one of these check- boxes to designate the current browser as such. Figure 5-16: It’s best to leave the Name field blank until you choose the browser executable in the Application field; Dreamweaver automatically fills in the name and removes any previously entered value. Note 543504 ch05.qxd 12/10/03 10:22 PM Page 205 206 Part I ✦ Dreamweaver MX 2004 Basics 3. After you add 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 finish your modifications, click OK to close the dialog box. After you add one or more browsers to your list, you can preview the current page in these browsers. Choose File➪ Preview in Browser➪ BrowserName, where BrowserName indicates 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 primary/secondary browser previewing, described in the following paragraph). Clicking the Refresh/Reload button in your browser does not load in any modifications. The temporary preview 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. 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 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- subtle 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 you begin, this publishing process is up to you. Some Web designers wait until every- thing 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. Tip Tip 543504 ch05.qxd 12/10/03 10:22 PM Page 206 207 Chapter 5 ✦ Setting Up Sites and Servers 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. Transferring with FTP After 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 straight- forward process. To transfer your local Web pages to an online site, follow these steps: 1. Choose Window➪ Files or F8 to open the Files panel, and select the desired site from the Site drop-down list. 2. In the Files 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. When the connection is complete, the directory listing of the remote site appears in the Files panel. 4. Click the Expand/Collapse button to expand the Files panel into its two-pane view: Remote pane on the left, Local pane on the right. In the Local pane (green icons), select the folder(s) and file(s) you want to upload — or, to upload the entire site, select the site folder (at the top of the list) — and then click the Put File(s) button, as shown in Figure 5-17. 5. If Dreamweaver asks if you would like to move the dependent files as well, select Yes to transfer all embedded graphics and other objects, or No if you’d prefer to move these yourself. You can also select the Don’t Ask Me Again checkbox to make transfers of dependent files automatic in the future. Dreamweaver displays the progress of the file transfer. 6. After each file has successfully transferred, Dreamweaver places a checkmark next to its icon — provided that File Check In/Out is enabled in the site’s Remote Info category. 7. When you finish transferring your files, click the Disconnect button. Dreamweaver provides an FTP Log panel that displays all your FTP file transfer activity (Puts, Gets, and so on). This panel is particularly useful for troubleshooting FTP transfer errors. For more information, see the next section, “Using the FTP Log panel.” Remember that the only files you have to highlight for transfer to the remote site are the HTML files. As noted previously, Dreamweaver automatically transfers any dependent files (if you allow it), which means that you’ll never forget to move a GIF again! (Nor will you ever move an unnecessary file, such as an earlier version of an image, by mistake.) Moreover, Dreamweaver automatically creates any subfolders necessary to maintain the site’s integrity. These two features combined will save you substantial time and worry. Note 543504 ch05.qxd 12/10/03 10:22 PM Page 207 208 Part I ✦ Dreamweaver MX 2004 Basics Figure 5-17: Use the Put File(s) button in the Files panel to transfer files, folders, and entire sites. Be aware that Dreamweaver does not always know to include files that are used within scripts; you might need to upload these files manually. Now you have made your site a reality, from the planning stages to the local site root and onto the Web. Congratulations—all that’s left is to fill those pages with insightful content, amazing graphics, and wondrous code. Using the FTP Log panel Like all data transfers on the Internet, FTP file transfers sometimes go awry: Servers are busy or down, file/directory permissions are improperly set, passwords are misspelled, and so on. If you run into an FTP transfer problem with your Dreamweaver Put File(s) or Get File(s) com- mand, you can use the FTP Log panel to find out exactly what went wrong. The FTP Log panel displays all your FTP file-transfer activity. To display the FTP Log panel, first choose Windows➪ Results or use the keyboard shortcut F7. Then, select the FTP Log category from the Results panel. Caution Put Files 543504 ch05.qxd 12/10/03 10:22 PM Page 208 209 Chapter 5 ✦ Setting Up Sites and Servers Figure 5-18: The FTP Log generates a blow-by-blow description of actions taken. FTP logs may seem complex and indecipherable, but the information they contain is invalu- able for troubleshooting FTP errors. Figure 5-18, for example, displays the FTP log that results from Putting (uploading) a file to a remote server. Summary In this chapter, you learned some options for planning your Web site and what you need to do in Dreamweaver to initialize the site. As you plan your site and set up your servers, keep these points in mind: ✦ Put as much time into planning your site as possible. The more clearly conceived the site, the cleaner the execution. ✦ Set up your local site root in Dreamweaver right away. The local site root is essential for Dreamweaver to properly publish your files to the remote site later. ✦ If you are creating a Web application, choose one server model per site and set it when you define your site. This step is needed so that Dreamweaver knows the type of server code to write. ✦ While necessary for many operations, you don’t need to define a site to work with a Web page. If you have the required connection information, you can work directly with 543504 ch05.qxd 12/10/03 10:22 PM Page 209 210 Part I ✦ Dreamweaver MX 2004 Basics files on a server. Opening a file from a directly connected server copies the file to your local system; when you save the file, Dreamweaver automatically puts it back on the server and removes the local version. ✦ Preview early, often, and with various browsers. Dreamweaver gives you quick function-key access to a primary (F12) and secondary (Ctrl+F12/Command+F12) browser. Check your pages frequently in these browsers, and then spend some time checking your pages against other available browsers and browser versions. ✦ Establish an early connection to the Web and use it frequently. You can begin publish- ing your local site through Dreamweaver’s Site window almost immediately. In the next chapter, you learn how to use Dreamweaver to begin coding your Web pages. ✦✦✦ 543504 ch05.qxd 12/10/03 10:22 PM Page 210 Web Design and Layout Fundamentals ✦✦✦✦ In This Part Chapter 6 Accessing the Code Directly Chapter 7 Building Style Sheet Web Pages Chapter 8 Working with Text Chapter 9 Inserting Images Chapter 10 Establishing Web Links ✦✦✦✦ PART II II 543504 PP02.qxd 12/10/03 10:17 PM Page 211 [...]... “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> You have several alternatives in Dreamweaver for including whichever doctype you choose Hand-coding is a sure but tedious method; the doctype statement is somewhat cumbersome and certainly not easy to remember precisely You could also alter the standard HTML page by changing the Default.html file found in your Dreamweaver MX. .. authors include doctype statements like the following: This doctype is inserted by default when Dreamweaver creates a new static HTML page Note The latest — in fact, the last — version of HTML recommended by the W3C is version 4.01 After this version, the W3C recommended the switch to XHTML Recent browser versions have begun inspecting... page are found between the opening and the closing tags When you start a new document in Dreamweaver, the basic format is already laid out for you Listing 6-1 shows the code from a Dreamweaver blank Web page Listing 6-1: The HTML for a New Dreamweaver Page Untitled Document . Application field; Dreamweaver automatically fills in the name and removes any previously entered value. Note 5 435 04 ch05.qxd 12/10/ 03 10:22 PM Page 205 206 Part I ✦ Dreamweaver MX 2004 Basics 3. After. you want to start with through the New Document dialog box. 5 435 04 ch05.qxd 12/10/ 03 10:22 PM Page 2 03 204 Part I ✦ Dreamweaver MX 2004 Basics If you want to create a new document based on a custom. 12/10/ 03 10:22 PM Page 207 208 Part I ✦ Dreamweaver MX 2004 Basics Figure 5-17: Use the Put File(s) button in the Files panel to transfer files, folders, and entire sites. Be aware that Dreamweaver