ST.Script.08.Create a free-form portfolio

User can create a free-form portfolio using portfolio layouts

CIG Participant

None

1

If currently logged in as CIG Coordinator, Log out

Log in as portfolio owner #1. In top-right corner of 'Welcome' page enter:
user id: 'mdora'
password: 'moreen'
Click 'Log in' button.

2

Select the Portfolio tab.

List of portfolio-type sites appears.

1

Click Portfolios or Design & Publish --> Portfolios (if a Portfolio-type site) button.

The 'Portfolio Manager' page is displayed

2

Click Add

The 'Add Portfolio' page is displayed.

3

Click Design your own portfolio to select.

4

Enter a title, description, an expiration date (if desired), check Allow comments, and click Continue

Step 2 of 3: Design screen is displayed.

5

Click Add Page

The page information area is displayed.

6

Enter a title, description, keywords, style (if preferred), choose a layout.

Once a layout is chosen the rich text editor is displayed below.

7

Enter content into the rich text editor, and click Add Page

The page is now listed and the 'Preview' button appears at the bottom of the screen.

8

Click Preview

Ensure that the page opens up in a new screen. Note: nothing can be added to the comments area in preview.

9

Close the preview page.

10

Click Finish

The portfolio list page re-appears with the new custom portfolio.

11

Check as another user in the site to ensure that the portfolio has not been published.

1

Download the following css file to your computer professional.css for use in this test. Also, download ODB_ST_Script_08_layoutfiles.zip, save to your computer and extract the files.

The layout files contained in the zip file will be used in the title layout page and the 2column layout page.

2

Clicking the Portfolios or Design & Publish --> Portfolios (if a Portfolio-type site) button.

The 'Portfolio Manager' page is displayed

3

Click the Add link

'Portfolio Setup' screen should appear

4

Click radio button next to Design your own portfolio
Click Continue

The 'Add Portfolio: Step 1 of 3: Begin' page is displayed.

5

Complete the form as follows:
Title: Free form portfolio 1
Description: This is a free form portfolio
Expires: Select a date in the future
Click Continue

'Add Portfolio - Step 2 of 3: Design' page should be displayed

6

Click Add Page link or image or button at the bottom of the page.

The 'Add Portfolio - Step 2 of 3: Design' form is displayed.

7

Enter the following in the 'Page Information' section:
Title Page 1
Description This is page one of the free-form portfolio
Keywords page one
Layout Click Select Layout

The 'Manage Portfolio Layouts' page is displayed.

8

Click Add to add a new portfolio layout

The 'Add Layout' page is displayed.

9

Enter the following:
Display Name title
Description This is the layout for the Title Page.

10

Choose the Select File link next to XHTML Layout File field

The Item selection helper appears. The title should be: Select Item.

11

Click Show other sites to view CIG Particant's resources area
Click Add
Browse to the files extracted in step 1 and select titlePage.xhtml.
Click Add

12

Choose the Finish button

The 'Create Layout' screen returns with the selected file displayed.

13

Choose the Select File link next to Preview Image

The Item selection helper appears. The title should be: Select Item.

14

If CIG participant's resources area is not already showing, click Show other sites to view CIG Particant's resources area
Click Add
Browse to the files extracted in step 1 and select titlePage.jpg.
Click Add

15

Choose the Finish button

The 'Create Layout' screen returns with the selected file displayed.

16

Choose the Add Layout button

The 'Portfolio Layout Manager' page should appear with a list of existing layouts and the new layout just added.

17

Click Select underneath the 'Title' layout to select it.

The 'Add Portfolio: Step 2 of 3: Design' form is displayed with the 'Title' layout listed.

18

Click Select Style to add a new style.

The 'Manage Styles' list page is displayed.

19

Click Add at the top of the screen to add a new style.

The 'Add Style' page is displayed.

20

Enter the following:
Name Professional Style
Description This is the professional stylesheet.
CSS File Click Select File

The 'Select Item' page from Resources area appears.

21

Click Show other sites

The CIG Participant's resources area appears at the bottom of the page.

22

Click Add new

23

Enter the following:
Add Item Type File Upload
Choose a file Browse for the professional.css file that you downloaded in step 1.
Click Add

The 'Select Item' page in Resources appears with the 'professional.css' file shown in 'Items to attach' area.

24

Click Finish

The 'Add Style' page is displayed with the 'professional.css' filename shown in 'CSS File' textbox.

25

Click Add Style

The 'Manage Styles' list page is displayed with the Professional Style listed.

26

Click Select underneath the 'Professional Style' listing.

The 'Add Portfolio - Step 2 of 3: Design' page is re-displayed, and the Professional style is now listed in the Style textbox.

27

Click Select Items to add files from Resources that will be used on Page 1.

The 'Select Item' page is displayed.

28

Select an item from Resources or click Show other sites to add a new file from the CIG Participants' Resources area.

29

Click Save Changes button at the bottom of the page.

30

Click Finish

The 'Manage Portfolios' list page is displayed, with the 'Free form portfolio now listed.

1

Click Add Page

'Revise Portfolio - Step 2 of 3: Design - Add Page' screen should be displayed.

2

Complete the form as follows:
Title Page 2
Description This is a Page 2
Keywords text
Layout Click Select Layout

The 'Portfolio Layout Manager' page is displayed.

3

Click Select underneath the 'Two Column' layout.

The free form portfolio build page re-appears with the 'Two Column' layout selected in the 'Layout' textbox.

4

Click Select Style next to Style
Click Select link underneath the Professional style

5

Click Add Page at the bottom of the screen

The 'Revise Portfolio - Step 2 of 3: Design' page reappears with Page 2 (and thumbnail) now listed.

6

Check the box next to Page Navigation to enable ability to display links for page navigation.

7

Click the link for Page 2

The rich-text editor should appear where you may add items to your free-form portfolio.

8

In the rich-text editor area, enter the following:
Page Two of Free-Form Portfolio in the text area
Page 2 Footer in the footer area
Click Add Row and type Column One in the left column
Click Add Row and type Column Two in the right column
Click Save Changes

The 'Portfolio Manager' page is displayed with list of portfolios that have been created.

9

Click Finish

The 'Manage Portfolios* list page re-appears with the 'Free-form portfolio 1' listed.

1

In 'Manage Portfolios', click Revise or Edit under 'Free form portfolio 1'

'Revise Portfolio - Step 1 of 3: Begin' screen should be displayed.

2

Click Continue

'Revise Portfolio - Step 2 of 3: Design' screen should be displayed.

3

Click Page 2

'Revise Portfolio: Step 2 of 3: Design' screen is displayed.

4

Click Select Items button located above the rich-text editor.

The 'Select Item' page from Resources is displayed.

5

Add two items from your computer to this portfolio using the file picker (Note: you may need to expand Show other sites to access the Add button.)
Click Finish

'Revise Portfolio - Step 2 of 3: Design' screen should be displayed. You can check if your items are listed by using the drop-down list box inside the rich-text editor to show the items you added via Resources. Also, if you checked the box for 'Page Navigation' earlier, you should also see Page 1 and Page 2 listed.

6

In the rich text area, select one of your added items from the dropdown menu and click the arrow to the right of the dropdown menu.

A hyperlink to your item should appear in the rich text area.

7

Click Save Changes

'Portfolio Manager' screen should appear.

8

Click Finish

The 'Manage Portfolios' list page is displayed.

9

From the 'Portfolio Manager' screen click View under 'Free form portfolio 1'

A new window should appear with a simple HTML rendering of the porfolio

10

Close the browser window.

You should now be back at the 'Manage Portfolios' screen.

1

In 'Manage Portfolios', click Revise or Edit under 'Free form portfolio 1'

'Revise Portfolio - Step 1 of 3: Begin' screen should be displayed.

2

Click Continue

'Revise Portfolio - Step 2 of 3: Design' page is displayed.

3

Click Page 1 to revise

The 'Revise Portfolio: Step 2 of 3: Design' is displayed with rich-text editor.

4

Click inside the textbox of the rich-text editor to whereever you would like to put the link to 'Page 2' and then use the listbox to select Page 2
Click the right arrow to move the link down to where the cursor is.

The link to 'Page 2' is now listed inside the textbox.

5

Click Save Changes

The 'Revise Portfolio - Step 2 of 3: Design' page re-appears.

6

Click Finish

'Manage Portfolios' screen is displayed.

7

From the Manage Portfolios screen click 'Free form portfolio 1' to view

A new window should appear with a simple HTML rendering of the presentation

8

Click the link to Page 2 to view it.

Page 2 is diplayed within the browser.

9

Perform steps 3 - 8 to add a reciprocating link on 'Page 2' to 'Page 1'

You should now be able to navigate between the two pages.

1

In 'Manage Portfolios', click Revise or Edit under 'Free form portfolio 1'

'Revise Portfolio Step 1 of 3: Begin' screen should be displayed.

2

Click Continue

'Revise Portfolio - Step 2 of 3: Design' screen should be displayed.

3

Click Page 2 to revise.

The 'Revise Portfolio - Step 2 of 3: Design' page appears with rich-text editor displayed.

4

Above the rich-text editor, click the Select Items button

'Select Item' page from Resources is displayed.

5

Click Select next to the form you created in ST.Script.02.Add a Form to be used in portfolio.
Click Finish

The form is added to list of Portfolio items.

6

In the rich text area, select the form you added from the dropdown menu and click the arrow to the right of the dropdown menu.

A hyperlink to your item should appear in the rich text area.

7

Click Save Changes

'Revise Portfolio - Step 2 of 3: Design' screen should appear.

8

Click Finish

The 'Manage Portfolios' page appears.

8

From the 'Manage Portfolios' screen click View under 'Free form portfolio 1'

A new window should appear with a simple HTML render of the portfolio

9

Click the Page 2 link to view 'Page 2'

'Page 2' appears.

10

Click the link to the form item to view it.

Form contents should be viewable within the browser.

1

In 'Portfolio Manager, click Edit under 'Free form portfolio 1'

'Portfolio Setup' screen should be displayed and display the information entered in step 2

2

Click Continue

'Page List' screen should be displayed.

3

Click New Page

'Page Creation' screen should be displayed.

4

Complete the form as follows:
Title Delete Me
Description a page to be deleted
Keywords leave blank
Layout Select Two Columns
User Defined Navigation Check the checkbox
Click Arrange Page

'Page Arrange' page should appear with a rich text area and two columns (in supported browsers)

5

Enter the text Delete me in the text area
Click Save and Return to list

'Page List' screen should be displayed with 'Delete Me' listed.

6

Click the Delete link under the 'Delete Me' page.

Page list screen should appear with the 'Delete Me' page gone.

1

In 'Manage Portfolios', click Revise or Edit under 'Free form portfolio 1'

'Portfolio Setup' screen should be displayed.

2

Click Continue

'Revise Portfolio - Step 1 of 3: Begin' page is displayed.

3

Next to Page 1, click the right arrow.

'Page 2' should now be displayed at the top of the page, and Page 1 should appear below Page 2.

4

Next to Page 1, click the left arrow.

'Page 1' should now be displayed at the top of the page, and Page 2 should appear below Page 1.

1

In 'Manage Portfolios', click Revise or Edit under 'Free form portfolio 1'

'Portfolio Setup' screen should be displayed.

2

Click Continue

'Page Creation' page is displayed.

3

Click Page 1 to revise its page properties.

The 'Revise Portfolio - Step 2 of 3: Design' page is displayed.

4

Click the down arrow in the gray header area titled 'Page Information' to show the page properties.

The page properties such as title, description, keywords and layout appear.

5

Make the following updates:
Title Page 1 Updated
Description This is Page 1 with updates.
Layout Choose Two Column
Click Save

Page 1 should now be saved with new title - 'Page 1 Updated', and displays as a Two Column format.

1

In 'Portfolio Manager', click Edit under 'Free form portfolio 1'.

'Portfolio Setup' screen should be displayed.

2

Click Continue.

'Page Creation' page is displayed.

3

Click Continue to move to the Publish Portfolio page.

The 'Publish Portfolio" page is displayed.

4

Under Worksite Users, click Add All.

All roles/users are in the right column.

5

Click Save

The 'Portfolio Manager' page is displayed, and user can view the portfolio that was saved by clicking 'View'.

1

In 'Portfolio Manager', click Edit under 'Free form portfolio 1'

'Page Creation' screen should be displayed .

2

Click Continue

'Page list' screen should be displayed .

3

Click the Properties link to the right of 'Page 2'

Page properties page should appear with old information filled out.

4

Change the title to Page 2a

'Page List' screen should be displayed with Page 2a listed where page 2 used to be.