Dreamweaver MX 2004 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 2004
- Managing a Web Site in Dreamweaver MX 2004
- Working with the File 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.
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?"
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.
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.
)
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.
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 folder icon to the right of the text field to launch the Choose Local Root Folder dialog box shown in Figure 3.5.
)
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.
)
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.
)
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.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 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.
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.
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.
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 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, 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.
-
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 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.
Design Notes Category
The Design Notes category offers only a few features, as shown in Figure 3.10.
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.
)
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.11illustrates 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.
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.
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.
)
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 step-by-step, and you will see how to enter information into those columns.
Choose Site, Manage Sites to open the Manage Sites dialog box.
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.
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.
In the Category section, click the File View Columns section. This causes the Site Definition dialog box to display options for the File panel.
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 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.
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 purpose, that will be just fine. Unless, of course, you want to change it—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 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.
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.
)
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.
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.
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 File panel, notice in the Accessibility column that the text "Yes" shows up, as shown in Figure 3.14.
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 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.
)
Figure 3.14 The Accessibility column now contains a value of Yes.