dreamweaver cs5 all in one for dummies phần 2 pptx

Book I Chapter 3 Creating and Managing Sites 53 Setting Up a Managed Site setup — without having to deploy the files to the live site while they’re still under development. The testing server can be on your local computer, or on a staging, development, or production server. Check out Book VII, Chapter 1 if you need to set up a testing server. Version Control The Version Control category is where you can set up remote access to a server running Subversion software. On this remote server, the site’s files can be viewed, compared, and reverted to previous versions of the site. If you’re not using Subversion software for version control, ignore this setting. Otherwise, see Book VI, Chapter 1 for details on Version Control setup. Advanced Settings Use the options in the Advanced Settings category to customize your work- space, take advantage of some of Dreamweaver’s special features such as cloaking and Design Notes, and configure your software for administering a site in Adobe Contribute. Local Info The Local Info section contains settings that allow you to specify a path to the current site’s default images folder, choose whether to use document- relative or site root-relative links, set the Web URL of the live server, enable case-sensitive link checking, and enable the cache feature. ✦ Default Images folder: Most image folders are located at the root of the local site folder and named images or img. For instance, if you are creat- ing an images folder for a customer called ABC, the path to this folder might be something like: Users\YOURUSERNAME\Documents\local_sites\ABC\images ✦ Links Relative To: By default, the Links Relative To option is set to Document. This option creates link paths that reference other files by their positions relative to the active file. One major benefit of this link type is that you can easily move your site to a different directory with- out destroying or having to rebuild your links. The Site Root-Relative option creates link paths that are always relative to the site root. ✦ Web URL: If desired, in the Web URL field, type the path to the site’s Web address, as in http://www.MYWEBADDRESS.com. ✦ Case-sensitive links checking: Leave the Use Case-Sensitive Link Checking check box deselected so that Dreamweaver ignores the case of names in links. ✦ Enable Cache: When enabled, this option speeds up working with files in Dreamweaver. 07_610770-bk01ch03.indd 5307_610770-bk01ch03.indd 53 5/6/10 1:09 PM5/6/10 1:09 PM 54 Setting Up a Managed Site Cloaking Cloaking prevents specified files and folders from being included in a vari- ety of site operations, such as site file synchronization between local and remote servers. For example, you may want to cloak large movie files or Design Notes folders from being uploaded each time you update site files to the remote server. For more details on how to enable site cloaking, see Book V, Chapter 3. Design Notes Dreamweaver lets you create and share Design Notes about site files, which are then stored in a separate location. Enable the Design Notes feature when communicating within a design team or workgroup about a shared managed site. You can attach Design Notes to documents, templates, images, Flash movies, ActiveX controls, and applets. Refer to Book VI, Chapter 1 for details on Design Notes. File View Columns In the expanded Files panel, Dreamweaver displays file and folder details in columns next to the filenames. You can customize which file and folder details show up there by making changes to the File View Columns category. Changing the link path By default, Dreamweaver uses the document- relative path for links. If you would rather use site root–relative paths for links, you need to change a setting in the Site Setup dialog box. To change from the default document-relative path setting to site root–relative paths, follow these steps: 1. Create a new site or open an existing site by choosing Site➪New Site or Site➪Manage Sites. 2. For a new site, enter a site name and local site folder path in the Site category. Otherwise, when the Manage Sites dialog box appears, select the site you want to edit from the list and click the Edit button. 3. Click the Advanced Settings category, on the left side of the dialog box. The category expands to reveal several subcategory options. 4. In the Local Info category, change the Links Relative To setting from Document to Site Root. This step doesn’t change the paths of exist- ing links but does apply to any new links you create in Dreamweaver. When using site root–relative paths, remember that the pages don’t appear when you preview the files in a browser. This is because brows- ers don’t recognize site roots — servers do. To preview the paths in a browser while working in Dreamweaver, choose Edit➪Preferences (Windows) or Dreamweaver➪Preferences (Mac) to display the Preferences dialog box. Then select the Preview Using Temporary File option in the Preview in Browser category. 07_610770-bk01ch03.indd 5407_610770-bk01ch03.indd 54 5/6/10 1:09 PM5/6/10 1:09 PM Book I Chapter 3 Creating and Managing Sites 55 Managing Multiple Sites For instance, you can hide and show, add and delete, reorder, share, and rename column settings. Find out more about defining File View Columns in Book VI, Chapter 1. Contribute When creating a site for use with Adobe Contribute software, you must enable Contribute compatibility before administering the site in Dreamweaver. The Contribute category allows you to enter Administration settings. See Book VI, Chapters 2 and 3 for the lowdown on using Dreamweaver with Adobe Contribute. Templates By default, the Template Updating option is set to not rewrite document- relative paths. To turn this feature off, deselect the check box here. To learn more about the joys of working with templates, turn to Book III, Chapter 2. Spry If desired, you could specify the folder location for Spry assets. However, by default a folder named SpryAssets is preset to drop into the local root folder if and when any Spry assets are used on the site. Don’t change this unless you really know what you’re doing. You can learn more about working with Spry in Book IV, Chapter 2. Managing Multiple Sites Because you create a new managed site for each project you work on in Dreamweaver, keeping track of all your sites is relatively easy. You can view a list of all your managed sites as follows: ✦ Files panel: The Files panel lists the files from the selected managed site. To change from viewing one site’s files to another site’s files within the panel, choose the desired site from the list of managed sites appear- ing in the Site Management menu. ✦ Manage Sites dialog box: Choose Site➪Manage Sites to display the Manage Sites dialog box, shown in Figure 3-3. Select your desired site from the list and click the Done button to switch to the selected site and see that site’s files listed in the Files panel. You may briefly see the Opening Site and Uploading Site Cache dialog boxes as Dreamweaver opens the selected site. You can also open the Manage Sites dialog box by selecting the Manage Sites option from the Files panel’s Site Management menu. 07_610770-bk01ch03.indd 5507_610770-bk01ch03.indd 55 5/6/10 1:09 PM5/6/10 1:09 PM 56 Managing Multiple Sites Figure 3-3: The Manage Sites dialog box. Duplicating sites Create duplicate copies of any existing defined site by clicking the Duplicate button in the Manage Sites dialog box. Dreamweaver copies all the settings and creates the new site with the same filename appended with the word copy. For example, if duplicating a site called Coffka Café, the name of the new duplicate managed site would be Coffka Café copy until you rename it. This doesn’t copy the actual files. It just creates a duplicate managed site pointing to the same Local folder with the same settings, which you can then modify as needed. If you intend to work on a duplicate copy of the same site, you’ll also want to duplicate the local folder and all its files and adjust the local site folder path, to ensure that both copies of the site are totally separate. Exporting and importing sites Dreamweaver allows you to save and reopen sites as XML files using the Import and Export buttons in the Manage Sites dialog box. In other words, you’ll export a site with all its settings as an XML file and then import the site with the same settings later, either on the same machine or on another machine. This method is handy when you want to get a new computer up and running with all the sites you’re currently managing. Exporting sites To save a site as an XML file, follow these steps: 1. Choose Site➪Manage Sites to open the Manage Sites dialog box. 2. Select one or more sites and click the Export button. Use Control+click (Windows) or Ô+click (Mac) to select multiple files. 3. Browse to, select, and save the location for the export of each site. The exported file gets saved as an XML file with the .ste file extension. 07_610770-bk01ch03.indd 5607_610770-bk01ch03.indd 56 5/6/10 1:09 PM5/6/10 1:09 PM Book I Chapter 3 Creating and Managing Sites 57 Managing Multiple Sites Importing sites To import previously exported XML files back into Dreamweaver, follow these steps: 1. Choose Site➪Manage Sites to open the Manage Sites dialog box. 2. Click the Import button. 3. Browse to and select one or more sites with the .ste file extension for importing. Use Control+click (Windows) or Ô+click (Mac) to select multiple files. 4. Click Open to begin the importing process. The Manage Sites dialog box lists the site name when the import process is complete. Removing sites from the Manage Sites list When removing sites, keep in mind that sites listed in the Manage Sites dialog box are merely pointers to the location of files on the specified com- puter and not the actual files and folders themselves. Therefore, remov- ing a site from the Manage Sites list removes only the location information Dreamweaver needs to work on the files in the specified site; it does not delete any files from your local computer. As a backup, before you remove a managed site from the listing, you may want to export the site using the export steps mentioned previously, in the “Exporting and importing sites” section. That way, you’ll have a copy handy should you ever need to import it back into Dreamweaver. To remove a site from Dreamweaver, select the site by name from the Manage Sites dialog box and click the Remove button. Dreamweaver gives you the You cannot undo this action message. Don’t be unnerved; if you acci- dentally delete a managed site from the list, you can just re-create it. 07_610770-bk01ch03.indd 5707_610770-bk01ch03.indd 57 5/6/10 1:09 PM5/6/10 1:09 PM 58 Book I: Getting Started 07_610770-bk01ch03.indd 5807_610770-bk01ch03.indd 58 5/6/10 1:09 PM5/6/10 1:09 PM Book II Mastering the Basics 08_610770-pp02.indd 5908_610770-pp02.indd 59 5/6/10 1:09 PM5/6/10 1:09 PM Contents at a Glance Chapter 1: Creating Documents Chapter 2: Working with Text Chapter 3: Inserting Graphics Chapter 4: Making Links with Text and Images Chapter 5: Adding Flash, Movies, Sound, and More Chapter 6: Organizing Data with Tables Chapter 7: Building Fabulous Forms 08_610770-pp02.indd 6008_610770-pp02.indd 60 5/6/10 1:09 PM5/6/10 1:09 PM Chapter 1: Creating Documents In This Chapter ✓ Creating a new document ✓ Saving files ✓ Setting page properties ✓ Importing data C reating documents is the basis for everything you’ll do for the Web. Dreamweaver provides several ways to create them, several types of new documents to choose from, and even several premade design files to use as starting points for your own designs. This chapter explores document types, document creation, document saving, and document opening. You also discover how to set page proper- ties, work with invisible page elements, and import Word and Excel files (Windows only). Creating a New Document When you first launch Dreamweaver, the default Welcome Screen appears in the workspace. The Welcome Screen allows you to open existing files from a list of the nine most recent documents, create new files by file type (such as HTML, CSS, or PHP), jump directly to the Site Setup dialog box to manage a new site, and launch a browser to watch the top-featured videos from Adobe.com. If you don’t see the Welcome Screen when you launch the pro- gram, you can enable it by following the steps in the “Enabling the Welcome Screen” sidebar in this chapter. When the Welcome Screen is visible (shown in Figure 1-1), the quickest way to create a new blank document is to click one of the file types in the Create New column. Click the HTML link, for instance, and a new untitled Document window appears, complete with basic HTML structural code, ready for adding content and saving with a filename and an extension. 09_610770-bk02ch01.indd 6109_610770-bk02ch01.indd 61 5/6/10 1:09 PM5/6/10 1:09 PM 62 Creating a New Document Enabling the Welcome Screen You can enable and disable the Welcome Screen through Dreamweaver’s Preferences. To turn on the Welcome Screen (after disabling it by selecting the Don’t Show Again box at the bottom of the Welcome Screen), follow these steps: 1. Choose Edit➪Preferences (Windows) or Dreamweaver➪Preferences (Mac). The Preferences dialog box appears. 2. Select the General Category to reveal gen- eral category options. 3. Add a check mark to the Show Welcome Screen check box in the Document Options area on the right. Then click OK. Dreamweaver displays the Welcome Screen in the center of the workspace. Figure 1-1: Use the Welcome Screen to quickly create new documents. In addition to creating new documents through the Welcome screen, you can create new documents through the File menu by following these steps: 1. Choose File➪New to launch the New Document window, shown in Figure 1-2. This dialog box is divided into various columns to assist you with select- ing the desired file type, such as a Blank Page or Page from Template. In this chapter, we discuss the Blank Page, Page from Sample, and Other Page options; Book III, Chapter 2 shows you how to work with templates. 09_610770-bk02ch01.indd 6209_610770-bk02ch01.indd 62 5/6/10 1:09 PM5/6/10 1:09 PM [...]... 09_610770-bk02ch01.indd 74 5/6/10 1:09 PM Chapter 2: Working with Text In This Chapter ✓ Adding, editing, and removing text ✓ Inserting text with the Paste and Paste Special commands ✓ Using the Properties inspector ✓ Creating inline style sheets ✓ Creating bulleted and numbered lists ✓ Searching with Find and Replace A dding text to your pages in HTML is as easy as typing in a word processing document... inline CSS; making lists; and using the Find and Replace tool for robust text and code editing Adding Text You can type text directly in the Document window in Design view or Code view To begin adding text in Design view, open a new or existing document and begin typing In Code view, you can add text straight to the code anywhere inside the opening and closing tags, including inside table cells,... Chapter 2 Text Indent Working with Text Figure 2- 2: The Properties inspector displays HTML formatting options for selected text Point to File Browse to File In the CSS view, shown in Figure 2- 3, settings include specifying a targeted rule, selecting the font family, size, and color, adding bold or italic, and setting font alignment You can also quickly access a CSS rule in the CSS Styles panel for any... basic formatting: Paste the copied text with preexisting structure and formatting, including paragraphs, line breaks, and tables, and basic text markup using tags such as , , , and • Text with structure plus full formatting: Paste the copied text into Dreamweaver with its original structure, HTML formatting, and preexisting internal CSS data This option does not include the copying... can add inline CSS styles using the New Inline Style Targeted Rule in the CSS area of the Properties inspector, which writes code similar to this: Book II Chapter 2 For inline CSS style markup, set the Targeted Rule to New Inline Style, and use the Properties inspector’s font, size, color, bold, italic, list, and align fields to add inline formatting to the page (as described in the preceding section)... creating a site that is editable using InContext Editing, select the Enable InContext Editing check box To learn more about Business Catalyst InContext Editing, click the Learn More link directly below the check box 9 When you have finished making your selections in the New Document window, click the Create button The new file appears in the Document window 09_610770-bk02ch01.indd 64 5/6/10 1:09 PM Saving... removing most of it For more information, check out Book V, Chapter 2 Setting Page Properties Dreamweaver lets you set a page’s default formatting properties for a single page in the Page Properties dialog box (see Figure 1-3) This is helpful if you’re creating a single file and want to centralize CSS and other formatting options within that file However, if you plan on using the same styles for an... where the linked page appears, whether in the same browser window, another browser window, or a frame inside a frameset Without adding a target, the default setting is to open the linked page in the same browser window Choose _blank to display the linked page in a new browser window, _new to display the linked page in a new window or reload the content into that new window, _self to open it in the same... defined, is simply Removing Text Pasting Text from Another File When pasting data into Dreamweaver from a Word document, Web site, or other word processing file, Dreamweaver often preserves that document’s formatting when you use the regular Paste command (Formatting includes the font face, size, formatting, and alignment.) If you want to preserve formatting, choose Edit➪Paste Book II Chapter 2 Working... edge of the panel 10_610770-bk02ch 02. indd 78 5/6/10 1:09 PM Setting Text Properties in the Properties Inspector 79 In the HTML view, shown in Figure 2- 2, you can specify a font format such as Paragraph or Heading 1, add bold or italics tags, set a CSS class or ID, create ordered or unordered lists, indent or outdent text, and enter hyperlink information All these settings, or styles, are applied immediately . Building Fabulous Forms 08_610770-pp 02. indd 6008_610770-pp 02. indd 60 5/6/10 1:09 PM5/6/10 1:09 PM Chapter 1: Creating Documents In This Chapter ✓ Creating a new document ✓ Saving files ✓ Setting. modify these settings at any time. In Dreamweaver CS5, page properties settings are added to the page as inline HTML formatting tags or as CSS (Cascading Style Sheet) markup in the <head>. creating a site that is editable using InContext Editing, select the Enable InContext Editing check box. To learn more about Business Catalyst InContext Editing, click the Learn More link directly