Information Technology Web Services Serena Collage Web Editing Sam Frank (719) 255-4289 sfrank@uccs.edu
MENU / COMMAND / Tool DESCRIPTION / NOTES 1. Welcome to Serena: The Process Serena in Stages (overview) 1. The Web developer locates the assets (files). Depending on how the project manager has set up the project, contributors may locate the assets in a variety of ways. 2. The developer checks out the assets. The items are copied to a workfile location, and are locked in Collage so that no one else can change them. 3. The developer modifies and saves the files in an editor. If the file is an html or text based file it may open in the Collage contribution editor. This depends on whether Internal is set as your Content Editor preference for these types of documents. 4. The developer checks in the changed assets. The changed assets are saved in Collage as new versions. The assets are unlocked, and other team members can now check out and edit the assets. 5. When the developer is finished working on the file and it is ready to upload to the website, the developer must first approve the file, and then deploy the file to the website. 2. Use Mozilla Firefox to work with Serena Collage Serena is web based. Serena functions the best using Mozilla Firefox. You can download Firefox at http://www.firefox.com 3. Turn off the Pop-Up blocker in Mozilla Firefox From Firefox: 1. Click on tools on the top of the screen. 2. Click on Options 2
3. Click on Content 3. Un-Check Pop-up Blocker 4. Log into Serena Collage 3 Login to Serena Collage using your current NT Login and Password. http://sneezy1.uccs.edu/servlet/action/login.page Or http://www.uccs.edu/~webdept Click on Serena Login
5. Opening your Project Select your project All UCCS Websites click Open. 6. Getting Started Scroll Down the list to find your website. Click on the Name of your website to get access to the files. 7. Specifying an Editor to work with your files in-synch with Collage Serena Collage Works in sych with other web editing programs such as Dreamweaver, Frontpage or Notepad. To use your favorite editor, you must specify the editors program file name in Serena. Otherwise if you do not specify an editor, Serena has it s own built Editor. To specify an editor, click on preferences on the top right of Serena. (Fig A.) Click on Preferences (Fig B.) Click on Content Editors 4
Follow the steps on Fig A-E. (Fig C.) To configure for HTML document, click on HTML Document, set type for User Defined, and browse for the application such as Dreamweaver.exe in the example below. (Fig D.) Dreamweaver is the application chosen in this example. Click Apply to set Dreamweaver has the default application. (Fig E.) Dreamweaver Dreamweaver.exe is now set as the Default application. 5
8. All files in the website are called Assets. All the different assets combined are what drive the website. Here are a few examples of some different assets types. document1.pdf index.html style1.css movie.mov picture.jpg To open the assets, click on the file NAMES. The index.html, or index.htm is generally the first page (splash page) in your website. The master.html or other file that you designate as the master contains data that will appear in all of the websites that are associated with the file. The images folder is generally a folder that holds the images for your website. It s good practice to keep files that are the same type in folders, to keep the site neat and tidy. Other folders can be used as well such as pdffiles, Soundfiles, videofiles, etc 6
9. What are Shadow Assets? Collage Distinguishes shadow assets by displaying their names in italic: Shadow assets are placeholders for files that assets refer to or are dependent on, but don't yet exist in Collage. Collage examines HTML tags for any file references, and displays the referred files. For example, if you add a file to Collage that contains a link to a file called document.html which hasn't yet been added to Collage, document.html will appear as a shadow asset. 10. Resolving Shadow Assets You can convert a shadow asset to an actual asset in any of the following ways: 11. Navigating the Collage Client Serena Collage is divided by several tabbed views, each of which contains additional sub-views. Depending on your roles and permissions, you may only be able to log into a subset of the views in Collage. If the actual assets do not yet exist in Collage, upload the actual files. If the actual assets already exist in Collage, redirect the references to the actual assets. Redirect the references to any other asset in Collage. 12. Selecting Items In many views in Collage, assets appear in a list in the right pane of the window. 7
Select a single To asset, click the checkbox beside the icon. To Select multiple assets, you can click multiple checkboxs beside the icons. 13. Check out (open file) When you click on the file name of a files. Serena opens the file in your editor of choice. If no editor is specified, Serena will open the file in the built-in Internal editor. 14. Check in When the file is not checked out, no lock will appear, the file however must be checked out to work on it. 15. Approve Files This file has been edited and changed 5 times. Notice the 5 to the left of the approval icon. Click on the approval icon and there will be sixth version of the file will be approved. Serena makes it possible to roll backward to any previous version of the file. Files must be approved prior to deployment (upload) to the server. 16. Rollback Approved Files If you want to restore a previous version of a file, follow the steps to the right. This file is is checked In Fig. A. Click on the icon of the file that you want to roll back. Fig. B. Click on version 8
Fig C. Click on previous version that you want to roll back to. In this example click on the radio button for version 3 to roll back to that version. Fig D. Click on roll back (Note that the new rolled back file will be the 7 th file. Then you must approve the final version of the file 9
10
17. Attach the master page to a file To assign an html file to a document, follow these steps: Fig A. Click on the icon of the file Fig B. From the Properties Tab: Deploy Only if referenced Applied Master Page Find your masterpage from the drop-down list. Is Master Page No (You are adding the masterpage to your file, but it s not the master page itself. 11
Fig C. 12
Fig D. 13
18. Using Context Menus Beside items in many list views is a context button. Click the button to display a pop-up menu of actions. 19. Use the Program Bar Refresh (Refresh the Collage Window) Prev & Next (Return to and refresh the previous page, or move ahead to and refresh the next page. Help (Display the online help system in a separate browser. Logout (Log out of Serena) It s very important to click logout when you are not using Serena to free your liscence to someone else who is trying to use Serena. The liscenses that UCCS owns is limited. 20. Use the Content / Deploy Folders Sub View (Some of these commands will be explained in more detail below). Create a New Deploy Folder Create a new asset Upload Create new assets or folders 14
Edit Checkout and edit the selected asset in your preferred editor. If you do not specify a preferred editor, Serena will open the file in the Collage Internal editor. Check in Check in the selected assets. Check out Check out the selected assets. Undo Checkout Undo checkout of selected assets. Preview Display a preview of the selected asset in a separate browser window. 21. 15 The More Command Check the files that you want to perform an action on. Click on the various command under the More command button. Approve approve the selected assets Unapprove Unapproves an asset Copy Copies assets to a new location Move Copies assets to a new location Delete Copies assets to a new location Properties Displays asset properties Explore Displays the workfile location for checked out assets. Verify Links Tests all links in the selected assets. Replace Replaces all occurrences of a file reference in the selected asset with a new file reference. Add to Current Task If you currently have a task open, adds the selected asset to the current task. New Task Creates a new task
22. Using the Collage Internal Editor In the edit view, Drag over text. Click on the various commands on the toolbar at the top of the screen. Spell Checks the spelling in the current field, and suggests corrections or alternates if any are available. Bold Bolds selected text, if it is allowed for the current field. Italic Italicizes selected text. Underline Underlines selected text. Color Applies a font color to selected text. Size Font Changes selected text to a different font size. Changes selected text to a different font. Style Applies a pre-defined style to the current paragraph or heading, such as cascading style sheet styles. Alignment Aligns selected text to the left, right, or center. Indent Indents the current paragraph. Outdent Removes indents for the current paragraph. Image Enables you to browse for and insert an image to the selected point in the text. Link Enables you to define and insert an HTML link to the selected point in the text, or to convert selected text into an HTML link. 16 Table Enables you to define and insert a table to the selected
point in the text, if it is allowed for the current field. You can also select an existing table and modify it. You can define the number of rows and columns, the width of each column, the width of borders, cell padding, and cell spacing. List Converts the current selection to a list item (bulleted or Numbered. Anchor Enables you to insert an HTML anchor. Content Inserts a pre-defined, reusable content snippet. Web designers define the available snippets in the document definition file. This is very useful for inserting content that is commonly reused, such as copyright statements or contact information. Forms Elements. Enables you to insert or edit HTML forms and form Accessibility Applies HTML tags which provide formatting and context information for use by alternative display devices and readers. Clicking the button displays the following options: Abbreviation: Applies the <abbr> tag. Acronym: Applies the <acronym> tag. Citation: Applies the <cite> tag. Code: Applies the <code> tag. Definition: Applies the <dfn> tag. Keyboard: Applies the <kbd> tag. What Kind of file Determines what choices you will have as the assistant proceeds. 17 Name The name that Collage displays for the file, which is distinct from the actual filename. NOTE In the sample Web site, this value is used in navigation bars and banners. Ask your Web designer
where, or if, this text will appear in your site. Folder Browse to select the folder to which the item will be uploaded. Contents Select Upload File. Click the Upload button to browse for the file you want to upload. 23. Create New Folder From content view click on (new folder) Fill out the form. In this example a folder named images is being create to hold all of the image files for the website. Name=name of folder Description=Description of the folder Folder type=specify deploy if the folder will be deployed to the server. 18
24. Deploy your website Click on Deploy Activity Name (username of administrator who is doing the deploy Deploy (FuLL): Deploys all of the files in the website and overwrites any files with the same name that are currently on the website. Deploy (Changed Assets): Deploys all of the files in the website and overwrites any files with the same name that are currently on the website. Select Deploy Map (Pick your website out of the list. You will only see the websites in this tab that you are assigned administrator privileges.) 19
20
Using Serena Guidelines 1. What is Serena Collage? Serena Collage is an end-to-end Web content management solution, providing full asset management, user and task management, content contribution, and deployment features. 2. Use Mozilla Firefox to edit pages with Serena. Serena is much more stable with Firefox than Internet Explorer You can download at http://www.firefox.com 3. Turn off the pop up blocker in Firefox so that you can preview your web pages. 4. Deploy your website when it s ready. Before you deploy, check in and approve all of the files. 5. With Serena you can use the built in Internal Editor, or you can specify an editor of your choice such as DreamWeaver or Front Page or Notepad. 6. Log out of Serena. It s very important to click logout when you are not using Serena to free your liscence to someone else who is trying to use Serena. 7. Do not approve your files until they are ready. 21
22