ptg Managing Web Site Files Introduction A Web site is made up of numerous files. As you continue to create more and more Web pages and other files for a Web site, keeping track of them becomes an important job. Managing Web site files is an important part of creating an organized site that one or more developers can work on. In Dreamweaver, there are three main site folders: local root, remote, and testing server. The local root and testing server folders are the working development folders for your Web site, while the remote folder is the Web server folder that visitors access on the Web. Instead of using Windows Explorer (Win) or Finder (Mac) to manage and work with Web site files, you can use the Files panel. When you create or open a Web site, the Files tab in the Files panel displays all the site’s files, which you can use to quickly and easily man- age individual Web pages, files, and folders. If you can find a file on your site, you can also use the Files panel to help you locate it. 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 Web page or other related file. 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 allows you to embed these changes to the page using HTML or CSS (Cascading Style Sheets), depending on your preference. 4 4 What You’ll Do Explore Web Site Files and Folders Set Up Site Folders View the Files Panel Open and Create Files in the Files Panel Manage Files and Folders in the Files Panel Find Files in the Files Panel Save a File with Different Formats Identify Dreamweaver File Formats Set the Home Page Prepare to Set Page Properties Set Appearance Page Properties Set Link Page Properties Set Heading Page Properties Change Title and Encoding Page Properties Insert a Tracing Image Use Visual Aids Work with Invisible Elements Select Elements 67 From the Library of Wow! eBook From the Library of Michele Renth ptg 68 Chapter 4 server folder on your local computer or appli- cation 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 fin- ishing 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. 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. Working with Site Folders 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 com- puter 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 applica- tion 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 Exploring Web Site Files and Folders From the Library of Wow! eBook ptg Chapter 4 Managing Web Site Files 69 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. Setting Up Site Folders Set Up Site Folders Use one of the following methods: ◆ New Site. Click the Site menu, and then click New Site. ◆ Exist Site. Click the Site menu, click Manage Sites, select the site you want, and then click Edit. Click the Site category. Click the Browse For Folder icon, locate the local folder you want to use, and then click Select. Click the Servers category. Click the Add New Server button, specify the server name, connection type, address, username and password, and root directory on the Basic tab (New!). Click the Advanced tab, and then select testing server model and access method you want to use to display dynamic page content (New!). Click Save, and then click OK to cache files, if necessary. Select the check box for the Remote and Testing server you want to use (New!). Click Save. 9 8 57 6 5 4 3 2 1 8 9 5 2 3 4 From the Library of Wow! eBook ptg 70 Chapter 4 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 list arrow 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. Using the plus sign (+) and the minus sign (-) to the left of an icon in the Files tab allows you to dis- play different levels of folders in your Web site without opening and displaying the contents of each folder. If you want to display two differ- ent views, you can expand the Files panel. Viewing the Files Panel View Files in the Files Panel Select the Web site in which you want to view. Click the Window menu, and then click Files to display the Files panel. Click the Site list arrow, and then select the location where you want to view files. Click the Site Files View list arrow, and then select the view you want. ◆ Local View. Displays the folder structure of the site on your computer (Default view). ◆ Remote Server. Displays the folder structure of the site on a Web server. ◆ Testing Server. Displays the folder structure of the testing and local site. ◆ Repository View. Displays the Version Control site files using Subversion. Perform the commands you want to display folder structure and contents: ◆ To sh ow th e fi le and fo ld er structure, click the Plus sign (+). ◆ To hi de th e fi le and fo ld er structure, click the Minus sign (-). ◆ To di sp lay th e conten ts of a folder, click the folder icon. 5 4 3 2 1 3 4 5 From the Library of Wow! eBook ptg Chapter 4 Managing Web Site Files 71 Work with the Files Panel in Expanded View Select the Web site in which you want to view. Click the Window menu, and then click Files to display the Files panel. The Files panel appears, displaying the Files tab. Click the Expand button to expand the Files panel. The Files panel expands to display the remote site, testing site, or site map on the left and the local site on the right. Click a button on the toolbar to display the view you want: ◆ Remote Server. Displays the remote site. ◆ Testing Server. Displays the testing site. ◆ Repository Files. Displays the Version Control site files using Subversion. Click the Collapse button again to collapse the Files panel. 5 4 3 2 1 3 Click to expand/collapse 4 See Also See “Managing Files and Folders in the Files Panel” on page 74 for information on working with site files in different views. From the Library of Wow! eBook ptg 72 Chapter 4 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. Opening and Creating Files in the Files Panel Open a File in Files Panel Select the Web site in which you want to view. Click the Window menu, and then click Files to display the Files panel. Click the Site list arrow, and then select the location where you want to view files. Click the Site Files View list arrow, and then select Local View. Use any of the following methods: ◆ Double-click the file icon. ◆ Right-click (Win) or Control- click (Mac) the file icon, and then click Open. 5 4 3 2 1 3 5 4 Did You Know? You can refresh the Files panel. If you don’t see a file or folder you know is in the Files panel, click the Refresh button (Dreamweaver sites only) or right-click (Win) or Control-click (Mac), and then click Refresh. From the Library of Wow! eBook ptg Chapter 4 Managing Web Site Files 73 Create a File in Files Panel Select the Web site in which you want to view. Click the Window menu, and then click Files to display the Files panel. Click the Site list arrow, and then select the location where you want to view files. Click the Site Files View list arrow, and then select Local View. Select a file where you want to place the new one. Right-click (Win) or Control-click (Mac), and then click New File. Enter a name for the file or folder, and then press Enter (Win) or Return (Mac). 7 6 5 4 3 2 1 5 4 6 3 7 Did You Know? You can control what applications open specific files. For example, you might want to open your .gif files using Fireworks, or you might want to use Photoshop. Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences. Click the File Types/Editors category, make your changes, and then click OK. From the Library of Wow! eBook . 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. . folders on your local hard disk and upload them to a Web server where visitors on the Web can access it. Working with Site Folders The development environment for a Dreamweaver site consists. Expand button to expand the Files panel. The Files panel expands to display the remote site, testing site, or site map on the left and the local site on the right. Click a button on the toolbar