A Web site consists of linked documents and related files organized into folders. You can use Dreamweaver to organize and manage your site files and folders, and maintain your links. With Dreamweaver, you can create, develop, and work with site files and folders on your local hard disk and upload them to a Web server where visitors on the Web can access it.

The development environment for a Dreamweaver site consists of three main folders: Local root, Remote, and Testing server. The local root folder, known as the “local site,” stores your site files and folders you work on during development. You can store the local root folder on your local computer or a network server. The remote folder, known as the “remote site,” stores your site files and folders for production on the Web. The remote folder is typically the Web server, known as a production server, where visitors access your site on the Web. If you plan to use dynamic pages—Web pages that change based on circumstances—in your Web site, the Web server also needs to run an application server. An application server is a network server with software, such as ColdFusion, ASP, ASP.NET, JSP, or PHP, that processes dynamic pages. If you want to test dynamic pages during development, you also need a testing server folder, which provides a place to generate and display dynamic content while you work. You can store the testing server folder on your local computer or application server. In order to set up a testing server folder, you need to define the local and remote folder first.

Web site development takes place in the local folder, while Web site final production takes place in the remote folder. After you finishing developing files and folder in your local folder, you can upload them to your remote folder. The folder structure in the local and remote folders should always be the same. If the folder structure is not the same, files upload to the wrong location and links to files don’t work. So, making sure the folder structure of the local and remote are the same is very important.

You can name and specify the location of the local folder. However, the remote folder name and location is typically provided by your Web server administrator. After you find out the name and location of your remote folder, you can establish a connection to it from Dreamweaver. If the remote folder name and location is not available at the moment, you can still set up a local folder now and start creating Web site files, and then specify the remote and testing folders later.

Typically, you work on files in your local folder and then upload them to your remote folder. However, you can also work on files directly on your remote site in Dreamweaver. When you make a change to a remote site file make sure you also update the local site file too so they are both the same.

In Dreamweaver, there are three main site folders: local root, remote, and testing server. The local root folder is the working development folder for your Web site. The remote folder is the Web server folder for your Web site. This is the location on the Web where visitors access your Web site. The testing server folder is a development folder for generating and displaying dynamic page content while you work. A dynamic page is a Web page that changes based on circumstances. The other type of Web page is a static page, which only changes when you edit it. You can set up site folders when you create a new site or edit an existing one. If you don’t know the settings for the remote and testing server folders, you can set up a local folder now, start creating Web site files, and then specify the remote and testing folders later.

• Exist Site. Click the Site menu, click Manage Sites, select the site you want, and then click Edit.

Click the Advanced tab.

Click the Local Info category.

Click the Local Root Folder icon, locate the local folder you want to use, and then click Select.

Click the Remote Info category, and then select the access method you want to use to transfer files between local and remote folders.

Click the Testing Server category, and then select server model and access method you want to use to display dynamic page content.

Click OK.

The Files panel is a useful place for managing files and folders. When you create or open a Web site, the Files tab in the Files panel displays all the site’s files. If you want to change locations, you can use the Site popup in the Files panel to select a remote server, local drive, or desktop. The Files tab displays the file hierarchy of all the folders and files in your Web site in different views, either local, remote, testing, or repository version control from Subversion (New!). Using the plus sign (+) and the minus sign (−) to the left of an icon in the Files tab allows you to display different levels of folders in your Web site without opening and displaying the contents of each folder. If you want to display two different views, you can expand the Files panel.

Instead of using Windows Explorer (Win) or Finder (Mac) to manage and work with Web site files, you can use the Files panel. After you open a Web site, you can quickly open files using the Files panel instead of using the Open command on the File menu. The Files panel displays all the files for the working site. If you want to open a file for another site, you need to use the Open command on the File menu, or switch the working site and use the Files panel. In addition, you can create a new file. When you do, Dreamweaver creates the new file in the same folder as the selected file.

After you create a Web site, you can use the Files panel to quickly and easily manage individual Web pages, files and folders. If a file or folder name is not exactly what you want, you can quickly rename it. You can create and name a new folder and move pages to a different location. If you no longer need or want a file or folder, you can remove it. In addition, you can move files and folders around in the same way you can in Windows Explorer (Win) or Finder (Mac). If you no longer need a file, you can quickly delete it.

If you can find a file on your site, you can use the Files panel to help you locate it. The Files panel allows you to quickly find files in your site. If you have a file open and your not sure which site it belongs to, you can find it using the Locate in Site command. If you want to find the newest files in your local or remote site, you can select them using commands on the Options menu in the Files panel. As you work on files, you can also use find commands to locate currently checked out or recently modified files.

Click the Window menu, and then click Files to display the Files panel.

Click the Options menu in the Files panel, point to Edit, and then click Select Recently Modified.

Do either of the following to indicate search dates you want:

• To report on all files modified in the last several dates, click the Files Created Or Modified In The Last option, and then enter the number of days you want.

• To report on all files modified within a specific time, click the Files Created Or Modified Between option, and then specify a data range.

If you are working on an Adobe Contribute site, enter a user name to limit your search to files modified by a specific user.

Click the option you want to specify where to view the files listed.

Click OK.

Dreamweaver saves your settings and highlights the files based on the search criteria.

A file type specifies the file format (for example, a Web page .htm or .html) as well as the program and version in which the file was created (for example, Dreamweaver). You might want to change the type if you’re creating a custom template or sharing files with someone who needs them for use in another program. You can use the Save As dialog box to change the file type for a page. The Save As Type list arrow displays a list of the available formats for the program or current selection.

When you create a Web page, one of the first things to do is to apply some general settings to your page. The Page Properties dialog box lets you specify the default font family and font size, background color, margins, link styles, and many other aspects of page design. You can assign new page properties for each new page you create, and modify those for existing pages. Dreamweaver provides the ability to embed these changes to the page in one of two ways: HTML or CSS.

Dreamweaver formats text using CSS (Cascading Style Sheets), by default, and it would prefer to set page preferences in this manner. If you use the default CSS setting, Dreamweaver uses CSS tags for all properties defined in the Appearance (CSS), Links (CSS), and Headings (CSS) categories of the Page Properties dialog box. The CSS tags defining these attributes are embedded in the head section of the page. To view the tags, simply click the Code button, located in the upper left corner of the document window, and Dreamweaver changes the view from Design to Code. Scroll up to the Head section of the document and view the property codes.

If, however, you want to use HTML tags, you can set page preferences in the Appearance (HTML) category (New!) of the Page Properties dialog box. The options are similar to those in the Appearance (CSS) category.

The page properties you choose apply only to the active document. If a page uses an external CSS style sheet, Dreamweaver doesn’t overwrite the tags set in the style sheet, as this affects all other pages using that style sheet.

The Appearance category in the Page Properties dialog box allows you to set the default options for CSS and HTML (New!) you want for page font type and size, text and background color. You can also use a picture as the background for a page and specify how it appears. If you’d like to add some interest to your pages, you can add a background color. If the background image contains any transparent areas, the background color appears. When selecting background colors, some creative judgment is required. For example, if you choose a dark color for your background, make sure you use a light color for your text (the most commonly used is white) to generate the appropriate contrast required for easy reading.

The Links category in the Page Properties dialog box allows you to change the default nature of the links on a page. For example, a word defined as a link has a blue underline, by default. You could change the color to red. You can specify link colors for text, visited, rollover, and active links. In addition, you can even choose not to use an underline, or only have it appear when the visitor rolls over the text.

The Headings category in the Page Properties dialog box allows you to specify the default settings for up to six heading styles. You can specify the font type, size, color, and formatting. For example, you can specify that every H2 heading style that is applied to text is 14 points and red. In addition, you have the option of choosing whether the heading styles are Bold or Italic style.

The Title/Encoding category in the Page Properties allows you to change the Web page title and specify the document encoding type you want. A Web page title is the text that visitors see on the title bar of their Web browser when they display the Web page. The document type and encoding options in the Page Properties dialog box allow you to specify the language you want to use for a Web page. File encoding makes sure your Web browser and Dreamweaver use the right character set for the selected language. The standard settings for a simple HTML page are: Document Type (DTD) XHTML 1.0 Transitional, Encoding Unicode 4.0 UTF-8, and Unicode Normalization None.

A tracing image is a JPEG, GIF, or PNG formatted image that lays in the background to help you layout the page. For example, you could comp your site in Fireworks and then bring it into Dreamweaver to use as a guide to align tables and layers. Tracing images are not saved with the final document and don’t appear in a Web browser. It doesn’t matter how big or complex the tracing images are because they are only used by Dreamweaver during the design phase. Once the file is saved and moved to the server, the tracing image goes away, and the file retains its original small size.

When you’re working in Design or Split view, you can use visual aids in Dreamweaver to make it easier to work with page elements, such as borders, backgrounds, and outlines that are normally invisible. Sometimes it’s hard to adjust elements without being able to see the edge. For example, the Table Borders and Frame Borders commands on the Visual Aids submenu on the View menu make it easier to view and change the borders in tables and frames on a page. You can show or hide all the visual aids at once or select each item individually. The Visual Aids submenu highlights the menu icon or displays a checkmark when a visual aid is turned on.

• Individual. Click the View menu, point to Visual Aids, and then click each item you want to show or hide.

Dreamweaver uses many styles of elements to create a Web page. Some of the elements are invisible, such as text and images, and some are not, such as anchors and line breaks. The invisible elements in a Web page are important to the structure and functionality of a page. However, they are not always necessary to view and make changes to a Web page unless you specifically want to work with an invisible element. You can use the Preferences dialog box to select the invisible elements you want to show or hide. After you set your invisible element preferences, you can use the Visual Aids submenu on the View menu to show (enable) or hide (disable) the Invisible Elements command. Showing invisible elements might slightly change the layout of a page, however, it’s only temporary until you hide them.

Before you can work with an element, such as text or an image, you need to select the element first. If an element is invisible, you need to make it visible before you can select it. You can select an element in Design view by simply clicking the element. If you want to select the complete tag associated with an element, you can use the tag selector. The tag selector appears at the bottom of the Document window on the Status bar. The tag selector shows the tags within the current selection or insertion point. The leftmost tag in the tag selector is the outermost tag in the selection. Simply select the code or place the insertion point where you want to select a tag, and click the tag you want to select in the tag selector.