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

Web Center CertificationCreating Promotions

Web Center Certification TrainingIntuit 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



• 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



This page intentionally left blank.



Objective 1Working with Images



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



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



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



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.



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.



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.






Objective 2 Working with Documents



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



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



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 it’s 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



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.



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



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 computer’s drive prior to deleting the images.






Objective 3 Insert an Image on a Page



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



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



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



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



Image Info Tab

Alignment Function

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.



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.



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



Objective 4Insert a Link on a Page



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



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 (http://, https://) may be set as needed. A 3rd 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.



Insert a Document or E-Mail 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.

E-Mail: Creates a link that will open the user’s default e-mail browser to send an e-mail. The e-mail address, subject and body defaults may be pre-filled for the user.



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



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



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



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.



Objective 5 Review and Publish Live



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



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 user’s edits are complete before selecting their files to move to Staging.



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.



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



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.



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



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