Planning and Creating Your Project in Macromedia® Dreamweaver™ 4
Planning and Creating Your Project Using the Site Window
You use the Site window to plan, create, and manage your projects. Dreamweaver contains richly functioned file management capabilities that enable you to upload files to a LAN (Local Area Network) or use FTP (File Transfer Protocol) to transfer files to a remote server. You can even interface with a resource management system, such as Microsoft Visual SourceSafe.
Dreamweaver enables you to check in and out files to work on them. This capability is especially useful in a multi-user environment where you are not the only person working on the Web site. When you have a file checked out no one else can work on it until you check it back in. In Hour 18, "Managing and Uploading Your Projects," you'll explore additional capabilities that you can use to manage your Web sites.
In this hour, you will learn
How to define a Web site in the Site window
How to set up LAN, FTP, and source control transfer methods
How to import an existing Web site
Define a New Web Site
You open the Site window to define the root directory of a Web site. The root of your Web site is the main directory that contains the files and other directories. You'll want to think carefully about which directory defines the root of your Web site. For instance, if you are working on your company Web site, the Web server defines the default Web site directory; that directory would be the root. However, if you are developing a Web site only for your department, then the root of your Web site may be a sub-directory under the main Web site directory.
Access the Site window with a couple of different commands. The command in the Launcher and Mini-Launcher is called Show Site. Under the Window menu the command is called Site Files. You can also select Site Map from the Window menu to open the Site window with the Site Map showing instead of files. We'll cover the Site Map in Hour 18.
When you define a Web site in the Site window, Dreamweaver considers that directory and all of the directories and files within it to be the entire "universe" that you will be working within. Dreamweaver will prompt you to save files into your root Web site if they are located outside of it. The Templates and Library directories are located in the root directory.
When you define a Web site in Dreamweaver, you define a local site that exactly mirrors a remote site. Mirroring means that the local site contains an exact copy of the files on the remote site. You work on the files in your local site and then upload them to the remote site using Dreamweaver's file transfer commands.
File and directory names containing spaces, punctuation, or special characters may cause problems on some Web servers. You can use underscores instead of spaces in names. In addition, file names are case-sensitive on some Web servers.
Set Your Local Site
Use an existing directory on your hard drive that already contains Web pages or create a new empty directory for your local site. You will create a local root directory for every Web site that you create.
I have a directory on my hard drive called Projects. The Projects directory contains a directory for each project. Within each project directory there is a directory called Web, set as the local root directory for the project. This directory structure enables me to put other directories and files in the clients folder without them being part of the Web site.
You may prefer to have one directory that contains all of your Web sites. Whatever works best for you. It is easier if you do not mix non-Web files into the root directory of your Web site. Since the remote site is a mirror image of your local site, you don't want to load files onto your Web site that do not belong there.
Put some thought into how your files will be organized in your Web site before you start a project. You will probably want to create a separate images folder to hold your images. If you have other types of assets, such as sound or video, you might want to create separate folders for those too.
If you have different sections of your Web site, do you want to create separate directories for the images in each section? It might be a good way to organize your site. Then again, if the same graphics are used across multiple sections, it might just make it hard to find. Make sure that your organizational logic isn't going to break down on your site in the future.
Luckily if you do have to rearrange assets that have already been used in Web pages Dreamweaver will update the links for you. When you move a file, Dreamweaver asks you if you want to search and update links to that file. It is still better to make wise design decisions at the beginning of a big project.
I also try to logically break up sections of Web sites into separate directories. If your Web site has obvious divisions (departments, lessons, products, and so on), you can create directories to hold the Web pages in each of the sections. You'll be surprised how even a small Web site becomes quickly unmanageable when all of the files are dumped into one directory.
You can create a directory structure right in the Dreamweaver Site window. The Site window enables you to create new directories and new files. If you prefer, you can create your directory structure somewhere else.
To create a new site in Dreamweaver
Select the New Site command under the Site directory. Or, select the Define Sites command from the Current sites drop-down menu shown in Figure 3.1.
Figure 3.1 Use the Current Sites drop-down menu to select a site or to select the Define Sites command.
If you already have one or more sites defined, the Define Sites dialog box appears as shown in Figure 3.2. Select the New button to open the Site Definition dialog box.
If you do not have any sites defined in Dreamweaver, the Site Definition dialog box (shown in Figure 3.3) automatically appears.
Figure 3.2 The Define Sites dialog box lists all of your defined sites. Use the New, Edit, Duplicate, andRremove buttons to manage your sites. Select the Done button to close the box.
Figure 3.3 The Site Definition dialog box is where you enter all of the paths to your local and remote sites.
Make sure that the Local Info category is selected on the left side of the Site Definition dialog box. Enter a name for the Web site in the Site Name box.
Enter the path to the local folder that is the Web site root. You can use the folder button to browse to the folder and select it.
If you are working on an older computer, you may want to deselect Refresh Local File List Automatically to speed up performance in the Site window. This setting controls whether the local file list automatically refreshes every time a file is copied into the site. Most Dreamweaver users will want to keep this box checked.
Enter the URL that will eventually lead to the completed Web site. This helps Dreamweaver check absolute URLs in the site. If you don't know the URL, you can leave it blank and add it later.
Check the Cache box to create a record of the files in your site. Dreamweaver uses this record to automatically update links in your site if you rename or move a file.
Click the OK button. If you selected the Cache check box when setting up the site, Dreamweaver will tell you it is creating the cache, as shown in Figure 3.4.
Creating a cache for your Web site is especially helpful for large sites. It will speed up Dreamweaver's automatic checking and updating of links.
The Define Sites dialog box shows your newly created site. When you select the Done button, the files in your site, if there are any, appear on the Local Folder side of the Site window. By default, the Local Folder site is located on the right side of the Site window. You can set which side of the screen the local and remote files appear on in the Site category in Dreamweaver preferences, as shown in Figure 3.5.
Figure 3.4 Dreamweaver tells you it is creating a cache for your site. This file speeds up updating links when you move or rename a file.
Figure 3.5 The site category in dreamweaver preferences enables you to configure which side of the site window the local and remote sites appear on. You can also configure firewall and other settings here.
The Site window's list of local files looks very similar to file management programs on your computer. You can move, rename, delete, copy, paste, and open files in the Site window. Notice that the file size and file type are displayed along with the date the file was last modified. You'll explore Checked Out By, the last column in the Local Site, in a few minutes when you examine Dreamweaver's Check In/Out functionality.
Drag the middle divider between the local and remote sites to make one side or the other wider. You can also drag the column dividers between the column headings in either the local or the remote sides of the Site window.
The Site window enables you to quickly locate and launch all of the files in your Web site. You may want to leave it open all the time and use it to open files. If you use the Site window to open files, you won't need to constantly select the Open command and navigate to files.
Add Your Remote Site
Define a remote site after you have defined a Web site in Dreamweaver by editing the Web site definition. A remote site can either be on a server that is on a Local Area Network (LAN) or a server that you access over the Internet. Either way, this server runs Web server software and makes your Web site available either over the Internet or a company intranet.
Edit a site to add remote site information by launching the Site Definition dialog box from either the Site menu or the Current sites drop-down menu. After you select your site to edit, the Site Definition dialog box contains five categories:
Site Map Layout
File View Columns
You just set up the local info—the name of the site, its local root folder, and other options. Now you can set up some additional characteristics of the site including the remote location information, design notes setup, and configuring how the file columns appear in the Site window. Select the categories listed above to set up these items. We'll cover Local Info and Remote Info later in this hour, and Design Notes, Site Map Layout, and File View Columns in Hour 18.
To define the Remote Info, select a site and click on the Edit button. The Remote Info category displays the Server Access drop-down menu. The menu has three selections: None, LAN, and FTP.
Set LAN Information
Select Local/Network access, shown in Figure 3.6, if the server is on a computer that you can connect to directly using a network.
If you can access the server just like you access your hard drive, moving files to and from it, then you have LAN access. You will need to know which directory your files should be located in to be accessible over the Web. Your Web administrator should be able to give you that information.
Figure 3.6 You select Local/Network access when the remote directory resides within your local area network. Simply select Local/Network as the access method and enter the path to the directory as the remote directory.
Set up LAN access to the remote server by entering the path to the remote directory. Use the folder icon to browse to the directory or type in the path. Checking the Refresh Remote File List Automatically may slow down Dreamweaver's performance a bit, but you will always have an up-to-date reflection of the remote site.
It can be confusing to collaborate with someone and not know who has the most recent version of a file. Dreamweaver's Check In/Out capability helps you collaborate with others effectively by checking out a file to only one person at a time and placing that person's name beside the file. The name is visible to people connecting using Dreamweaver to the remote site, as shown in Figure 3.7.
You don't need to enable Check In/Out for all of your Web sites. If you are not collaborating with others, you may not need the functionality.
To turn on Dreamweaver's Check In/Out capability, check the box next to Enable File Check In and Check Out. You can select the Check Out Files When Opening check box if you want to automatically check out a file when you open it from the Site window. Enter a Check Out Name in the box. Others will see this name beside the file when you have a file checked out. You can also enter your email address so that others can automatically email you from Dreamweaver. Collaboration techniques will be further discussed in Hour 18.
Figure 3.7 When you are connected to a remote site, you see the names of people who have files checked out beside the file name.
Set FTP Information
Select FTP access, shown in Figure 3.8, if you need to transfer files over the Web to a remote server. The server could be physically located in your same building, or it could be on the other side of the world. You need the name of the FTP server to enter into the FTP Host box. Often this is in the format: ftp.domain.com.
Do not enter the server name preceded with the protocol as you would in a browser (such as ftp://ftp.domain.com).
Enter the root directory of your Web site in the Host Directory box. You may need to get the path for this directory from your Web or network administrator. If the server runs on Windows NT, the directory path may look like a path on your local drive (such as users\web\). If the Web server runs on UNIX, the path won't contain a drive letter (such as users/web/).
Figure 3.8 You select FTP access when the remote directory resides on a server you need to access over the Internet.
If you are unsure what the root directory is on the remote site, try leaving the Host Directory box blank. The FTP server may put you directly in the correct directory because your account may be configured that way.
To access the remote directory with FTP you will need a login and password to the FTP server. The standard anonymous login, often used to download files over the Internet, will probably not work to upload files to a Web site. You need to log in as a user with access and permission to get and put files in the directories that will house your Web site. Dreamweaver saves your password by default. If other people have access to Dreamweaver on your computer and you don't want them to access your FTP account, deselect the Save check box.
If you are behind a firewall or using a proxy server you may have difficulties with FTP. Consult with the network administrator, or whoever administrates your local firewall, about which settings you will need to choose when setting up FTP. Select the Use Firewall check box if you go through a firewall to access the Internet. Configure the firewall port and host in Dreamweaver preferences (refer to Figure 3.5). Your firewall may also require you to select the Passive FTP setting.
If you have a slow connection to the Internet, the default FTP timeout may be too short, causing your FTP connection to timeout too often. You can increase this time in the Site preferences.
Set up Check In/Check Out as previously discussed for LAN access.
Set Source/Version Control Application Information
You can interface from Dreamweaver's Site window directly with source and version control applications. If you are not in a professional environment that uses source management software, you can skip this section or read it and file it away for later. The integration between Dreamweaver and source control software programs is an important new feature of Dreamweaver 4.
Dreamweaver supports direct integration with Microsoft Visual SourceSafe, a popular version control product. You can also exchange files with any source control program that supports the WebDAV protocol.
Set up a Visual SourceSafe database as your remote site by selecting the SourceSafe Database choice in Remote Info. Notice that you still have the Check Out Files When Opening option but cannot use Dreamweaver's internal Check In/Out functionality. You will use the checking in and out capability of Visual SourceSafe instead.
Set up the SourceSafe database by selecting the Info button. The Open SourceSafe Database appears as shown in Figure 3.9. Enter the Database Path, Project, Username, and Password in this dialog. You can get this information from the database administrator.
Figure 3.9 Enter the database, username, and password to connect to a SourceSafe database.
The standard WebDAV (sometimes just called DAV) version control information is set up similarly to a SourceSafe database. Select WebDAV from the drop-down menu and then select the Info button. The settings, shown in Figure 3.10, look different from the SourceSafe settings since you access this type of version control application over the Web.
Figure 3.10 Enter a URL, username, and password to connect to a source control application using the WebDAV protocol.