Dreamweaver MX Site Management
This chapter is from the book
This chapter is from the book
This chapter is from the book
In This Chapter
Setting Up a Web Site in Dreamweaver MX
Managing a Web Site in Dreamweaver MX
Working with the Site Window/Panel
Synchronizing Local and Remote Files
Working with the Site Map
Changing Links
Checking Links
Using Site Reports
Checking Browser Compatibility
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.
It's important to note that this chapter provides complete information on managing a static site, which is to say that 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
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.
)
Figure
3.1 The Basic Site Definition dialog box.
)
Figure
3.2 The Advanced Site Definition dialog box.
There are several ways to activate the Site Definition dialog box.
Choose Site, New Site. This brings you directly into the New Site Definition dialog box.
Choose Site, Edit Site. This launches the Edit Sites dialog box. Here you have the option of editing an existing site, or you can click the New button to define a new site.
In the Site Files window, choose Edit sites from the site's drop-down menu located in the toolbar. This opens the Edit Sites dialog box. Here you can highlight an existing site and click Edit to modify its definition, or you can click New to define a new site.
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 the site definition. We'll start by looking at the local info category.
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 it is 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. What I mean by 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.
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.
){kind=small}
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.
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 little folder icon to the right of the text field to launch the Choose Local Root Folder dialog box as shown in Figure 3.5.
)
Figure
3.5 The Choose Local 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 Site window toolbar, as shown in Figure 3.6.
)
Figure
3.6 The Refresh button on the toolbar will refresh the local files in the
Site window.
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 new feature is not only a time-saver, but 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, if you choose an image file outside your local root folder, Dreamweaver automatically makes 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 definitely see the benefits of this new feature. If you're new to Dreamweaver, trust me—this feature is handy.
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 Host
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.
)
Figure
3.7 After you choose FTP from the drop-down menu, a variety of 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 they could have an IP address, which appears like this: ftp.127.0.0.1. 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 http://www.trainsimple.com/web1/htdocs, 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 simply 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.
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.
Use SHH Encrypted Login (Windows Only) This option uses a Secure Shell (SHH) for a secure FTP authentication.
Automatically Upload Files 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 simply enter the correct path and name of the root folder of the Web server.
)
Figure
3.8 The Local Network tab has only a few options.
This section of the Site Definition dialog box also has options for enabling check in and check out, as well as Automatically Update Files to Server on Save. A different option from the previous screen gives you the capability to refresh remote file list automatically. This option is the same as the local option in the ftp remote info portion. Your connection to the server would determine whether you want this checked.
RDS
You should use this option if your host uses Remote Development Services. Click the options 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.
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 is new to Dreamweaver MX, but similar to the application server option in UltraDev 4.
)
Figure
3.9 The testing server category in the Site Definitions dialog box.
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 scripts. ASP alone cannot provide all the functionality of a database-driven 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.
ASP VBScript This option is essentially the same as the previous one, with the exception of the client-side scripting language being 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 VBScript, then 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 is a first in Dreamweaver MX.
ASP.NET VB This option is similar to the preceding one. If you plan to build a site using ASP.NET with VBScript, 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 Java Server Page 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 on a Macintosh. You can develop and test all on the same machine, which was not possible in UltraDev 4.
This Site Contains
This area is active only when you select ColdFusion for the server model. The drop-down menu gives you the option to specify whether all the pages in your site were developed in UltraDev 4, Dreamweaver MX, or both. The reason for this is because Dreamweaver MX writes ColdFusion MX code, whereas UltraDev 4 writes ColdFusion 5 code. No big deal, just make Dreamweaver aware of the situation.
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 simply 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 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
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.
Finally you can also cloak by using the Site menu and choosing the cloak option from there.
Design Notes Category
The design notes category offers only a few features, as shown in Figure 3.10.
)
Figure
3.10 The design notes category.
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.
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 dependant files to the document. In Figure 3.10, you'll notice 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.
)
Figure
3.11 The Site Map Layout category of the Site Definition 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, 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.
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 Name 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 file names may be a bit ambiguous. The titles are a more accurate repesentation of the page or file for which you are looking. If you find yourself in a situation similar to that, then you may consider using titles.
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.
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.
)
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 that you are working on. If one of the sites that you are working on has to meet accessibility guidelines, for example, you can create a column that reads "accessible", and simply 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 step-by-step, so you can see how to create your own custom columns and how you enter information into those columns.
Choose Site, Edit Sites to open the Edit Sites dialog box.
In the Edit 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.
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 categories section on the left.
In the categories section, click the File View Columns section. This moves the Site Definition dialog box to display options for the Site window on the Mac and the Site panel for Windows.
Click the plus sign under the File View Section of the dialog box to get a new column labeled Untitled.
Toward the bottom portion of the dialog box, there are some text fields in which you can relabel the name of the column and 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.
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.
Choose an alignment in the Align drop-down menu. The default is left, and for this purposes, that will be just fine. Unless, of course, you want change—then feel free.
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.
You want Accessibility to appear after the name column. To get this effect, highlight the Accessibility column name in the File View 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 you can't place anything above the name column. The name column always appears first.
When you're happy with the name and placement of your new column, press the OK button. This brings you back to the Edit Sites dialog box, where you can press the Done button. After you press Done, the Site Window on the Mac automatically launches.
Notice in Figure 3.13, the accessibility column appears next to the name column in the Site window on the Mac and the Site panel on Windows.
){kind=small}
Figure
3.13 Notice the Accessibility column in the Site window.
You will however, notice no values appear in that 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 with the necessary steps to add values into custom columns.
Right-click (Windows) or Control+Click (Mac) the filename of one of the documents inside the site files view. This offers access to a contextual menu.
In the contextual menu, choose Design Notes. This launches the Design Notes dialog box.
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.
-
Inside the Site Files window (Mac) or panel (Windows), notice in the Accessibility column the text "yes" shows up, as in Figure 3.14.
){kind=small}
Figure
3.14 The Accessibility column now contains a value of yes.
There is one other way to add or change the content in a particular column. In the Site window or Site panel, double-click to place an insertion point, which will allow you to type in any value you want.