IN THIS CHAPTER Setting Up a Web Site in Dreamweaver MX 2004

Transcription

1 CHAPTER 3 Dreamweaver MX 2004 Site Management IN THIS CHAPTER Setting Up a Web Site in Dreamweaver MX 2004 Managing a Web Site in Dreamweaver MX 2004 Working with the File Panel One of the crucial elements in Dreamweaver, or in any Web production, is site management. Dreamweaver excels at managing files on both the local and remote sides. Whether you re an independent designer/developer or one in an entire Web team, Dreamweaver excels at file management and organization. New to Dreamweaver MX 2004 is the capability to work with documents without having to define a site. Furthermore, you can set up an FTP connection to the server, providing you with the ultimate flexibility. If you are looking for additional information on setting up an FTP or an RDS connection without defining a site, refer to Chapter 1, What s New in Dreamweaver MX 2004? Synchronizing Local and Remote Files Working with the Site Map Changing Links Checking Links Using Site Reports Checking Browser Compatibility It s important to note that this chapter provides complete information on managing a static site, and sites containing middleware or database connectivity will be covered in future chapters. So if you want to start working on a static site, read on. Setting Up a Web Site in Dreamweaver MX 2004 One of the most important steps in site management is defining a site within Dreamweaver. There are two ways to accomplish this, using either the Basic Site Definition dialog box or the Advanced Definition dialog box. Both offer similar features; however, the basic version walks you through in a more methodical way. The Basic tab, as shown in Figure 3.1, is less cluttered than the Advanced tab, shown in Figure 3.2. Developers new to Dreamweaver may prefer the Basic tab, whereas the Advanced tab offers features and options better suited to Web professionals and seasoned Dreamweaver developers.

2 52 CHAPTER 3 Dreamweaver MX 2004 Site Management You can activate the Site Definition dialog box in several ways: Choose Site, Manage Sites. This opens the Manage Sites dialog box. Here, click the New button to activate the drop-down menu. In this menu choose Site. This brings you directly into the New Site Definition dialog box. With the Start Page open, click the site link toward the bottom of the page of the Create New column. This opens the Site Definition dialog box. From the Files panel submenu, or fly-out, in the top-right corner, choose Site, New Site. This opens the Site Definition dialog box. FIGURE 3.1 The Basic Site Definition dialog box. The Local Info Category In this chapter we ll spend more time looking at the Advanced tab and then provide a recap of the Basic tab. The Advanced tab is probably where most Dreamweaver developers will do the majority of their site definition. We ll start by looking at the local info category.

3 Setting Up a Web Site in Dreamweaver MX FIGURE 3.2 The Advanced Site Definition dialog box. The Site Name and Local Root Folder The first thing you must do is name your site. This is simply a way to locate the site you re defining within Dreamweaver. Dreamweaver is a professional development tool, and because of that, it offers the capability to have several sites defined at the same time. The only way to distinguish between the different sites is to give each site a unique name. This name has nothing to do with the Web site, in terms of functionality or anything else. It s simply a way to identify which site you re working with in Dreamweaver at a particular point in time. Spaces and special characters are acceptable here; however, it is one of the few places where they are appropriate in Web development. Referring back to Figure 3.2, you ll notice that the next text field is to define a local root folder. The local root folder plays a key role in file management and structure. Every file in your Web site should reside within the local root folder, unless it is absolutely linked to something in a different location. An absolute link is one that contains the entire path to a particular location on a Web server. The reason that it plays such a pivotal role is the nature of an HTML document. Everything in a Web page is hyperlinked in some way or another, with the exclusion of a few things, such as type.

4 54 CHAPTER 3 Dreamweaver MX 2004 Site Management It is also very important because eventually the site that you are designing will leave your computer and be transferred to a Web server somewhere. Let s look at an HTML tag that sources an image that will be placed in the document. In Figure 3.3, you ll see that the source is pointing to the picture file, based on its location in this case, within my computer. Notice how the img src tag is looking for a picture within my hard drive. The problem with this is that when the site is moved from my computer and then uploaded to a Web server, my hard drive is not moving over the server with the rest of my site files. Therefore, when the HTML document on the Web server sources a picture on my hard drive, it won t be able to find it. Because my hard drive is not on the server, the result is a broken image link in the Web browser, as shown in Figure 3.4. FIGURE 3.3 An HTML image source tag. FIGURE 3.4 A broken image link appears in the browser if the image is not sourced to something within a root folder or is not sourced with an absolute path.

5 Setting Up a Web Site in Dreamweaver MX This example is one illustration of the importance of a local root folder. Your local root folder is ultimately a mirror image of your root folder on your Web server. You can use either an existing folder on your computer or you can create a new one. The best way to define your local root folder is to click the folder icon to the right of the text field to launch the Choose Local Root Folder dialog box shown in Figure FIGURE 3.5 The Choose Local Root Folder dialog box. In the dialog box, highlight the folder; on Macintosh, click Choose, and on Windows, click the Open button, which then turns into a Select button. This action defines the selected folder as the local root folder for this site. You ll also notice that a check box in the dialog box offers the option to refresh the local file list automatically. If you have this box checked, anytime you add a file to your page, the local file list will immediately reflect that. If you uncheck it, you will increase performance; however, to see the changes, you will have to refresh the list manually. You can refresh the list manually by clicking the Refresh button on the Files Panel toolbar, as shown in Figure 3.6. Unless you have a slow Internet connection, I recommend leaving the Refresh Local File Automatically option checked. Default Images Folder This text field is new to Dreamweaver MX. This is a simple way that Dreamweaver encourages site organization. This feature is not only a time-saver, but it s a way to avoid broken image links. Earlier in this chapter, I showed you an image source link to an image file on my hard drive. Now in Dreamweaver MX 2004, if you choose an image file outside your local root folder, Dreamweaver automatically places a copy in the default images folder and sources it from that location, preserving all link integrity. If you re a long-time Dreamweaver user, you can see the benefits of this new feature. If you re new to Dreamweaver, trust me this feature is handy.

6 56 CHAPTER 3 Dreamweaver MX 2004 Site Management FIGURE 3.6 The Refresh button on the toolbar will refresh the local files in the Site panel. HTTP Address and Cache These options are a bit more abstract than the previous ones we ve just looked at. They also are not as crucial, but they can offer benefits when used. The HTTP address matters only when you use absolute addressing. If you are using absolute addressing, Dreamweaver uses this address when checking links in your site to determine whether the links are sourcing external files or files within your site. Cache offers speed enhancements when creating link updates. When you cache, the links are stored in your computer s memory, offering faster access, much like when a Web page is cached to your computer it doesn t take nearly as long for the page to load within your browser. Remote Info Category This section of the dialog box enables you to define properties of your remote site in other words, your Web server. The first thing you need to do is choose how you connect to your Web server. The information you fill out here will be used when connecting to the Web server through the Site window. The access drop-down menu offers many features, each described in more detail here. FTP The first choice is the most common FTP. FTP stands for File Transfer Protocol. When you choose FTP, a whole series of options are revealed, as shown in Figure 3.7.

7 Setting Up a Web Site in Dreamweaver MX FIGURE 3.7 After you choose FTP from the drop-down menu, various options become available in the Site Definition dialog box. FTP Host In this text field you will plug in the address to your Web server. If you are paying a company to host your Web site, the company gives you the specific address to fill out in this text box. An FTP address can vary in appearance, but generally looks something like ftp.webserver.com; or the company could have an IP address, which appears like this: ftp Whatever the case, you ll get the specific information from your host. Host Directory The text field offers the option of inserting a path to your public documents on the server. Paths generally look like or something along those lines. Check with your Web administrator for the exact information. Sometimes, if this text field is left blank, it will automatically connect to the appropriate location. Login This field should contain your username or login name for the Web server. That s it, nothing special. Password This option is your password to gain access to the Web server. It is, however, important to note that many Web servers are Unix based, which makes your login and password case sensitive.

8 58 CHAPTER 3 Dreamweaver MX 2004 Site Management Use Passive FTP Depending on your network, you may be required to connect through passive FTP. Passive FTP establishes a local software-based connection, rather than a remote-server-based connection. Check with your network administrator to see how you should be connecting if you re using FTP. Use Firewall If you are behind a firewall, set the appropriate port and host information in the Preferences dialog box. After filling that information out in Preferences, this option is automatically selected. Automatically Upload Files to Server on Save I think this option explains itself; however, I do not recommend using it. What if you are experimenting? It s a bit too risky for me. Enable File Check In and Check Out I ll discuss this option in further detail a bit later in this chapter. What it does is allow you to check in and check out files, which is a great Dreamweaver feature to use if you have more than one developer on your team. If you are the only one, leave this option unchecked. Local Network The Local Network option has fewer options than FTP does, as shown in Figure 3.8. This option is selected if you have a Web server running on your local machine or network. For this option you enter the correct path and name of the root folder of the Web server. FIGURE 3.8 The Local Network category has only a few options.

9 Setting Up a Web Site in Dreamweaver MX This section of the Site Definition dialog box also has options to Enable Check In and Check Out, as well as Automatically Upload Files to Server on Save. A different option from the previous screen gives you the capability to refresh the remote file list automatically. This option is the same as the local option in the FTP remote info portion. Your connection to the server determines whether you want this checked. RDS You should use this option if your host uses Remote Development Services (RDS). Click the Settings button to specify a Host Name, Port, Host Directory, User Name, and Password. WebDAV This option should be used if you or your company uses the collaborative Web-based Distributed Authoring and Versioning standards. 3 Testing Server Category This category is used only when developing database-driven Web sites. If you plan to create pages with middleware scripts, it is important to fill this section out properly. As displayed in Figure 3.9, there are three options the server model, the type of pages the site will contain, and how you re going to access the application server which must be filled out correctly. The testing server category was new to Dreamweaver MX, but similar to the application server option in UltraDev 4. Server Model The server model drop-down box offers several options: None Choose None if you do not need any database connectivity or if you do not plan to create a Web application. ASP JavaScript This option enables you to create pages that utilize Active Server Pages (ASP) scripts. ASP alone cannot provide all the functionality of a databasedriven Web site; it needs the help of another scripting language. Your choices here are JavaScript or VBScript. I typically recommend VBScript because both technologies are Microsoft solutions; however, if you know JavaScript and not VBScript, I would recommend using JavaScript for debugging purposes, and a decrease of production time, you will not need to learn VBScript. ASP VBScript This option is essentially the same as the previous one, with the exception that the scripting language is VBScript instead of JavaScript. ASP.NET C# The options for ASP.NET are similar to ASP. Again, this has to do with the scripting language. Depending on your knowledge of scripts, if you know C# but not Visual Basic.NET, the choice has been made for you. However, if you do not know either scripting language, choose ASP.NET C#. The capability to develop ASP.NET Web applications in a WYSIWYG environment was a first in Dreamweaver MX.

10 60 CHAPTER 3 Dreamweaver MX 2004 Site Management ASP.NET VB This option is similar to the preceding one. If you plan to build a site using ASP.NET with Visual Basic.NET, this is an appropriate option to select. ColdFusion Choose this option if you plan to deliver your Web applications with a ColdFusion server. This option enables you to take full advantage of the ColdFusion Markup Language. JSP Select JSP if you plan to develop pages that use JavaServer Pages (JSP) scripts. PHP MySQL Equally as exciting as building ASP.NET Web applications is the capability to create PHP Web applications with a MySQL database. This is an important feature for anyone wanting to develop Web applications or database-driven Web sites using open standards. FIGURE 3.9 The Testing Server category in the Site Definitions dialog box. Access This area of the testing server category is identical for the remote info categories options for FTP or local network connections to your application server. Cloaking Category Cloaking files hides the selected files from the Get, Put, Check In, and Check Out options. For example, you may have a folder containing your source files, such as FLAs, PNGs, or

11 Setting Up a Web Site in Dreamweaver MX even PSDs. These files don t need to be transferred to the Web server. Any file format that you cloak will remain in your local folder and will not be uploaded unless you manually override the cloak setting. Cloaking hides files from the following operations: Put and Get Check In and Check Out Reports Synchronization Select Newer Remote and Select Newer Local Link Checking 3 Find and Replace In addition to those operations, the cloaked files will not appear in the Assets panel. You can specify which file types you d like to cloak by checking off the Enable Cloaking check box and checking the Cloak Files Ending With option. In the text field, type in all the file extensions you d like to appear cloaked. CAUTION When typing in the extensions you d like to cloak, do not separate the file extensions with commas or semicolons; separate them with spaces. You can also cloak a single file or folder, regardless of the extension. Simply highlight the file or folder within the site files and right-click (Windows) or Control+Click (Mac) to access the contextual menu. In the menu, choose Cloaking, Cloak. After you choose Cloak from the contextual menu, a red line appears through the icon of the file. You can uncloak a file the same way by contextual-clicking and choosing Cloaking, Uncloak. Design Notes Category The Design Notes category offers only a few features, as shown in Figure When developing a Web site across several contributors and team members, it is important to keep everything straight among the designers, coders, and content providers. This is why Macromedia built in the Design Notes feature, to make this collaborative effort less painful and to make communication easier among the various team members. As you may have already been able to gather from this first paragraph, design notes are best used when more than one person is working on a project. Design notes can be attached to any document created in Dreamweaver, as well as to any media inserted in a Dreamweaver document.

12 62 CHAPTER 3 Dreamweaver MX 2004 Site Management FIGURE 3.10 The Design Notes category. For design notes to be useful, everyone involved in the development of the Web site has to be able to view the most current version of the design note. Dreamweaver allows you to maintain the design notes on the remote server as a separate file. This way, the design notes are dependent files to the document. In Figure 3.10, you ll notice that you can set these options in the Design Notes Preferences panel. This will also help you to remove unused notes as well. Site Map Layout One of the most important things in Web development is good usability and site structure. You want your site navigation to be easy to understand. You don t want visitors struggling with navigation or becoming lost in your site. Sometimes the challenge to a developer is to remember the structure you set up. Dreamweaver offers a Site Map view, which enables you to see not only the overall structure of your site, but the file hierarchy as well. Figure 3.11 illustrates the different options available in the Site Map Layout dialog box. Home Page This text field looks for what is going to be the home page for your Web site. If you do not have one yet, Dreamweaver automatically looks for index.html, index.htm, default.htm or default.html. If it finds a file named that way, it will use it as the home page. For the map to create the file structure, it needs a starting point, and the starting point for all Web sites is the home page.

13 Setting Up a Web Site in Dreamweaver MX Number of Columns and Column Width These options determine how the map appears on a computer screen. If you need to print your map on a standard 8 1/2 by 11 document, you will have to reduce these numbers for the map to fit on the page. Icon Labels This option determines how the icon will be displayed in your site map. You can choose File Names or Page Titles. I generally prefer the icons to display the filename. You link to files by name, you open files by name, it makes sense to display them with the name you interact with the most. However, in some situations the filenames may be a bit ambiguous. The titles are a more accurate representation of the page or file for which you are looking. If you find yourself in a situation similar to that, you may consider using titles. 3 Options Here you can decide to display hidden HTML files by choosing Display Files Marked as Hidden. You can choose to display dependent files in your site map as well. Files such as images, external scripts, and other types of media will be displayed within the map when this option is checked. FIGURE 3.11 The Site Map Layout category of the Site Definition dialog box. File View Columns As you can see in Figure 3.12, the File View Columns will change what and how files are displayed within the Site Files window on the Mac or the Site Files panel on Windows.

14 64 CHAPTER 3 Dreamweaver MX 2004 Site Management FIGURE 3.12 The File View Columns category in the Site Definition dialog box. In this section of the Define Sites dialog box, you have the option of showing or hiding some of the predefined columns. You might want to hide some of the columns because their meanings do not pertain to the particular project that you re working on. You also can create your own custom columns. This can become important, depending on the project you are working on. If one of the sites you are working on has to meet accessibility guidelines, for example, you can create a column titled Accessible and fill that column out with a yes or a no. This will enable you to sort by the Accessible column and you ll quickly be able to detect which pages are accessible and which ones are not. Creating a Custom Column In this exercise, I m going to walk you through creating your own custom columns stepby-step, and you will see how to enter information into those columns. 1. Choose Site, Manage Sites to open the Manage Sites dialog box. 2. In the Manage Sites dialog box, highlight the site you want to edit by clicking it. With the name of the site highlighted, click the Edit button. This launches the Site Definition dialog box.

15 Setting Up a Web Site in Dreamweaver MX In the Site Definition dialog box, click the Advanced tab, if it isn t already selected, to display the Site Definition dialog box in the advanced view. Notice the Category section on the left. 4. In the Category section, click the File View Columns section. This causes the Site Definition dialog box to display options for the File panel. 5. Click the plus sign under the File View Section of the dialog box to get a new column labeled Untitled. 6. Toward the bottom portion of the dialog box, there are some text fields in which you can relabel the name of the column and specify what to associate that column name to in the design notes In the Column Name text field, type in the word Accessibility. After typing the word, press the Tab key on your keyboard to move to the section. Notice that after you press the Tab key, the name of the column appears in the list above and you now have a blinking cursor in the Associate with Design Note text field. 8. In the Associate with Design Note field, you can either enter a custom value, or you can choose from one of the defaults in the drop-down menu. For this situation, you re going to create a custom value. In the text field, type in the word Accessibility. Press the Tab key to apply this value. 9. Choose an alignment in the Align drop-down menu. The default is Left, and for this purpose, that will be just fine. Unless, of course, you want to change it then feel free. 10. If you want to reorganize how the columns appear, with respect to their alignment from left to right, the column in the top of the list will appear closer to the aligned side that you chose in the previous step. 11. You want Accessibility to appear after the name column. To get this effect, highlight the Accessibility column name in the File View Columns section of the dialog box. With it selected, press the up arrow in the right corner as many times as necessary until it appears beneath the name column. Notice that you can t place anything above the name column. The name column always appears first. 12. When you re happy with the name and placement of your new column, click the OK button. This brings you back to the Manage Sites dialog box, where you can click the Done button. After you click Done, you return to Dreamweaver. Notice in Figure 3.13, the Accessibility column appears next to the name column in the File panel when expanded.

16 66 CHAPTER 3 Dreamweaver MX 2004 Site Management Accessibility column FIGURE 3.13 Notice the Accessibility column in the File panel. You will, however, notice that no values appear in the new column area. In the next exercise, you ll see how you can add values to that column. Entering Information into a Custom Column This exercise shows you the necessary steps to add values into custom columns. 1. Right-click (Windows) or Control+Click (Mac) the filename of one of the documents inside the Expanded view of the File panel. This offers access to a contextual menu. 2. In the contextual menu, choose Design Notes. This launches the Design Notes dialog box. 3. With the Design Notes dialog box open, click the All Info tab and enter the data for the column you want to populate with data. After you ve finished entering the data, click OK. 4. Inside the File panel, notice in the Accessibility column that the text Yes shows up, as shown in Figure There is one other way to add or change the content in a particular column. In the File panel, double-click to place an insertion point, which will allow you to type in any value you want. Contribute If you have Macromedia Contribute installed on the same machine, you will also get a Contribute category. This category offers an option to work in Dreamweaver in a way that

17 Working with the File Panel 67 is compatible with Contribute. If you are working with Contribute, be sure to select this category and select the only option, which is Enable Contribute Compatibility. 3 FIGURE 3.14 The Accessibility column now contains a value of Yes. Managing a Web Site in Dreamweaver MX 2004 Now that you know how to define a site within Dreamweaver, how do you manage your files? This section of the chapter discusses exactly that. After designing and testing the Web site you ve created, you re going to want to move that site from your local computer to a Web server somewhere. Furthermore, if you happen to be at a different computer and yet need to edit some portion of the site, how do you download files from your server? We ll also take a look at version control with the synchronize feature, which compares files on the remote server and your local machine. Dreamweaver MX 2004 also offers several unique features that enable you to collaborate better with team or development editors. Working with the File Panel The File panel, which is part of the File panel group, by default acts as the control center for managing your site. If your File panel is not visible, choose Window, Files. This launches the File panel. F8 is the keyboard shortcut to access this panel. If you look at Figure 3.15, you ll notice that the File panel has a toolbar; each option on the toolbar adds functionality toward managing your site. The File panel has been expanded. You can expand your File panel by clicking the Expand/Collapse button.

18 68 CHAPTER 3 Dreamweaver MX 2004 Site Management Show Refresh Testing server Check out files Get files Expand/ collapse FIGURE 3.15 Connect to remote host Site files Put files Site map Check in files The File panel s toolbar has options for managing Web site files. Site Files This button enables you to view the Site window in its default view, which is displaying all the files on the local side and remote side. Remember that the remote files are the files located on your Web server. You will see files on the remote side only if you are connected to the server. Testing Server The testing server is a way for you to view your files located within the root folder of your testing server. Today the majority of operating systems ship with a built-in Web server. Windows XP Professional ships with Microsoft s IIS, and Mac OS X ships with an Apache Web server. Often, developers will use these local Web servers to test their pages. After they ve tested okay, they ll move them to the remote Web server. When the Testing Server option is selected, the local files are still visible on the opposite side. Site Map To view the site map of your Web site, click this button. Notice that this button offers two choices: You can either view only the map or you can view the map and the local files at the same time. If your site has any size to it, you may want to opt for Map Only. The site map can become large very quickly. Show The Show drop-down menu is filled with all the sites that you have defined within Dreamweaver. This affords quick access to any site and lets you move between them with ease. Notice that toward the bottom is the Manage Sites option. If you choose Manage Sites, it launches the Manage Sites dialog box. This drop-down menu also offers you access to explore the local or any connected drive to your machine. If you need access to a file outside your local root folder, you can gain access without leaving Dreamweaver. When using the Show menu, notice that all local root folders defined with Dreamweaver appear green. All other folders will appear blue (Mac) or yellow (Win).

19 Working with the File Panel 69 Connect to Remote Host This button connects to the remote host you specified in the Site Definition dialog box. You must have a connection to the Internet to make a live connection. After you ve made a successful connection, the remote side of the Site Files will be populated with all the files on the server. The Connect button also appears to have green circles in it, indicating a connection. When you re connected, the Connect button becomes a Disconnect button. Refresh What you specified in the Site Definition dialog box determines whether this button has any meaning. If you chose not to have the file list automatically refresh, you will have to press this button to see the results of any files being moved from the remote side to the local side, or vice versa. Sometimes when you re moving files, you may have to refresh regardless of whether the FTP utility is acting buggy. 3 Get File(s) The Get button retrieves files from the remote server by downloading them to your computer. There are a couple of ways to get files from the server to the local files, and one is to press this button. You can also drag and drop between the two sides, and you can highlight the file you want to transfer and press Command+Shift+D (Mac) or Ctrl+Shift+D (Windows). Put File(s) This is the opposite of the Get button. This will allow you to Put, or upload, files during an active session with the remote server. Like its Get counterpart, there are a couple of ways that you can upload files. You can highlight the file on the local side and click the Put button. Drag-and-drop is also supported when transferring files from the local side to the remote side. Finally, you can highlight the files and use the keyboard shortcuts of Command+Shift+U (Mac) or Ctrl+Shift+U (Windows). NOTE When getting and putting files, an alert message pops up. The dialog box asks if you would like to include all dependent files. Although this may seem obvious, you may not want to include the dependent files. For example, if you uploaded a page and all its files, you may notice something wrong in the title of the page. You can easily correct that by changing it in Dreamweaver; however, you ve changed the HTML only in the document. It would be necessary to upload only the HTML file and not all the images associated with it, because they re already on the server. If you check Don t Ask Again, it will assume you want to upload the dependent files. If you did check this earlier and now decide that you want the alert to appear, you can change that in the Preferences dialog box under the Site category. Check Out Files/Check In Files The Check In and Check Out buttons are active only when you have check in and check out selected in the Site Definition dialog box. These options let you officially check in and check out files, offering a visual cue to all the development team members that you are working on a particular file or files. Expand/Collapse This feature collapses the panel to dock it within the panel group or expands it as its own independent, free-floating window.

20 70 CHAPTER 3 Dreamweaver MX 2004 Site Management When transferring files, you will receive transfer information via a dialog box on the Mac or via a progress bar, both on the Mac and PC. This progress bar indicates how long something will take to upload or download. In the bottom-right corner of the window or panel is a Stop Current Task button. This button enables you to terminate the active task of moving files. Synchronizing Local and Remote Files In Web development, sometimes it can get confusing managing versions of files. Where is the most recent file? This question is one that you ll probably ask yourself more than once throughout the development of a site. Fortunately, Macromedia has built a great feature into Dreamweaver called File Synchronization. This feature compares files between the local and remote side and determines which is the latest version. If the latest version lives on the local side, it will upload that file accordingly. File Synchronization can also delete files on either the local or remote side, if the file doesn t appear in both versions of the site. You can apply the synchronize command to selected files, or apply it sitewide. Follow these steps to synchronize your files. In this example we are going to synchronize only a few files; however, the process is the same if you want to synchronize an entire Web site. 1. Make sure your Site File panel is open and expanded. Press F8 on your keyboard if it is not visible. Select a couple of files that you want to synchronize. 2. Choose Site, Synchronize. The Synchronize dialog box opens. 3. Here in the Synchronize dialog box, if you wanted to sync the entire Web site, you would choose a Site Name from the list. In our case, we are going to choose Selected Local Files Only. 4. Set the direction of synchronization. You can choose Put Newer Files to Remote, which evaluates which files are newer on the local side and uploads whichever files Dreamweaver evaluated as being newer. The second choice is Get Newer Files from Remote. This option examines the files on the remote side; the files that are newer on the remote side get downloaded to the local side. 5. You can also choose Delete File Not on Local Drive, which will remove any local files that do have a counterpart on the remote side when using the Get Newer Files from Remote Side option. If you are using the Put Newer Files to Remote side option, the files on the remote side without a local equivalent will be removed. 6. When you are ready, click the Preview button. This starts the process of comparing files. This will be displayed in a Site dialog box for confirmation. If no files are mismatched (that is, no differences exist between files on the local and remote sides), Dreamweaver informs you that no synchronization is necessary. 7. You have the opportunity to uncheck the action that Dreamweaver will perform if you want to override what Dreamweaver found to synchronize.

21 Working with the Site Map When you are happy with the settings, click OK. You will see a progress bar indicating the progress Dreamweaver is making with the synchronization. 9. After the synchronization is complete, you can save a log of the actions performed by pressing the Save Log button. CAUTION One suggestion is to have all the developers and team members set their system clocks to equal the time of the server. This can be important if the server is in Boston and some team members are in Los Angeles. It s been my experience that Dreamweaver doesn t factor time zones. 3 File synchronization is a powerful way to automate the organization of your site files. It s especially useful when there is more than one person working on a site. I would also recommend that you use the Delete option with discretion, because it is an undoable act. Working with the Site Map Being able to customize the site map is what will allow you to get the most out of this Dreamweaver feature. The map gives you a visual representation of the navigation system and structure of your Web site. This can be very important because Web sites quickly become complex in their navigation structure. The Site Map will always use the index page as the top-level page and display pages linked two levels deep. You can always see additional linked pages by pressing the plus or minus signs. To see the Site Map, press F8 on your keyboard. In the toolbar of the File panel, press the Show Map button. If you do not see the Show Map button, be sure to Expand the view of the File panel. Notice the button has two choices: to display either the map by itself or display the map alongside the files. To get the most use out of the map, I recommend displaying the map and files. Of course this is an option only if you are in expanded view, as shown in Figure Otherwise, there isn t enough room with the File panel collapsed to see all the necessary data. The site map offers the capability to change and manipulate files and links. If you want to add or delete links, you can do so in the site map view. You can also manipulate new files this can be handy if you re looking to storyboard the structure of your Web site. TIP You can easily convert the site map into a bitmap file. Inside the File panel, choose File, Save Site Map. Navigate to the location on your computer where you want it to be saved, type in a filename, and choose what type of file you would like to save it as: BMP or PNG. This is perfect if you want to the map to colleagues. You may want to optimize it first in Fireworks to reduce the file size.

22 72 CHAPTER 3 Dreamweaver MX 2004 Site Management FIGURE 3.16 After clicking the Expand button, the File panel transforms into a site window reminiscent of Dreamweaver 4. In this exercise, you re going to look at how you can link an existing file to a new file. 1. Open your site map by pressing F8 on your keyboard. Be sure to display the site map and files by clicking the Site Map button in the toolbar. Notice that the site map is now visible. 2. Click the index or home page icon of your Web site to highlight it. 3. Choose Site, Site Map View, Link to New File. This launches the Link to New File dialog box as shown in Figure You can also contextual-click the selected icon and choose Link to New File from the contextual menu. 4. Enter in a name for the document with the appropriate extension: html, htm, cfm, and so on. 5. Type in a title for the page, which will show up in the title bar of the browser window. 6. Enter in a name for the link. This name will be displayed in the document the way you type it here, in the form of a hyperlink. 7. After you re happy with the information you typed in, click the OK button or press Return (Mac) or Enter (Windows). A new icon is created in the map with a line connected to the home page, or to whatever icon you selected.

23 Working with the Site Map 73 3 FIGURE 3.17 The Link to New File dialog box. Linking to a new file is one way to storyboard, or to start a structure or filing system to a Web site. It can also be good to create new files this way, keeping your navigation clean and intact. You can do the same thing for existing documents within your Web site by following the steps in the previous exercises and switching the option from Link to New File to Link to Existing File. You can also follow the steps in the next exercise. In this exercise, you ll look at how you can use a shortcut by displaying both the site files and the site map. Linking documents is as simple as clicking and dragging. 1. In the File panel, be sure to display both the site files and the site map. Press F8 on your keyboard to make the site files visible. In the site files drop-down list located in the toolbar, choose Show Map and Files. Make sure you are working in the expanded view. 2. With both the map and file views visible, select the file icon in the site map that you want to link. Notice a small icon that looks like a rifle scope just above the file icon in the top-right corner. This rifle scope is the point-to-file icon, and it allows you to do just that. 3. Click and drag the point-to-file icon and place it on top of the file you want to link to in the site files portion of the window, as shown in Figure Open the document that you dragged the point-to-file icon from in the site map. You ll notice a text hyperlink at the bottom of the page named the same as the file that you linked it to.

24 74 CHAPTER 3 Dreamweaver MX 2004 Site Management FIGURE 3.18 Use the point to-file icon to quickly add links to documents. Modifying Page Titles You can easily modify the titles of documents as well. Be sure to view the files in the map by title name instead of filename. To show the title name, choose View, Show Page Title, or press Command+Shift+T (Mac) or Ctrl+Shift+T (Windows) to toggle the views. With the title view active, click once to highlight the file, and then click a second time in the text area. This makes the text editable with a blinking cursor. Then type in the new title for the document. Maintaining Files As with any Web production, moving and renaming files will be a necessity at some point. It is important to follow certain guidelines to preserve site and link integrity. You should make all such changes within the Site window or panel. This ensures that Dreamweaver will make the appropriate adjustments or modifications to any document that a link or name change will affect. In contrast, if you make this change outside the File panel and make the adjustments in Windows Explorer (Windows) or the Finder (Mac), Dreamweaver will not be aware of these changes, resulting in broken hyperlinks.

25 Working with the Site Map 75 The following exercise will show you how to rename files within Dreamweaver. 1. Be sure to have the File panel visible. If you can t see the File panel, press F8 on your keyboard to open the panel. 2. Inside the File panel, select a file by clicking in it, and then click a second time on the name of the icon to see a blinking cursor. 3. With the blinking cursor in the name of the file, press the Delete (Mac) key or Backspace (Windows) key to remove all the text for that file. Now that the icon does not have a name, type in a new one. Press Return (Mac) or Enter (Windows). 4. After pressing Return or Enter, the Update Files dialog box launches, asking you to scan the documents within the site, as displayed in Figure After you press Scan, Dreamweaver searches the site for related files. When the scan is complete, the dialog box indicates what files need to be updated in your Web site, as shown in Figure Click Update. 3 FIGURE 3.19 documents. The Update Files dialog box asks whether to scan the site for related FIGURE 3.20 The Update Files dialog box displays files that will be updated. 5. Dreamweaver will open each file on the list, make the necessary change, save it, and close it. The Update feature in Dreamweaver proves to be quite the timesaver. Imagine if you had to make all the changes manually to all the separate documents.

26 76 CHAPTER 3 Dreamweaver MX 2004 Site Management Changing Links Moving files works much in the same way. If you need to move a file out of or into a different directory, be sure to do it in the Site window. Again, if documents are linked to the one you are moving, broken hyperlinks occur if Dreamweaver isn t aware of the change. If you move the file within the Site window, you will get the Update Files dialog box, just like in the previous exercise. You can also easily change where links point to by using the Change Link command. Change Links by Using the Change Link Command To change a link by using the Change Link command, follow these steps: 1. Highlight the file for the link you want to change. 2. Select Site, Change Link to access the Select HTML File dialog box. You can also press Command+L (Mac) or Ctrl+L (Windows) to access the dialog box, or you can contextual-click the icon and choose Change Link from the contextual menu. 3. Locate the HTML file you want the old link to point to. When you re happy with your selection, click the Done button (Mac) or OK (Win). 4. After you choose the new file, the Update Files dialog box will appear, displaying all the files that need to be updated. 5. If you want all the files to be updated, click Update. However, if you want only certain files to be updated, highlight the files by clicking them. When clicking more than one file, be sure to hold down the Command key (Mac) or Control Key (Windows). 6. If you don t want any of the files to be updated, choose Don t Update. Change Link Sitewide A very similar command to the Change Link command is the Change Link Sitewide command. With this command you essentially redirect all links from one page to another. To use the Change Link Sitewide command, follow these steps. 1. In the File panel, select the file that you want to change. 2. Choose Site, Change Link Sitewide. You can also contextual-click the icon and choose the Change Link Sitewide command from the contextual menu. This launches the Change Link Sitewide dialog box, as pictured in Figure You can also select the Change Link Sitewide command without a file select; however, the top text field in the dialog box will be empty, requiring you to fill it out. In the second text field (the one labeled Into Links To) either type in the path

27 Checking Links 77 to the new file you want the link to point to, or click the folder icon at the end of the text field to search for a file. If you search for a file within your local root folder, the correct addressing will be added to the filename. 4. When you re happy with the new file, click OK to bring up the Update Files dialog box. Refer to step 5 of the previous exercise for more information on how to handle this dialog box. 3 FIGURE 3.21 The Change Link Sitewide dialog box. Deleting Links Sometimes in Web site development, you may want to remove a link between different pages. You accomplish this again in the File panel. Because you want to change an attribute of a link, you want to make sure that Dreamweaver is fully aware of the situation so it can make any necessary adjustments to other pages to preserve the link integrity of the Web site. To remove or delete a link, highlight the file that you want to delete and either press the Delete key on your keyboard or choose Site, Remove Link, or contextual-click and choose Remove Link from the contextual menu. Checking Links The Check Links command will report three problems within the site. They are the following: Broken Links Broken links are hyperlinks that are not sourced properly. They generally will be linked to a file that does not exist in a particular directory. External Links This report is simply expressing that the file or site the link is pointing to is outside Dreamweaver s link scope. It does not mean that these links are bad or broken; it simply means that Dreamweaver has no way of checking them, and you may want to consider checking them manually yourself. Orphaned Files These files have no incoming links pointing to them. This does not mean they do not add functionality to the site so be sure not to delete them until you know exactly where they came from and what the file s purpose is. For example, Train Simple s Web site had an UltraDev page explaining the course outline of our UltraDev class. Now with Dreamweaver MX 2004 incorporating all the UltraDev

28 78 CHAPTER 3 Dreamweaver MX 2004 Site Management functionality, the page is no longer needed, nor is anything linked to it. However, this page still appears prominently on search engines, and if an end user does a search and finds that page and clicks to visit it, Train Simple does not want the end user to get a 404 File Not Found error. On the other hand, Train Simple no longer teaches UltraDev. So what I did on the UltraDev page is add a refresh in the meta tag, which refreshes the page after five seconds to go to the advanced Dreamweaver MX 2004 page. So, even though nothing is linked to this page, it still has a purpose within the Web site; therefore, I would not want to delete this orphaned file. There are two ways to check links you can either check a single file, or you can check the entire site. To check the links in a single document: 1. In the File panel, highlight the file in which you want to check links. Choose File, Check Links, or press Shift+F8 for the keyboard shortcut. You can also contextualclick the selected document and choose Check Links from the contextual menu. This launches the Link Checker dialog box shown in Figure If you wanted to check more than one file, use Command+Click (Mac) or Ctrl+Click (Windows) to select multiple files and access the Check Links command the same as in step 1. In the top-left corner of the Link Checker dialog box is a drop-down menu offering the results for the three options for link reports. You ll notice that the dialog box is divided into two columns, the left side is the problematic link, and on the right is the link that is causing the problem. The orphaned link files do not have the right columns, because there are no links associated with them. You have two options for fixing the links: To fix the broken links, double-click the troubled document on the left side of the dialog box. This opens the document and highlights the problematic link. Make sure the Properties Inspector is visible and change the link in the Link text field of the Inspector. The second way to change the link is a bit easier. Click the troubled link on the right side of the dialog box. Here you can either type in the link manually or click the folder icon to search for the appropriate file. After the file is found, the correct path is added to the filename. As you can see, Dreamweaver offers many options for managing links and files. It s of the utmost importance that you make link and/or file changes within the Dreamweaver Site window not in Windows Explorer or the Mac Finder.

29 Using Site Reports 79 3 FIGURE 3.22 The Link Checker dialog box. Using Site Reports In Chapter 4, Dreamweaver MX 2004 Essentials, you look at HTML a bit and learn how you can clean up different types of HTML. With the Site Reports option, you get a chance to double-check your work, and you also have the opportunity to see design notes and checked out files. Refer to Figure 3.23 to see all the options for what you can run Reports on. Refer to Table 3.1 to see what the different options mean and how they can help you. FIGURE 3.23 The Reports dialog box offers many report options.

30 80 CHAPTER 3 Dreamweaver MX 2004 Site Management TABLE 3.1 Report Site Report Options and Definitions Definition Checked Out By Design Notes Combinable Nested FONT Tags Missing Alt Text Redundant Nested Tags Removable Empty Tags Untitled Documents When Checked Out By is selected, the Report Settings button in the bottom-left corner of the dialog box is active. Click the button to search for an individual who may have files checked out. It s important to know that it is case sensitive; however, you do not need to type in someone s entire name. For example, if you were looking for Kathryn Olah, you could simply type in Kathryn, Kath, or Olah. With this option selected, it too will activate the Report settings button in the bottom-left corner of the dialog box. Click it to bring up a new dialog box where you can enter the design note to search for and how to search for it. When searching for a design note, you must enter in a condition for the search to meet. This searches for unnecessary use of multiple FONT tags. If for some reason there is more than one FONT tag around a particular area of text, most likely it s because each FONT tag has a different attribute. For example, the following FONT tags could be combined: <font size= 3 ><font face= Arial > could read <font face= Arial size= 3 >. This option searches all the alt tags within your document to find any with missing alt tags. An alt tag is beneficial when end users are using text-only browsers. The user will get information about the image that they are not seeing by whatever is typed within the alt tag. This will also keep you in compliance with the accessibility standards set for people with disabilities. This option checks to see if tags are nested inside themselves and removes them as necessary. The following code is an example: <i>visit Train Simple s Web site <i>today!</i></i>. If tags within your HTML document do not contain anything, you can build a report based on this option to remove them. An example of an empty tag looks like this: <form></form>. This option is very handy. You d hate to publish a Web page with the title set to Untitled Document. If you build a report based on this option, it will return any duplicate titled document, as well as nontitled ones, and documents titled as the Dreamweaver default of Untitled Document. To run a site report, follow these steps: 1. Choose Site, Reports to open the Site Reports dialog box. 2. In the Report On drop-down menu, you can choose from the current document (if a document is open), the entire local site, any file you may have selected in the File panel, or you can run a report on a selected folder. In this case, I m going to choose the entire local site.

31 Checking Browser Compatibility 81 NOTE Reports can be run only on the local side. You cannot run reports on the remote side. 3. Now that you ve selected what you re going to report on, the next thing to choose is what report you want to build. You can choose from any one of the options discussed in Table 3.1. Check any of the categories you re interested in Dreamweaver reporting on. 4. Click the Run button to generate the report. Notice that Dreamweaver creates a report based on the criteria you set up in step You can modify the pages or save the report for later use. To modify the page, double-click it within the Results dialog box to open the file To save the report for later use, click the Save Report button. This saves the file in an XML format, allowing you to later format the report into a Web page, a spreadsheet, or a database table. Checking Browser Compatibility Your target audience will determine what browser versions you should check to make sure all the pages within your site are compatible with a certain browser version. In most cases, you want to make sure that they are at least compatible with a 4.0 browser or later. Very few people use a 2.0 browser, and for that matter, very little on the Web today is even compatible with a 2.0 browser. You may want to make sure your site is compatible with a 3.0, however, if you have a very broad, general audience. That s why it s very important as a Web developer to test your site in many browsers and on different browser versions. Instead of installing every version on your computer and testing them manually, a command within Dreamweaver performs this task for you. This Dreamweaver command, called Check Target Browsers, has a series of profiles that you test your pages against. Dreamweaver ships with profiles for Netscape Navigator 3.0, 4.0, 5.0, 6.0, and 7.0. It also ships with profiles for Internet Explorer 3.0, 4.0, 5.0, 6.0, and Opera (Mac) 3.0, 3.5, 4.0, 5.0, 6.0, and 7.0 as well as options for Safari. You can also download additional profiles from the Macromedia Exchange. Dreamweaver will either check a single document or an entire folder. It s important to know that Dreamweaver will not check scripts in the documents; however, you can debug scripts within each browser, which is covered in Chapter 11, Behaviors. To run the Check Target Browser command to ensure compatibility across browsers, follow these steps:

32 82 CHAPTER 3 Dreamweaver MX 2004 Site Management 1. Select which file or folder you want to check by highlighting it within the File panel. You can also perform this command on an individual file when it is open. 2. In the toolbar, click the Browser Support menu and choose Settings. This opens the Target Browsers dialog box as displayed in Figure Inside the dialog box, check all the Web browsers you d like to check to make sure your page is compatible with that version. Use the drop-down menus to specify which version of the browser you would like to check against. 4. Click the Check button. After the checking process is complete, Dreamweaver returns results inside the Results panel shown in Figure For a better look, click the Browser Report button on the left side to view the report in a Web page, as shown in Figure FIGURE 3.24 The Check Target Browser dialog box offers the option of checking compatibility with various browsers. FIGURE 3.25 The results appear inside the Results panel.

33 Summary 83 3 FIGURE 3.26 The HTML document provides feedback about the check performed by the Check Target Browser command. Summary Managing your Web site s files without Dreamweaver is a monumental task. Luckily, the folks at Macromedia realized how important site management is and built wonderful features and aids right into Dreamweaver. This chapter illustrates that Dreamweaver is just as much a Web development tool as it is a site management tool.