City & County of San Francisco Powered by Innovation DT City & County of Sa Departme Techno Powered by Innova DEPARTMENT OF TECHNOLOGYDT Web Content Management Training Manualv3 Department of Technology
Table of Contents Introduction to WCM Logging into the WCM............. 1 WCM Window.................. 2 Preview Window................. 2 Toolbox...................... 2 WCM Window s Main Navigation...... 3 General information about the WCM.... 4 Overview of the Approval Cycle: Approving, Rejecting and Publishing.... 4 Managing Pages Create a New Page............... 5 Understanding the WCM Editor Window. 6 Edit an Existing Page.............. 7 Ordering Pages................. 8 Copy an Existing Page............. 9 Delete an Existing Page............10 Approving Your New Content........11 Updating the Menus and Links....... 11 Restoring Edited or Deleted Content....12 Managing Images Overview.....................13 Create an Image Category.......... 14 Add a Category /Image to a Category...14 Edit/Update an Image.............14 Insert an Image onto a Web Page..... 15 Formatting an Image.............15 Managing Documents Overview.....................16 Create a Document Category........ 17 Add Documents to a Category....... 17 Edit/Update a Document...........17 Link to a Document Central File...... 18 Managing Documents with FTP Software Setting up the FTP software.........19 Uploading files to the site, via the FTP.. 20 Linking to a document in the FTP......21 Creating & Managing Links Creating an Internal Page Link....... 22 Creating an External Page Link....... 22 Using Anchor Links.............. 23
Introduction to the Web Content Management (WCM) Logging into the WCM In the web browser s URL box, type the website domain name, followed with /admin. After the page refreshes you will be asked to enter your User Name and Password. Once you have entered both, click the Log In button. A second page will open and you will have access to both the Preview Window as well as the WCM Window. Note: In some cases, you may need to disable your browser s pop-up blocker, in order for the second window to open. Introduction to the CMS - 1
WCM Window Preview Window Toolbox This window provides access to all the system s features, including the Page, Image Library, and Document Central components, via the window s main navigation (brown bar). This window provides feedback regarding saved edits made in the WCM Window. Once edits are entered and saved this page refreshes and displays them temporarily for review. Once the changes are approved/published they will become permanent. This floating window provides shortcut links to content editing and log out, as well as workflow and history information. Introduction to the CMS - 2
WCM Window s Main Navigation Along the top of the Content Management Window is the main, dropdown menu. Mouse over these links to see the various menu items that allow you to manage the website configuration and content. Administration Workspace Core Components Advanced Components Utilities Log Out Help This area is used to configure the website user permissions and workflow. This area is used to show content in a users workflow. This area is used to manage Pages, Images and Documents. This area is used to manage components such as Events and News. Components available here will depend on how the website was set up. This area is used to update the menus and links throughout the site. Click this to log out of the content management tool. Click this to view the menus for Getting Started, User Guide and Administrator Guide. Note: Depending upon your user permissions, you may not have access to some dropdown menu items (such as Administration). Introduction to the CMS - 3
General information about the WCM The administrative side of the WCM is designed to be used with Internet Explorer. Using other browsers may cause some lack of functionality. Please save your work frequently. For security purposes there is a time-out feature built into the system. If you have not saved your work before the system times out all changes made after the last save will be lost. While logged in, you may see some of the left-hand navigation repeated. This is because the navigation has been customized to meet City Department needs. The public will never see this repeating information. Edited content can only be viewed by a user that is logged into the WCM. Until it has been approved/published, users viewing the live site will not see the pending, unapproved content. Overview of the Approval Cycle: Approving, Rejecting and Publishing In order for content to move through a workflow and become published on the website, it must be Approved. Every piece of content, even if it is in a one-step workflow, must be Approved in order to be published. When you create a piece of content and Save, it is important to remember to click the Approve button in the Administrator s Toolbox. Approving your page will move the content forward in the workflow. If you do not approve it, the content will be Locked until it is either approved or unlocked by a Super User. If you have permissions in a Workflow higher than the first state you can also Reject a piece of content (sending it backwards in the workflow). Once content is Approved in the last step of its workflow, that content is Published - which means it is live on the website for the public to view. Once published, the workflow for a piece of content is completed. Express Publish: If you are a Super User, or if you are in all the workflow states of a workflow, you will have the Express Publish button in the Workflow Toolbox. You can click this button to publish the content immediately to the Internet. Introduction to the CMS - 4
Managing Pages Create a New Page To create a new page, choose Core Components > Page under the WCM Window s main navigation and navigate to the existing page (container page) that will house the new one, using the Page Name links (example A). Once on the correct container page click the Add Page link. Or, in the Preview Window, use the site s regular navigation to locate the container page and then click the Add link in the Administrator s Toolbox (example B). The WCM Window will refresh to display the WCM Editor Window. Example A Example B Note: New pages cannot be created at the top-most level of the site. Note: When adding tables to your pages, make sure that rows and headings are identified. Managing Pages - 5
Understanding the WCM Editor Window Content Group: Typically, this will be set to Default unless the site has more than one content group. Page View: This should be set to Default Page View. Navigation Name: How the page name will appear in the site s navigation. It does not have to be the same as the page title. Page Title: How the page name will appear at the top of all other content. It does not have to be the same as Navigation Name. Subtitle: Displays on the page under the main title. Redirect URL: Specifies a page that the user will be redirected to. Content Editor: This is the area where content is added, edited and formatted. Download Message: If the web page contains any attachments, such as MS Word docs or PDFs, this box should be checked and will provide users with links to supporting software. Display: When checked, the Navigation Name (above) will display in the dynamic, dropdown menu. Publish Date: Specifies the day the page will go live. If left blank the page will be published upon approval. Expire Date: Specifies the day the page will be removed. Display Left Navigation: If the site is designed with left navigation and this item is checked the left navigation will display; otherwise, the left navigation will be turned off and not display on that specific page. Dynamic Banner & Department Homepage: Ignore these options Design Theme: By selecting Use Parent s Design Theme, the page will automatically be created using the banner assigned to the section of the site you are creating the page in. Meta Description & Meta Keywords: Information used by search engines. Note: An asterisk (*) indicates a required field. Managing Pages - 6
Edit an Existing Page To edit an existing page, choose Core Components > Page under the WCM Window s main navigation and navigate to the page you wish to edit using the Page Name links (example A) and then click on the corresponding Edit button. Or, in the Preview Window, use the site s regular navigation and once on the correct page click the Edit link in the Administrator s Toolbox (example B). The WCM Window will refresh to display the WCM Editor Window. Example A Example B Managing Pages - 7
Ordering Pages Ordering pages means changing the order of the pages as they appear in the dropdown and sub-level navigation. To change page order, select Core Components > Pages in the WCM Window s main navigation and then navigate to the level of the page(s) you wish to reorder. Next to the Page Name, on the far right side, use the Up and Down ordering buttons. Click these buttons to move the page(s) up or down, as required. Changes to the page order will be reflected once you have updated the menus and links by going to the WCM Window s dropdown menu and choosing Utilities > Update Menus and Links. Managing Pages - 8
Copy an Existing Page To copy a page, choose Core Component > Page, and navigate to the page in the WCM Window (Example A), or navigate to the page in the Preview Window and click the Copy link in the Administrator s Toolbox (Example B). This will refresh the window and display a list of top-level pages of the site. Once on the page that will contain the copied page, click the Copy Here button on the right at which point you will see the WCM Editor appear in the WCM Window. Enter any edits to the new, copied page (in the fields or Editor Tool) as needed and click the Save button. Review the changes in the page Preview Window. Example A Example B Managing Pages - 9
Delete an Existing Page Using the WCM Window s dropdown menu, select Core Components > Page and navigate through the website file structure using the Page Name links to find the page you wish to delete, then click the Delete button next to that page (example A). You can also navigate to the page that will be deleted using the sites regular navigation in the Preview Window and once on the page click the Delete link in the Administrator s Toolbox (example B). You will be shown an alert asking if you want to delete the page. Click OK to delete the page or Cancel to abort. Example A Example B Note: If the Delete link or Delete button are unavailable, it is most likely due to the fact that the page is a container page, meaning sub-pages exist within it. You must move or delete those sub-pages before you can delete the container page. Managing Pages - 10
Approving Your New Content In order for content to move through the WCM the new content must be Approved by the content author. Approving your edited pages sends the content to the next step in the workflow. If you do not approve it, the content will remain Locked and only available to you until it is approved. To view content awaiting your approval, select Workspace > Awaiting My Approval in the WCM Window s dropdown menu. You will then see a list of all the content that is awaiting approval, including yours. To locate your content, look under the Date, Page Name and/or Updated By columns. Once located, click on the corresponding checkbox and then click the Approve Selected button. If the checkbox is dimmed the content is waiting for another author s approval. Choosing the checkbox at the top of the list will check all items edited by you. You can also use the Edit or Review buttons in the list to make further edits or to review the page before approving. Updating the Menus and Links Once new content, including an upload to the Image Library or Document Central, has been approved, the WCM dynamic menus must be updated in order to have access to it. This is done by going to the WCM Window s dropdown menu and choosing Utilities > Update Menus and Links. Managing Pages - 11
Restoring Edited or Deleted Content The Restore Published Version link appears in the Preview Window s Administrator s Toolbox as part of the approval process in editing pages. Restore Published Version allows the content creator to revert back to the previously published state even if the updated page has been saved, but not published. Clicking on the link will replace the updated page with the version that is currently live on the public site, which can then be edited as needed. Note: The Restore Published Version option will NOT appear if you click on the Publish, or Express Publish buttons (available to a Superuser only) because a that point the newly edited page is the live, published version. Managing Pages - 12
Managing Images Overview The Image Library is a location within the WCM website which stores all the images for the site (photos, graphics, charts, etc.). The Image Library component can be accessed via the dropdown menu under Core Components > Image Library in the WCM window. It is important to realize that images are not embedded in a web page. Images on a website are called to a web page from a specific location: the Image Library. For this reason, every image has to be uploaded to the Image Library so that it can be called and managed when needed. In this section: Create an Image Category Upload an image Edit/Updating an image Inserting an image into a web page Formatting an image Note: You cannot copy and paste an image into the Editor Tool. Only images that have been uploaded, approved and published to the Image Library are available to the Image Manager. Managing Images - 13
Create an Image Category The component s opening page contains the various image categories. To add a new category, use the Add Category link in the upper left area of the page. Categories may be nested within categories for easy grouping. Add a Category /Image to a Category Click on the category link to view a list of nested categories or images found within. Once in the correct category, use the Add Image, Add Multiple Images, or Add Category link in the upper left area of the window to add additional images and/or additional categories. If you would like to edit, move, review, delete or re-order the existing images use the buttons found on the right side of the page. Edit/Update an Image To update an image file, simply repeat the Add an Image to a Category steps and republish the new file. Links directed to this image will not change. Note: An ALT text description must be added to each image included a PDF file. Note: Once a image and/or category is saved to the system, the menus and links must be updated (Utilities > Update Menus and Links, in the WCM Window s main navigation) before it will be available for use. Managing Images - 14
Insert an Image onto a Web Page To insert an image, click within the content to establish where the image will be inserted, then click the Image Library button located in the Toolbar. This will display the Image Manager popup window. The folder tree on the left displays the Image Libraries top-level categories and highlighting a category will show all the published images within it. Using the [+] or [-] symbols next to the categories will display all subcategories nested within. Once you have located the image, click on it to get preview information. Click the Insert button to place it into your content. Formatting an Image After inserting an image into the Editor, it may require further formatting, such as an alignment and adding margin space. To adjust image properties, right click on the image and select Properties. Right-click on image to bring up the Properties menu Select the Border option of your choice, as well as an Image Alignment option from the dropdown selection (the five choices are center top, left align, center, right align and align bottom). Adjust the Top, Bottom, Right or Left Margin to separate the image from touching other content. Lastly, include a longer description of the image for Section 508 compliance in the Long Description field. Note: When adding an image to your web page, make sure that an Alt description has been entered. Managing Images - 15
Managing Attachment Documents with Document Central Overview Document Central is a location within the WCM website that contains documents (reports, spreadsheets, application forms, etc.) which users can view or download to their computer. The Document Central component can be accessed via the dropdown menu in the WCM window, Core Components > Document Central. It is important to realize that documents are not embedded in a web page. Instead, a link is made to the document so that clicking a link will allow the user to view or download it. However, before you create the link in the text directing the user to the document, it must be uploaded to Document Central (and approved) so that it can be catalogued and retrieved when needed. In this section: Create a Document Category Upload a document Edit/Updating a document Linking to a document Managing Documents - 16
Create a Document Category To begin, select Core Components > Document Central in the dropdown menu in the WCM Window. The Download Central window will display a list of top-level document categories. To add a new category click the Add Category link. When the window refreshes, enter a Name for the category. Click the Save button and your new category will be created. Add Documents to a Category To add a document, navigate through the categories until you reach the category to which you want to add the document. Then click the Add Document at the top. Select the Content Group and enter a Name for the document. Then, click the Browse... and find the file on your computer or network and double-click that file and then click the Save button. Now, once the document is approved (Workspace > Awaiting My Approval), you can link to this file in your content. Edit/Update a Document To update a document, simply repeat the Add Documents to a Category steps and republish the new file. Links directed to this document will not change. When uploading a PDF document, make sure that it is formatted for accessibility compliance. If not, a text equivalent needs to be provided. Note: An ALT text description must be added to each image included a PDF file. Note: Once a image and/or category is saved to the system, the menus and links must be updated (Utilities > Update Menus and Links, in the WCM Window s main navigation) before it will be available for use. Managing Documents - 17
Link to a Document Central File There are two ways to make a document link in the Editor Tool. To link to an uploaded document, highlight the text that will be the link and click the Document Central button located in the Toolbar. This will display the Document Manager popup window. The folder tree on the left displays Document Manager s top-level categories and highlighting a category will show all the published documents within it. Using the [+] or [-] symbols next to the categories will display all subcategories nested within. Once you have located the document, click on it to get preview information. If you prefer to have the linked document open in a separate window choose the New Window option from the Target dropdown menu. Click the Insert button to place the link into your content. Note: When creating links to attachments, such as MS Word docs or PDFs, remember to check the Download Message on the WCM Editor Window, to provide users with links to supporting software for the attachments. Managing Documents - 18
Managing Attachment Documents with FTP Software Setting up the FTP software For uploading and managing documents used on your web site, you will need a File Transfer Protocol (FTP) program. If one is not already on your computer we recommend FileZilla (http://filezilla-project.org/), which is a free download. 1 Note: Your computer s permissions may require you ask for assistance from your group s IT specialist to install the new software. 1 Choose Site Manger... under the File menu. 2 Once the Site Manager window opens, click on My Sites in the Select Entry window 2 3 Click on New Folder 4 Enter the information into the General tab as follows: 3 4 Note: You will receive your User and Password information from the web site administrator Managing Documents - 19
Managing Documents Using FTP Software Uploading files to the site, via the FTP 1 Once connected, use the Local Site window to navigate to the directory on your computer, or local server, that contains the file that is to be uploaded. 2 Next, use the Remote Site window to navigate to the directory within your site s FTP directory that will host the file being uploaded. 3 Now, click and drag the file you are uploading from the bottom section of the Local Site window into the bottom section of the Remote Site window. 4 Once dropped, the file is uploaded to the remote directory and a transfer complete message will appear in the comments window. 4 1 2 3 Managing Documents - 20
Managing Documents Using FTP Software Linking to a document in the FTP 1 First, locate the file you wish to link in the bottom section of Filezilla s Remote Site window and right-click on it, selecting Copy URL(s) to clipboard from the menu that appears. 2 Next, go to the WCM Editing page that will contain the new link and highlight the text that is to become the link. 1 3 Now, click on the Hyperlink Manager icon in the Content Editor toolbar. 4 When the Hyperlink Manager pop-up window appears, highlight and delete any content within the URL field. Then, with the cursor in the URL field, right-click and select Paste from the menu that appears. This will paste in the document s full, absolute URL. 3 5 Now, the last step is to edit the URL so it is relative to your site. This is done by removing the front portion of the URL. The edited URL will always begin with ftp/... and will contain the path of any necessary directories and end with the document s file name. Once edited click OK. Make sure to save your work to move it forward in the workflow. 2 4 5 Delete this front portion of the pasted URL This will be the new, edited URL, which contains the document s path, starting with ftp/ Managing Documents - 21
Creating & Managing Links Creating an Internal Page Link To create a link to an internal web page, select the text or image that will be the link. Click the Internal Links dropdown menu, under the Editor Toolbar. Locate the page you want to link to, using the [+] or [-] symbols next to the container page names, if necessary. Once located, click on the page name. You will then be returned to the Editor Window and the link will be created. Note: Pages will appear in the Internal Links dropdown only after being approved (Workspace > Awaiting My Approval) and the system s menus have been updated (Utilities > Update Menus and Links). Creating an External Page Link To create a link to an external web page (a page on another website), select the text or image in the Editor Tool that will be the link and click the Hyperlink Manager button, in the Editor Toolbar. This will display the Hyperlink Manager window. Enter the URL for the external page in the URL field (for example, http://www.sfgov.org). Click the OK button. You will then be returned to the Editor Window and the link will be created. Creating Links to Pages - 22
Using Anchor Links Inserting an anchor is a two step process: Step 1: Defining the Anchor Click to place your blinking, text-editing cursor in the content where the Anchor link will exist. Click the Hyperlink Manager button on the Editor Toolbar to bring up the Hyperlink Manager popup window. Click on the Anchor tab. Enter a name for the anchor (i.e. top ) and then click the OK button and you will be returned to the Editor Window. This establishes the anchor location (named top in this example) a user will be taken to when the anchor link is clicked. Note: Anchor names must be used only once per page and the names must not contain any spaces. Step 2: Setting the Anchor After you have returned to the Editor Tool, select the text that will be the link. Again, click the Hyperlink Manager button in the Toolbar. Make sure the Hyperlink tab is active and from the Existing Anchor dropdown menu choose the anchor location (top in this example) you want. When finished, click the OK button and the link will be created. Note: Multiple anchor links can link to the same anchor location. Creating Links to Pages - 23