|
|
This section guides you through a quick tour that explains how to use Design Studio to create transformation rules for one web page. The tour introduces the basics of Design Studio without getting into the details.
 |
Note The tour takes about 15 minutes to complete. |
The web page used in this example is a Cisco contacts page. Figure 3-1 shows how the original page looks. Figure 3-2 shows how the page looks after you have created transformation rules with Design Studio.
Notice that the transformed page omits most of the original content.
Before you start creating the rules that transform the Cisco contacts page, you must first create a project in Design Studio. A project is a container for one or more web pages and helps you to organize your work.
If you want to follow these steps on your PC, start Design Studio as described in the "Installing and Starting Design Studio" section.
The Create Project dialog box appears.
Step 2 In the Name of the project field, enter Quick Tour.
For this exercise, leave the HTML radio button selected.
Step 3 Click Done.
Design Studio adds the project name Quick Tour to the window.
Next, you will navigate from the Cisco home page to the Cisco contacts page. Then, you will add the Cisco contacts page to the Quick Tour project.
Design Studio displays the Cisco home page in the Browse tab.
Step 2 Scroll to the bottom of the page, locate the "Corporate News and Information" heading, and click Contact Cisco.
The Cisco Worldwide Contacts page appears.
Step 3 Click Add Page to Project.
You must add a page to a project in order to create transformation rules for it.
Design Studio adds the page to the project tree and displays it in the View Original tab which contains a browser view and an XHTML source view of the page.
After you add a page in Design Studio, you must specify an identifier for the page. The CTE uses an identifier to distinguish one web page from another. This identifier enables the CTE to determine which rules to apply to a web page. Typical identifiers are the text of the title element or the page URL.
Step 2 In the XHTML source view, scroll to the title element.
 |
Tip Rather than scrolling the page to locate an item, you can click the Find ()  icon, enter the text or element name you are searching for, and click Find. |
Step 3 Right-click the text Cisco Worldwide Contacts that follows the title element.
Step 4 Choose Tag Contains from the shortcut menu.
The Identify Page dialog box appears.
For this exercise, do not change anything in the dialog box.
Step 5 Click Done.
Design Studio adds the identifier to the page and lists the rule in the lower-left pane.
Now that you have added the Cisco contacts page and created an identifier for it, you can begin transforming the contents of the page. In this exercise, you select a portion of the page for display on wireless devices. The rest of the content on the original page will not be sent to wireless devices.
Before you can create a transformation rule, you must select one of the device types in the project tree. You can later apply a rule to other device types. For this exercise, you will create rules only for HTML device types.
The Cisco contacts page appears in the Edit tab.
The browser view appears in the upper pane of the Edit tab; the XHTML source view appears in the lower pane of the Edit tab.
In the introduction to this tour, Figure 3-2 showed how the transformed Cisco contacts page looks. The corporate headquarters information is included and the rest of the content is excluded. Next, you will select the corporate headquarters information.
Step 2 In the browser view, scroll down the page and click Cisco Systems, Inc.
|
Tip Clicking an item in the browser view is a quick way to locate an element in the XHTML source view. |
Design Studio selects the text in both the browser and XHTML source views.
Step 3 Locate in the XHTML source view the small element that is three lines above "Cisco Systems, Inc."
Step 4 Click the small element in the XHTML source view. The small element contains elements that you will select for transformation in this tour.
Design Studio expands the highlighted area in the browser view.
Step 5 Right-click the small element in the XHTML source view.
Step 6 Choose Select from the shortcut menu.
The Configure: Select Rule dialog box appears.
Step 7 In the Retain or Remove All Ancestors area, click Remove.
By removing ancestor elements, you select only the contents of the table, not the table structure. Removing unnecessary ancestor elements lowers the processing overhead.
For this exercise, do not change anything else in the dialog box.
Step 8 Click Done.
The browser view displays only the element you selected. In the XHTML source view, the Select icon () indicates that you selected this element.
You have now created your first transformation rule. The transformed page contains only the headquarter contact information.
In this exercise, you will select two more elements to include in your transformed page.
The additional element that you need to select no longer displays in the Edit tab. By viewing the original web page in the View Original tab, you can locate the element and apply a rule to it.
Step 2 Scroll down the page and click the heading General Contacts.
|
Tip Rather than scrolling the page to locate an item, you can click the Find () icon, enter the text or element name you are searching for, and click Find. |
Design Studio highlights General Contacts in both views.
Step 3 In the XHTML source view, right-click the font element that is two lines above "General Contacts."
Step 4 Choose Select from the shortcut menu.
The Configure: Select Rule dialog box appears.
Step 5 In the Retain or Remove All Ancestors area, click Remove.
Again, you want to include the content but not the table structure.
Step 6 Click Done.
Step 7 In the XHTML source view, click the td element that is eight lines below the font element that you selected earlier in this exercise.
The Design Studio window should look like the following example.
Step 8 Right-click the td element you just selected and choose Select from the shortcut menu.
Step 9 In the Retain or Remove All Ancestors area, click Remove.
Step 10 Click Done.
Step 11 Click the Edit tab.
You must return to the Edit tab to see the transformation results.
The two elements you selected are now included in your transformed page.
Each Select rule that you created in this Quick Tour applies only to one node in the XHTML. You can also apply one rule to several nodes. With one rule, you can accomplish powerful results such as the following:
In this exercise, you will modify all of the li elements (the bulleted list you previously selected) to p elements with one rule. As a result, the bullet character will be removed from those elements.
Step 2 In the XHTML source view, right-click the li element that is four lines above "Customer Service" and choose Modify from the shortcut menu.
The Modify Element Rule dialog box appears.
Step 3 In the Modify Element Rule dialog box, click the Modify Element tab.
The Modify Element tab displays the selected element name in a text box. You use the 
button to display a list of HTML elements from which you can choose an element to replace the li element.
Step 4 Click the button to display a list of elements.
Step 5 Scroll down the list and select p.
Step 6 Click Done.
The bullet character no longer appears in front of "Customer Service."
Step 7 To remove the bullet character from the rest of the items, right-click the li element where you applied the Modify rule and select Edit Rule from the shortcut menu.
Step 8 In the Modify Element Rule dialog box, click the li element that is at the end of the list in the Path to Selected Element area.
The Configure Path Element dialog box appears.
Use the Configure Path Element dialog box to apply a rule across multiple depths and positions of an element. Depth refers to the nesting that is represented along the x-axis in the XHTML source view. Position refers to the repetition of like elements along the y-axis.
Step 9 In the Configure Path Element dialog box, click All Positions.
Step 10 Click Done and then click Done again.
All of the list items now display without the bullet character.
In this exercise, you will insert a br element to improve the appearance of the transformed page.
Step 2 In the XHTML source view, right-click the br element that follows the selected phone number.
You will add another br element.
Step 3 Choose Insert from the shortcut menu.
The Configure: Tag Insert Rule dialog box appears.
For this example, do not change anything in the Configure Rule tab.
Step 4 Click the Insert Element tab.
Step 5 In the Insert New Element area, click the After radio button to indicate where you want to insert the br element.
Step 6 In the HTML/XML Fragment text box, type <br/>.
The Insert Element tab should look like the following:
Step 7 Click Done.
Design Studio displays additional space after the phone number in the browser view. In the XHTML source view, the Insert icon () indicates that you inserted 
an element.
In this exercise, you will move some text after "Executive Briefing Center."
Step 2 Scroll down the browser view and select Locate a Partner and Reseller.
Step 3 In the XHTML source view, right-click the font element that is three lines above "Locate a Partner and Reseller."
Step 4 Choose Move from the shortcut menu.
The Move Destination dialog box appears.
Step 5 Scroll the browser view to locate the text Executive Briefing Center.
You will move the text "Locate a Partner and Reseller" after "Executive Briefing Center."
Step 6 Click the text Executive Briefing Center.
The text appears in the Move Destination dialog box.
Step 7 In the Move Destination dialog box, click Done.
The Configure: Move Rule dialog box appears.
Step 8 In the Move tag area, click After and then click Done.
Step 9 Click the Edit tab.
The text you moved appears on the same line as "Executive Briefing Center."
You can correct the formatting by modifying the "Locate a Partner or Reseller" node to include two line breaks, as follows.
Step 10 Right-click Locate a Partner and Reseller and choose Modify from the shortcut menu.
Step 11 Click the Modify Element tab and type <br/><br/> before the text in the text box.
Step 12 Click Done.
Your transformed page should look like the following example:
You have now transformed your first web page. Next, you will save your work and preview the page.
To save your work, perform these steps:
Step 2 Enter QuickTour and click Save.
Design Studio saves your project in a configuration file named QuickTour.cte.
To preview the page, you first publish the configuration file to the CTE that your site uses for testing. Only one configuration file can reside on a CTE at a time: The configuration file that you publish replaces the configuration file previously in effect on the CTE.
We recommend that you follow these guidelines when working with Design Studio configuration files:
To publish your configuration file to a CTE, perform these steps:
Step 2 Wait until Design Studio displays a message that the configuration is uploaded.
Step 3 Click OK.
To preview the page you transformed and published, perform these steps:
Step 2 Open the transformed page in your default browser, pointing the browser to the CTE IP address and port number and the page URL.
For example, if the CTE IP address is 10.0.0.2, enter the following:
http://10.0.0.2:80/http://www.cisco.com/warp/public/687/Directory.shtml
Design Studio applies your transformation rules to the Cisco contacts page and displays it in your default browser.
You have now completed the tour. For detailed information on transforming web page content, see the Design Studio User Guide.
Posted: Mon Aug 18 17:19:40 PDT 2003
All contents are Copyright © 1992--2003 Cisco Systems, Inc. All rights reserved.
Important Notices and Privacy Statement.
modified this
element.
location.
