Novell Cool Solutions

Basic Landing Page Customization in Novell Teaming



By:

May 13, 2010 4:12 pm

Reads:4,579

Comments:0

Score:Unrated

Print/PDF

We have received many requests to release some articles about customizing landing pages. This article was created in response to these requests. It is meant to be a very basic workshop that provides you with the essentials of customizing landing pages. It is also intended to be a hands-on experience, so make sure to download the images and documents that you need to use while you go through the tutorial. When you finish, you will have created the following landing page:

Basic_Landing_Page_Article_24_0.png

Step One: Creating the Landing Page

1. Using the navigation bar, navigate to the workspace where you want to create a landing page.

2. On the main menu bar, click Manage > Add New Workspace.

Basic_Landing_Page_Article_1_0.png

3. Type a title for the workspace. For this tutorial, use “Teaming Library.”

4. Select Landing Page in the Workspace section.

Basic_Landing_Page_Article_2_0.png

5. In the Workspace Folders section, select Blog, File Folder, and Task Folder. When you are creating your own landing pages, you can add any folders. However, for this example, just use the three folders as outlined.

Basic_Landing_Page_Article_3_0.png

6. Click OK.

7. Click Manage > Add New Folder.

Basic_Landing_Page_Article_3.5_0.png

8. Type a title for the workspace. For this tutorial, use “Company News Blog.”

9. Select Blog in the Folder section, then click OK.

10. Repeat Steps 8 and 9 two more times to create folders named “Work Questions Blog” and “Idea Generation Blog.”

11. Navigate to the task folder in the new workspace. Click Manage > Modify This Workspace. Replace the current title with “Teaming Library Tasks.” Click OK.

12. Navigate to the file folder in the new workspace. Click Manage > Modify This Workspace. Replace the current title with “Teaming Library Files.” Click OK.

Step Two: Preparing to Add Content to the Landing Page

1. On the main menu bar, click Manage > Modify This Workspace.

Basic_Landing_Page_Article_5_0.png

2. In the Landing Page Layout section, select Hide the Masthead, Hide the Main Menu Bar, Hide the Footer, and Show Navigation Breadcrumbs.

3. Click OK.

Step Three: Adding Content

1. Select Table and drag and drop it onto the workspace layout area.

Basic_Landing_Page_Article_6_0.png

2. After you drop the table onto the workspace layout area, a table properties window appears. Select Show Border, set the number of columns to be 1, the column 1 width to 100, and click OK.

Basic_Landing_Page_Article_7_0.png

3. Select Table and drag and drop it onto the table you just created. Make sure the inside of the table you created is highlighted. The landing page editor visually shows you where the item you have selected will be placed by highlighting the area.

Basic_Landing_Page_Article_8_0.png

4. After you drop the table onto the workspace layout area, a table properties window will appears. Select Show Border, set the number of columns to be 1, the column 1 width to 100, and click OK.

Basic_Landing_Page_Article_7_0.png

5. Select Table and drag and drop it onto the first table you created, underneath the second table.

Basic_Landing_Page_Article_9_0.png

6. After you drop the table onto the workspace layout area, a table properties window appears. Select Show Border, set the number of columns to be 5, set columns 1, 3, and 5 to have a width of 26, and set columns 2 and 4 to have a width of 10. Click OK.

Basic_Landing_Page_Article_10_0.png

7. Click OK.

Step Four – Creating a Picture That Acts as a Permalink

1. Navigate to the blog in the workspace. Blogs are a great way to add content to landing pages, and they are basic building block of how we build landing pages in the Teaming Library.

2. Click Add Blog Entry.

Basic_Landing_Page_Article_11_0.png

3. For the title, type “Introduction,” then click within the text editor area.

4. Click the Insert/Edit Image icon.

Basic_Landing_Page_Article_12_0.png

5. Click Browse to upload an image. Find the image named Introduction.png (you should have downloaded this image at the beginning of this tutorial), select the image, then click Open. The image should load in the preview area. Click Insert and another window opens. Click OK.

Basic_Landing_Page_Article_13_0.png

6. Click the image you just inserted. Click the Align Center icon and then click Insert/Edit Link image.

Basic_Landing_Page_Article_14_0.png

7. A window opens. In the Link URL box, type http://www.novell.com/teaming_library/. Click OK. This type of link is called a permalink. It is the only link that can be used with images in Novell Teaming. It is important to remember that when you export and then import a workspace that contains permalinks, the permalinks do not export or import; they need to be added again after a workspace is imported.

Basic_Landing_Page_Article_15_0.png

Step Five: Creating a Table with Icons and Relative Links

1. Click Add Blog Entry.

2. For the title, type “Team Links,” then click within the text editor area.

3. Click the Insert New Table icon.

Basic_Landing_Page_Article_16_0.png

4. In the window that opens, set the columns to 2 and the rows to 3. Click Insert.

Basic_Landing_Page_Article_17_0.png

5. Click the top left box in the table. Click the Insert/Edit Image icon. Click Browse. Select the picture named Image 1.png that you downloaded at the beginning of this tutorial. Click Insert, then click OK.

6. Repeat Step 5 for the left middle and left bottom cells, using Image 2.png and Image 3.png. When you finish inserting the images, the table should like like this:

Basic_Landing_Page_Article_18_0.png

7. Click the top right cell, then click the Insert a Link to Another Teaming Page icon. Click Change,and in the text box that opens, type “Company News Blog.” Text should appear underneath the text box. Click Company News Blog that appears underneath the text box. In the remaining text box, type “Company News Blog.” Click Insert.

8. Repeat Step 7 for the middle right and bottom right cells, using the titles “Work Questions Blog” and “Idea Blog.” The links that you create by using the Insert a Link to Another Teaming Page icon are relative links and are not broken when you export and then import workspaces. However, relative links cannot link to pages outside of Teaming.

Basic_Landing_Page_Article_19_0.png

9. Click OK.

Step Six: Utilizing the Task Folder

1. Navigate to the Task Folder and click Add Task Entry.

2. For the title of the task, type “Project.” In the Description Box, type “This is the description of Project.”

3. Click OK. You can change the times and dates of when the task begins and ends and also to whom the task is assigned, but for the purposes of this example, just use a title and description.

4. Repeat Steps 1 through 3. Use “Assignment” and “Task” for the names of two other tasks.

Basic_Landing_Page_Article_20_0.png

Step Seven: Adding Files for Teams to Use

1. Navigate to the File Folder and click Add File Entry.

2. In the text box for the title, type “Information File.txt.”

3. Click Browse. Find the file named Information File.txt that you downloaded with the other images at the beginning of the tutorial. Select the file, then click Open.

4. Click OK.

5. Repeat Steps two through four for the two files named Company Statistics.txt and Company Part.txt.

Step Eight: Adding Content to the Landing Page

1. Navigate to the Teaming Library Workspace.

2. On the main menu bar, click Manage > Modify This Workspace.

3. Select Entry and drag it onto the single-column table. In the text box, type “Introduction” and click the entry named Introduction that appears underneath the text box. Click OK.

Basic_Landing_Page_Article_21_0.png

4. Select Entry and drag it into the fifth cell in the five-column table.

Basic_Landing_Page_Article_22_0.png

5. In the text box, type “Team Links” and click the entry named Introduction that appears underneath the text box. Select Show the Title Bar, then click OK.

6. Select Folder and drag it into the third cell in the five-column table. In the text box, type “Teaming Library Tasks” and click the folder named “Teaming Library Tasks” that appears underneath.

7. Set the number of entries to three. Select Show the Title Bar and Show Entries Open. Click OK.

8. Select Folder and drag it into the third cell in the five-column table. In the text box, type “Teaming Library Files” and click on the folder named “Teaming Library File” that appears underneath.

9. Set number of entries to three. Select Show the Title Bar and Show Entries Open. Click OK. At this point, your landing page editor should look like this:

Basic_Landing_Page_Article_23_0.png

10. Click OK. Your landing page, with the sidebar hidden, now looks like this:

Basic_Landing_Page_Article_24_0.png

Conclusion:

Congratulations! You have just created a fully functional landing page. It’s not exactly pretty, but this example teaches a lot of basics about how to put landing pages together. To see some examples of landing pages that are currently being used, visit our article about the new landing page editor in Teaming 2.1. Also, make sure to visit us at the Teaming Library often because we are working hard on a lot of more material that we are releasing more regularly.

-Teaming Library

0 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 5 (0 votes, average: 0.00 out of 5)
You need to be a registered member to rate this post.
Loading...Loading...

Categories: Uncategorized

0

Disclaimer: This content is not supported by Novell. It was contributed by a community member and is published "as is." It seems to have worked for at least one person, and might work for you. But please be sure to test it thoroughly before using it in a production environment.

Comment

RSS