14: Managing Web Sites with Adobe InContext and Business Catalyst in Java

Paint Denso QR Bar Code in Java 14: Managing Web Sites with Adobe InContext and Business Catalyst

If you selected an tag, such as an <h1> tag or unordered list (<ul>) tag, the Create Editable Region dialog box opens (see Figure 14-5) You have two choices: add a <div> tag around the selected element, or transform the parent (meaning the <div> tag that surrounds the selected element) When you choose Transform the Parent Tag into an Editable Region, Dreamweaver selects the most immediate <div> tag that surrounds the selected element and makes everything in that <div> tag editable by adding the necessary code to make it an ICE editable region When you choose Wrap Current Selection with a DIV Tag and Then Transform It, only the item you selected becomes editable In the example shown in Figure 14-5, I m making only the heading in the <h1> tag that I selected an editable region by choosing to wrap it

13 When the page is complete, use Dreamweaver built-in publishing features to upload the page to your Web server (You find detailed instructions in 4) Before you can use the InContext Editing features, you must upload the page to a Web server and set up the site at http://incontexteditingadobecom/ You find detailed instructions in the sections Setting up an InContext site online and Editing an InContext page with a Web browser, later in this chapter

Table 14-1

(continued)

Table 14-1 (continued)

Icon Option Underline Controls the Use of InContext Editing To Make text underlined or not underlined (as a general rule, it s best to deselect this option to prevent the use of underlines for anything other than links) Align text, images, and other elements to the left or right of the page (Note: It s far better to create class styles to align images and other elements and then make those styles accessible in ICE You find instructions for this in the exercise using CSS with InContext Editing) Change the font of selected text Change the size of selected text Cause selected text to become indented or outdented respectively Change a selected text to a bulleted or numbered list Format selected text using the paragraph and heading tags, H1, H2, H3, and so on Change the background color of the page or any selected element (such as a <div> tag) that is editable Change the color of selected text Apply styles from an attached style sheet Insert an image or other type of media Create a link

Font Face Font Size Indent or Outdent Numbered and Bulleted lists Paragraph styles Background Color

The advantage of a repeating region is that you can enable people who are editing the site online through the InContext Web site to create multiple collections of elements all at once For example, you could create an editable region with formatted areas for the name and biography of an employee If you want to list only one employee on the page, creating a single editable region (as you did in the previous exercise) is fine If, however, you want to be able to add more employee names and bios to the page, creating a repeating region would enable a user to copy the entire section each additional employee Follow these steps to add a repeating editable region to a page that uses InContext Editing: 1 Create a new page or open an existing page Then click to insert your cursor anywhere you want to add an InContext repeating editable region 2 On the page, click to select any HTML block tag (such as a heading tag, unordered list, or <div> tag) that you want to turn into an InContext editable region Although <div> tags themselves are ideal as InContext editable regions, Dreamweaver will add a <div> tag around whatever you select In Figure 14-6, you see the tag selector at the bottom of the workspace, an ideal way to select a tag before using the InContext Insert panel to turn it into an editable region 3 Choose InContext Editing from the Insert panel drop-down menu to open the options for editable regions (see Figure 14-6) Alternatively you can choose Insert InContext Editing and then select Repeating Editable Region from the fly-out menu 4 Click Create Repeating Region, as shown in Figure 14-6 The options available to you when you create a repeating region are the same as those available when you add an editable region (See Step 12 in the preceding section for details) 5 Choose File Save to save the page If you haven t already added InContext features to the site, Dreamweaver opens the Copy Dependent Files dialog box (shown in Figure 14-3 earlier in the chapter) Click OK and Dreamweaver automatically creates a folder called includes with a subfolder called ice and saves these files into the subfolder in your local site folder For the ICE features to work, you must upload the includes folder, as well as the ice subfolder and files, to your Web server when you publish your site