dreamweaver cs5 all in one for dummies phần 8 pps

588 Using Dreamweaver to Edit a Contribute Site As Administrator, you can perform some tasks in both Dreamweaver and Contribute. Some tasks, however, you should do only in Dreamweaver. Make any robust changes to a Contribute site, such as modifying a template or CSS, in Dreamweaver to maintain the integrity of the site’s design. Updating templates in a Contribute site Contribute users can’t change a Dreamweaver template, and that’s a good thing because they’re typically not Web designers. If a template needs editing, you need to do it in Dreamweaver. What part of a template might you need to edit? Perhaps you need to remove a navigation button from the layout or edit some text that appears on every page. Or maybe you need to overhaul the site design, with all new graphics, while keeping the overall content intact. If you remove or rename an editable region from a template, Contribute users may not know what to do with the content from the old editable region. To avoid confusion, try to make changes to the templates before or after normal business hours and be sure to have Contribute users close down and relaunch their Contribute programs before making new changes to the site. Contribute users can get new remote server information to their local computers only by closing and relaunching Contribute. To edit a Dreamweaver template used in a Contribute site, follow these steps: 1. In Dreamweaver, open, edit, and save the Contribute site template. Find out more about templates in Book III, Chapter 2. 2. Tell the Contribute users about the change so that they can close and restart their Contribute programs. Restarting Contribute enables Contribute users to access the site with the most recent documents and templates. Editing style sheets in a Contribute site Making sure that the look and feel of a site stays under tight control is important in any Web design scenario. Contribute users aren’t allowed to change the contents of style sheets, which means that you don’t have to worry about style sheets being messed up by anyone but you and any other Dreamweaver users on the team. As with any site using style sheets, when you delete a style, the tag to apply that style to a particular word, sentence, or paragraph still resides in the code of the Web pages. This discrepancy may confuse your Contribute users. To quickly remove or rename style tags from an entire site, use Dreamweaver’s Find and Replace tool (see Book II, Chapter 2). Using Dreamweaver to Edit a Contribute Site 36_610770-bk06ch03.indd 58836_610770-bk06ch03.indd 588 5/6/10 1:17 PM5/6/10 1:17 PM Book VI Chapter 3 Managing a Contribute Site 589 Also, let the Contribute users know about any changes you make to the CSS during work hours because they can’t see changes to any pages they’re cur- rently editing until they publish the page back to the site. Follow these steps to edit a style in a Contribute site through Dreamweaver: 1. Use Dreamweaver’s style sheet editing tools. You have a variety of options. You can use the CSS Styles panel, use the Attributes panel (on the Tag Inspector), or edit the CSS code by hand. See Book III, Chapter 1 for information on using CSS in Dreamweaver. 2. Tell the Contribute users about the change so that they can publish and reedit pages with the newest version of the style sheet. Better yet, tell users to restart Contribute so they can access all the site pages and assets with the most recent versions of everything. Using Dreamweaver to Edit a Contribute Site 36_610770-bk06ch03.indd 58936_610770-bk06ch03.indd 589 5/6/10 1:17 PM5/6/10 1:17 PM 590 Book VI: Working Collaboratively 36_610770-bk06ch03.indd 59036_610770-bk06ch03.indd 590 5/6/10 1:17 PM5/6/10 1:17 PM Chapter 4: Collaborating Online with InContext Editing In This Chapter ✓ Understanding editing with InContext ✓ Creating and managing editable regions ✓ Connecting to an InContext site ✓ Logging in to InContext ✓ Inviting users to an InContext site ✓ Updating pages with InContext ✓ Finding InContext Help R ecently, Adobe developed an online application called InContext Editing, or ICE, that helps Web designers and developers work more effectively among themselves and with their clients across the Internet. Unlike Adobe Contribute, which is a software-based tool that helps Web designers and developers manage the activity of several teams of con- tent providers for individual Web sites (see Book VI, Chapters 2 and 3), InContext Editing is a browser-based Web page editing service that puts the power of site management in the hands of content contributors. Without having to purchase and install additional software, designers and develop- ers can now create Web sites in Dreamweaver that are easily editable by their clients through the InContext browser interface. Even better, InContext Editing requires no prior knowledge of HTML or Web editing, making it the ideal content management solution for Web site owners. In the future (perhaps as soon as early 2011), access to the service may involve paying Adobe a nominal monthly fee of $10 to $20 for unlimited usage and access to Adobe BrowserLab. For now, however, InContext Editing is offered as a free service to registered members. In this chapter, you find out how to create Web sites with editable InContext regions, configure pages with special text editing features, and upload the site to the live server. After that, you discover how to log in to the ICE Web site; set up Editor, Publisher, and Administrator privileges; and send invita- tions to content providers. The chapter ends with a list of helpful online resources about ICE for you and your customers. 37_610770-bk06ch04.indd 59137_610770-bk06ch04.indd 591 5/6/10 1:17 PM5/6/10 1:17 PM 592 Creating and Managing Editable Regions To create InContext editable Web sites, designers and developers simply build pages in Dreamweaver as they normally would, and then customize those pages with easily definable InContext editable regions. These regions become the parts of the page that you want contributors to be able to edit. After the pages are published online, clients and in-house contributors have the opportunity to maintain site content from any major browser without disrupting the integrity of the overall Web site design. Suppose, for exam- ple, you have a board member page with names, contact information, and photos for each member. You can easily set each component as an editable region so that when contributors log in to ICE they can easily update the data directly through their browser. Before you begin, keep in mind that InContext Editing has some limitations and will not work properly under specific conditions. For example, Adobe AIR doesn’t support ICE. For a list of known network, browser, page, and editing limitations, visit www.adobe.com/go/incontextediting_limitations. You can create ICE editable regions in Dreamweaver in two ways: ✦ Automatic editable regions: When creating new blank HTML pages using one of Dreamweaver’s built-in CSS layouts, select the Enable InContext Editing option in the New Document dialog box. When the new page is cre- ated, the area in that file using <div id=“content”> . . . </div> (in CS4, content was called mainContent) is automatically marked as an ICE editable region. ✦ Manual editable regions: You can manually insert an ICE editable region anywhere on your page by selecting the content or region on the page that you want to become editable. For instance, you could select an image, a cell in a table, an editable region in a template, or the contents of an entire layer. In addition to adding ICE editable regions in Dreamweaver, you may add these regions to an existing page after logging in to InContext Editing at http://incontextediting.adobe.com/. You can insert two kinds of ICE editable regions in your pages: regular edit- able regions and repeating regions. Creating editable regions To create an ICE editable region in Dreamweaver, follow these steps: Creating and Managing Editable Regions 37_610770-bk06ch04.indd 59237_610770-bk06ch04.indd 592 5/6/10 1:17 PM5/6/10 1:17 PM Book VI Chapter 4 Collaborating Online with InContext Editing 593 1. Open in the Dreamweaver workspace the page to which you want to add ICE editable regions. Editable regions must be created one at a time, one page at a time. When working with Dreamweaver templates, any ICE editable regions in the tem- plate will produce identical ICE editable regions in the template-based files. If you are starting from a new blank page, you must save the page before adding the ICE editable regions. When adding an editable region to a template or a template-based file, the ICE editable region must be in a Dreamweaver template editable region. 2. In Design view, select the area you want to convert to an ICE editable region. To select the parent container of a selection, use the Tag Selector. 3. Choose Insert➪InContext Editing➪Create Editable Region. You can also click the Create Editable Region option in the InContext Editing category of the Insert panel. Depending on what you selected in Step 2, one of the following happens: • If you selected a DIV, TH, or TD tag: Dreamweaver converts the selec- tion to an editable region by applying the ice:editable attribute, as in <div id=”header” ice:editable=”*”> <h1>Welcome</h1> </div> • If you selected a tag other than DIV, TH, or TD: Dreamweaver opens a Create Editable Region dialog box that provides the option for you to Wrap the Current Selection with a DIV Tag and Then Transform It. Click the OK button for Dreamweaver to convert the selection to an editable region by wrapping the selection with a <div> tag with the ice:editable attribute. • If you selected a Dreamweaver template editable region: Dreamweaver wraps the editable region with a <div> tag with the ice:editable attribute. Note: This method may produce unwanted page CSS rendering results. • If you selected content but not a tag: Dreamweaver prompts you to wrap the selection with a <div> tag with the ice:editable attribute. 4. In Design view, select the ICE editable region’s blue tab. In the Properties inspector, select the formatting elements that will remain editable for content contributors. Formatting options (see Figure 4-1) are Bold, Italic, Underline, Alignment, Font Face, Font Size, Indent/Outdent, Numbered/Bulleted Lists, Paragraph Styles, Background Color, Font Color, and CSS Styles, as well as providing the ability to insert and edit Image/Media files and Links. To select all items, click the Check all button. To deselect all items, click the Uncheck all button. Creating and Managing Editable Regions 37_610770-bk06ch04.indd 59337_610770-bk06ch04.indd 593 5/6/10 1:17 PM5/6/10 1:17 PM 594 5. Save the file. When you create a new editable page or insert an editable region for the first time, Dreamweaver adds a folder containing a set of dependent files to the root level of your managed site. Inside this folder is another folder containing two script files and one HTML file: includes/ice/ice.conf. js. includes/ice/ice.js, and includes/ice/ide.html. You must upload this folder and all these files when you upload your page to the live server for InContext Editing to work properly. Figure 4-1: Choose formatting options for your ICE editable region in the Properties inspector. Bold Italic Underline Alignment Font Face Font Size Indent/Outdent Numbered/Bulleted List Paragraph Styles Background Color Font Color CSS Styles Image/Media Link Creating and Managing Editable Regions 37_610770-bk06ch04.indd 59437_610770-bk06ch04.indd 594 5/6/10 1:17 PM5/6/10 1:17 PM Book VI Chapter 4 Collaborating Online with InContext Editing 595 Creating repeating regions Repeating regions define a part of the page that can be both editable and repeated in the page, such as with a row of data in a table or a layer contain- ing a heading, text, and graphics. When the page is opened in the InContext Editing browser, each repeating region can be duplicated, moved up or down, or deleted from the page. Figure 4-2 shows how a repeating region looks in the InContext Editing browser. Figure 4-2: Repeating regions can be duplicated, repositioned, and deleted. In the code, you can identify repeating regions by the ice:repeating attri- bute, which is added to the region’s opening tag. In addition, Dreamweaver wraps the entire region inside a repeating regions group, defined by a <div> tag (or the parent container’s tag) with the ice:repeatinggroup attribute. When creating repeating regions in a Dreamweaver template, the repeating region must be inside an editable region. To create an ICE editable repeating region in Dreamweaver, follow these steps: 1. Open the desired page and select the area to be converted to a repeat- ing region. To insert a region without making a selection, place your cursor where you want to add the new repeating region. Creating and Managing Editable Regions 37_610770-bk06ch04.indd 59537_610770-bk06ch04.indd 595 5/6/10 1:17 PM5/6/10 1:17 PM 596 2. Choose Insert➪InContext Editing➪Create Repeating Region. You can also select the Create Repeating Region option in the InContext Editing category of the Insert panel. Depending on what you selected in Step 1, one of the following happens: • If you selected a transformable tag: Dreamweaver converts the selection to a repeating region. • If you inserted a region without a selection: You can insert the repeating region there or choose to transform the parent tag closest to your insertion point into the repeating region. • If you selected a Dreamweaver template editable region: Dreamweaver wraps the editable region with a <div> tag with the ice:repeating attribute. Note: This method may produce unwanted page CSS rendering results. • If you selected content but not a tag: Dreamweaver prompts you to either transform the parent tag of the content or wrap the selection with a <div> tag with the ice:repeating attribute. 3. In Design view, select the Repeating Region’s blue tab. In the Properties inspector, select the Repeating Regions Group options that will remain editable for content contributors. Options are Reorder, which allows editors to reposition the region above or below other regions in the group, and Add/Remove, which lets editors add or remove regions in the group. Both options are selected by default, and you must always have at least one option selected. 4. Save the file. When you create a new editable page or insert an editable region for the first time, Dreamweaver adds a folder of supporting files to the root level of your managed site: ice.conf.js, ice.js, and ide.html. You must upload your page and this folder to the live server for InContext Editing to work properly. Deleting editable regions For best results, use the Properties inspector to delete regions. This way, you are assured of having Dreamweaver delete all the code associated with the region. To remove a region, follow these steps: 1. In Design view, select the region to be deleted by its blue tab. You may select an editable region, a repeating region, or a repeating regions group. Creating and Managing Editable Regions 37_610770-bk06ch04.indd 59637_610770-bk06ch04.indd 596 5/6/10 1:17 PM5/6/10 1:17 PM Book VI Chapter 4 Collaborating Online with InContext Editing 597 2. In the Properties inspector, click the Remove Region button. Dreamweaver alerts you that the region will be removed but the content within it will stay on the page. 3. Click OK to remove the region, or Cancel to cancel the action. Occasionally, you may encounter an error message when attempting to create ICE editable regions in your Dreamweaver files. For a complete listing of common errors, visit http://help.adobe.com/en_US/dreamweaver/ CS/using/WSDD8EB85D-905A-495d-A743-7CF9002372EA.html#WSCF 97C2E7-14BA-4a1d-947C-26A00A7A59EA. Preparing a Site for Use with InContext Editing After you have uploaded all your ICE editable pages along with the folder of dependent files (includes/ice/) created by Dreamweaver to the live server, the next step is for you to log in to the InContext Editing Web site to config- ure the site for InContext users. To log in to InContext Editing, follow these steps: 1. Go to http://incontextediting.adobe.com/ to open the InContext Editing page in your browser. The Sign In window appears. 2. Sign in with your Adobe ID, and then click Enter. The Add New Site? dialog box appears. 3. In the Add New Site? dialog box, click Add Site to add your site to your account. 4. Follow the prompts to input the Site Name and Site Address (URL). Click Next to proceed. 5. Enter your FTP access information, including FTP Host, Username, and Password. If you don’t have the FTP access information, get it from the host provider. 6. Click the Test Connection button. If you have entered your information correctly, your connection will be successful. If you get an error message, check for spelling and letter case errors and test again. If you still can’t establish a connection, speak with your host provider or systems administrator. 7. When your connection is established, click the Next button to proceed. Preparing a Site for Use with InContext Editing 37_610770-bk06ch04.indd 59737_610770-bk06ch04.indd 597 5/6/10 1:17 PM5/6/10 1:17 PM [...]... Components icon You are telling Windows that you want to change which Microsoft components (including IIS) are installed The Windows Components Wizard appears 3 If the Internet Information Services option is selected, IIS is already installed and you can skip Step 4 4 If the Internet Information Services option is not selected: a Select the Internet Information Services (IIS) option Windows tells you approximately... Gotchas 38_ 610770-pp07.indd 602 5/6/10 1:17 PM Chapter 1: Preparing to Build Web Applications In This Chapter ✓ Selecting a Web application platform ✓ Installing an application server ✓ Analyzing your choices for Web and application servers ✓ Defining Testing server settings in Dreamweaver ✓ Choosing a database F rom Web site to Web app: That’s the transformation that many Web developers find themselves... in this section for Windows and Mac OS X 39_610770-bk07ch01.indd 6 08 5/6/10 1: 18 PM Choosing an Application Server 609 Windows setup Installing PHP for use with IIS is fairly easy with the automatic installation available from the PHP site Download PHP from www.php.net Get the automatic installation package under Windows Binaries After you download the file, follow these steps to install PHP: 1 2 3... operating systems, including Windows, Mac OS X, and Linux It integrates with either IIS or Apache to form a PHP application server For Apache, it’s loaded as an Apache module For IIS, it’s loaded as an ISAPI add-on Many ISPs come with preinstalled support for PHP, whereas others require you to configure it manually on your server If you’re installing it on your own computer, follow the instructions in. .. approximately how much space you need to install IIS b Click Next You may need your Windows Installer CD-ROM to install IIS, so make sure it’s somewhere handy c Follow the onscreen prompts to finish installing IIS and then click OK When IIS is installed, it creates a default directory for storing Web pages at c:\Inetpub\wwwroot This directory is often called the Web root folder Choosing an Application Server Perhaps... you’re using Windows, download the core Windows executable installer For Mac OS X, visit http://developer.apple.com/internet/java/tomcat1 html to find instructions on installing the Mac OS X binaries of Tomcat Other commercial JSP application severs are ✦ Macromedia JRun ✦ Sun ONE ✦ IBM WebSphere ✦ BEA WebLogic 39_610770-bk07ch01.indd 610 5/6/10 1: 18 PM Considering Web/Application Server Combinations... ASP.NET programming languages because IIS has built -in support for handling those development languages Some editions of Windows 7 install IIS 7.0 by default If your edition doesn’t, you can select it among the list of optionally installed components Additionally, not all editions of Windows 7 provide support for ASP and ASP.NET When you run IIS 7.x on Windows 7 or Vista, it restricts performance based... remarkable tool Learning to use the InContext Editing service is intuitive and straightforward, but some users may want additional training For general help and instruction with your Adobe InContext Editing Web projects, visit, www.adobe.com/products/incontextediting/ For additional training help, check out these resources: ✦ www.adobe.com/newsletters/edge/february2009/articles/ article5/index.html Book... Next to install Agree to the license terms by clicking I Accept, and then click Next Click Next to accept the default installation directory of C:\Program Files\PHP 5 Select a Web server setup 6 Select the items to install, and then click Next The standard install uses default values for many of the settings You can use the defaults without problems 7 To begin the installation, click Install 8 If the... the invitation Invitations are valid for up to 30 days; you my cancel an invitation at any time by selecting it in the Manage Users panel and clicking the Delete Invitation button Updating Pages with InContext Editing When invited content contributors are ready to modify a page, all they need to do is navigate to the desired page in a browser and press Ctrl+E (Windows) or Ô+E (Macintosh) to sign in . Understanding editing with InContext ✓ Creating and managing editable regions ✓ Connecting to an InContext site ✓ Logging in to InContext ✓ Inviting users to an InContext site ✓ Updating pages with InContext ✓. entire layer. In addition to adding ICE editable regions in Dreamweaver, you may add these regions to an existing page after logging in to InContext Editing at http://incontextediting.adobe.com/. You. step is for you to log in to the InContext Editing Web site to config- ure the site for InContext users. To log in to InContext Editing, follow these steps: 1. Go to http://incontextediting.adobe.com/