Page Wrapper Editor. v. 6.2 Rev 5/10 1

Transcription

1 Overview... 2 Objectives... 2 Key Concepts and Considerations... 3 Creating a New Page Wrapper... 7 Step 1: Name... 8 Step 2: Meta Tags... 9 Step 3: Body Tag Attributes Step 4: Basic Layout Step 5: HTML Body Step 6: Printable Version Step 7: Publish Page Wrapper Editing a Page Wrapper EXERCISE 1.1: Modifying a Page Wrapper Using Multiple Page Wrappers Page Wrappers and Security Categories Related Actions Objectives Summary v. 6.2 Rev 5/10 1

2 Overview Page Wrapper Editor (PWE) is an integral part of all Convio sites. It is the tool used by Convio staff to build the Page Wrapper that encapsulates the content and applications on your Convio site. The Page Wrapper generally contains the persistent design elements of your site, such as top banner, branding, and navigation elements. Objectives Objectives By the end of this section, you will be able to: Identify key considerations for a new Page Wrapper Create and modify a Page Wrapper Configure metadata, head elements and body tags Create wrappers via the WYSIWYG by incorporating reusable elements Publish a Page Wrapper Edit an existing Page Wrapper Describe the following: Ways to use multiple Page Wrappers How Security Categories and Page Wrappers work together Use the Page Wrapper Editor s Related Actions 2 v. 6.2 Rev 5/10 2

3 Key Concepts and Considerations Convio will set up a default Page Wrapper for you during your deployment. However, as time passes and new projects or campaigns come up, you may wish to create new Page Wrappers or modify existing ones. A Convio site can have as many Page Wrappers as you need. Key Concept Page Wrapper Page Wrapper = Provides a consistent look and feel as your constituents navigate the pages of your site. Page Wrapper Content Area 3 v. 6.2 Rev 5/10 3

4 Key Considerations: Conditionalization Can this project be accomplished without a new Page Wrapper? Would conditionalization of the existing design accomplish the same goal? For avid athletes For Health-conscious chefs 4 Conditionals allow you to change the user experience of your constituents based on their online activity. Conditionalization is discussed in length in the WYSIWYG class. v. 6.2 Rev 5/10 4

5 When planning a new Page Wrapper design for Convio, keep in mind that the inclusion of any element should be driven by the user experience. Furthermore, consideration of Convio functionality should be taken into account when planning to how these elements might be implemented. Key Considerations: User Experience The elements included in a Page Wrapper should be driven by User Experience Log In 5 For example, the Logged Out version of the Wrapper includes links to log in as well as to register, or sign up to receive a newsletter. In the Logged In version, the Wrapper includes a personal greeting, as well as links update user information and to log out. All of this is done with conditionalization and personalization. v. 6.2 Rev 5/10 5

6 You should do some advanced planning before creating a new Page Wrapper. Figure out how to best incorporate the user experience described earlier. Also take into consideration the requirements of any Convio modules that use your new wrapper. For example, donation forms need at least a 700 pixel wide content area and calendar pages for a TeamRaiser event require at least 750 pixels. Other Key Considerations What content will be displayed within this Page Wrapper? PageBuilder pages naming conventions may apply Convio Applications Width considerations may be required, especially for Donations and Team Raiser 6 v. 6.2 Rev 5/10 6

7 Creating a New Page Wrapper You can create a new page wrapper by using the Page Wrapper Editor found under Setup. To create your new wrapper click the Create a new Page Wrapper button. The Page Navigator will open up with a seven step process. If you do not see the Page Wrapper Editor on the dropdown menu, it means that you do not have the appropriate level of access, and you will have to contact your Site Administrator to receive this access. Creating a New Page Wrapper An extensive explanation for interacting with PWE 8 v. 6.2 Rev 5/10 7

8 Step 1: Name In Step 1, enter the name for the overall page wrapper, as well as for this particular version of the wrapper. In addition, select a security category for this wrapper. The relationship between security categories and page wrappers will be discussed in a later section. Step 1: Naming a New Page Wrapper PW name for administrative purposes only Version used for design iterations Security Category helps control which Convio pages use this Page Wrapper 9 v. 6.2 Rev 5/10 8

9 Step 2: Meta Tags The Meta Tags step configures the HEAD elements elements that are needed to create a web page, but are not displayed in the browser. Document Type Declaration (DTD) - The document type that you select can affect how your pages display and will depend on whether your content is XHTML and complies with the newer standards, or whether it is HTML. If you are creating the Page Wrapper from scratch, it is best to choose XHTML. If you are inserting pre-generated code, chose the DTD that best matches your code. Enter Site Title and META data for the Page Wrapper. The site title will display at the top of the browser window and any page titles will be added to the end of it. META keywords and META description were once utilized by search engines, but this is no longer a common practice. However, some search engines will display the META description in search results. These should be entered as plain text with no HTML tags or syntax. Step 2: Adding DTD, Site Title, Meta Tags Choose the appropriate Document Type Declaration for your wrapper Site Title, META Keywords and META Description should be configured without tags or quotes 10 v. 6.2 Rev 5/10 9

10 If desired, you can enter additional tags for the HEAD element. Since entries for this field are open ended, proper HTML syntax should be applied. Any desired script tags, cascading style sheet (CSS) links, or embedded scripts or styles should be included here. A common best practice is to use an S51 tag to call in a reusable PageBuilder page that contains only HEAD elements. The advantages to using reusable PageBuilder pages in PWE (Page Wrapper Editor) will be discussed later. Step 2: Additional Head Elements HTML tags (or reusable page calls) must be used for any additional Head elements Best Practice: Use a PageBuilder Reusable Page for HEAD elements 11 v. 6.2 Rev 5/10 10

11 Step 3: Body Tag Attributes BODY attributes, such as Background Color, may also be configured during the Wrapper creation process, if not already included in a CSS file. Step 3: Adding Body Tag Attributes Leaving Margins Height and Width blank will result in 0 margin. Background images should be entered as relative pathnames. For adding JavaScript actions and additional Body attributes 12 JavaScript OnLoad and OnUnload actions can also be included here. However, please be aware that including JavaScript in a Page Wrapper that displays Convio applications may potentially cause a scripting conflict. This is rare, but if an application such as a donation form is not functioning properly, often it is due to a non-native script in the Page Wrapper. v. 6.2 Rev 5/10 11

12 Step 4: Basic Layout You can choose a basic layout, which will automatically create an HTML table, or you can choose to begin with a blank page. Most web developers creating complex layouts will create HTML in an external editor such as Dreamweaver. If this is the case, start with a blank page and then drop the code into the WYSIWYG or Plain Text editor. Step 4: Choosing a Layout Basic layouts will provide an HTML table layout to get started If coding in an external editor, selecting Start with a blank page is usually the best option 13 v. 6.2 Rev 5/10 12

13 Step 5: HTML Body Step 5 is where you create the look of the page wrapper in the WYSYWIG or by entering the HTML directly into the Plain Text Editor. To learn more about creating content in the Convio WYSIWYG editor, please review the WYSIWYG class that covers this subject in depth. Step 5: Creating the Wrapper in HTML Creating HTML content in PWE is exactly the same as creating content in any Convio WYSIWYG All wrappers must contain the Stationery Body: Placeholder Text component. 14 The Stationery Body: Placeholder Text component is where the content of your page will go inside of your wrapper. If you are using one of the basic layouts, it is inserted automatically. Placeholder Text is a required component for all Page Wrappers and if you try to publish a wrapper without it, you will get an error message. Inserting Stationery Body Use the Components button to insert the Stationery Body if it is missing from your wrapper 15 v. 6.2 Rev 5/10 13

14 It is a Best Practice to break up the Page Wrapper elements into different pieces (such as the header, navigation, and footer) and place those sections into reusable Convio PageBuilder pages. These reusable pages can then be called into the larger Page Wrapper framework, much in the way that non- Convio developers often use include files in their designs. Benefits to this technique: It is easier to modify a reusable PageBuilder page than it is to modify a Page Wrapper It is harder to break a whole wrapper when only editing part of it It is better to give other administrators access to PageBuilder than to PWE Inserting Reusable Pages Instead of loading all content into the PWE WYSIWYG, create a skeleton that pulls in PageBuilder Reusable Pages 16 v. 6.2 Rev 5/10 14

15 Inserting Reusable Pages Preview Component 17 Inserting Reusable Pages Embedded PageBuilder Reusable Page 18 When creating reusable pages in PageBuilder, it is a Best Practice to give them a name that starts with reus_ and if creating one for specifically for a wrapper, you might even want to start it with reus_wrpr. v. 6.2 Rev 5/10 15

16 This is an example of a Page Wrapper built using only reusable components and CSS. While it looks simple in PWE, all of the styles for the wrapper are set up in a CSS file that is called in Step 2 and the reusable pages contain all of the pieces that make up the wrapper. When a page containing this wrapper is called, Convio puts all of the elements together in one seamless Web page. Reusable Page-Only Wrapper Wrapper contains only framework and reusable pages 19 v. 6.2 Rev 5/10 16

17 Step 6: Printable Version The Print Friendly version of a Page Wrapper is a simplified version of the default Page Wrapper. It usually contains only a small logo, the body content, and organization contact information. It is created in a WYSIWYG editor just like the default version. Step 6: Creating a Printable Version The Printable Version should not include navigation or complex graphical elements 20 v. 6.2 Rev 5/10 17

18 Step 7: Publish Page Wrapper Previewing your wrapper is very important. You want to make sure that the wrapper looks exactly the way you want it to. When you are happy with the look of your wrapper, click Publish. After publishing the wrapper, it is also a good idea to look at it in several different browsers, such as Internet Explorer and Firefox, to make sure that it displays the same way in each of them. Previewing and Publishing Preview the Page Wrapper before publishing 21 v. 6.2 Rev 5/10 18

19 Editing a Page Wrapper To edit a page wrapper, click Manage Versions, make a copy of the current version of the wrapper, and then edit the new version. Before editing a Page Wrapper, make sure that the piece you wish to edit is in the wrapper itself instead of a PageBuilder component. Editing a Page Wrapper To make changes to a Page Wrapper, select Manage Versions 22 The system will not let you edit an active Page Wrapper version. Instead, you must click Copy to make any changes. Copying the Wrapper The system will not let you modify an active wrapper; to make changes, copy the most recent version 23 v. 6.2 Rev 5/10 19

20 It is a Best Practice to name the new version with a number and a brief description of what the change is. Copying the Wrapper Give the version a new name and click Copy 24 Editing the Copy Click Edit to edit the new draft 25 When editing a wrapper, you will be taken through the same steps as when creating a new wrapper. v. 6.2 Rev 5/10 20

21 EXERCISE 1.1: Modifying a Page Wrapper The Need to Read wrapper is missing a footer. In this exercise you will create a new version of the Need to Read wrapper, add some basic CSS for the footer to the HEAD elements, and add the reusable footer component. Modify the Need to Read Wrapper 1. Select Setup > Page Wrapper Editor 2. Find the Need to Read wrapper and click Manage Versions 3. Click Copy 4. Name the copy v2 adding footer [your initials] 5. Click Copy 6. Find your new version in the list and click Edit 7. Click Next 8. Open need_to_read_styles.txt in your class exercises folder (or use the code below). 9. Copy the code in the text file into the Additional HTML Tags for HEAD Element box and click Next 10. Click Next 11. In the WYSIWYG editor, click inside the blank red box below the Stationery Body: Placeholder Text 12. Click on the Convio Components icon. 13. In the pop-up box, select Content > Reusable Pages > reus_wrpr_footer_need 14. Click Insert 15. Click Next 16. Click Next 17. Preview the page wrapper to make sure the footer has been added. 18. Click Publish need_to_read_styles: <style type="text/css"> #footer p, #footer a:link, #footer a:visited { color:#ffffff; font-family:arial,helvetica, sans-serif; } #footer a:hover, #footer a:active { color:#fe9900; font-family:arial, Helvetica, sans-serif; } </style> v. 6.2 Rev 5/10 21

22 Using Multiple Page Wrappers There are a number of reasons why you might want to have multiple page wrappers, such as a wrapper for a specific microsite or for affiliates. Using Multiple Page Wrappers Typical reasons for multiple Page Wrappers include: Microsites for special campaigns Multiple business units operating within a single Convio instance (ex. Affiliates) Secure intranets that only staff members can access 28 v. 6.2 Rev 5/10 22

23 Multiple Page Wrappers: Microsite American Health Society has a special program called Need to Read, so they set up a new wrapper for it. Different navigation and branding for a microsite 29 Multiple Page Wrappers: Affiliates Susan G. Komen for the Cure has multiple Affiliates, with different wrappers Different wrapper for an affiliate site 30 v. 6.2 Rev 5/10 23

24 Page Wrappers and Security Categories You can have multiple Page Wrappers in the same Security Category. Create a new security category only if needed by your site. When working with a Convio module, you can override the default wrapper in a security category to another wrapper in that same category or to any from the General security category, but not from any other security category. Multiple Page Wrappers: Security Categories To create a Page Wrapper that should be the default wrapper for a new Security Category: 1. First create a new Security Category to control the Page Wrapper and related content 2. When creating the Page Wrapper, select the correct Security Category 31 v. 6.2 Rev 5/10 24

25 If you create a Page Wrapper and then you realized that you needed to create a new Security Category to control it, you can use Step 1 of Edit Attributes to select the correct Security Category, once it has been created. Please note that this can only be done if there are no active versions of the Page Wrapper. Therefore, it is advisable to figure out whether or not a new Security Category is needed before creating the new wrapper. Multiple Page Wrappers: Security Categories 3. After the Page Wrapper is created, configure it to be the default for the new Security Category Go to step 2 and set the Page Wrapper as default 32 v. 6.2 Rev 5/10 25

26 Related Actions There are several Related Actions for Page Wrappers. Related Actions DO NOT select Restore All Wrappers to Factory Settings unless you have explicit permission to do so Edit a custom style sheet to over ride standard styles Edit the styles that are presented in the WYSIWYG Styles dropdown 34 Restore All Wrappers to Factory Settings will destroy all existing Page Wrappers and replace them with the default design that was in place before deployment began. This is usually used when starting over on a site in which major design changes have occurred during deployment. NEVER USE IT on a site that is currently live. Edit CustomStyle.css allows you to edit a single style sheet that is applied last in the order of CSS documents applied to the Convio site. This style sheet will be applied to all wrappers and override default styles declared elsewhere. If you want custom CSS for a specific wrapper, add it to the styles embedded in the Page Wrapper HEAD tag in step 2 of the Process Navigator in PWE. EditCustomWysiwygSyle.css allows you to edit the styles that are available in the WYSIWYG Styles dropdown menu. Make sure the style is also in CustomStyle.css, or it will not show up on your pages. v. 6.2 Rev 5/10 26

27 Objectives Summary Objectives By the end of this section, you will be able to: Identify key considerations for a new Page Wrapper Create and modify a Page Wrapper Configure metadata, head elements and body tags Create wrappers via the WYSIWYG by incorporating reusable elements Publish a Page Wrapper Edit an existing Page Wrapper Describe the following: Ways to use multiple Page Wrappers How Security Categories and Page Wrappers work together Use the Page Wrapper Editor s Related Actions 35 v. 6.2 Rev 5/10 27