GDT 150 Design for the Internet
Handout: Site Control
One of the most important aspects of building a website is file management. A single website is made up of HTML documents for each page of the site, other text documents, such as external style sheets and javascript, and all the graphics, which can easily number 100, even in a small site. With so many files, it is very important to keep track of them, so that when you need to alter a file, you can easily find it. File organization is accomplished with a carefully structured set of directories. First of all, you should have a single folder on your hard drive dedicated to your website that contains only those files that will go up on the web. This top level folder is often called a root folder. Inside the root folder, you can organize your directory structure in any way that makes sense to you. Typically, your HTML files will go in this top level folder, and there will be a folder for graphics, which is often divided into several other folders. Depending on the complexity of your site, you may have additional folders for HTML documents, as well. Planning the file structure of your site will roughly correspond to your site’s architecture, so simple sites will have simple file structures, and more complex sites will generally have more complex file structures.
One of Dreamweaver’s best features is its site management tool. To access the site management features, click the site window icon in the launcher, or press F5.
Dreamweaver requires you to set a root folder that contains all of your files for the web. Once the root folder has been set, it allows you to automatically update all links and paths within the site if you make any changes to the directory structure. To set the root folder, you must define a site by selecting Define Site… in the drop-down menu at the top left of the Site window. If you have used Dreamweaver before, this will open a window showing all the sites that have been defined so far. Click New to define a new one. If no sites have been defined yet, the Define Sites dialog box will open. Type in a name for you project. Special characters and spaces are OK-this is just an internal name. Then browse to the folder that you want to use as your root folder. Make sure that you open the folder before selecting it. The name of the selected folder will be shown in the lower left-hand corner of the dialog box. After you have selected the root folder, be sure to check the “Use Cache…” checkbox. This will help speed up any link changes you make in the site.
If you are opening files in Windows that were once on a CD-ROM, the files will be locked. This is indicated by a small lock next to the filename in the DW Site window. There are two ways to unlock these files. You can do it manually by right clicking on each file, selecting “Properties,” and then unchecking “Locked” at the bottom of the window. Dreamweaver, however, makes it very easy to unlock all the files in a project at once. Simply select the root folder at the top of the site window, go to the File menu and select “Turn Off Read Only.”
Another problem you might run into with Windows is that file extensions may not be visible. To correct this problem, simply open a file folder, such as My Documents or My Computer by double-clicking on the icon on the desktop, and from the View menu, select “Folder Options.” Click on the View tab, find “Hide File Extensions…,” and uncheck it. Click OK, and file extensions will be visible. This is fairly important, as you’ll often name several types of files with the same name, such as contact.html, contact.gif, and contact.jpg.
Once you’ve defined a site and turned off Read-Only if necessary, Dreamweaver will automatically keep track of links and paths to images if you change the directory structure, but only if you work in the Site window. Always make changes to your directory structure and open your files in Dreamweaver from the Site window! If you don’t, you’ll have to manually recode any path changes that you cause. Dreamweaver’s link management features apply to relative links and paths only. There are two types of links/ paths, relative and absolute. Relative links point to local files (files that reside on the same machine as the file in question.) Absolute links point to files on remote servers. The link includes the full URL, including the transfer protocol (http, ftp, etc.), the host (www.whatever.com), and the path to the file (/html/index.html). Paths are the way that files can be located on a computer. They are simply a list of folders separated by slashes, indicating that a folder in located inside the previous one, followed finally by the file name. In HTML documents, paths are generally relative, meaning that they are determined from the current document. For example, if a path has no slashes, such as “contact.html,” that means that contact.html is in the same folder as the current file. If the path is “html/contact.html,” contact.html is located inside the folder “html,” which is located inside the current folder. If the path is “../contact.html,” the file contact.html is located inside the folder that contains the current folder. “../” means “go up a directory.”
After the site is defined, you can add files and folders to the site by using the File Menu and selecting either “New File” or “New Folder,” or you can right-click in the blank part of the right Site window and select “new File” or “new Folder.” If you choose to move some of your files into the new folder, Dreamweaver will ask you whether to update the links in all the affected files or not. Click Update to update them. Remember, all file operations of this type should be done only in the Site window, not in Explorer windows.
To create a new site entirely from scratch, choose “Define Sites…” from the sites drop-down menu. In the dialog box, click New…, name the new site and navigate to the folder for the new site. You can also create a new folder by clicking the new folder icon when you are in the appropriate directory. Click Select, check the Link Cache, and click OK. To insert a new HTML document, go to File>New File, and name it.
back to top