Dreamweaver MX 2004 phần 2 docx

4306c03.qxd 3/22/04 11:20 PM Page 43 getting oriented ■ 43 The Code Panel Group This panel features two panels and is geared toward working directly with code (see Chapter 18): Snippets Used to store useful bits of code, and it comes with a pretty cool starter set Reference Contains hyperlinked versions of references for various markup and scripting languages The Application Panel Group This panel features four panels, all geared toward web appli- cation development (see Part IV): Databases Used to connect to your data source Bindings Helps make data available Server Behaviors Takes advantage of server-side features for working with dynamic data Components Used for introspection into the properties and methods of a component such as a JavaBeans. Now, aren’t you glad you asked? The Tag Inspector Panel Group This panels features three pan- els, allowing you to view and edit attributes, behaviors, and rel- evant CSS styles for selected tags: Attributes Shows available attributes for the selected tag, as well as current values for those attributes already included in the selected tag. Attributes can be seen in Cate- gory view or in List view. Behaviors Shows built-in JavaScript actions that can be automatically added to user and browser events (see Chapter 12). Relevant CSS Shows CSS rules for the selected tag, avail- able CSS properties for this tag, and current values for those properties. CSS properties can be seen in Category view or List view. 4306c03.qxd 3/22/04 11:20 PM Page 44 44 ■ chapter 3: Setting Up Your Workspace and Your Site The Files Panel Group This panel features two panels. It gives you easy access to the files (both documents and assets) used in your site: Files Offers direct access to your local computer’s or net- work’s files through an explorer-type icon in the list view. The Files panel can be expanded to a full-size window that displays remote files on the left and local files on the right. Assets Functions as a repository where you keep all your objects handy. More on this in Chapter 4. The Results Panel Group This panel group is not shown by default, but like all panels, you can bring it up by choosing it from the Windows menu. When you display this panel, it appears like the Property inspector, docked to the bottom of the screen. Here are its panels: Search Shows search results Validation Checks your code for syntax errors and for compliance with W3C specifications (see Chapter 18) Target Browser Check Checks for browser compatibility (see Chapter 29) Link Checker Check links sitewide (see Chapter 8) Site Reports Generate statistics about your site FTP Log Tracks FTP downloads (Gets) and uploads (Puts) Server Debug Debug scripts code Other Panels As in all systems, there are a few miscellaneous panels: Code Inspector Shows code view in a floating-panel layout History Shows the undoable history of commands you have used Layers Shows name and z-index value for any layers in the current document Several panels are no longer available, including the Answers panel, HTML Styles panel, Site- spring panel, and the Timelines panel. The Site panel has been replaced with the Files panel. For more information on using Dreamweaver with and without site management, see the section “Setting Up Your Site” later in this chapter. 4306c03.qxd 3/22/04 11:20 PM Page 45 customizing your workspace ■ 45 Customizing Your Workspace As you begin working with Dreamweaver, you’ll find your own preferred style of working with the interface. You may find some layouts easier to work with in specific circumstances, and you may therefore find yourself jumping back and forth or changing things around as you go. Dreamweaver makes it pretty easy to set up the workspace the way you want it. Changing Your Workspace Style (Windows Users Only) As mentioned earlier in this chapter, Windows users are asked to choose a workspace layout when they first start running the program—Mac users don’t have any such choice. Windows users can also change the preferred workspace at any point from the Preferences dialog box (Edit ➔ Preferences, or Ctrl-U). In the General category, click the Change Workspace button. This brings up the Workspace Setup dialog box shown earlier in Figure 3.1. Choose a new workspace (Designer or HomeSite/Coder-Style) and click OK to switch. Dreamweaver will inform you that the change will take place the next time you start the program. Hide Panels One quick way to maximize the screen space available for your Document window is to instantly hide all the panels with the Hide Panel command (F4, or View ➔ Hide Panels); the result of this action is shown in Figure 3.12 for the integrated workspace (Windows). Figure 3.12 The Hide Panels command (inte- grated workspace) has been used to maximize the work- space for your document. 4306c03.qxd 3/22/04 11:20 PM Page 46 46 ■ chapter 3: Setting Up Your Workspace and Your Site Figure 3.13 shows the result of hiding panels in the Floating layout workspace (Mac). Because the Site panel is not functioning as a panel in this layout, it remains visible (if open) after panels have been hidden. Docking and Undocking Panels To undock a panel, drag it from where it’s docked until it floats free. To dock a panel, drag it by its gripper (the textured area to the left of the panel’s name) into the panel area. A black out- line will appear to show where the panel will be docked when you release the mouse button. A floating undocked panel will have a Close button on it Mac operating systems). You can hide the panel by clicking the Close button. To bring it back (docked or undocked), select any of the panel’s tabs by name from the Win- Setting Up Your Site OK, enough of the grand tour. Let’s get down to business! As you probably know, a web- site is a conglomeration of web pages grouped together via associated hypertext links. Dreamweaver allows you to work with entire websites, not just individual pages, by desig- nating a group of folders on your computer or local network as a “site.” As soon as you designate a group of folders as a site in Dreamweaver, you can start to take advantage of Dreamweaver’s site management tools. Dreamweaver keeps track of every link on every web page within a site, inserting the source and link information for each page into that page’s properties; it also ties the same information into the site’s fold- ers. This tracking capability enables you to move around files within the site while main- taining their links. You can also rename files and folders without disturbing these links. Remember, the links essentially are the website. Do not move any folder or rename a file manually (outside of Dreamweaver). That way you won’t accidentally disturb the integrity of your website. In the integrated workspace, you can also click and drag the little handle in the middle of the left (inner) edge of the panels docked on the right side. (These directions are reversed, of course, in the Coder style layout.) Double-clicking the handle hides those panels all at once. Click it once to restore the panels docked along the right side. like any other window (this is true in both Windows and dows menu. 4306c03.qxd 3/22/04 11:20 PM Page 47 setting up your site ■ 47 Figure 3.13 Hiding panels in the Floating layout workspace For those users who want FTP access without using Dreamweaver’s site management tools, Dreamweaver now offers the option of connecting to an FTP or RDS (Remote Development Services) server to upload and download files without formally setting up a Dreamweaver site. To access files on a server that is not in a defined Dreamweaver site: 1. Open the Files panel. 2. Select Desktop from the drop-down menu on the left. 3. Right-click (Windows) or Control-click (Mac) on FTP And RDS Servers. 4. Select “Add FTP Server” or “Add RDS Server.” 5. Complete the dialog in the Configure Server dialog box that then displays. (You will need the FTP hostname, username, and password.) The Files panel displays the contents of the folder you connected to on the remote server, and the server name appears in the drop-down menu. To access the files again, just select the server name from the drop-down menu. 4306c03.qxd 3/22/04 11:20 PM Page 48 48 ■ chapter 3: Setting Up Your Workspace and Your Site RDS (Remote Development Services) access is only available on computers running Cold Fusion. For more information on Cold Fusion, see Chapter 20. Setting Up Local Site Folders Setting up your website in Dreamweaver is a two-part process: 1. First, you create your folders on your hard drive or local network. 2. Then you designate those folders as a site in Dreamweaver. One of the most important issues in developing a site is project file management. Before you start, you need to develop a system for managing all the files associated with the site. When you’re working on a large site, you are usually dealing with a large number of files of different formats, possibly spread over many drives and being worked on by a number of people. If you plan how you’re going to handle your HTML pages, image files, and related documents (such as text files used as source material, Fireworks source files, etc.), you’ll make your life a lot easier. The front page or first page of your site should always be stored at the site’s root level and is nearly always named index.html. Unless the site consists of only a few pages and no images, avoid putting everything into just one folder (directory). At the very least, you’ll want to keep the files you need to upload to a web server separate from your working files. Set up your own structure and ensure everything gets saved into the correct folder. See Figure 3.14, which shows the folder structure for the sample One Tech site files. The source files are separate from the finished website files that are posted on the web server. Here are some general guidelines for naming your folders. Create a master location. Create a master location on your hard disk or file server to hold all your websites. Then store all of your sites in this folder. Create a folder for the specific site. Create a folder for the specific site you are setting up and give it a descriptive name without any spaces or special characters. This will become the name of the site in Dreamweaver. (For example, the site for One Tech [introduced in Chapter 1] was stored in a folder called OneTech.) This folder is also called the root level of your site. Keep subfolder names simple. Keep the names of your subfolders simple so that they are easy to navigate in the Property inspector and Files panel. For example, a good name for your graphics folder is “images” or “graphics.” The simpler the name, the shorter the 4306c03.qxd 3/22/04 11:20 PM Page 49 pathname you have to remember (at some point, you may be required to edit the path- name by hand or you may have to type it into the Property inspector). You can specify a default images folder in the Advanced tab of the Site Definition window. Dreamweaver will place any images you add to your site in this folder, and this folder will open whenever you insert an image. If you drag an image from the desktop to an active document in your site, Dreamweaver will automatically place it in the Default images folder. For more information on the Site Definition window, see the section “Advanced Site Setup” later in this chapter. Don’t use spaces or special characters. Make sure that your folder (and file) names do not contain spaces or special characters. It is also a good idea to use only lowercase letters without any spaces because some server software, such as the ubiquitous Apache Server, is based on Unix, and thus requires case-sensitive naming. Any spaces in a file or folder name will display as %20. For example, if you name a page my page.html, it will display in the browser address bar as my%20page.html. In addition to the above advice, you should get into the habit of naming your files in a way that makes them easy to find: • Use meaningful filenames. • Include the file extension ( .html, .gif, etc.). Planning your file and folder management is an important part of efficient project planning and development and will make your life much easier! Once you have created the folders that will contain your site, you are ready to designate these folders in Dreamweaver as your local site. Using the Site Setup Wizard To define a new site, select Site ➔ Manage Sites to bring up the Manage Sites dialog box, then select New ➔ Site. The Site Definition dialog then displays. To make site setup eas- ier, Dreamweaver provides a Site Setup wizard as the basic option in this dialog box (see Figure 3.15). Experienced users will probably prefer the Advanced options (discussed in the next section), and can skip the Wizard by choosing the Advanced tab (selected by default) at the top of the Site Definition dialog box. You can also set up FTP access without defining a site, as described in the previous section, by selecting Site ➔ Manage Sites ➔ New ➔ FTP And RDS Server. The Configure Server dialog box then displays. setting up your site ■ 49 Figure 3.14 Folder structure for One Tech site files 4306c03.qxd 3/22/04 11:20 PM Page 50 50 ■ chapter 3: Setting Up Your Workspace and Your Site Then follow these steps: 1. Type a name for your site and click the Next button. 2. For now, leave “No, I do not want to use a server technology” selected (unless you know for a fact that you do, in which case, see Chapter 16 for further details), and click Next. 3. If you plan to edit your local site on your own computer, leave the first option selected. If your local files are on a network, choose “Edit directly on server using local network.” • If you choose to work with local copies, type or browse to a root folder where the site will be stored on your computer. • If you choose to work on files over a network, type or browse to the network folder you’ll be using as your root. Either way, after indicating your local root folder, click the Next button (see Figure 3.16). Figure 3.15 The wizard starts simple by asking you to name your new site. 4306c03.qxd 3/22/04 11:20 PM Page 51 setting up your site ■ 51 Unless you chose a server technology in step 2 (in which case you’ve moved on to Chapter 16, right?), the wizard won’t ask you anything about where your testing server can be found. Instead, you’ll be asked about the remote site—the public site or staging area where the site is actually being built, as opposed to the local site where your working files are kept conveniently available for you at all times without any risk of compromising the integrity of the public site… phew). The most common choice here is FTP, but Dreamweaver also supports other ways of connecting to remote sites, such as via a stan- dard network connection with Remote Development Services (RDS), or by using code- integrity database/authentication tools such as SourceSafe or Web-based Distributed Authoring and Versioning (WebDAV), which is an extension to the HTTP protocol. To set up your remote connection, follow these steps: 1. Choose a connection method, and then either add your FTP remote hostname, folder, and login info (see Figure 3.17), browse to the remote network location, or for any of the other options, click the Settings button and enter the connection informa- tion. Then click Next. If you’re not sure about your FTP information yet, you can choose None from the drop-down list at this step and add the information when you have it available. Figure 3.16 Dreamweaver is flexible about where you store and how you access both local and remote files. [...]... not be applied to any additional files If you are working with a Dreamweaver template in Dreamweaver MX 20 04 (or Dreamweaver MX) and you insert a new region into the document, the syntax of the tags used to create the new region will be the newer MX and MX 20 04 style, and this will make the template unread­ able in older versions of Dreamweaver Managing Your Assets The Assets panel is the collection... category, new in Dreamweaver MX 20 04, enables you to work with Contribute users For more details on Contribute, see Chapter 27 importing an existing site ■ 55 Initializing a Site Map Dreamweaver uses the Map View option in the Files panel to display file associations for your site To set up your site map, you need to designate a file as the home page If the page does not yet exist, Dreamweaver will... documents with consistent design elements Dreamweaver s templates enable you to lock down some layout elements while allow­ ing other content to be customized; this enables you to enforce consistency across a website When you create a new page from a template, the page is linked to the template, so changes to the template update the linked page Although Dreamweaver MX 20 04 gives you the option to upload... (see Figure 3 .20 ), choose Entire ‘Name Of Your Site’ Site in the first drop-down list menu and Get Newer Files From Remote in the second one Figure 3 .20 Synchronize Files dialog box 5 Then click the Preview button Dreamweaver will review the selected files, and it will show you which ones it plans to download in the Synchronize Preview dialog box that pops up (see Figure 3 .21 ) Figure 3 .21 You can uncheck... Chapter 33, “Using Dreamweaver to Make Your Site Accessible,” we’ll show you how to fully implement accessibility features in your site, but for now let us show you how to turn on the reminders, and then you can decide on your own design criteria To turn on accessibility reminders, go the Preferences dialog box (Edit ➔ Preferences) and choose the Accessibility category (see Figure 3 .22 ) look-and-feel... design criteria To turn on accessibility reminders, go the Preferences dialog box (Edit ➔ Preferences) and choose the Accessibility category (see Figure 3 .22 ) look-and-feel standards ■ 57 Figure 3 .22 Tell Dreamweaver here that you want to be reminded about accessibility practices when inserting objects Check the first four check boxes (Form Objects, Frames, Media, Images) to turn on the reminders These... 52 ■ chapter 3: Setting Up Your Workspace and Your Site Figure 3.17 Dreamweaver offers a Test Connection button that helps ensure your FTP (or other access method) informa­ tion is correct before you move on 2 If you chose any of the secure connection methods, then file Check In/Check Out is enabled by default... a template) Making a Template Page from Scratch Creating a blank template page is a simple process Just follow these steps: 1 Select File ➔ New from the Dreamweaver application menu bar 2 From the General tab in the New Docu­ ment window (Figure 4 .2) , select Tem­ plate Page from the Category list on the left, and HTML template from the Tem­ plate page list on the right You can also create a blank template... quotation mark (‘), or the left or right angle brackets () This rule is a general naming convention for all filenames within Dreamweaver 4 Dreamweaver puts a blue outline around the editable region and displays its name You can also create editable tag attributes in a Dreamweaver template This allows you to specify any attributes that can be edited by the template user To enable this feature, select... region in their page Relocking Regions To lock a region so that it is no longer editable, chose Modify ➔ Templates ➔ Remove Tem­ plate Markup Dreamweaver unmarks the area, relocking it from use When you save the template, Dreamweaver updates all of its associated pages Dreamweaver removes the editable area, but leaves the name of the area in place as free­ standing text; you’ll need to remove this name from . Contribute category, new in Dreamweaver MX 20 04, enables you to work with Contribute users. For more details on Contribute, see Chapter 27 . 4306c03.qxd 3 /22 /04 11 :20 PM Page 55 importing an. it available. Figure 3.16 Dreamweaver is flexible about where you store and how you access both local and remote files. 4306c03.qxd 3 /22 /04 11 :20 PM Page 52 52 ■ chapter 3: Setting Up Your. Figure 3 .22 Tell Dreamweaver here that you want to be reminded about accessibility practices when inserting objects. This page intentionally left blank 4306c04.qxd 3 /22 /04 11 :25 PM Page