teamsite new user training port ali zed

78
TeamSite/CMA New User Training for Portalized Sites

Upload: api-3821056

Post on 10-Apr-2015

378 views

Category:

Documents


15 download

TRANSCRIPT

Page 1: Teamsite New User Training Port Ali Zed

TeamSite/CMANew User Training for

Portalized Sites

Page 2: Teamsite New User Training Port Ali Zed

This page intentionally left blank

ii

Page 3: Teamsite New User Training Port Ali Zed

TeamSite/CMA New User Training for Portalized Sites

Training Guide

Disclaimer

We make every effort to ensure the accuracy of the material described herein. Data used in examples and sample data files are intended to be fictional.

Development Team

Authors: Peter F. Alberti/CompuWorks Systems, Inc.Editors: Pamela A. Conway/CompuWorks Systems, Inc.Mass.gov Project Manager: Kerry Conard

Copyright Notice

This training guide is copyrighted and all rights are reserved by Mass.gov. Copyright ã 2005 by Mass.gov. All rights reserved.

iii

Page 4: Teamsite New User Training Port Ali Zed

This page intentionally left blank.

iv

Page 5: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Table of Contents

Table of Contents

TeamSite/CMA New User Training for Portalized Sites.......2Course Description...............................................................................................................2Course Objectives.................................................................................................................2Prerequisites.........................................................................................................................2

Introducing TeamSite......................................................3About This Course.................................................................................................................4The Big Picture......................................................................................................................4

What Is TeamSite?..........................................................................................................4Who Uses It?....................................................................................................................4Benefits of TeamSite.......................................................................................................5

Community of Users.............................................................................................................5Architecture..........................................................................................................................6

TeamSite Integration With Mass.Gov.............................................................................6Portalized Content Development...................................................................................7TeamSite Concepts.........................................................................................................9TeamSite Directory Structure.......................................................................................11Getting Help..................................................................................................................12

Navigating TeamSite.....................................................13Logging In to TeamSite......................................................................................................13Logging In to TeamSite......................................................................................................14

Browser Compatibility...................................................................................................14The Login Screen..........................................................................................................14Logging In the First Time..............................................................................................15Security Settings...........................................................................................................15Allowing Pop-ups...........................................................................................................15Installing VisualFormat.................................................................................................16Installing the Local File Manager..................................................................................17

The Standard ContentCenter.............................................................................................18The “My Workareas” Pane............................................................................................18The “My Favorites” Pane..............................................................................................18The “Tasks” Pane..........................................................................................................18The “Work in Progress” Pane.......................................................................................19The “New Forms” Pane.................................................................................................19Logging Out...................................................................................................................19Managing Panes............................................................................................................19

Using the File Browser........................................................................................................20Navigating Folders........................................................................................................20Creating New Folders....................................................................................................21Adding a Folder to My Favorites...................................................................................21Sorting Files..................................................................................................................21

Using File Action Menus.....................................................................................................22

Managing Chunks..........................................................23About Chunks......................................................................................................................24

The New Chunk Process................................................................................................24Creating Chunks.................................................................................................................25Using VisualFormat.............................................................................................................26Submitting Chunks.............................................................................................................26Accessing CMA....................................................................................................................28

The TeamSite Tasks Pane.............................................................................................28Editing Chunks....................................................................................................................30

v

Page 6: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Table of Contents

The Process for Edited Chunks.....................................................................................30Deleting Chunks.................................................................................................................30

Managing Files..............................................................31Best Practices for File Management...................................................................................32Importing Files....................................................................................................................32

Selecting Files to Import...............................................................................................33Choosing an Appropriate Location...............................................................................34Submit or Keep as Work in Progress............................................................................35

Submitting Files..................................................................................................................36The File Action Menu..........................................................................................................36Editing Files Directly on TeamSite.....................................................................................37

About IWTEMP...............................................................................................................37Local Editors..................................................................................................................37

Appendix ‘A’ – VisualFormat..........................................41The Difference Between ‘Enter’ and ‘Shift+Enter’......................................................42Fonts and Special Characters.......................................................................................42Aligning Text.................................................................................................................45Creating a bulleted or numbered list...........................................................................45Creating Hyperlinks......................................................................................................47Working with Tables.....................................................................................................49Adding an Image to a Content Chunk..........................................................................56

Appendix ‘B’ - Lab Exercises..........................................................58

vi

Page 7: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA

This page intentionally left blank

1

Page 8: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA

TEAMSITE/CMA NEW USER TRAINING FOR PORTALIZED SITES

Course DescriptionThis course introduces students to the Mass.Gov TeamSite content management environment. Explanations of the system’s architecture, terminology and business process are presented. Hands-on activities using a Mass.Gov simulated server enable students to learn the user interface and become familiar with the production system.

Course ObjectivesUpon successful completion of this course, students will be able to:

Explain the purpose of TeamSite and CMA

Define TeamSite terminology, including some Mass.Gov-specific terms

Access help resources when needed

Use the appropriate portions of the TeamSite directory structure

Navigate the TeamSite Standard ContentCenter user interface

Create, Edit and Delete Chunk content

Deploy Chunk content to the production environment

Import and manage supporting files that are used in Chunk content

PrerequisitesA TeamSite license, basic familiarity with web browsers and PC usage. Reminder: TeamSite licenses are single-user licenses.

2

Page 9: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 1: Introducing TeamSite

INTRODUCING TEAMSITE

3

Top

ic 1 Topic Objectives:

Understand what TeamSite does Define basic TeamSite and Mass.Gov terminology Know which parts of the TeamSite directory structure to

use Get help with TeamSite

Page 10: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 1: Introducing TeamSite

About This CourseWelcome to TeamSite, the Mass.gov portal content management environment! TeamSite simplifies the process of creating and managing web portal content for business users, as well as technical users, with a customized web-based application.

Most of this course is designed to be hands-on. Rather than providing an instructor-led presentation followed by lab exercises, you will learn TeamSite by working with it while the instructor is presenting the material. This has the benefit of allowing you to participate throughout the entire course.

Once you finish this course, you need to use the concepts you learn here to become proficient at TeamSite. Using this courseware, the TeamSite Quick Reference materials, and documentation available at www.mass.gov/portalservices, as well as internal support, you will have ample after-class assistance available to you.

The Big Picture

What Is TeamSite?TeamSite is a web-based content management application created by Interwoven, Inc. Mass.Gov has customized your TeamSite implementation, making it both simple to use and yet comprehensive enough to handle a variety of needs across all the Commonwealth’s agencies. You will use TeamSite to create and deploy content to the Mass.Gov web portal.

Who Uses It?Several types of users work with TeamSite:

Portalized/CMA Users – You fall into this category. These are the users who will create content and, in some cases, publish the content to the production site. The content is automatically formatted and placed on the portal’s web pages through a defined business process.

Non-Portalized Users – These users create their own HTML web pages using their own styles, formatting, and code. They use TeamSite as a repository to store and manage their web site files, as well as to publish the files to the Mass.Gov web servers.

Calendar Users – These users create events to be searched and published on the Mass.Gov calendar, a specific element of the Mass.Gov portal.

4

Page 11: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 1: Introducing TeamSite

Benefits of TeamSiteStandardsUsing TeamSite, Mass.Gov has created a set of consistent business processes and simplified content creation/deployment techniques to make it clear and easy for you to publish your information.

CollaborationTeamSite is a multi-user collaborative system. It enables multiple users to work together on similar content and provides a centralized repository and workflow.

EfficiencyUsing TeamSite, you can publish content to production systems quickly and efficiently, without the complexity of external web masters, red tape, or other bottlenecks.

Customization = SimplificationMass.Gov has customized TeamSite so you only see files and functionality that you need to do your job. This provides simplicity and organization that helps you get what you need, when you need it.

Community of Users

Mass.Gov encourages portal users to participate in the following governance groups:

Portal Enhancement Planning – Join your peers in defining and prioritizing product enhancements and software updates

Portal User Group – General knowledge sharing and collaboration for end users of TeamSite and CMA.

5

Page 12: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 1: Introducing TeamSite

Architecture

TeamSite Integration With Mass.Gov

TeamSite plays several roles in the process of creating and managing content:

File repository. Using the web-based interface, you import documents and images into TeamSite to be used with your content. Future changes to the files are versioned so you can revert back to previous versions if required.

You also have the ability to edit documents and images directly from the TeamSite server using your favorite editing tool.

Content creation tools. Using web forms (Calendar users) or a simple text editor called VisualFormat (Portalized users), you can create web content without having to know HTML. Your content is automatically published using pre-determined Mass.Gov standard styles.

Publishing tool. Using the TeamSite “Submit” process (described later), you have control over which content is published to the production site.

Workflow. In selected situations, workflow can be implemented to allow approval processes to be in place.

6

Content Developers & Reviewers

TS Workflow

Op

en

De

pl

oy

docs, images,

xml

TeamSite(work.mass.gov)

www.mass.gov

ContentDevelopers

docs, images,

xml

Page 13: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 1: Introducing TeamSite

Portalized Content Development

There are two Models of sites in the Portalized environment. In the chart below, the number of the Level can be thought of as “the number of clicks it takes to get to the item from the home page.”

Constituent-based Home Page Example

7

Page Level Constituent-based Topic-based

Level 0 Home Home

Level 1 Constituent Topic

Level 2 Topic Subtopic

Level 3 Subtopic Subtopic

Level 4-10 Sub(n)topic Sub(n)topic

CMA Resource Terminal Content Terminal Content

Page contains Constituents

Page 14: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 1: Introducing TeamSite

Topic-based Home Page Example

ChunksA Chunk is portal content you create which is stored on the TeamSite server. Chunks are one form of Terminal Content, and are stored as XML files.

You will learn to look at your content as separate, identifiable chunks that can be re-assembled in different ways (even in a different order), depending on its purpose. How, where, and when you intend to re-use your content should drive how you “chunk” your content. The goal is to create content once and then re-use it many times in numerous, separate Portal locations. The Content Management Application (CMA) database is used to determine where Chunk content will appear on the Portal.

Other examples of Chunk content include:

Feature Stories

Press Releases

Utility Pages

8

No Constituents here

Page 15: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 1: Introducing TeamSite

TeamSite ConceptsRoles TeamSite users can have one or more roles when using the system. Your role determines your functional capabilities – what you’re enabled to do in the application.

AuthorsMost Mass.Gov TeamSite users are Authors. You have the capability to create new content, import files, perform basic file operations, and Submit (publish) your content to the production environment

Editors Editors have the same capabilities as Authors, and can also approve content and modify content that does not belong to them.

Administrators ( Mass.Gov only)In addition to all Editor capabilities, Administrators can create and administer TeamSite structures (Workareas – to be discussed later – and Branches) and manage workflows.

Master (Mass.Gov only)This is the TeamSite super-user, which has all capabilities to do anything within the system.

ContentCenters A TeamSite ContentCenter is the user interface. There are two ContentCenters.

StandardMass.Gov supports only the Standard ContentCenter. This is a simplified, portal-like user interface that provides all the functionality required to work with Mass.Gov content.

ProfessionalMass.Gov does not support the use of the Professional ContentCenter. The Professional view provides facilities to do many functions that are not required for Mass.Gov content management.

9

Page 16: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 1: Introducing TeamSite

WorkareasThe Mass.Gov portal is extremely large and comprises all the state agencies. TeamSite Workareas divide the content into separate agencies, providing a base level of content organization and specifying access to the content based on TeamSite login. Each state agency will have at least one Workarea, although some agencies will have more than one Workarea.

SubmitWhether you are creating Portal content, creating Calendar items, or developing your own non-portalized HTML content, your work on TeamSite will not be published to the production environment until you Submit it. The Submit process is different for Portalized and Non-Portalized users, which will be described later in the course.

LocksTeamsite version 6.1 does not lock xml files that you have edited. This alleviates the problem of attempting to access a file and discovering that someone forgot to unlock it. You can manually lock a file, which you wish to leave as work in progress, by clicking Lock on the file action drop-down menu. Once you have locked the file, simply close the pop-up window and refresh Teamsite.

CMAThe Mass.Gov Content Management Application (CMA) works side-by-side with TeamSite to manage Portalized content. It is never used for non-Portalized sites nor is it used by Calendar users. CMA allows you to specify where chunk content and other resources will appear on the Mass.Gov Portal.

FormsTeamSite allows customized data entry forms to be created which simplify web content development for business users. Rather than having to know HTML, business users can fill out a web form and Submit the data, which will then be automatically formatted and presented on the web site. Forms are used to create content chunks as well as static content such as feature stories, press releases, and utility pages.

Non-Portalized users do not use Forms.

My FavoritesStandard ContentCenter users can designate files and directories to be a Favorite. This allows 1-click access to the file or directory from the Standard ContentCenter home page.

10

Page 17: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 1: Introducing TeamSite

TeamSite Directory StructureEach Workarea contains a number of directories. You should avoid using many of these directories. There are only a few that you will use.

Note that in the graphic above it specified “Eeohhs2” as the Workarea in several places. Your directory structure will replace this with your own Workarea name.

11

Supplemental files

Chunk content

Page 18: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 1: Introducing TeamSite

Getting HelpTeamSite assistance is available in a number of ways.

“How Do I…”. The TeamSite Standard ContentCenter has a “How Do I…” pane that contains the most significant TeamSite help topics.

Help. TeamSite offers a comprehensive help system which you can access by clicking on the Help link at the top-right of most TeamSite pages.

Web Work. If you cannot find your answer using the TeamSite help systems, you should work with your Tier 1 Liaison. If he or she cannot answer your question, he/she can request support through the E2E service catalog by logging in to E2E and selecting "Request a Service". Navigate to Application Requests -> Portal and Application Hosting, and select "Mass.Gov Hosting Advice". If you wish to report an error, please use "Report an Incident" in E2E.

12

Help link“How Do I…” pane

Page 19: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 2: Navigating TeamSite

NAVIGATING TEAMSITE

13

Top

ic 2

Topic Objectives:

Log in to TeamSite Perform one-time activities the first time you log in Describe the different panes and screens associated with

TeamSite Work with the File Action Menu Use the My Favorites feature of TeamSite

Page 20: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 2: Navigating TeamSite

Logging In to TeamSite

Browser CompatibilityTeamSite works with the following web browsers:

Windows 2000 Microsoft IE 6.0 SP1, EnglishWindows XP SP1 Microsoft IE 6.0 SP1, EnglishWindows XP SP2 Microsoft IE 6.0 SP2, English

In your web browser, enter http://work.mass.gov in the address.

The Login ScreenYou have been provided with a Username and Password from Mass.Gov. Unless you have been told otherwise, you should use the Standard ContentCenter and the Author Role to log in. Note: Your username and password are case sensitive.

14

http://work.mass.gov

Page 21: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 2: Navigating TeamSite

Logging In the First TimeThere are several tasks you will need to perform the first time you log in to TeamSite. These tasks are required on each computer you use – TeamSite does not “remember” these settings, so they do not “follow” you around from computer to computer. If you are not familiar with making changes to these settings, please contact your local network administrator for assistance.

Security SettingsIt is necessary to add the TeamSite server to your web browser’s list of Trusted Sites. To do this:

1. Open your web browser2. Click Tools, and then click Internet Options3. Click the Security tab, and then click Sites4. Type http://work.mass.gov into the address box5. Be sure that “Require server verification (https:) for all sites in this zone” is

unchecked.6. Click Add, then click OK

Allowing Pop-ups TeamSite uses Pop-up windows occasionally as part of its functionality, so you must enable pop-ups for work.mass.gov. You do not need to do this if you do not have a pop-up blocker. However, most people do have at least one.

If you have Internet Explorer 6.0 or higher, you can disable pop-ups as follows:

1. Open your web browser2. In the Tools menu, choose the Pop-up Blocker sub-menu and select “Pop-up

Blocker Settings…” Note: If you don’t have this option in the Tools menu, you may not have the most current browser.

3. In the “Address of Web site to allow:” text box, type work.mass.gov and click the Add button.

4. Click the Close button.

15

Page 22: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 2: Navigating TeamSite

If you have another pop-up blocker (such as Google Toolbar, Yahoo Toolbar, or any other), you must configure it according to the manufacturer’s directions to allow pop-ups from work.mass.gov.

Installing VisualFormatThis step will happen the first time you run VisualFormat. The VisualFormat installer will run automatically the first time you use it. The following steps are the most common in a standard Internet Explorer 6.0/Windows XP environment. However, you may experience slightly different steps depending on your Windows version, your web browser make and version, and your security settings.

1. You are prompted to click on the Internet Explorer Information Bar. Click OK on the prompt, and then click the Information Bar and select “Always Allow Pop-ups from This Site.” Note: If your agency’s security policies prevent this practice, select “Temporarily Allow Pop-ups.”

2. When prompted “Would you like to allow pop-ups from ‘work.mass.gov’?” click Yes.

3. You will see the VisualFormat installation instructions. Scroll down to the bottom of the screen and click the Install Now button.

4. When prompted to click the Information Bar again, click OK and then click on the Information Bar and select “Install ActiveX Control…”.

16

Page 23: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 2: Navigating TeamSite

5. On the Security Warning prompt, click Install.

6. When the installation completes, click the Close button.

Installing the Local File ManagerThis step will happen the first time you use the Local File Manager. The Local File Manager is used when you import files, and also when you Edit a file directly from the TeamSite server.

The Local File Manager will install itself on first use by running a signed, but uncertified, Java applet. When you are prompted with the following dialog box, click Always. If you click Yes, you will see this dialog box again next time Local File Manager runs.

You will then be asked to specify the location for TeamSite temporary files.

In most cases, you should leave the default (C:\IWTEMP). There are a few circumstances when you cannot use the default:

You are not permitted to access your C: drive due to administrative “lockdown”. If this is the case, either contact your computer’s system administrator, or choose another path where you have rights to read/write (such as your home directory on a network server.)

You have very little disk space on your C: drive.

Tip:

The first time Local File Manager installs, it may be slow to present you with the installer. This is because it is copying the Java applet to your computer. Be patient – it will start eventually!

17

Page 24: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 2: Navigating TeamSite

The Standard ContentCenter

The “My Workareas” PaneThe “My Workareas” pane gives you quick navigation to all the Workareas you are permitted to access. Clicking on the Browse button opens the File Browser for that Workarea.

If you are permitted to access multiple Workareas, you can customize your list of Workareas that you see on the ContentCenter home page. Simply click the pencil icon and select the Workareas you wish to see.

The “My Favorites” PaneWhen you designate a file or folder to be a Favorite, it will appear in this Pane. (How to designate a file or folder as a Favorite is covered later in the course.) You can then quickly browse folders and perform file actions on files from this Pane.

The “Tasks” Pane If you use CMA to associate Chunk content to the Portal, a workflow task will appear in this pane so you can Approve, Edit or Reject the CMA entry. This process will be covered in detail later in the course.

18

Tasks Pane

Work in Progress Pane

New Forms Pane

My Workareas Pane

My Favorites Pane

Page 25: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 2: Navigating TeamSite

The “Work in Progress” Pane Any time you import or edit a file, whether a Chunk file or a supporting file, you have the option to Submit it or leave it as a Work In Progress. Any files you modify that have not yet been Submitted will appear in the Work in Progress pane. From here, you can easily Submit one or more files, or you can edit the file directly from this pane.

The “New Forms” Pane This pane provides a list of the TeamSite Forms available for you to create new Chunks. If you have access to more than one Workarea, you can select a single Workarea to view Forms associated only with that Workarea, or you can choose to view all Forms at once.

Logging Out To log out of TeamSite, click the Logout link at the top-right side of the screen.

Tip:

TeamSite caches your login information for a period of time. If you close your web browser without logging out, you may not be required to log in if you reconnect to TeamSite within the cache period. We suggest that you log out as a best practice. It is extremely important to log out if you are using a shared computer to run TeamSite!

Managing PanesSome panes, such as Work in Progress, can contain large lists. This can affect your TeamSite experience as follows:

Organization. It may be difficult to view other panes when large lists are presented.Speed. Large lists cause the screen refresh for TeamSite to be much longer.

To manage these issues, you can either collapse panes that contain long lists until you need to use them, or you can specify that lists should be paginated so you see small portions of the list on multiple pages.

Collapsing/Expanding PanesTo collapse or expand a pane, click the Expand/Collapse button at the top-right corner of the pane.

Paginating ListsIf you do have a long list, you can choose to see All items in the list, or to view some number of items per page. The number of items you can view is pre-determined by TeamSite for you.

19

Page 26: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 2: Navigating TeamSite

You can type the page number you wish to jump to or use the page navigation arrows to move forward and backward through pages.

Using the File BrowserYou can access the File Browser by clicking the Browse link on a Workarea in the My Workareas pane or on a folder in the My Favorites pane.

Navigating FoldersUse the Breadcrumb to move up and down the folder structure.

20

Show All or # of files.

Page Navigation

Breadcrumb

Page 27: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 2: Navigating TeamSite

Creating New FoldersTo create a new folder, click the button.

Type the name of your new folder in the “Name” text box and click Finish.

Adding a Folder to My FavoritesTo add a folder to My Favorites, click the button.

Sorting FilesYou can click on the column header to sort on that column. If you want to reverse the sort order, click on the same column again. The arrow on the column header indicates which column is being sorted and in which order it is being sorted.

21

Type folder name here

Click Finish

Page 28: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 2: Navigating TeamSite

Using File Action MenusThe File Action Menu allows you to perform a number of different actions on a single file.

Most of the actions you can perform will be covered later in this course. However, we will not cover Add to My Favorites later. Please note that this is how to add a file to the My Favorites pane.

22

Click on this arrow to access the File Action Menu.

Page 29: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 3: Managing Chunks

MANAGING CHUNKS

23

Top

ic 3 Topic Objectives:

Create a new Chunk Use the features of VisualFormat Submit a new Chunk Access CMA, if necessary Edit an existing Chunk Delete a Chunk and Submit the deletion

Page 30: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 3: Managing Chunks

About ChunksChunks, or Terminal Content, are XML files you create using TeamSite Forms. They usually consist of formatted text you create within TeamSite and can include graphics, links to downloadable document files, and external web links, The Chunk can be reused in multiple places on the Mass.Gov portal.

There are several types of Chunks you could create:

chunks. The “standard” Chunk is the one you will create the most often. It is a basic template for entering Terminal Content.

pressrelease. This is a template for custom display of an agency’s press releases (not available in all Workareas)

staticmodulechunks. A template for creating special content such as a feature story.

utilitychunk. Used for utility content such as the Welcome module and footer pages such as Site Policies, Help or Contact Us.

The New Chunk Process

24

1. Chunk is created with VisualFormat

2. Chunk is saved as XML file in

TeamSite

3. Chunk is Submitted to Production

4. CMA reads XML file and creates an HTML file based

on the Chunk content.

5. User approves CMA Submission in

TeamSite

6. TeamSite/CMA publish HTML file to

Production

Page 31: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 3: Managing Chunks

Creating ChunksThe process for creating Chunks is simple:

1. Determine which Form you will use and click the New link for the corresponding Form.

2. Create your Chunk information using the VisualFormat editor

3. Submit your Chunk.

4. Use CMA to Associate your Chunk with one or more pages on the Portal.

5. Approve your Submission.

The next few sections describe steps 2 – 5.

Note:

If you work with multiple Workareas, you must choose the Form for the appropriate Workarea. It is possible, for example, that you could see the “chunks” Forms for two or more separate Workareas. Be sure to choose the right one!

25

Click one of these 2 links

Page 32: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 3: Managing Chunks

Using VisualFormatVisualFormat is a simple editor that allows you to enter and format text in a similar way to a word processor. In addition, there are numerous elements that are HTML/web specific.

The basic functionality of VisualFormat will be covered as an instructor-led lab exercise. Additional information on VisualFormat can be found in the Appendix at the end of this course.

Note:

You can copy text from another editor or word processor and paste it into VisualFormat. If you do this, be sure to use the Clean HTML feature to ensure all formatting is compliant with the Mass.Gov web site.

A strong recommendation is to use “paste plain text”( a right click option) This will automatically remove all formatting and ensure a clean paste into VisualFormat.

Submitting ChunksOnce you have finished creating your Chunk content, you must Submit it. Before you can Submit it, you must save the XML file. Click the Save or Save As button to save it.

Chunks are saved in the following directory: {Workarea}\templatedata\{Workarea}_templates\{templatetype}\data

So, for example, if your Workarea is “massgov2” and you are working on a standard chunk, you would save your XML file to: massgov2\templatedata\massgov2_templates\chunks\data

Based on the type of chunk you are creating, the TeamSite Save Form screen defaults to the appropriate directory.

You must name your file with the .XML file extension. More information will be provided later in the course on Best Practices for File Management. Be sure to use appropriate naming conventions as described in these Best Practices.

26

Page 33: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 3: Managing Chunks

You must now Submit the XML file or keep it as a Work in Progress. You must Submit it before using CMA to Associate it with a Portal page.

27

Name must include the .XML file extension.

Page 34: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 3: Managing Chunks

Accessing CMANew content chunks must be moved to production using CMA. To access CMA, click the link on the Standard ContentCenter home page in the Work in Progress pane.

Tip:

If you work with multiple Workareas, you must select a Portalized Workarea in the Workareas pull-down menu. Otherwise, you will receive an error saying “You Are Not Authorized.” This does not necessarily mean your user account is not authorized – it may mean you selected a non-portalized Workarea.

The TeamSite Tasks Pane

Once you have generated and previewed items in CMA, you have the option of approving, editing or rejecting your changes within TeamSite by clicking on the Task item in the Tasks Pane. You will then be presented with the following screen.

28

CMA link

Click on an item in the Tasks Pane.

Page 35: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 3: Managing Chunks

Click on the Approve button to allow the content to be deployed to production. If the content requires editing, you can click the Edit button. The items will remain in CMA, but will not be deployed to production. If you return to CMA and click “Refresh List”, all items will be returned to your pending list. If you wish to reject the content, click the Reject button. The items will then be removed from CMA.

In all cases (Approve, Edit, or Reject), an email will be sent indicating what you selected.

Once you click one of the three buttons, the Task will be removed from the TeamSite Tasks Pane.

29

Page 36: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 3: Managing Chunks

Editing Chunks

The Process for Edited Chunks

To edit a Chunk, simply use the File Browser to navigate to the directory where the Chunk is stored. As a reminder, Chunk data is stored in the following directory: {Workarea}\templatedata\{Workarea}_templates\{templatetype}\data

Once you have edited your content, save the file. This time when you Submit, however, you should select the option to Submit and Generate to move your changes to production.

Deleting ChunksTo delete a Chunk, use the File Browser to navigate to your Chunk’s data folder. You can then use the File Action Menu to delete the XML file.

Note:

Deleting the XML file does not remove the HTML file from the Portal site. You must use the CMA application to disassociate the Chunk from the Portal site.

30

1. Chunk is edited with

VisualFormat

2. Chunk is saved in same XML file in

TeamSite

3. Chunk is Submitted with Generate option. Modified content is now published.

Page 37: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 4: Managing Files

MANAGING FILES

31

Top

ic 4 Topic Objectives:

List the Mass.Gov Best Practices for File Management Import files for use in Chunks Submit files to production Use the File Action Menu to perform file operations Edit files directly on the TeamSite server

Page 38: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 4: Managing Files

Best Practices for File Management

Mass.Gov has created the following guidelines for working with files in the TeamSite file system. Although most of them are strong recommendations, the one in bold print is required due to technical specifications on the Portal.

Think about file names and directories at creation time

Use directories to group like files, images, or documents together

Use all lowercase characters

Don't use spaces or non alpha-numeric characters

Use brief, logical and meaningful names - this makes it easier for site maintainers

Use whole words or common abbreviations

Use underscores or dashes (no spaces) to separate two word filenames

Create site-wide file naming conventions

Create a process for site file maintenance and ongoing file cleanup

Importing Files If your Chunk content will contain images or links to audio, streaming video, or other downloadable files, you must import those files onto the TeamSite server.

You can start the import process from two places: the Work in Progress pane on the Standard ContentCenter home page, or from the File Browser.

Note:

If you use the Import link from the Work in Progress pane, you must use the pull-down menu to select the appropriate Workarea into which you want to import files. This only applies to users who can access multiple Workareas.

There are three simple steps to importing files once you click the Import link from Work in Progress or the Import Files link from the File Browser:

1. Select the files to import

2. Choose the appropriate folder where the imported files should be stored

3. Submit the files, or keep them as Work in Progress

32

Page 39: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 4: Managing Files

Selecting Files to ImportUse the navigation at the top of the Import screen to locate the local directory where the files are stored. This “local” directory can be your computer’s hard disk or a network server at your agency. It’s called “local” because it’s a file system that is part of your agency’s computer systems, and not part of the TeamSite file system.

Once you choose an appropriate local directory, the files you can import will appear in the list. Select one or more files and click the Add button.

You can use CTL-click or SHIFT-click to select multiple files the same way you can with other Windows applications.

33

Page 40: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 4: Managing Files

Tip:

Once you have selected all your files, click the Import button.

Choosing an Appropriate LocationUnless you clicked Import Files from a specific folder in the File Browser, the default folder will be the root of your Workarea. From the Best Practices discussion, you know it’s best to create folders for your files, so you will want to navigate to the appropriate folder. If you clicked Import Files from the appropriate folder in the File Browser, that will be the default folder.

Click the Browse button to navigate your Workarea and choose the appropriate location.

34

Page 41: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 4: Managing Files

Tip:

Use the .[Current Folder] selection to choose the current folder.

Submit or Keep as Work in ProgressOnce you have selected the appropriate location, use the pull-down menu to select Submit or Keep as Work in Progress.

Finally, click the Next button at the bottom of the page.

If you decided to Submit your files, you will be prompted to provide a description of your changes. Enter a brief, but informative explanation (such as “Updated phone roster”) and click the Run Job button.

If you chose to Keep as Work in Progress, you will not encounter this step. Instead, you will see the file(s) listed in your Work in Progress pane. They will be shown as Modified and Locked. If you do not plan to work on the files immediately, you may wish to unlock them so another TeamSite user can work on them.

In either case, your files are now imported.

35

Page 42: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 4: Managing Files

Submitting FilesIf you have completed work on a file in your Work in Progress pane, you must Submit it to production. You can do this in one of several ways:

Submit one file. Do this via the File Action Menu that corresponds to the file. This can be found in the Work in Progress pane, in the File Browser, or in My Favorites.

Submit multiple files. Do this via the Submit button that appears in the Work in Progress pane or in the File Browser.

The File Action MenuThe File Action Menu provides basic file operations. You can only perform these operations on one file at a time.

Undo Changes – allows you to undo the most recent change to a file.

Unlock – make the file available for other users to edit.

Edit – to be discussed below; allows you to edit files directly on the TeamSite server.

Preview – does not work with XML files, but can be used to view some other file types such as HTML. This is not typically used in the Portalized environment. Instead, CMA is used to preview site content.

Submit – allows you to Submit a single file.

Copy/Move/Delete/Rename – basic file operations that apply only to the file on the TeamSite server.

Properties – allows you to view file metadata, such as date created, version, etc.

Versions – allows you to see all versions of the file and revert back to previous versions if desired.

Unzip – if you run this on a ZIP file that is stored on the TeamSite server, it will unzip the files into the current directory for you.

View Differences – allows you to visually compare an HTML page to the one on the production server.

Editing Files Directly on TeamSiteMost of the time you will create files locally and then import them into TeamSite to be included in your Chunk content. You may, however, choose to edit files that already exist on the TeamSite file system.

36

Page 43: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 4: Managing Files

To edit a file, you can:

Click the Edit button next to the file in the Work in Progress pane, in the My Favorites pane, or in the File Browser, or

Choose the Edit option from the File Action Menu

Note:

This only applies to non-XML files, such as HTML, DOC, PDF or other files. If you click Edit on an XML chunk file, it will open VisualFormat.

About IWTEMPWhen you choose to edit a file, the TeamSite Local File Manager will copy the file to your IWTEMP directory and open your local editor. Once you save the file and close the editor application, the file will be automatically copied back to the TeamSite server and removed from your IWTEMP directory.

Local EditorsYour “local editor” is the application that runs on your computer to edit a file from the TeamSite server. By default, TeamSite Local File Manager launches the application that is associated with the file type in Windows. For example, if Windows has associated the .DOC file type to MS Word, TeamSite will launch MS Word as your local editor if you click Edit on a TeamSite file with a .DOC extension.

You can change the local editor TeamSite will launch by connecting to the following URL:

http://work.mass.gov/iw-cc/localfilemgrsetup

This will open up a window to configure your Local File Browser, as follows:

Click on the File Types tab to configure your local editor.

37

Click here to modify your local editor

Page 44: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 4: Managing Files

When you click the Add button, you will be prompted with this window:

At a minimum, you must specify the File Extension (e.g. “.DOC” without the quotes) and the Command Line. The Command Line is the full local path to the executable file that you want to open the file. It is usually followed by a “%1” (again without the quotes). So, for example, to configure WordPad for files with a .DOC extension, your Command Line would be:

"C:\Program Files\Windows NT\Accessories\wordpad.exe" %1

In this example, the double-quotes are required because there are spaces in the path.

Your network administrator may be able to help you set this up if you have difficulty finding program executable files.

38

Page 45: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Topic 4: Managing Files

This page intentionally left blank

39

Page 46: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

APPENDIX ‘A’ – VISUALFORMAT

VisualFormat is a basic visual HTML editor. The HTML Paragraph contains the actual content that makes up the center area of each terminal content page. This section explains how to use the tool for creating and editing content. For more information on writing for the web, please reference the Mass.Gov Editorial Style Guidelines.

You may type directly into the HTML Paragraph window or paste text from an existing document. While VisualFormat provides an interface and functionality similar to a word processor such as Word, It is important, however, that you preview all content before deploying to production.

While knowledge of HTML is not required for using the visual editor, it can be helpful for more advanced editing and formatting.

40

Page 47: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

The Difference Between ‘Enter’ and ‘Shift+Enter’Use of Enter and Shift+Enter have different effects on the formatting and display of text.

Pressing the Enter key closes the paragraph and inserts a double line space before the start of a new paragraph. Each time you use the Enter key, you create a new paragraph, and therefore a new formatting block. Everything within the paragraph will be treated the same as far as headings and alignment (left, right, center) until the next time you press enter.

Pressing Shift+Enter simply places a single-space line break into your text, but does not start a new paragraph or formatting block. Any heading or alignment applied to the line above will also apply to the new line.

It is critical to carefully review line spacing and formatting before submitting any edited files to production to ensure correct display of text.

Formatting such as bold, italics, or font size can be done on a word-by-word basis and will not be affected by use of Enter or Shift+Enter.

Fonts and Special CharactersThe look and feel of the portal is controlled by style sheets and handled by the Content Display Application (CDA). The style sheets control the color, size and type of font for each module. Because font is controlled by the style sheet, you should not use font settings in the visual editor. Font weights should be assigned by using heading styles in the Visual Format editor; this helps in many ways to separate content from presentation and also helps with search engine optimization.

Pasting Text from Documents and Other File FormatsAuthors should take special care when pasting text from word processing programs. Because these programs and the visual editor use slightly different formatting, pasting directly from your word processor can result in formatting irregularities. The majority of these will be removed by the Clean HTML function (see below).

Before pasting anything from a document, it is a good idea to format text as Arial 10 point.

41

Page 48: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

Once text is in VisualFormat, you can reformat it using the toolbar buttons and dropdown menus

Use bold, and italics to emphasize text.

Underline should not be used, as underlined text is often confused with hyperlinks.

Cleaning HTMLIf you decide to paste text directly from a document into the visual editor, it is highly recommended that you first remove any formatting, such as italics, font colors, or background shading before copying and pasting.

Often when pasting text directly from a document, you will be prompted to “Clean HTML now”.

▪ If prompted, click “yes”▪ If not prompted, it is a best practice to right-click on the text, and select “Clean HTML”▪ The Clean HTML function also runs each time the file is closed.

Cleaning will remove the majority of unwanted tags from the HTML, which are typically program specific, including certain styles and parameters unnecessary for general HTML display. Cleaning will also remove font tags and a majority of special characters, such as smart-quotes. If you find that font tags were not removed, you may need to go to the HTML view to manually remove them (<font> </font>).

42

Page 49: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

Applying Headings to TextTo allow a greater variety in font styles, you may use the “heading” dropdown to select a heading style for your text. Headings are also controlled by the style sheet. A word of warning: for the time being, the style sheet applied to the Model 1 and Model 2 portal sites is not the same as that applied to the visual editor itself – text will therefore look different in the visual editor window than it does in preview mode and the production site.

Heading styles assigned by Mass.Gov are as follows:▪ Heading 1 <h1> - Arial, 18px, bold, uppercase▪ Heading 2 <h2> - Arial, 16px, bold▪ Heading 3 <h3> - Arial, 16px▪ Heading 4 <h4> - Arial, 14px, bold▪ Heading 5 <h5> - Arial, 14px, italic, bold

To change the style of text, highlight text you would like to format and select the appropriate heading from the dropdown menu.

If any of the text before or after your selection is also changed to the heading format, make sure there are hard returns (Enter) both before and after the selection.

If you have pressed Shift+Enter, which inserts a line break, text on the new line will continue to be within the same formatting block and to have the same heading format as applied to the text directly above it.

If you find that you are unable to reformat certain text, it may be that heading or style tags from your document were maintained after pasting the text from the document into VisualFormat. If this is the case, you can remove style tags by highlighting the text in question, and choosing “normal” from the style dropdown on the toolbar.

43

Page 50: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

Aligning TextTo apply special alignment to a section of text, do the following:

Within the VisualFormat window, highlight the text you would like to align.

Click the appropriate toolbar button to left, right or center align the text.

If any of the text around your selection is also changed to this alignment format, make sure there are hard returns (Enter) both before and after the selection.

If you have pressed Shift+Enter, which inserts a line break, text on the new line will continue to have the same alignment as the text above, until you press Enter, and re-align the new paragraph.

Creating a bulleted or numbered listEntering Lists DirectlyWhen typing lists directly into VisualFormat, you may do one of two things:

1. Type each list item, hitting Enter at the end of each line (these items will appear double-spaced until bulleted/numbered)▪ When all items have been entered, highlight all text of the list, from the first to the last item▪ Click either the bullet or number icon on the toolbar (the list items will now appear as a single-spaced

bulleted/numbered list)

2. As an alternative, you may hit Enter at the end of your final paragraph before the list, and then click the bullet or number icon on the toolbar.▪ A bullet/number is entered for the first item on the list. ▪ Type in that item and hit Enter to add another item to the list. ▪ When you are finished, hit Enter twice, or hit Enter and then Backspace to return to normal text.

Note: Using Shift+Enter in a list will add a new line to the current list item, but will not add a new list item (new bullet or number). To leave a blank line between items in a list, hit Shift+Enter twice – this will appear as two blank lines in the editor, but as only one on the live site.

44

Page 51: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

Copying Lists from DocumentsThe visual editor will retain bulleted or numbered lists pasted in from your documents, and convert them to the VisualFormat standard:

Solid round bullets for level 1 Circle (hollow) bullets for level 2

Note that visual editor standard described above is not what you will see in preview and production. In these places, the Mass.Gov style sheet determines bullet display. However, it is important in the visual editor that no special bullet formatting be present.

If you paste a list from a document which has square, or some other form of bullets, highlight the entire list, and click the bullet toolbar button twice to (1) un-bullet the list, and (2) re-bullet the list with the standard bullets.

Please note that sometimes when pasting a list from a document into the editor, the bullets will not be maintained – always verify that your list is formatted correctly.

45

Page 52: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

Creating HyperlinksCreating an E-mail LinkUse the following steps to create an email link:

▪ Select the text you wish to make into an email link▪ Click the E-mail link button ▪ Type in the desired email address and click “Link”

Creating a Hyperlink to an Internal or External WebpageUse the following steps to create a hyperlink:

▪ Select the text you wish to make into a hyperlink▪ Click the Hyperlink button▪ Copy Internal/External URL and paste that into the hyperlink dialog box (do not

use the “Browse” button on the Add Hyperlink dialog box – this is only used for linking to documents)

▪ Select “new window” or “same window” (recommended unless you have a business reason for the link to open in a new window) (see left)

▪ Click “Link”

Internal URL: A portal page is any web page with an address beginning with http://www.mass.gov/portal...,including all pages on your portalized site, as well as other portalized agencies, and

Mass.Gov. ▪ Portal page URLs: use an abbreviated URL, starting from “/portal/index.jsp” to the end of the URL

External URL: External websites are all sites outside the portal, including non-portalized agency sites.

▪ External page URLs: use the entire URL, including the “http://”▪ Use this method to link to PDFs or other downloads on external sites

NOTE: Within a content chunk, a known bug in the VFE Visual Format Editor prevents ordinary hyperlinking of words with an apostrophe (e.g., Economic Development’s legislative agenda). Trying to do so will result in the tool deleting the apostrophe and everything to the right of it. The recommended workaround is to right-click on the text and use the hyperlink item on the menu.

46

Insert E-mail link

Insert Hyperlink

Remove Hyperlink

Insert E-mail link

Insert Hyperlink

Remove Hyperlink

New Window vs. Same WindowAccording to the Mass.Gov standard, all links should open in the same window.

Page 53: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

Linking to Files for Download (Word, PDF, etc.) from Your Site ▪ Select the text you wish to make into a link▪ Click the Hyperlink button▪ Click the Browse button (file must reside in your workarea) on the dialog box and browse through:

site name > docs > ▪ Select the document of choice▪ Select “same window” and click “Link”

Additional Hyperlink Link Notes To Remove a hyperlink – Highlight the hyperlinked text and click the “Remove Link” button To make an image clickable, right-click the image and choose the hyperlink option (do not use the Insert Hyperlink

button on the toolbar). To modify a hyperlink, highlight the hyperlinked text, right-click and choose the hyperlink option.

47

Page 54: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

Working with TablesCreating a TablePlace the cursor where you want the table to begin, click the table button ( ) then click Insert Table from the menu. When you do, the Insert Table dialog box appears.

Choose the table attributes:

Size: Rows, Columns – The number of rows and columns in the table – after

the initial creation of the table, additional rows/columns can no longer be added through this dialogue box, but must be inserted individually by right-clicking.

Layout: Width – can be used to specify a fixed table width either in pixels

(max. 420), or in percentage of the center area of a given page – it is best to use percent, as this adjusts to match the user’s screen.

Horizontal Alignment – specifies the table’s alignment across the web page (left, right or center)

Borders: Use Default Color – will assign the default color (gray) to table borders Border Color – allows you to assign a color other than the default to

your table borders Border Size – designates the size of the table border in pixels – a

border of size 0 will be visible in VisualFormat for editing purposes, but will have no visible border to the end user, and is common when tables are used for arranging information on a web page.

Cell Padding – the space (in pixels) between the cell text and a cell’s border Cell Spacing – the space (in pixels) between a cell and surrounding cells

Background Color and Image may also be specified for a table. For the sake of readability and consistency with the portal, it’s best to limit the use of colors and images.

48

NOTE: You can adjust table properties by right-clicking on an existing table and clicking on Table Properties

Page 55: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

Deleting a Table Move the cursor over the table until it becomes a four-headed arrow. Left-click one time – the table becomes selected (small squares appear

around it). Press <Delete> or <Backspace>

Using Nested TablesA nested table is a table within a table, and allows for more complex formatting and page layout.

HTML does not let you use tabs or spaces to align text within cells or columns, such as in the case where you want two columns of text within one cell. You can, however, align multiple columns of text within cells by inserting an additional table within a table cell.

To insert a nested table:1. Place the cursor in the cell into which

you want to insert a table.2. Click the Insert Table button ( ).3. Click Insert Table from the menu.4. The Insert Table dialog box appears.5. Edit the fields in the dialog box as

described on the previous page. Then, click OK.

Note on Nested Tables and Performance: It is important to note that nested tables may significantly slow the speed at which pages load to an end user’s machine. Use nested tables sparingly, and avoid nesting deeper than 2 levels.

49

Sample nested table within a table cell

Page 56: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

50

Page 57: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

Editing Cell PropertiesOpening the Cell Properties Dialog Box

• Put the cursor in the cell you would like to format• Right-click and select Cell Properties

Choose the cell attributes:Span

• Rows Spanned – allows you to span multiple rows with a single cell – much like merging cells vertically

• Columns Spanned – allows you to span two or more columns with a single cell – much like merging cells horizontally

Layout• Width – designates the width of

cells in this column in pixels or as a percentage of the table width

• Word Wrap – default is checked and determines whether text

automatically moves down to the next line when it reaches the specified width of a cell• Horizontal Alignment – sets the alignment of data across a cell• Vertical Alignment – sets the alignment of data up and down within a cell

Background Color – can be set to distinguish background of a single cell from that of the whole table

Borders (use colors sparingly, and always inline with the Mass.Gov color palette)• Use Default Color – applies the table border color to this cell border• Border Color – applies a color other than the table border color to this cell border

When to Paste Tables from Documents

51

Note: Using Rows/Columns Spanned to merge cells will push neighboring cells over (above left) –these “pushed” cells will need to be deleted by right-clicking on the unwanted cell(s) and clicking on “Delete Cells” from the menu, resulting in a cleaned up table with merged cells (above right)See the following page for alternative formatting options using Word.

Spanning Rows/Columns

Note: Using Rows/Columns Spanned to merge cells will push neighboring cells over (above left) –these “pushed” cells will need to be deleted by right-clicking on the unwanted cell(s) and clicking on “Delete Cells” from the menu, resulting in a cleaned up table with merged cells (above right)See the following page for alternative formatting options using Word.

Spanning Rows/Columns

Page 58: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

If you are creating a simple table, it is best to create the table directly in the visual editor. However, there are some circumstances under which you may wish to first create the table and apply formatting in your word processor, and then paste it into the visual editor.

Some examples include:

The table is large (has several rows/columns)

The table requires complex formatting (varying font formatting styles by row or column, merged cells, etc.)

You are unsure of the final number of rows/columns when you start creating/entering data

The table already exists in a document

Copying and Pasting a Table from a Document Before copying the table from a word processor, we recommend that you remove any unnecessary formatting, such as

font colors or background colors.

Select the table and copy it. Place the cursor where you want the table to appear in the VisualFormat window and paste.

Font formatting will be preserved on a cell-by-cell basis when pasted from a word processing program into VisualFormat, as will simple cell background colors.

You may still need to make some formatting adjustments. In the example above, note the table’s width has been adjusted to fit the editor window (if you choose to specify, table width should not exceed 500 pixels or 100%).

52

The table to the left was created and formatted in Microsoft Word. Note the various font formats and merged cells. Below is the same table pasted into eWebEditPro.

Table in MS Word Table in eWebEditPro

The table to the left was created and formatted in Microsoft Word. Note the various font formats and merged cells. Below is the same table pasted into eWebEditPro.

Table in MS Word Table in eWebEditPro

The table to the left was created and formatted in Microsoft Word. Note the various font formats and merged cells. Below is the same table pasted into eWebEditPro.

Table in MS Word Table in eWebEditProTable in MS Word Table in eWebEditPro

Page 59: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

After pasting the table into VisualFormat, you may then select it, right-click, and choose “Table Properties” or “Cell Properties” to further specify formatting characteristics.

53

Page 60: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

Adding an Image to a Content Chunk

To add an image to your chunk, the image must exist in TeamSite – see section 6 for guidance on uploading images. The display width of a typical terminal content or utility page is 500 pixels, so ensure images are no wider than this. Should an image require resizing or formatting, it must be done in a graphic tool such as Adobe Photoshop.

To add an image to your text:▪ Place the cursor where you want the image to appear, click the “insert picture” button ( ) from the toolbar▪ Click “Select New File” on the Picture Properties dialog box and browse through: site name > images▪ Select the image you would like to insert▪ Click OK

Setting Image AttributesNow you can set properties for the image (you may also edit these properties by right-clicking on an image and selecting “Picture”)

Layout▪ Width and Height fields will set the size your

image will appear on the web page – setting this manually may distort your image. Instead click the Preview button on the right to automatically populate these fields

▪ Border Thickness – specifies width of a border to appear around your image in pixels – its color will be black – parameter typically set to 0 (no border)

▪ Alignment specifies how the picture will be aligned within the page or table cell – always test alignment in Epicentric before publishing.

▪ Spacing – designates how many character spaces will be between the image and any neighboring text or other images. Appears as white space.

▪ Title – fills in the “alt” parameter, or alternative text – this is what an end user will see in place of the image if using assistive technologies – this field is required under Mass.Gov’s accessibility guidelines: http://www.state.ma.us/itd/spg/publications/standards/web-access-std.htm. There is currently a bug in the editor that authors must

54

Enter brief description of image here (required)

Clicking the preview button will automatically populate the Width & Height fields to the left

Spacing determines how close surrounding text is to the image

Select New File button allows you to browse for the image you would like to insert

Enter brief description of image here (required)

Clicking the preview button will automatically populate the Width & Height fields to the left

Spacing determines how close surrounding text is to the image

Select New File button allows you to browse for the image you would like to insert

Page 61: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

be aware of: if you have more than one picture with alt text, adding alt text to a later image seems to overwrite the alt text for a previous image. Be aware that you may need to re-enter the original alt text.

When you are finished, click “OK” – a placeholder for your image will appear in the VisualFormat window. If you find that picture placement on your page is difficult to maneuver, try placing the picture within a table. You can resize the columns to align the picture accordingly, and add text to the neighboring cells. Be sure that your image is sized properly to fit within the table cell to avoid distortion.

55

Page 62: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

APPENDIX ‘B’ - LAB EXERCISES

INTRODUCTIONTo maximize your training experience we will not use a “presentation – lab” format in this class. Instead, the entire class will be comprised of hands-on activities led by the instructor. This method will enable you to continuously learn by doing. To accomplish this only the lab objectives are presented in writing, while the step-by-step instructions will be provided throughout the class.

TOPIC 1 – INTRODUCING TEAMSITE1-1: Understanding the Two Model TypesIn this lab, we will view a Topic-based portal site and a Constituent-based portal site to see the difference between them.

TOPIC 2 – NAVIGATING TEAMSITE2-1: Logging In to TeamSiteIn this exercise, you will be assigned a login/password to use for the training environment. You will then use those credentials to log into TeamSite.

2-2: Changing Your Browser SettingsWe will open the Internet Explorer security settings and ensure they are set correctly.

2-3: Navigating TeamSiteYou will become familiar with each of the TeamSite panes by locating each of them as we discuss them, and viewing the items contained in each one. You will also customize your My Workareas pane and learn how to set pagination to manage long lists.

2-4: Using the File BrowserThe basic concepts of the File Browser will be explored by navigating through your Workarea.

TOPIC 3 – MANAGING CHUNKS

3-1: Creating a New ChunkIn this exercise, you will use Visual Format to create and save a new chunk. Here, you will learn how to run the VisualFormat installer and you will become familiar with the basic functionality of the VisualFormat editor as well. You will use the chunk content you create here later in the CMA course (if you are registered to attend it.)

3-2: Managing ChunksYou will learn how to edit and delete chunks in this lab.

56

Page 63: Teamsite New User Training Port Ali Zed

TeamSite 6 New User Training – Portalized/CMA Appendix

TOPIC 4 – MANAGING FILES

4-1: Importing FilesIn this exercise, you will import the MS Word and graphics files required by the chunk you created earlier. You will learn how to install the Local File Manager. Submitting files and managing Work In Progress files will also be covered.

4-2: Submitting Work In Progress FilesThis lab will demonstrate how to Submit files that are currently Work In Progress. Submitting a single file is covered, as well as submitting multiple files.

4-3: The File Action MenuThe most common tasks performed with the File Action Menu are covered in this exercise.

4-4: Editing Files Directly on TeamSiteThis lab will teach you how to edit a file directly from the TeamSite server, as well as how to configure your local editor for selected file types.

57