Web Center Certification Creating Promotions Web Center Certification Training Intuit Financial Services University

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 2 Practice using Web Center by: Creating a New Promotion 1.Upload an image 2.Upload a document 3.Insert an image on a web page 4.Insert internal and external links 5.Create an anchor and link to it 6.Preview, send to Staging and Go Live Creating Promotions: Objectives

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 3 Image - in Web Center terms, any graphic (adhering to accepted formats such as GIF, JPEG) that can be uploaded to the CMS and referenced on a web page Pixel - Short for Picture Element, a pixel is a single point in a graphic image. Document- in Web Center terms, any file (adhering to accepted formats such as PDF, RTF) that can be uploaded to the CMS and referenced on a web page Bookmark (a.k.a Anchor) - A tagged point within a page that can be linked to from other points. Promotion Manager - a Intuit Financial Services marketing product that displays banners to Internet Banking consumers Alt tag – short for Alternative Text. Text that displays when a website visitor hovers over an image or link. Alignment - (for Images) options for organizing pictures with corresponding text Spacing - (for Images) horizontal and vertical padding used to separate an image from the content around it Aspect Ratio - in computer graphics, the relative horizontal and vertical sizes of an image. Terms to Know

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 4 This page intentionally left blank.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 5 Objective 1 Working with Images

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 6 Step 1: Go to Work Area Images & Documents. Step 2: Select the Images / Go icon. An FI admin can add, replace, and delete both images and documents residing within CMS. Images and Documents

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 7 The Images main screen allows users to upload, view, delete and replace images. Images may be sorted by Name or Type using the sort links at the top of the page. The Back button will return the user to the Images and Documents selection screen. Images Main Screen

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 8 Images Requirements Accepted file formats for images: gif, jpg, jpeg, png, map, bmp Special characters or spaces are not allowed in the file name. File names are case-sensitive. There is not a limit to the file size of an uploaded image or the total number of images that may be stored in Web Center. Best Practices Use an external image editing program to resize and optimize images for the web. Do not resize images using the WCAC. Send the image and the page where the image is located to staging and live at the same time; otherwise, the image will be broken on the page on the live site. Use the Management Console upload tool to upload images for Promotion Manager. Use a consistent naming convention, for example, name all banners from your Mortgage department: mort-imagename.jpg. This makes it easier to locate an image in the WCAC. Image Requirements / Best Practices

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 9 Step 1: Click Upload image, select an image and click Open. Upload a Single Image Step 2: Confirm that the new image has been uploaded. It is not necessary to refresh the page to complete the upload.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 10 Step 1: Click Add multiple images. The upload tool will load in a new shadowbox. Upload Multiple Images Step 2: Click on Browse, select the desired images and click Open.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 11 Step 3: Click Upload. The progress indicator bar will show the progress of the upload. Upload Multiple Images Step 4: Click on Back to select additional images for upload or Close to return to the Images main screen.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 12 This page intentionally left blank.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 13 Objective 2 Working with Documents

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 14 Step 1: Go to Work Area Images & Documents. Step 2: Select the Documents / Go icon. An FI admin can add, replace, and delete both images and documents residing within CMS. Images and Documents

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 15 The Documents main screen allows users to upload, view, delete and replace documents in the same manner as images. Documents may be sorted by Name or Type using the sort links at the top of the page. The Back button will return the user to the Images and Documents selection screen. Documents Main Screen

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 16 Document Requirements Accepted file formats for documents: pdf, html, htm, txt, swf, doc, rtf, ppt, xls, wpd, wps, csv, css, js and all multimedia files. Special characters or spaces are not allowed in the file name. File names are case-sensitive. There is not a limit to the file size of an uploaded document or the total number of documents that may be stored in Web Center. Best Practices When uploading a PDF, make sure its web-quality (72 dpi) instead of a print-quality version (100+ dpi). Disable macros in Word and Excel documents to limit the potential concern over Microsoft Office security warnings. Send the document and the page where the document is linked to staging and live at the same time; otherwise, the link to the document will be broken on the page on the live site. Use code view in the Editor to embed any multimedia documents. Use a consistent naming convention, for example, name all documents for applications: app-docname.jpg. This makes it easier to locate a document in the WCAC. Document Requirements / Best Practices

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 17 Follow the same procedures used with images to upload documents. Click Upload document to add a single document or Add Multiple documents to upload multiple documents. Upload Documents Confirm that the new document has been uploaded. It is not necessary to refresh the page to complete the upload.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 18 Notes Replacement images must be the exact same height and width as the original image. Replaced files will appear in all locations on the site where the old image or document was located or linked to. The old image or document is permanently deleted. Use the replace option to swap out an old graphic or document with an updated version. For example, you may wish to replace a season graphic on the home page or update the current newsletter without changing the links on the site. Replace an Image or Document

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 19 Use the delete option to free up space in the CMS or to remove an old or unwanted file. Delete an Image or Document Notes Be sure to remove the image or document from all web pages before deleting it in Images and Documents. Deleted files may be reversed by Removing the change in the Manage Changes tool. It is recommended to save a copy of all images and documents on a computers drive prior to deleting the images.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 20 This page intentionally left blank.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 21 Objective 3 Insert an Image on a Page

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 22 Step 1: Go to Work Area Content Edit. Step 2: Navigate to a webpage to contain the promotion. Step 3: Click the Edit Content link to edit the snippet. Insert Image on a Page

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 23 Step 4: Place your cursor in the location where you want to insert the image. Step 5: Click the Picture icon. The Media File Selection window launches. Click Browse Server. Insert an Image

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 24 Step 6: Preview the images by hovering over the links. Click on a link to select a graphic. The Image Selector shows all images uploaded or replaced within Images & Documents; deleted images are removed immediately from this list. If more than 15 images are in the CMS, links to Previous and Next screens display at the bottom. Image Selector

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 25 Step 7: Change the values for each option. Click the Reset icon to revert to the original image properties. The preview window will affect all changes in real-time. Note: See the next two pages for a full description of all image properties available. Edit an Image

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 26 Image Info Tab AlignmentFunction Left Aligns the picture on the left margin, allowing subsequent text to wrap around it Right Aligns the picture on the right margin, allowing subsequent text to wrap around it Text Top, Top Aligns the top of the picture with the top of the text Middle Aligns the vertical center of the picture with the baseline of the text AbsMiddle Aligns the vertical center of the picture with the vertical center of the text Bottom, Baseline Aligns the bottom of the picture with the baseline of the text (default alignment) AbsBottom Aligns the bottom of the picture with the bottom of the text Alternative Text: This title will appear when hovering over an image. It also assists browsing for users with visual disabilities. Width/Height: Changes in the WCAC are not recommended. Use an external image editor (such as Adobe Photoshop) instead. Border Thickness: Border size around the image (in pixels). HSpace and VSpace: The white space between the image and surrounding text or other items.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 27 Other Image Tabs Link: Creates a hyperlink from the image to a new location. For additional functionality, use the link tool covered in the next section. Upload: Quick access to upload a single image to the WCAC. Advanced: Allows for advanced editing (such as setting style properties) to the image.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 28 Step 8: Confirm that the image displays in the editor with the formatting changes. Step 9: Type in the copy for the promotion. Step 10: Click Save Edits and Close to return to Work Area and preview the new edits. Add Text Around an Image

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 29 Objective 4 Insert a Link on a Page

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 30 Step 1: Highlight the text or image you want to link to a page. Step 2: Click the Add a Link button in the toolbar. Step 3: Select the Link Type. Insert a Link

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 31 Insert an Internal or External URL Internal URL: Creates a link to another page in Web Center. External URL: Creates a link to a page outside of Web Center. The protocol ( may be set as needed. A 3 rd Party Site Warning may be selected if a link disclaimer is required. Tip: It is recommended to change the link target under the Target tab to New Window for all external links. Note: The Advanced tab allows for additional link customization and should only be used by advanced users.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 32 Insert a Document or Link Link to a Document: Creates a link to a document stored in Web Center or to an external document (URL required) Click Browse Server to locate an existing document and click Add Document. Tip: It is recommended to change the link target under the Target tab to New Window for all document links. Creates a link that will open the users default browser to send an . The address, subject and body defaults may be pre-filled for the user.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 33 Anchors allow users to jump to a certain location on a page without having to scroll up or down. In this example, the user may click on the Mortgage Calculators link to jump down to that section of the page. Anchors

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 34 Step 1: To create an anchor, choose the page you wish to work with and click the Edit Content link. Step 2: Place the cursor on the desired location (the cursor should be next to the text – not highlighting it). Step 3: Click the Insert/Edit Anchor button in the Editor. Step 4: Assign an Anchor Name and click OK. Step 5: A yellow anchor icon will display at the location of the anchor on the page. Insert an Anchor

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 35 Step 6: Select the text you wish to convert to a link, highlight and click the Add a Link button. Step 7: Select Link to anchor in the text from the Link Type menu. Step 8: Select the anchor under By Anchor Name. All anchors that are available on the current page will display in the dropdown. Step 9: Click OK and Save Edits and Close to test the link. Link to an Anchor

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 36 Link to an Anchor / Edit or Remove a Link To remove a link, highlight the link and click Remove Link. To edit a link, highlight the link and click Add a Link. To link to an anchor on a different page, first create the anchor on the desired page. Next, create an Internal URL link on the second page and enter the anchor name under Internal Anchor.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 37 Objective 5 Review and Publish Live

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 38 Step 1: Preview the promotion in the Work Area. Step 2: Click on all links to test they are properly working. Remember that this works like an actual page, so all links are active and the layout appears as it will on the public site. Final Work Area View

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 39 Manage Changes Step 3: Go to Manage Changes. Step 4: Select the box for each change to be moved or check the Select All box to select all files. Step 5: Insert comments as appropriate. Enter a main comment next to the Select All option to pre-fill all selected comment fields. Step 6: Click Update Staging. Note: Remember to confirm that another users edits are complete before selecting their files to move to Staging.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 40 Step 7: Verify that all selected files have been moved to the Staging tab. Manage Changes Step 8: Click View Staging Site to perform a final review.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 41 Step 9: Click Deploy to Production and verify that all files in Staging are ready to be sent to the Live Site. Step 10: Click on Deploy Now. Step 11: Insert a Deployment Description and click Deploy Changes. Go Live

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 42 View Live Site Step 12: Confirm that the screen refreshes with the message: Content deployed successfully. Changes are now moved from Staging to the Live site. A new version and a new edition are created at this time. Step 13: Click View Live Site. The live (production) site will show in the WCAC. Confirm that the changes appear on the site.

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 43 Creating Promotions: Objectives Practice using Web Center by: Creating a New Promotion 1.Upload an image 2.Upload a document 3.Insert an image on a web page 4.Insert internal and external links 5.Create an anchor and link to it 6.Preview, send to Staging and Go Live

© 2010 Intuit Financial Services. All rights reserved. CONFIDENTIAL AND PROPRIETARY Web Center Certification Training: Promotions pg 44 1.What is the difference between uploading an image and replacing an image? 2.True or False? An image should be resized in the WCAC. 3.What properties should be set to wrap text around an image? 4.Describe the process of creating a link to a document from an image. 5.What is the purpose of using anchors on a page? Scenario 2 Review Questions