Content User Guide Pennsylvania Interactive October 10, 2014 Training website - http://www.training.pa.egov.com
Table of Contents 1 INTRODUCTION... 6 1.1 Microsoft Office SharePoint Server... 6 2 ACCESS YOUR SITE... 5 2.1 SharePoint User Roles... 7 2.2 Workflow Options... 7 3 BUILD YOUR SITE... 9 3.1 Understanding Site Structure... 9 3.2 Content Preparation... 10 3.3 Lists and Libraries... 11 4 SITE ACTION MENU & SITE RIBBON... 12 4.1 Uploading Images... 16 4.2 Uploading Documents... 18 5 ADDING LINKS... 21 5.1 Adding a Link to an Internal Site or Page... 21 5.2 Adding a Link to an External Site or Page... 21 5.3 Adding a Link to a Document... 21 5.4 Adding a Link to an E- mail... 22 5.5 Creating a Bookmark (Anchor)... 22 6 CREATING A NEW PAGE... 23 7 CREATING SUBSITES... 24 8 EDITING A PAGE... 25 9 MODIFYING NAVIGATION... 28 10 MANAGE CONTENT AND STRUCTURE... 30 10.1 MOVE A PAGE, DOCUMENT OR IMAGE:... 30 10.2 COPY A PAGE, DOCUMENT OR IMAGE:... 31 10.3 DELETE A PAGE, DOCUMENT OR IMAGE:... 31 11 QUICK TIPS... 32 12 STYLE GUIDE... 33 12.1 Responsive Design... 33 12.2 Mobile First... 34 12.3 Content Style... 34 12.4 Mark up Styles... 34 12.5 PAGE FORMATTING... 36 12.6 Template Layouts... 37 Training website - http://www.training.pa.egov.com
12.7 Design Elements... 42 12.8 Accessibility and Section 508... 46 12.9 Resources... 47 13 ADVANCED FEATURES... 49 13.1 Adding/Editing Officials List... 49 13.2 Adding/Editing Agency Footer... 50 13.3 ADD CATEGORY PAGE... 54 13.4 CHANGE BANNER IMAGE... 55 13.5 MANAGE BANNER LINKS... 61 13.6 MANAGING ALERTS... 62 13.7 ADDING WEB PARTS... 67 5
1 INTRODUCTION This User Guide will provide designated Content Authors step- by- step instructions for adding, updating and deleting specific content on an agency website. As needed, this user guide will be updated and redistributed by the Pennsylvania Interactive (PAI) Project Managers and made available for download on the PAI Training Website. The information in this document is also found on the PAI Training website: http://training.pa.egov.com/ The intended audience for this User Guide are designated Content Authors. Content Authors should be generally familiar with their agency website and have a fundamental understanding of SharePoint content management. 1.1 Microsoft Office SharePoint Server Microsoft Office SharePoint Server (MOSS), also referred to as SharePoint, is a web- based system with a set of tools that enable web content administrators to create and edit web pages in a published website without having to know hypertext markup language (HTML). Pennsylvania Interactive has created an enterprise content management system solution utilizing Microsoft Office SharePoint Server 2010. Users who are already familiar with Microsoft products will find generating content similar to creating a Microsoft Word document. In fact, much of the content users create can be composed in Microsoft Word, copied and pasted into Notepad (to remove unnecessary formatting), then copied and pasted into the user s SharePoint website. After a website is built in SharePoint, creating, updating and maintaining the pages is easy. With SharePoint, content administrators can create and maintain sub- sites (directories), administer rights and permissions to web members and approvers, create libraries and other duties normally associated with website management. Format Text Tab The Format Text tab in the Site Ribbon holds features and tools that are similar to Microsoft Word. You can type directly into your page content box or copy and paste. If you are pasting, you must select the dropdown within the paste icon under the Format Text tab in the Site Ribbon and select Paste as Plain Text. This removes all formatting, and in the end will make your HTML cleaner and keep your site looking uniform. If you need to remove unwanted formatting later on, highlight your text and select the Clear Format tool under the Format Text tab. Style sheets have been created to format the text depending on how the text is used. Once you check your page in, you will notice that the paragraphs, heading, links, etc. you created will change to match the site in color, font style, and font size. Therefore, it is not necessary to choose colors, fonts, and sizes for these items on your own, and you should avoid doing so. You will, however, need to bold and italicize your content, if you so choose. 6
2 ACCESS YOUR SITE Located: http://training.pa.egov.com/build- your- site/get- started/pages/default.aspx Open a Microsoft Internet Explorer Browser (version 9.0 or above recommended). SharePoint will work in other internet browsers; however, some editing functionalities are lost while trying to edit in these browsers. Other internet browsers include Firefox, Netscape, Safari, Chrome Note: Using a PC system is recommended. If using a MAC system, SharePoint functionality might slightly differ from a PC system. Authoring Environment: Your Authoring site URL will be provided at the beginning of your content management phase. Please bookmark the URL for future reference. Commonwealth employees (unless otherwise noted) will be using their CWOPA credentials to login to their SharePoint sites. Navigate to the URL for your site ( ex: https://auth- agency.pa.egov.com/sites/agency_name) Login dialog will display Select ADFS from drop down - Commonwealth Employees will use their CWOPA credentials. Select Windows Authentication only if you have received credentials from PAI 5
Enter your credentials (CWOPA\username, password) Select 'Sign In'. Once you are logged in, the SharePoint Site Ribbon will display at the top of the screen. Select the drop down arrow to the right of your user name, which is located in the upper right corner of the ribbon, to edit your user profile information. Select Edit Item Complete the following fields (E- Mail, Mobile Number, Department, Job Title) select Save 6
2.1 SharePoint User Roles Located: http://training.pa.egov.com/build- your- site/get- started/pages/user- Roles.aspx The management and maintenance of a SharePoint site requires several different types of users with varying levels of responsibility and permission. SharePoint organizes these users into the following groups with their associated abilities: member, approver, and owner. The workflow of the website can be controlled to meet the business process of the entity maintaining the website. Member A Member can: Create, Edit, and Delete Pages Add/Modify resources in Document or Picture Libraries Submit changes, which must be approved by an Approver to become published to the live site. Approver An Approver can: Approve or Reject Pages and Documents Create, Edit, and Delete Pages Add/Modify resources in Document or Picture Libraries Ability to publish Owner An Owner can: Perform same actions as a Member and Approver Create and Delete Subsites and Libraries Modify settings for Sites and Libraries Modify user permissions 2.2 Workflow Options Located: http://training.pa.egov.com/build- your- site/get- started/pages/workflow.aspx No approval process (not recommended) An authorized individual (Member) makes changes (adds, edits, deletes) to the website content. Those changes are published directly to the website. Member Publish Single Approver An authorized individual (Member) makes changes (adds, edits, deletes) to the website content. An email is sent to an authorized individual (Approver) who must approve the change before it is published into production. The Approver can reject the change which sends it back to the Member. 7
Member Approver Publish REJECT Two Step Approval Process An authorized individual within an agency (Member) makes changes (adds, edits, deletes) to the website content. An email is sent to an authorized individual within that agency (Agency Approver) who must approve the change before it is forwarded to the website approver. The Agency Approver can reject the change which sends it back to the Member. An email is sent to the authorized individual appointed to oversee the website content (Site Approver) who must approve the change before it is published into production. The Site Approver can reject the change which sends it back to the Agency Approver. Member Agency Approver Site Approver Publish REJECT REJECT Group Approval Process An authorized individual (Member) makes changes (adds, edits, deletes) to the website content. An email is sent to all the authorized individuals within each agency (Agency Approver) who must approve the change. Some of the Agency Approvers (1 to 3) or all of the Agency Approvers must approve the change before it is published into production. If any one of the Agency Approvers rejects the change, it is sent back to the Member and cannot be published even if other Agency Approvers agree to the change. Agency Approver Member REJECTED Agency Approver Agency Approver Publish REJECTED Agency Approver 8
3 BUILD YOUR SITE Located: http://training.pa.egov.com/build- your- site/pages/default.aspx This section will review in detail the SharePoint features you will use to build your website. 3.1 Understanding Site Structure This chart shows the structure of your website and URL examples. A site can hold additional sites or pages. A page is a single page of information. In short, anything in the URL following www.yoursite.pa.gov (that does not have the word pages in front of it) is a subsite. Anything following the word pages is a page. www.yoursite.pa.gov is the homepage. Homepage - Also known as the default top- level site, the homepage is provided by a web server and uses subsites and pages to create the navigation. (ie. www.yoursite.pa.gov) Subsite - A subsite is a subdirectory of the homepage and contains subsites and pages of its own. A subsite is used when additional pages about the subsite are needed. (ie. News is created as a subsite because it may contain additional pages such as multiple Article pages.) Note: On this website, the main navigation is built as subsites because each topic has additional information which is broken down into pages. Pages - A page is one single page of information. It cannot contain sites or other pages. (ie. Contact Us is created as a page due to the fact it is a single page of information. Additional sites or pages within Contact Us are not needed.) Default - A default page is the landing page of any site. It is the first page you come to when you click on that site. (ie. www.yoursite.pa.gov/news/pages/default.aspx) Note: On the PAI training website, when you select 'Build Your Site' in the navigation, you are directed to this page which is the default page. 9
3.2 Content Preparation Located: http://training.pa.egov.com/build- your- site/content- Management/Pages/default.aspx When preparing to move your old site content into the new content management system, there are several key steps to include in the process. Taking the time to reassess your content now will pay off later. A content inventory should be a continuing process as content is added or removed from the site. It's helpful to update the content inventory spreadsheet as your content changes. Key Steps Include: Conduct an inventory to identify and document everything on the site, including all pages, linked files, PDFs, video files, documents and pictures. Document in a spreadsheet for easier viewing and tracking. Include in the spreadsheet (download sample spreadsheet) - Page ID, Page Name, Page Title, Page Address, Page Description, Location and any other information needed. Content Audit A thorough review and examination of all content to determine what you "have" and what content you "need". Using site analytics will be a good place to start. Use the R.O.T. (redundant, outdated, trivial) analysis method to determine what content to retain. Guidelines for editing content: Is content current and accurate? Is content relevant? Can content be simplified - is it written in plain language? Is content in appropriate format? Does content communicate clearly - match communication goals? Develop a Content Strategy Define topics, themes and purpose, site governance, customer experience - focus and define the purpose of your website content. Clean up old content Is content current and accurate? Is it relevant? Is it unique? Is it written and structured for the web? Is it the appropriate format? Does the content clearly communicate? During the inventory and audit process, you should be able to determine which content can be archived or deleted. 10
3.3 Lists and Libraries Located: http://training.pa.egov.com/build- your- site/content- Management/Pages/Lists- and- Libraries.aspx Website content is stored in lists and libraries. There is a difference between what kind of information is stored in each. Libraries Libraries are like folders on your computer. Types of content stored in libraries might include images, documents, TXTs, PDFs, and other folders. Lists Lists are more like spreadsheets with columns and rows of information such as Name, Date, and Phone Numbers. There are also items within a list that behave like line items in a spreadsheet. Libraries store files and lists store data. 11
4 SITE ACTION MENU & SITE RIBBON Located: http://training.pa.egov.com/build- your- site/sharepoint- Ribbon- and- Menus/Pages/Site- Actions- Menu.aspx http://training.pa.egov.com/build- your- site/sharepoint- Ribbon- and- Menus/Pages/SharePoint- Ribbon.aspx The Site Actions menu allows you to create pages and sites, access document and image libraries and more. The Site Ribbon will be used to do most of your editing and can be accessed by locating your Site Actions menu from the upper left corner and select Show Ribbon. The Site Ribbon will appear across the top of your page once opened. The Site Ribbon contains several tabs where you will find groups of commands that will assist you with your page editing. Once the Site Ribbon is open, select a tab to view editing options for the page. The first item you will see in the Site Ribbon is the Edit icon. This icon allows you to edit the page. 12
Next, you will see the Browse tab, which holds the page s title and a navigation trail. Page is the next tab and is one you will use often. Below are the commands you will find under the Page tab: Check In - When you 'Check In' a page, you make a draft version of the page. Other users will be able to login and view your changes but the general public will not be able to view your changes. Check Out - Before you can edit a page, you must check it out, much like checking out a library book. If you 'Check Out' the page, other users will not be able to work on that page. This will not bring your page into edit mode but merely checks out the page to your name and prevents others from accessing it. Edit - Selecting Edit not only 'Checks Out' your page but also brings it into edit mode. This will allow you to change, remove, or add content to your pages. Only one person can edit a page at a time. Save & Close - Save & Close, under the Edit dropdown, will save your changes to the page and exit edit mode. The page will still be Checked Out to you. This means others will not be able to make changes to the page until you have Checked In the page. Save and Keep Editing - Save and Keep Editing, under the Edit dropdown, saves the changes to the page and keeps you in edit mode. Stop Editing - Stop Editing, under the Edit dropdown, will exit edit mode on the page. You will be asked to either save or discard your changes. The page will still be Checked Out to you. This means others will not be able to make changes to the page until you have Checked In the page. Discard Check Out - By selecting Discard Check Out, under the Check In dropdown, your page will be brought back to the way it looked before you 'Checked Out' the page, discarding any changes. Override Check Out - If someone else has a page 'Checked Out' to their name, you have the option to override their checkout. Whoever had the page 'Checked Out' will lose all of their changes, and you will be able to 'Checked Out' the page in your name. It is not recommended to use this option unless there is an emergency situation. Edit Properties - Edit properties allows you to change the metadata properties for the page (page content type, title, and URL name). 13
View Properties - View Properties, under Edit Properties allows you to view the metadata properties for the page. Page History - The Page History button allows you to view the version history of a page and access the Recycle Bin. Version history allows you to view the history of a page, including its current status. It displays the currently published major version, if there is one, and all drafts of the page. The Version History page also shows who edited the page and when. If you want more information about a specific version, you can select a version by date, time or version number on the left in this view. You can also restore to a previous version, by selecting Restore this version in the view. The Recycle Bin is located on the left in Page History. The Recycle Bin holds any documents, images or pages that have been deleted from the current site for 30 days. If you need to restore an item from your Recycle Bin, you can select a checkbox next to that item and select Restore selection. Page Permissions - Page Permissions allows you to set unique permissions for each subsite. Delete Page - The Delete option will delete the current page and add it to a Recycle Bin. Email a Link - The Email a Link button will open a new mail message containing a link to the page you are currently viewing. Alert Me - Alert Me allows you to set an email notification when items change on the page. Preview - Preview allows you to see a preview of the current page in a new window without the toolbar. Page Layout - Page Layout allows you to apply a new page layout to the page (page must be in edit mode for this option to work). Make Homepage - This feature is NOT recommended and may be disabled - Make Homepage allows you to make the current page the homepage of your website. Incoming Links - Incoming Links shows you all other pages within your site that link to your current page. Draft Check - Draft Check allows you to check for any unpublished items on your page, including documents and images. Library Settings - Library Settings takes you to the library settings page for the current site s library. Library Permissions - Library Permissions allows you to add, change, or remove permissions for the current site s library. View all Pages- View all pages shows you all pages created under the current site. The third tab you see is the Publish Tab. Below are the commands you will see under the publish tab. 14
Publish Tab: Submit - Submit for Approval is used when workflow is set up on the site. It allows you to submit the current page for approval. Under Submit there are 4 options: Publish - selecting 'Publish will either begin the workflow approval process or if you have "rights", put your content into the content deployment queue for publishing Submit - Submit for Approval is used when workflow is set up on the site. It allows you to submit the current page for approval Cancel Approval- Cancel Approval allows you to cancel your submission of the current page for approval Unpublish - Unpublish will allow you to turn a major version of a page into a minor one Other items under the Publish tab are: Schedule - Schedule the start and end date for the publishing of a page Approve - Approve this page to be a major version (for users with "Approval" rights) Reject - Reject the submission of this page as a major version Start a Workflow - Start a workflow for this page - this feature may be disabled Status - View the current workflow status for this page View Tasks - View tasks related to this page TIP: Each time you check in the page, a minor version is created. You can tell if a page is a minor version by its number. Major versions of a page, which are pages that have been approved and published, end in a zero (0). If the page was previously published, the published version remains viewable by readers, and a new minor version is created for editing. For example, if version 3.0 is published, when you click 'Edit Page', Office SharePoint Server 2010 creates version 3.1. Web page visitors see version 3.0 until version 4.0 is approved and published. 15
4.1 Uploading Images Located: http://training.pa.egov.com/build- your- site/content- Management/Pages/Uploading- Images.aspx Adding your images to the images folders will not place your images on a page in your site. You will be adding them to your pages later. Think of these folders, as storage for your images, and you will link to them as needed. Once the images have been published, they are available to the public and can be found in a search. 4.1.1 Uploading Images to Your Site Collection Images Folder Adding images to your Site Collection Images folder allows these images to be available for posting on any subsite or page within your website. Navigate to your homepage. Select Site Actions menu from the upper left corner and select View all Site Content. On the page, a list will appear and the 'Document Libraries' will be first. Select Site Collection Images. Select the Documents tab in the Site Ribbon at the top of your page and locate the Upload Document button that includes a dropdown menu with two choices. Select Upload Document for one image or select 'Upload Multiple Documents' to upload multiple images at the same time. Browse to the image on your computer. Be sure to check Add as new version to existing files if you want any image with the same name and extension to be overwritten. (All links to this image will reflect the changes.) Adding a Version Comment is optional. Press OK. A second window will pop up that will allow you to add a title, keywords, comments and other various items. You will also have an option to schedule your image if needed. Scheduling allows your image to be published during a set time span. If your image does not need to be scheduled, keep the settings as they are and press "Check In" which is in the upper left corner of the window. Note: It is recommended that you use the "Check In" function instead of "Save". Saving places your image in the library but the image may not display when the page is published until the image is Checked In". 16
IF YOU CHOOSE TO SAVE: Your image will be added to the Site Collection Images folder. Select your image and keep your cursor over the image until a pop up window appears. If the image is listed as Draft under Approval Status, you will need to select the Documents tab in your Site Ribbon and choose the option to Publish. A comments box will pop up but you can press "OK" to bypass it without any comments. When your image s approval status is set as Approved, your image is fully published and ready to post onto your pages. 4.1.2 Uploading Images to Your Subsite Images Folder Adding images to your subsite s image folder allows these images to be available for posting on that particular site and any pages. Navigate to the subsite to which you want to add your image. Locate your Site Actions menu from the upper left corner and select View all Site Content. On the page, a list will appear and the 'Document Libraries' will be first. Select Images. Select the Documents tab in the Site Ribbon at the top of your page and locate the Upload Document button that includes a dropdown menu with two choices. Select Upload Document for one image or select 'Upload Multiple Documents' to upload multiple images at the same time. Browse to the image on your computer. Be sure to check Add as new version to existing files if you want any image with the same name and extension to be overwritten. (All links to this image will reflect the changes.) Adding a Version Comment is optional. Press OK. A second window will pop up that will allow you to add a title, keywords, comments and other various items. You will also have an option to schedule your image if needed. Scheduling allows your image to be published during a set time span. If your image does not need to be scheduled, keep the settings as they are and press "Check In" which is in the upper left corner of the window. Note: It is recommended that you use the "Check In" function instead of "Save". Saving places your image in the library but the image may not display when the page is published until the image is Checked In". 4.1.3 Creating Folders to Store Your Images You can create folders within your Site Collection folders and your subsite s Images folder to help organize what you have uploaded. Once you have opened your images folder, select the Documents tab in the Site Ribbon and select New Folder. 17
Give the folder a name and press 'Save'. Select the folder to open it and begin adding your images using the steps listed previously. (You must add your folder first and then add images into it. You will not have the ability to drag and drop later.) TIP: When adding images, make sure they are small file sizes. The performance of the site will be affected when large files are added. You will have the ability to size them down once you add them to your pages. 4.2 Uploading Documents Located: http://training.pa.egov.com/build- your- site/content- Management/Pages/Uploading- Documents.aspx Adding your documents to the document folders will not place your documents on a page in your site. You will be linking to them later. Think of these folders as storage for your documents and you will link to them as needed. Once the documents have been published, they are available to the public and can be found in a search. 4.2.1 Uploading Documents to Your Site Collection Documents Folder Adding documents to your Site Collection Documents folder allows these documents to be available for posting on any subsite or page within your website. Start by navigating to your homepage. Locate your Site Actions menu from the upper left corner and select View all Site Content. On the page, a list will appear and the 'Document Libraries' will be first. Select Site Collection Documents. Select the + Add Document' at the bottom of the document list. Select the Documents tab in the Site Ribbon at the top of your page and locate the Upload Document button that includes a dropdown menu with two choices. Select Upload Document for one document or select 'Upload Multiple Documents' to upload multiple documents at the same time. 18
Browse to the image on your computer. Be sure to check Add as new version to existing files if you want any document with the same name and extension to be overwritten. (All links to this document will reflect the changes.) Adding a Version Comment is optional. Press OK. A second window will pop up that will allow you to add a title and also have an option to schedule your document if needed. Scheduling allows your document to be published during a set time span. If your document does not need to be scheduled, keep the settings as they are and press "Check In" which is in the upper left corner of the window. Note: It is recommended that you use the "Check In" function instead of "Save". Saving places your document in the library but the document may not display when the page is published until the document is Checked In". IF YOU CHOOSE TO SAVE: Your document will be added to the Site Collection Document folder. If the document is listed as Draft under Approval Status, you will need to select the Documents tab in your Site Ribbon and choose the option to Publish. A comments box will pop up but you can press "OK" to bypass it without any comments. When your document's approval status is set as Approved, your document is fully published and ready to post onto your pages. 4.2.2 Uploading Documents to Your Subsite s Document Folder Adding documents to your subsite s document folder allows these documents to be available for posting on that particular site and any containing pages. Start by navigating to the subsite to which you want to add your document. Locate your Site Actions menu from the upper left corner and select View all Site Content. On the page, a list will appear and the 'Document Libraries' will be first. Select Documents. Select the Documents tab in the Site Ribbon at the top of your page and locate the Upload Document button that includes a dropdown menu with two choices. Select Upload Document for one document or select 'Upload Multiple Documents' to upload multiple documents at the same time. 19
Browse to the document on your computer. Be sure to check Add as new version to existing files if you want any document with the same name and extension to be overwritten. (All links to this document will reflect the changes.) Adding a Version Comment is optional. Press OK. A second window will pop up that will allow you to add a title and also have an option to schedule your document if needed. Scheduling allows your document to be published during a set time span. If your document does not need to be scheduled, keep the settings as they are and press "Check In" which is in the upper left corner of the window. Note: It is recommended that you use the "Check In" function instead of "Save". Saving places your document in the library but the document may not display when the page is published until the document is Checked In". IF YOU CHOOSE TO SAVE: Your document will be added to the Site Collection Document folder. If the document is listed as Draft under Approval Status, you will need to select the Documents tab in your Site Ribbon and choose the option to Publish. A comments box will pop up but you can press "OK" to bypass it without any comments. When your document's approval status is set as Approved, your document is fully published and ready to post onto your pages. 4.2.3 Creating Folders to Store Your Documents You can create folders within your Site Collection folders and your subsite s Documents folder to help organize what you have uploaded. Once you have opened your documents folder, select the Documents tab in the Site Ribbon and select New Folder. Give the folder a name and press 'Save'. Select the folder to open it and begin adding your documents using the steps listed previously. (You must add your folder first and then add documents into it. You will not have the ability to drag and drop later.) 20
TIP: When adding documents to your site, use PDF format or compress your files into a ZIP file. Any file from a Microsoft program (Word, Excel) will prompt a user to login. 5 ADDING LINKS Located: http://training.pa.egov.com/build- your- site/content- Management/Pages/Insert- Links.aspx 5.1 Adding a Link to an Internal Site or Page In the page content editor box, type the text you would like to use as the link and highlight this text. Select the 'Insert' tab and locate the Link button that includes a dropdown menu with two choices. Select From SharePoint. Browse through the site structure that appears on the left to find the page or site you wish to link to, and select it. Press OK and your link is created. When you have created this link, a new tab will appear in the Site Ribbon called Format. Within this tab, you may add a description of the link for those with visual impairments. 5.2 Adding a Link to an External Site or Page In the page content editor box, type the text you would like to use as the link and highlight this text. Select the 'Insert' tab and locate the Link button that includes a dropdown menu with two choices. Select From Address. In the Address field, type the URL to your external site beginning with "http://" (ie. http://www.yourexternalsite.com). Press OK and your link is created. When you have created this link, a new tab will appear in the Site Ribbon called Format. Within this tab, you can choose to have your link open in a new tab rather than the current window. Do this by selecting Open in new tab, and you may add a description of the link for those with visual impairments. 5.3 Adding a Link to a Document In the page content editor box, type the text you would like to use as the link and highlight this text. Select the 'Insert' tab and locate the Link button that includes a dropdown menu with two choices. Select From SharePoint. Browse through the site structure that appears on the left to find the document you wish to link to, and select it. 21
Press OK and your link is created. When you have created this link, a new tab will appear in the Site Ribbon called Format. Within this tab, you can choose to have your link open in a new tab rather than the current window. Do this by selecting Open in new tab, and you may add a description of the link for those with visual impairments. If you wish, you can check to display your link with an icon. 5.4 Adding a Link to an E- mail In the page content editor box, type the text you would like to use as the link and highlight this text. Select the 'Insert' tab and locate the Link button that includes a dropdown menu with two choices. Select From Address. In the Address section, type "mailto:" followed by the e- mail address. Make sure you do not add any spaces between the text (ie. mailto:yourname@email.com). Press OK and your link is created. When you have created this link, a new tab will appear in the Site Ribbon called Format. You may add a description of the link for those with visual impairments. 5.5 Creating a Bookmark (Anchor) In the page content editor box, type the text you would like to jump to and highlight this text. Select the 'Insert' tab and locate the Link button that includes a dropdown menu with two choices. Select From Address. Enter "/ " in the address field. Press Ok. Under the Format tab, you will provide a bookmark name in the bookmark field. Do not use any spaces and make sure you create a unique name for each bookmark you create. Remove the "/ " from the URL field Create and highlight the text that you wish to use as a link, which when selected, will jump the user to the bookmark. Select the 'Insert' tab and locate the Link button that includes a dropdown menu with two choices. Select From Address. In the Address field, enter the pound (#) sign followed by the name of the bookmark you created earlier. Press OK and your link is created. Note: If you wish to have your bookmark jump from one page on the site to another page on site, follow the above steps. However, when prompted to enter your bookmark name into the Selected URL field, type in the URL of the site or page containing the bookmark, followed by the the pound (#) sign and the name of the bookmark you created earlier. (ex. http://www.yoursitename.pa.gov/subsite/#bookmarkname). Resource: Editorial Style for Inline Links http://meetcontent.com/blog/editorial- style- for- inline- links/ 22
6 CREATING A NEW PAGE Located: http://training.pa.egov.com/build- your- site/creating- Pages/Pages/default.aspx To create a page: Navigate to the site that you want to add your page under. Locate your Site Actions menu from the upper left corner and select New Page. In the New Page Name field, type the title of your page. This will show up in your navigation, site map, and breadcrumbs so make this name relevant to the information that will be presented on this page. Page names should be kept to a minimum character length ( 20-30 character recommended) Press Create. To change a page layout, please see the Page Layouts & Web parts section. 23
7 CREATING SUBSITES Located: http://training.pa.egov.com/build- your- site/creating- Subsites/Pages/default.aspx Navigate to the site that you want to add your site under. Locate your Site Actions menu from the upper left corner and select New Site'. On the right of the page, add a title. The title will show up in your navigation, site map, and breadcrumbs. Add a URL Name. Make sure you do not include any spaces or special characters besides dashes or underscores when creating your URL. Keep URL name character length to a minimum (20-30 characters recommended) Press Create. 24
8 EDITING A PAGE Located: http://training.pa.egov.com/build- your- site/creating- Pages/Pages/Editing- a- Page.aspx To begin editing a page, first navigate to the page you want to edit. Next locate your Site Actions menu from the upper left corner Select Edit Page The tools you will be using to make changes to your page are located within the Site Ribbon under the Editing Tools section: Format Text and Insert tabs. Text entered onto the page will be entered into the Page Content box. Page Content Box Your page content box will hold the content for your page including text, links, and images. You can type directly into the page content box. The Format Text tab and Insert Tab will be very useful when it comes to adding other elements to the page. Format Text Tab The Format Text tab in the Site Ribbon holds features and tools that are similar to Microsoft Word. In the following paragraphs, the web specific options and best ways to format your pages are described in more detail. You can type directly into your page content box or copy and paste. If you are pasting, you must select the dropdown within the paste icon under the Format Text tab in the Site Ribbon and select Paste as Plain Text. This removes all formatting and in the end, will make your HTML cleaner and keep your site looking uniform. If you need to remove unwanted formatting later on, highlight your text and select the Clear Format tool under the Format Text tab. Style sheets have been created to format the text depending on how the text is used. Once you check your page in, you will notice that the paragraphs, heading, links, etc. you created will change to match the site in color, font style, and font size; therefore, it is not necessary to choose colors, fonts, and sizes for these items on your own and you should avoid doing so. You will need to bold and italicize your content if you so choose. Insert Tab The Insert tab in the Site Ribbon holds tools to help you create links, add images, and more without needing to know HTML. To Create a Heading (H1- H4) Highlight your text. 25
Locate the Format Text Tab and select the Markup Styles dropdown menu. From here, you can select a heading that has been specifically created for your site and is appropriate for your content. If you prefer to work in HTML mode instead of design mode, you can click on the HTML dropdown and select Edit HTML source. Adding an Image to Your Page Put your cursor in front of the text you would like your image inline with, no matter if the image will be left, right, or centered. Locate the Insert tab in the Site Ribbon and select the Picture dropdown menu. Select From SharePoint, 'From Computer' or 'From Address' - depending on the location of your image. Browse to your image and select it. A new tab called Picture Tools will appear in your Site Ribbon. With these tools, you can adjust the width and height of the image, position the image, add space around the image and add an image style to the image, which will allow you to set a border. Lastly, be sure to add alternate text (Alt Text) to your images so those who have visual impairments or those who have chosen to disable images can have a description of the image. Inserting a Table Click in the page content box. Locate the Insert tab in the Site Ribbon, select the Table dropdown menu, and choose 'Insert Table'. This tool is best used when you have rows or columns of text that need 26
to be aligned. In the new window, select how many columns and rows you would like included in the table. Once the table has been added, two new tabs will appear in your Site Ribbon under the Table Tools section: Layout and Design tabs. The Layout tab will allow you to insert and delete rows and columns, merge and split cells, set a table width and height, column width, and row height in either percentages or pixels. The 'Design' tab allows you to change the style of the table and add a header and footer to your table. Align and adjust your text by using the Format Text tab in the Site Ribbon. Once you have completed making your edits on the page you can Save your page and keep editing or Save & Close. Remember to ALWAYS Check In your page and Publish your page (and any documents and images). If you do not Save, Check In and Publish your edits will be lost and will NOT appear on the public facing website. 27
9 MODIFYING NAVIGATION Located: http://training.pa.egov.com/edit- your- site/pages/modify- Navigation.aspx Depending on where you are in your site, whether you are on the top- level site or a subsite, your navigation may look different. You have the ability to change how your navigation looks. To Modify Navigation Start by navigating to the site you want to modify. If you are modifying the top- level navigation, start at the homepage. If you are modifying a subsite s navigation, start at the default page of that subsite. Locate your Site Actions menu from the upper left corner and select Site Settings. Under the section Look and Feel, select Navigation. Once on the page, scroll down to find the 'Navigation Editing and Sorting' section where you will see all of the pages and subsites you have created directly under your top- level site. Here you have the option to hide and move these items. If you are in the top- level navigation, you will only need to make edits to the items under Current Navigation. Above is an example view of the top- level navigation. Here, you can move items and show or hide them. If you want to hide a page or site so it no longer appears in your navigation, select the page or site by clicking on it so that it is highlighted, and select Hide. (Remember, hiding items in your navigation does not mean a user can not find a link to that page or site. A user can always find a link by searching or if you create a link to that page or site in another area of your site. For example, you might have a section with news articles on your site. Each article sits on its own page. You do not want every article page showing up in your navigation so you would hide these articles so only the News subsite is an option in your navigation.) Move a page or site up or down by selecting Move Up or Move Down. You can add a link to an already created page that sits in another section on the website. This way, you do not need to create two pages in two separate locations with the same information. Select Add Link, give the link a Title (this will be the text that will show up in the navigation), a URL (the URL of the page you are linking to), and press OK. (It is not recommended to link to a document or external site in your navigation.) 28
If you want to hide all subsites under your subsite, uncheck Show subsites. If you want to hide all of the pages under your subsite, uncheck Show pages. If you want the navigation on a subsite to be exactly the same as the top- level site, select Display the same navigation items as the parent site. 29
10 MANAGE CONTENT AND STRUCTURE The Manage Content and Structure page allows you to see the overall structure of your site. You can delete, copy, move pages, documents, and images within sites. MANAGE CONTENT AND STRUCTURE: Locate your Site Actions menu from the upper left corner and select Manage Content and Structure from the drop down menu You can access pages, documents, and images from each site by clicking the expand button, next to the site name, and selecting the folder you would like to view. Depending on what folder you have selected, the corresponding items will show up on the right side of the screen. If you have selected the pages folder, all pages under the subsite selected will show to the right 10.1 MOVE A PAGE, DOCUMENT OR IMAGE: Select the item you would like to move Select the drop down menu to the right of the item name OR Actions from the blue menu above the item list 30
Select Move A new window will appear. From here, expand the subsite you wish to move your item to and select the folder to which it will be transferred. You can only transfer pages to pages folders, documents to documents folders, and images to images folders If you select Move the page, document, or image will no longer appear under the original site. Any links that point to your page, document, or image will be updated to point to its new position automatically. 10.2 COPY A PAGE, DOCUMENT OR IMAGE: Instead of selecting Move from your drop down, you will select Copy Select the folder to which you want to copy your page, document or image Now your page, document, or image will be contained within two sites. Simply name your page to create a new page. When creating a site, fill in the site s title and URL. 10.3 DELETE A PAGE, DOCUMENT OR IMAGE: Select the drop down next to the item name you want to delete or select Actions from the blue menu above the item list Choose Delete. NOTE: Subsites have to be deleted in this view - but this option is only available to Site Owners or someone with the appropriate level of permission. Select the drop down next to the subsite you want to delete and select Delete. This will delete all pages, documents, and images contained under that subsite. When you delete your subsite from Manage Content and Structure, there is no way to recover a subsite. 31
11 QUICK TIPS Located: PAI Training > Edit > Quick Tips Getting a Document s URL: You may need to get a document s URL at some point so that you can link to it an area where browsing isn t an option. To retrieve the URL: Navigate to the folder containing the document (Locate your Site Actions menu from the upper left corner and select View all Site Content ). Right click on the document and select Copy shortcut. Sizing Images: You always want to size your images appropriately before you upload them. Use appropriate image formats for the web and the type of graphic you are posting. For example, JPG or PNG is usually a better format for photographs and graphics with subtle gradations of color. GIF is usually a better format for graphics with areas of solid color, such as line drawings and illustrations. Optimize graphics to the smallest size possible without harm to the clarity. Web image resolution should be reduced to 72dpi. Viewing Reports: If you want to see what is pending and has not been published on your site, you have the option to view reports. From the top- level site, locate your Site Actions menu from the upper left corner and select Manage Content and Structure. On the page, a menu bar will appear in blue directly above the list, including the 'View' option. Select this option so the dropdown menu shows. Choose 'Default View' to view an overview. Choose Checked Out to Me if you want to see pages that are you have checked out and have not been checked in or published. Choose All Draft Documents if you want to see pages that are checked in but not published. You can publish these pages directly from these views by selecting the drop down next to the page and selecting Publish. You can also click on each individual page to open it and then publish from the page itself. Exiting Your Site: You do not need to log out of your site; you may simply close the browser window. If you choose to log out, you may do so by clicking your name in the upper right corner of the website. Select the drop down and choose Sign Out. 32
12 STYLE GUIDE Located: http://training.pa.egov.com/sharepoint- basics/pages/default.aspx PAI, in conjunction with the Office of Administration and the Governor's office, have developed templates and a style guide to establish a consistent look and feel for the state of Pennsylvania's websites. This style guide will be updated as needed to ensure current information and resources are available for content administrators. Included in this section is information on content development, common design elements, best practices for accessibility and resources to learn more. The new templates utilize a mobile first philosophy and responsive design, providing a better user experience for website visitors. By incorporating the design practice of COPE, create once, publish everywhere, valuable content will be accessible for users across a variety of platforms and devices. Focusing on a the end user with responsive and mobile 1st design, the web experience will be more efficient and intuitive. 12.1 Responsive Design In responsive web design, page content will adapt to look good and work well on a vast range of devices. This is accomplished using HTML5, CSS3 and JavaScript. Media queries allow the browser to receive different style sheets depending on the viewport (browser window) width. Flexible grids and fluid media allow the website and its content to be device agnostic. JavaScript shims called polyfills and JavaScript libraries are used to backfill functionality in older browsers. 33
12.2 Mobile First Responsive design requires a mobile first approach with a focus on content. It's important to think about the small display first and then move outward to other devices. Think about how descriptive, structured content will be used on those devices. Approaching content with "mobile first" in mind will lead to clean layouts, concise writing, and easier to use web interfaces. 12.3 Content Style Located: http://training.pa.egov.com/sharepoint- basics/content- style/pages/default.aspx The agency templates were created using a responsive framework. This allows the website and it's content to adjust according to the device and browser used to view it. The following pages provide information on the basic styles that are available in the agency template, and may be used to help ensure consistency across agency website pages. 12.4 Mark up Styles Located: http://training.pa.egov.com/sharepoint- basics/content- style/pages/markup- Styles.aspx Heading styles are important, they help search engines, accessibility screen readers and site visitors understand what's on the page and how the content is structured. The H1 tag (heading 1 style) should always be used for the page title or heading. Headers signify the order of importance of content (i.e. most important heading is H1 and least important is H4) Applying Markup Styles to page headings is reviewed on Editing a Page. All of the Markup Styles have predefined styles applied such as font size, color, alignment and line spacing. PAGE HEADING 1 (H1) H1 Arial, Helvetica, San Serif Size- 33pt Style All Caps Color - #222222 Use the H1 heading style for the headings of your page. The heading of your page should match what is on the navigation menu. H1 tags are important for search engines and accessibility screen readers, by prioritizing the information on your page. 34
SUB HEADING 2 (H2) H2 - Arial, Helvetica, San Serif Size 26 Style All Caps Color - #222222 Use the H2 heading style for a sub- heading on your page. It would be the next most important heading after the H1. SUB HEADING 3 (H3) H3 - Arial, Helvetica, San Serif Size 20.9 Style All Caps Color - #222222 Use the H3 for any heading that would appear after the H2 heading. SUB HEADING 4 (H4) H4 - Arial, Helvetica, San Serif Size 20 Style All Caps Color - #222222 Use H4 to help differentiate content after the H1, H2 and H3 headings. There are other styles available from the Markup Styles menu that can be used to help differentiate text on a page. You can also use the Horizontal Rule to help define content areas. All of the markup styles also have pre- determined color, font and spacing associated with them. 35
12.5 PAGE FORMATTING Website visitors will form an opinion of your webpage in less than 1 second. By editing and formatting the content on your webpages you can make it easier for them to find and use the information they are seeking. FORMATTING TEXT By adhering to a few basic formatting guidelines you will make your pages easier to read. Apply Markup Styles to the headers of your content. This will prioritize your content and provide a quick overview of the page. Avoid using italics and underlines in your headers. Break down large areas of text into smaller more manageable sections. Do NOT center align content on a page- left justified text is much easier to scan. Think about what questions your site visitors might be asking - how you are answering them? KEEP PARAGRAPHS SHORT Writing for the web is different from print. A paragraph with one or two sentences is acceptable. Sometimes you can make your text more readable by moving it out of a paragraph and into a list or even a small table. Use words that your site visitors will understand. Keep sentences and paragraphs simple, cut unnecessary words. White space is good - it helps focus the eye on content. Likewise a wall of words can make reading content very difficult. WRITING EFFECTIVE LINKS Links provide navigation to information, by taking a visitor to a new page, site or document. Links should be written using clear, meaningful language, so when a visitor clicks it they know what to expect. Embedding links in paragraph text can be distracting. Site visitors may click a link and leave the page in the middle of the information you are providing, disrupting the flow. Adding links at the beginning or end of a paragraph or on a right side column may be easier to use. Links using program or product names may not mean the same thing to everyone. Don't use "Click Here" for link text. Be descriptive and use words that mean something to your site visitors. Links that open PDF documents should also be clear about what the document contains. For example: Plain Language Web Writing Tips (PDF) The Meet Content Blog has a more in- depth discussion of how to write meaningful links. This page is formatted using the Heading Styles 1,2,3 & 4. The paragraphs are short, with descriptive headings, and bulleted lists, making it easier to scan the page. 36
12.6 Template Layouts Agency Template Wireframe Layouts This style guide uses the state approved website templates. The templates have sections and elements that will be common for all state agencies. The PA.gov Agency Template comes with two navigation options. The agency will choose between using a top navigation (preferred) or left navigation menu. Each of these navigation options includes three choices of page layout. TOP NAVIGATION - Three Column Layout Recommended for homepages TOP NAVIGATION - Two Column Layout Recommended for homepages. subpages and tertiary pages 37
TOP NAVIGATION - One Column Layout Recommended for homepages, subpages and tertiary pages LEFT NAVIGATION - Two Row Layout Recommended for homepages LEFT NAVIGATION - Two Column Layout Recommended for homepages, subpages and tertiary pages LEFT NAVIGATION - One Column Layout Recommended for homepages, subpages and tertiary pages 38
Fly Out Menu Navigation Both navigation options will include fly out menu capabilities that will allow users to navigate to various areas of a site. Limit of 2 fly out menus per navigation choice Agencies will be limited to only having three levels of content within the new Agency Template Main Level - Homepage 1st Level - Subpage 2nd Level - Tertiary page Agencies should adjust their existing site maps to fit within this format. TOP NAVIGATION - One Level Fly Out Menu TOP NAVIGATION - Two Level Fly Out Menu 39
LEFT NAVIGATION - One Level Fly Out Menu LEFT NAVIGATION - Two Level Fly Out Menu 40
Top Navigation Left Navigation 41
12.7 Design Elements Located: https://auth- agency.pa.egov.com/sites/training/sharepoint- basics/pages/design- Elements.aspx Agency Template Elements: 1. PA.gov Logo This will be a clickable link that will direct a user to the PA.gov homepage when clicked Will display throughout the site on every page Header Background Image will display behind logo (recommend hi- resolution image, minimum of 1295 x 460 pixels) 2. Navigation (top or left) Users will use this area to navigate the website Will display throughout the site on every page Navigation must remain blue It is recommended to only use a maximum of 4 main categories. Nothing else should be listed here. Linking to PDFs or other websites should be reserved for the main content area, not the main navigation menu. 3. Search Box Users will be able to search the agency site Will display throughout the site on every page 4. Agency Logo and Agency Name Will display throughout the site on every page 42
The agency will be able to insert an agency official s name under their logo This logo will be a clickable link that will direct a user to the Agency homepage when clicked Logo should be at least 200 by 200 pixels in size The preferred format for the logo would be in a PNG format with a transparent background (hi- resolution vector graphic format - i.e. Adobe Illustrator, EPS format) Agency should provide details on exactly how they want the agency name spelled out If agency has a branded font they use for the agency name, the agency will need to provide the text in a graphic format (transparent PNG is preferred). 5. Quick Links May be linked to social media sites (Facebook, Twitter, YouTube), or other websites or pages. Will display throughout the site on every page 6. Alert Banner Only displays if agency enters an alert via the admin tool Will only display on the agency homepage 7. Content Area Area designated for agency to enter content for their site 8. Agency Specific Footer Intended for links specific to the Agency Will display throughout the site on every page 9. Enterprise Toolbar Will display throughout the site on every page Agency will not have control of this section COMMON ELEMENTS: Your agency template has styles already added into the CSS code. You'll be able to add some style and formatting to your pages by using the editing tools like bold, italic, and font color. Top Header: Agency Logo, Name and Tagline (logo should be hi- resolution vector graphic format - i.e. Adobe Illustrator, EPS format) Top Level Navigation Search Box Header Links Header Background Image Background Header Images: Agencies have the option to use a custom image for the background header image. Agency may select up to three images Image should be in a JPG format image size must be at least 1295 by 460 pixels Agencies will also have the option of selecting a pre- approved header image from the selection below: 43
Banner 1 Banner 2 Banner 3 Banner 4 Banner 5 Banner 6 Banner 7 Navigation: The Main Navigation should contain only main site categories. It is recommended to only use a maximum of 4 main categories. Nothing else should be listed here. Linking to PDFs or other websites should be reserved for the main content area, not the main navigation menu. Main Content Area: The main content area can be arranged in several ways. The template options include 3 column content area, 2 column content area, 1 column, or 2 row content area with either top navigation or left navigation. Footers: There are two footers on the website. The footer at the very bottom of the page is the "Enterprise Footer" it contains portal (state wide) links such as web policy information, support, and social media accounts. A web user can expand or contract the enterprise footer. The "Agency Footer" will contain agency specific links and information such as contact us, feed back forms, social media, etc. Agencies may add or remove content from the "Agency Footer" only. 44
Design Elements: Your agency template has styles already added into the CSS code. You'll be able to add some style and formatting to your pages by using the editing tools like bold, italic, font color. Fonts: The font used for the agency template is Arial. Images: Content images should be RGB or Index color format. Generally, size images at a resolution of 72dpi (dots per inch) with dimensions no wider than the maximum width of the space in which it will be displayed. Save images as JPG file type except when Index color or transparency is needed; in this case, save as PNG or GIF file type. For non- text content to be accessible, be sure to provide alternative (alt) text. For details, read WCAG 2.0 on providing alt text. TIP: When adding images, make sure they are small file sizes. The performance of the site will be affected when large files are added. You will have the ability to size them down once you add them to your pages. Video: DO NOT UPLOAD VIDEO files using the content management system (CMS). The web server is not set up to accommodate video files and media streaming. Use a video hosting service such as Vimeo or YouTube and add the embed code to your page/post. To be accessible, multimedia must provide synchronized alternatives (e.g. captions). For more information and help with adding video please contact your PAI Project Manager. Resources: WCAG 1.1 Provide text alternatives for all non- text content (www.w3.org/tr/2006/wd- UNDERSTANDING- WCAG20-20060427/Overview.html#text- equiv) WCAG 1.2 Provide synchronized alternatives for multimedia (www.w3.org/tr/2006/wd- UNDERSTANDING- WCAG20-20060427/Overview.html#media- equiv) Documents: To the extent possible, provide content as HTML (as part of the web page). When it becomes necessary to link a document file (e.g., PDF), make sure it s accessible. If the PDF must maintain its appearance across platforms, be sure to embed uncommon fonts (if any). Resource: Making PDFs Accessible (http://www.hhs.gov/accessibility.html) 45
12.8 Accessibility and Section 508 Located: https://auth- agency.pa.egov.com/sites/training/sharepoint- basics/pages/accessibility.aspx The Americans with Disabilities Act was passed by the United States Congress in 1990 to ensure access to employment, state and local government programs and services, access to places of public accommodations, transportation, non- profits service providers and telecommunications for people with disabilities. Websites of state and local governments fall in the category of public services under Title II of the ADA, which means that extra steps have to be taken to ensure that people with disabilities can still access the resources of those websites. Section 508 (1998) is part of the rehabilitation act and requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency. WCAG (Web Content Accessibility Guidelines) The W3C is an international, vendor- neutral group that determines the protocols and standards for the web. They create the specifications for HTML, CSS, etc. The goal of Web Accessibility Initiative (WAI) is to develop these accessibility standards. WAI working groups develop accessibility standards for web browsers, authoring tools, evaluation tools, and web content, to name a few. The Web Content Work Group s standards are called the Web Content Accessibility Guidelines (WCAG) and are divided in to three levels of conformance: A, AA, and AAA. WAI Web Accessibility Initiative (www.w3.org/wai) WCAG Web Content Accessibility Guidelines (www.w3.org/tr/wcag) BEST PRACTICES: Don't rely solely on color to differentiate items or as a navigational tool. Images should include Alt text, and complex images should have descriptive text in the caption or paragraph below. Audio should have transcripts available Video should provide captioning and or transcripts Consider 508 testing Create Accessible PDF Files Minimize page download time Web Content and Accessibility information for Government Agencies - DigitalGov.gov (http://www.digitalgov.gov/) 46
12.9 Resources Located: https://auth- agency.pa.egov.com/sites/training/sharepoint- Basics/Pages/Resources.aspx Support: For technical support, contact PAI at 717-798- 9019 or email pahelp@egov.com. For Training Support, email PAI at patraining@egov.com. Training Evaluation Survey Did you attend one of our training sessions? Please take a few minutes to tell us about your experience. Visit our Agency Website Training Survey. Online Resources: PAI Agency Content User Guide.pdf version 1.0 2/2014 (step by step CMS instructions) Stock images - (http://www.sxc.hu/) Online tutorials - (http://www.lynda.com/sharepoint- training- tutorials/306-0.html) Books for people who make websites - (http://www.abookapart.com/) World Wide Web Consortium - Groups - (http://www.w3.org/community/groups/) Government website information - (http://www.usa.gov/) Usability information - (usability.gov) Books/Articles: Don't Make Me Think, Third Edition, January 3, 2014 - (http://www.sensible.com/dmmt.html) Content Strategy for the Web, Kristina Halvorson & Melissa Rach, Second Edition, 2012 - (http://contentstrategy.com/) Content Strategy for Mobile, Karen McGrane, November 5, 2012 - (http://www.abookapart.com/products/content- strategy- for- mobile) Responsive Design and Content, November 21, 2013 - (http://alistapart.com/column/responsive- design- wont- fix- your- content- problem) Mobile First, Luke Wroblewski, 2011 - (http://www.abookapart.com/products/mobile- first) Writing for the Web Checklist - Plain Language Web Writing Tips (doc) Software: Notepad and Notepad++ Windows operating system includes a text editor called Notepad. Using Notepad to cut and paste content will remove tags and code copied from Word or other external sources. Notepad++ is open source software that is free to use and offers more features than the regular Notepad version. Mac users can use TextEdit which comes with OSX operating systems. Image Editors: 47
Adobe Photoshop and Fireworks Considered the industry standard for image editing these programs are expensive and can take quite a long time to master. Photoshop has a free web- based version called Photoshop Express. Other Image Editors: GIMP - Free open source software may be used on Windows, MAC and Linux operating systems. Paint.NET - Free software for Windows only. Pixlr - Free web based software. Fotoflexer - Free web based software. 48
13 ADVANCED FEATURES Topics found in this section are not common for everyday use. Managing alerts and editing the footer are advanced features that are usually performed by select users. If you need help with some of the advanced features listed, consider attending a Training Lab for more instruction. Contact the Project Manager assigned to your agency for more information. 13.1 Adding/Editing Officials List Located: https://auth- agency.pa.egov.com/sites/training/advanced- features/pages/edit- Officials- List.aspx To make changes to the Officials listed in the Agency banner area under the Agency logo go to: Site Action Menu then View All Site Content Go to Lists then select Officials Open the Officials list, select check box to left of list name to be edited Enter information into the dialogue box 49
Select Save 13.2 Adding/Editing Agency Footer In order to change the categories and links on the agency footer, start by navigating to the top- level site. Select "View All Site Content" Locate the 'Lists' section in the center of the page CATEGORIES: ADDING A CATEGORY To add a Footer Category select the "Agency Footer Categories" list. **You must create Agency Categories before you make links in that category. You are limited to four Agency Footer Categories in the Footer. Each category may have up to eight links. To add a new category select "Add New Item" from below the list of categories or from the ribbon (List Tools, Items tab, New Item). 50
A pop up dialogue box will appear. Fill out the Category field. Please use a title with 15-20 characters or less URL field and Description field are optional (Use the URL field if you would like to create a category landing page which could have more information and links - create the page first then add URL) Display order field is required (used to sort categories on the Agency Footer) Select Save EDITING AND DELETING FOOTER CATEGORIES On your Auth- Agency site navigate to the top- level site (homepage) Select "Site Actions" from SharePoint ribbon Select "View All Site Content" from the menu 51
Locate the 'Lists' section in the center of the page Select "Agency Footer Categories" list Select the item you want to edit or delete More options will appear in the ribbon, select edit or delete ADDING FOOTER LINKS TO FOOTER CATEGORIES On your Auth- Agency site navigate to the top- level site (homepage) Select "Site Actions" from SharePoint ribbon Select "View All Site Content" from the menu Locate the 'Lists' section in the center of the page Select "Agency Footer" list Select "Add new item" 52
On the pop up that appears, fill in the URL fields. In the description field enter the name you want displayed for the URL. It is recommended you limit the name to 15-20 characters. You will also need to fill out the display order. This lets SharePoint know what order to place your links. The category drop menu contains a list of categories you created in the previous section. Click the drop menu and select the category you want this link to appear under. Select Save when complete. You will be returned to a screen with your list of footer links Your new footer link should appear here. If you do not see your new category or footer link please repeat the steps in this section. EDITING AND DELETING A FOOTER LINK From the list of links, select the check box to the left of the link you would like to edit Select "Edit Item" from the Site Ribbon The pop- up box will allow you to edit the Category, URL, Description and Display Order Select 'Save' or 'Cancel' when you have finished 53
To delete a link select "Delete Item" from the ribbon You will see the changes after a content deployment (30 minutes) has completed. 13.3 ADD CATEGORY PAGE The footer is designed to only have Links listed (not blocks of text) If you have text you would like to add, you can do so by creating pages that are linked from the Category Name (Category Page Link) or by links listed under the Category (Agency Footer Link). To add these pages navigate to the Top Level (homepage) of your site: Select Site Actions menu Select New Page Create a New Page using the name of the Category in your footer (i.e. Contact Us, Resources, Support) 54
Add any content you need on this page Check In and Publish this page Remember to Hide this page from the Navigation or it will appear on the Top level menu Open a new browser Tab or Window, then navigate to the Top Level of your Site (homepage) Select Site Actions menu Select View All Site Content Select the List titled Agency Footer Categories Select the check box to the left of the Category, you want to link the new page to (i.e. Contact Us, Resources, Support) Select Edit Item from the ribbon In the pop up window add the URL for the new page in both of the fields Under Category URL (cut and paste from the other browser tab you have open) Leave Display order as is Select Save A link will now be added to the Category name (it will now appear with an underline beneath the name) You can also add pages to links that appear under a category in the footer (i.e. Agency Footer Link) you would add these the same way as above by using the List titled Agency Footer. You will see the changes after a content deployment (30 minutes) has completed. 13.4 CHANGE BANNER IMAGE You can change the banner images of your site via the SharePoint Administration Application. By default, the agency template comes with preloaded background banner images that are used throughout your agency template navigation. You may continue to use the provided images or you may upload your own custom background images. Administrators do have the option to add up to five of their own approved images to the agency site. One Image will be used for the homepage and the other four may be used as background banner images for your subsites based on your top navigational links. You may not swap background images out per page. The image you have selected for your main top navigation link will be the same image used for all pages underneath. 55
REQUIREMENTS FOR CUSTOM BACKGROUND IMAGES Image should be in a jpg format Image should be at minimum 72 DPI Image size must be at minimum 1295 by 460 pixels Instructional or informative text should not be included in the image Images must be approved by the Governor s Office Background images should be for decorative purposes ADDING ADDITIONAL BACKGROUND BANNER IMAGES As stated above, your site comes with one standard background image used for every page of your site. This section contains instructions on adding a new main homepage image, as well as, main navigation subsite images. Navigate to the homepage of your agency website in the Auth environment The URL will be similar to auth- agency.pa.egov.com/sites/agencyname Login using your CWOPA credentials Click on Site Actions In the menu that appears click on View All Site Content 56
On the new page that appears, under Document Libraries,click on Banners 57
After you Select the Banners library, you will see a listing of the banners that have been preloaded to your site. You may replace these images with your own. The image you upload MUST have the same name as the image you are replacing. The image names are as follows banner- agency.jpg is for the homepage background banner image banner1.jpg is for a your first top navigation subsite banner banner2.jpg is for a your second top navigation subsite banner banner3.jpg is for a your third top navigation subsite banner banner4.jpg is for a your fourth top navigation subsite banner Please Note: If you do not use this exact same naming conventions your images will not appear. In order to upload your own background image click on the Add Document link In the pop up that appears click on Choose File and navigate to the image you want to upload. If you are overwriting an existing image verify that the Overwrite Existing files check box is selected Click on OK after you have selected your image 58
You can verify that your image was uploaded by looking at the timestamp. You may also click on the image name and view the image in your browser. If the image is not the image you wanted then repeat steps 5-7. TROUBLESHOOTING Issue: Image does not appear in site Resolution: Verify that you used the correct name and it was saved in the correct image format. Images should always be jpg images and must have the jpg extension after the name. The image names MUST be: banner- agency.jpg is for the homepage background banner image banner1.jpg is for a your first top navigation subsite banner banner2.jpg is for a your second top navigation subsite banner banner3.jpg is for a your third top navigation subsite banner banner4.jpg is for a your fourth top navigation subsite banner Issue: The image appears stretched or squished. Resolution: Verify that your image is saved in the proper dimensions and proper DPI Image should be at minimum 72 DPI Image size must be at minimum 1295 by 460 pixels Issue: Where can I place an alt tag for accessibility? Resolution: Since the banner images are background images an alt tag will not display on a screen reader. Because of this, background images should be used for decorative purposes only and not contain descriptive of instructional text 59
Use a banner image similar to this Do not use a banner image containing informative or instructional text For more information concerning background images, alt tags and accessibility, please visit this site: http://webaim.org/techniques/alttext/#background Issue: The entire image is not displaying. The top bottom and sides are cut off. Resolution: In the preferred dimensions some minor clipping may occur on various screen resolutions. In order to minimize this it is recommended you keep the center of interest in your image within a centered 1000 pixel by 350 pixel window. Please contact the Pennsylvania Project Manager assigned to your project if you have any other issues or are not able to resolve your issues with the resolutions provided in the troubleshooting section. 60
13.5 MANAGE BANNER LINKS Located: https://auth- agency.pa.egov.com/sites/training/advanced- features/pages/manage- Banner- Links.aspx Agency websites may display links on the right side of the banner area. You have the ability to add, edit or delete these links as needed. To manage the banner links: Navigate to the top- level site (homepage link) Select Site Action Menu then View All Site Content Navigate to Lists (center column) and select Links Select Add New Item to add a new link To edit and existing link, select the link you want to edit, then select Edit Item from the ribbon If you are adding a link there should only be a maximum of 3 links on the banner. Enter the URL and the description (which will serve as the link name shown on the page) If needed, add information to the comments field - this is helpful for version information. 61
It's best to keep the link description as brief as possible. Select Save 13.6 MANAGING ALERTS Located: https://auth- agency.pa.egov.com/sites/training/advanced- features/pages/managing- Alerts.aspx GENERAL USE RULES Designated Commonwealth employees may publish Alerts to their Agency website. Use the credentials provided by Pennsylvania Interactive to login to the Alerts list. THINGS TO KNOW: Alerts will be published based on the date and time designated by you and will appear on the Agency website homepage The alert will display on the homepage until it has expired Currently a maximum of 3 alerts can be displayed at a time An alert can be a link to an external site if you choose to enter a URL Visitors can close the Alert dialog on the homepage by selecting the 'Close' option in the upper right corner of the alert box; however, the alert dialog will reappear upon refresh of browser ALERT SEVERITY LEVELS ARE: HIGH Red bar MEDIUM Orange bar LOW Blue bar 62
ALERT BANNER EXAMPLES: ADDING ALERTS Locate your Site Actions menu from the upper left corner Open 'Site Actions' and select 'Add an Alert' You will be prompted to log in with a new tab to the site s list 63
Login using the credentials provided to you by Pennsylvania Interactive (CWOPA credentials will not work) On the list page, your agency list should be highlighted by default If not select your agency under 'Lists' on the left menu Select 'Add New Item' Complete the following fields in the pop up window: o o Title - Title of the alert that displays on the homepage URL - (optional) If you have an external site you that contains more details of the alert, you may enter that URL here You may also type the description in the field below it; however, it will not be displayed to the user Start At - Date and time you want the alert bar to display on the homepage Expires - Date and time you no longer want the alert bar to display on the homepage Severity - Drop down menu with High, Medium, Low options and will determine the color of the alert bar Display Order - If multiple alerts are set display at once, you can set the order the alerts will display. Maximum of 3 alerts can be active at once.this only works on alerts with the same severity Alert Description - You can enter additional details for the alert which will show on the 'More Details' page when this option is selected Display Expired Date on Alert Banner - Select if you want the alert banner to show a viewer the time when the alert will expire Select 'Save' Reload your agency website and the alert will be displayed 64
To check the description, select 'More Details' in the alert bar. You will be directed to the 'Alerts Detail Page' EDIT ALERT Select Site Actions menu in the upper left corner Select 'Add an Alert' from the menu, login to the agency alert list page when prompted By default your agency list should be selected. Navigate to the alert you would like to edit Choose 'Edit item' Modify the desired fields 65
Select 'Save' DELETE ALERT Locate your Site Actions menu from the upper left corner and select View All Site Content Select 'Add an Alert' from the menu, login to the agency alert list page when prompted By default your agency list should be selected. Navigate to the alert you would like to edit Select the check box to the left of the Alert item name Choose 'Delete item' from the ribbon or by selecting the drop down menu to the right of the item name Select 'OK' when prompted to verify delete and send to the Recycle Bin. 66
13.7 ADDING WEB PARTS Agencies have three layout options to choose from when creating pages on their websites. The layouts contain web part zones, which are used to group and organize web parts on a page. LAYOUTS The one column layout is the default layout applied to a new page when created. You may also use the 2 or 3 column layouts. When you change the layout you will see the web part zones already positioned on the page. WEBPARTS Web parts contain the data or content to be viewed on the web page. The web part zones are sub- containers within the page, which can contain one or more web part. By grouping web parts on the page, inside of zones, it's possible to arrange web parts and apply customized settings, such as style and permissions. CONTENT EDITOR WEB PART There are many web parts available for SharePoint but the most common one you will use is the Content Editor Web Part. Use the Content Editor Web Part to add formatted text, tables and hyperlinks to your page. ADDING A CONTENT EDITOR WEB PART A web part is an individual component of content that can be placed on a page. When adding a web part to a zone select the zone where you want to add the web part. Then select the Add a Web Part link. 67
The ribbon at the top of the page will change and display Page Tools. Select Media and Content from the Categories column. Then select Content Editor, then, Add. The Content Editor web part will be added to the zone and you can begin to add content. ADDING CONTENT TO THE CONTENT EDITOR WEB PART Type content directly into the web part. You may format text by using the editing tools available in the ribbon. Add images and hyperlinks in the content area by using the Insert tab menu options. Tables may 68