CORPORATE WEBSITE DNN CMS GUIDE FOR CONTENT MANAGERS

Transcription

1 CORPORATE WEBSITE DNN CMS GUIDE FOR CONTENT MANAGERS V DNN documentation is available at: 1 CONTENTS 2 Logging In 3 Site Structure and Main Sections 4 Editing Content on a Page 5 How to Clean Up Pasted Text 6 WYSIWYG (What You See Is What You Get) Toolbar 7 Font and CSS Style Menus 8 Document Links 9 Formatting Tables 10 Tables with Header Rows 11 Reformatting Tables Copied from the Old Website 12 Formatting Bulleted Lists 13 Formatting Buttons 14 Adding and Formatting Photos and Other Images 15 Home Page Photos 16 Sectional Banner Photos 17 Marketing Banners 18 Embedding Videos 19 Version Tracking Adding Pages 22 Making Pages SEO Friendly 23 Adding News Releases 24 Capitalization and Punctuation Styles Site Admin Only 25 Changing Content Container Size 26 Links In Top Navigation and Footer Links 27 Creating Vanity Urls 28 Page Permission Settings 29 Return Code Module

2 DNN CMS EDITOR S GUIDE PAGE 2 Logging In Start by logging in to DNN here: wwwq.westarenergy.com/admin-access The site administrator will set up users and privileges. Once logged in to DNN, go to the page in the site that you want to edit. Be sure the Mode menu in the upper right is set to Edit. Another way to locate pages to edit is by going to Admin > Page Management (below, left). Find the desired page on the site tree (below, right) in the left column (expand sections with the + icons as needed). Right click on the desired page and select View Page.

3 DNN CMS EDITOR S GUIDE PAGE 3 Site Structure and Main Sections All the pages that content editors will manage are in the Content folder in the DNN site tree (screenshot below) found on the Page Management admin page. It s very important to not change, edit or otherwise alter any of the eight main sections in the content folder on the DNN Page Management admin page: My account Services Outages Helpful resources Community programs About us Careers Contact Each of those sections corresponds to a section in the footer navigation and altering the main sections could affect the footer adversely. Content section of DNN site tree on Page Management admin page all content pages are in this folder. These eight sections correspond to the sections in the footer navigation (below).

4 DNN CMS EDITOR S GUIDE PAGE 4 Editing Content on a Page Hover your mouse over the content area you want to edit and select Edit Content under the pencil icon. The Edit Content panel appears (below). For a new page, replace the placeholder content with the new content. Text can be copied and pasted from other sources, but it is best to strip out formatting from copied text first by pasting it into a plain text application (like Windows Notepad or Mac TextEdit), and then recopying the text and pasting it into the DNN editor (see next page). As an alternative to copying and pasting twice (using a plain text application), you can paste formatted text into the DNN text editor and strip out the formatting using the eraser tool. Use the WYSIWYG (What You See Is What You Get) toolbar to style the content. See page 6 for explanation of the WYSIWYG tools.

5 DNN CMS EDITOR S GUIDE PAGE 5 How to Clean Up Pasted Text When you copy and paste content into the DNN content editor from another source (such as another web page or a Word document), invisible formatting code that exists in the original source can make it difficult to reformat it using the WYSIWYG tools. The best way to prevent this issue is to clean up the copied content before pasting it into DNN. To do this, copy the original source and paste it into a plain text document (Windows NotePad or Mac TextEdit), and then copy it again out of the plain text document and paste it into DNN. That cleans everything out and you can start formatting from there. The same technique can work if you need to clean up an existing DNN page that has legacy formatting from another source. Copy all the content out of DNN and proceed as described in the paragraph above. Before pasting it back in, switch the view to HTML (at the bottom of the editor window) and delete any remaining code. It helps to print the page for reference first so that you know where to put the subheads and bullets after pasting it back in, because those are all stripped out in the process. (Note also that links and images are stripped out, so those will need to be put back manually, which is good because these all need to be reformatted to match the new site styles.) Note that there is a tool on the WYSIWYG toolbar designed to clean up formatting. The Strip All Formatting selection works well, but the other selections don't consistently work well. Therefore, the method described above is recommended. There is also a tool on the WYSIWYG that allows you to strip formatting when copying and pasting from another source. This tool achieves the same results as the method described at the top of the page. The Paste Plain Text option is recommended. (Note that the above tools may work better as DNN releases updates in the future.)

6 DNN CMS EDITOR S GUIDE PAGE 6 WYSIWYG (What You See Is What You Get) Toolbar In the Edit Content panel, when you hover over a tool with your mouse, a label will tell you what each tool does. Here is a list: Spellcheck, Find & Replace, Paste Options, Undo, Redo Insert Media (Images and Documents) Hyperlink Manager, Remove Link Insert Symbol, Insert Table, New Paragraph, Toggle Full-Screen Mode, Insert Date, Insert Time Bold, Italic, Underline, Strikethrough, Superscript, Subscript Indent, Outdent, Numbered List, Bulleted List Convert to Lower Case, Convert to Upper Case, Horizontal Rule Font Styles, CSS Styles, Format Stripper (Details for table styling, font styling and CSS styling are shown on the following pages.)

7 DNN CMS EDITOR S GUIDE PAGE 7 Font and CSS Style Menus (Links to PDF, Excel and Word documents have special styles. See next page for details on adding document links.)

8 DNN CMS EDITOR S GUIDE PAGE 8 Document Links Follow these steps to achieve document links that will automatically show the PDF, Word or Excel document icons. 1. Be sure the text that describes the document to which you will link is on its own line. (Use New Paragraph tool to separate it from other text.) Select the text. 2. On the toolbar, select Document Manager from the Insert Media icon. 3. In the Document Manager dialog box: Select the desired folder and locate and select the PDF, Word or Excel document you want to link to Set Target to New Window In Tooltip field enter Opens PDF in new window Set CSS Class to linkpdf (or linkdoc or linkxls as appropriate) 4. Click Insert.

9 DNN CMS EDITOR S GUIDE PAGE 9 Formatting Tables 1. Place your cursor on the page where you want the table and, using the Insert Table tool on the toolbar, select the columns and rows desired. (You can also select Table Wizard directly and set the columns and rows there). 2. Right click on any cell in the new table and select Table Properties. 3. On the Table Properties tab, choose either tablehead or tablenohead depending on whether or not your table will need a blue header row. If you are making a table with no header row, you are done. (If you need a header row, the instructions continue on the next page.) Click OK and your table will appear as shown below. Click in each cell and type your text.

10 DNN CMS EDITOR S GUIDE PAGE 10 Tables with Header Rows Follow the steps 1-3 on the previous page and on the Table Properties tab, select tablehead on the CSS Class menu. Then, on the Accessibility Tab enter 1 in the Heading rows field (or 2 or more if there are multiple heading rows). Click OK and your table will be formatted as shown below.

11 DNN CMS EDITOR S GUIDE PAGE 11 Reformatting Tables Copied from the Old Website 1. Right-click on the table and select Table Properties from menu. 2. Format the table as described on the previous pages. If the resulting table has a black border, you will need to remove it manually. 3. Go into the HTML view and remove the following code (highlighted in blue) from the table:

12 DNN CMS EDITOR S GUIDE PAGE 12 Formatting Bulleted Lists To create a bulleted list in text, ensure that each line to be bulleted is its own paragraph (each line should have a </p> at the end in the HTML view). (The New Paragraph tool can be used to achieve this.) Select the lines to be bulleted and click the Bulleted List tool. One idiosyncrasy you may come across when formatting bulleted lists is that it is sometimes difficult to return to the normal paragraph style at the end of a list. If you have that problem, put your cursor at the end of the bulleted text and click the Bulleted List tool again. In these instances, the Bulleted List tool acts like an on-and-off switch, so you can use it to "un-bullet" at the end of a list.

13 DNN CMS EDITOR S GUIDE PAGE 13 Formatting Buttons Due to limitations of the DNN CMS, placing a button into the content of a page can only be done using HTML (it is not available on the WYSIWYG toolbar). Follow these steps to create the button above: 1. On the page you want to place the button, go to the HTML view in the Content Editor. 2. Copy the following HTML. Place your cursor where you want the button and paste it in place. <div class="btn-content"><a href=" title="opens a new window" target="_blank">button text</a></div> 3. After pasting the HTML, modify it as follows: <div class="btn-content"><a href=" title="opens a new window" target="_blank">button text</a></div> Change the yellow highlighted text (above) to the web page you want to target. For a page on the Westar site, use only the part of the URL that comes after (for example: /reliabilitree ). For other sites, use the entire URL as shown in the highlighted text (above). Be sure to include the entire URL for the destination page, starting with and ending with.html,.asp, etc., e.g.: For buttons that link to pages on other websites, include the highlighted text below: <div class="btn-content"><a href=" title="opens a new window" target="_blank">button text</a></div> For buttons that go to pages on the Westar site, delete the highlighted text so that it looks like this: <div class="btn-content"><a href="/reliabilitree">button text</a></div>

14 DNN CMS EDITOR S GUIDE PAGE 14 Adding and Formatting Photos and Other Images Before they are uploaded to the DNN CMS, web images should be prepared using the Save for Web feature in Photoshop so they are the correct pixel dimensions and the smallest possible file size. Avoid uploading photos that are too large and resizing them using the DNN content editor. Follow these guidelines when preparing images: Generally speaking, photographs should be saved as JPEGs and flat art illustrations (without tonal gradations) should be saved as PNGs. Full column width photos should be 1008 pixels wide. The optimal size for in-column photos would be about 1/3 of the column width (so that you get a nice 1/3-2/3 balance on the layout as the text runs around the photo). Therefore, the recommended width of in-column photos is about 330 pixels. Once you have your image prepared and optimized in Photoshop, place the image in a content page by first putting your cursor where you want the image to be, then selecting Image Manager under the paperclip icon in the WYSIWYG. In the Image Manager, click +Upload, browse your hard drive for the image and upload it. Find the newly uploaded image in the thumbnail gallery and click on it. Then: 1. Click the Properties tab on the bottom of the right pane. 2. Remove the Width and Height (if DNN fills it in). 3. Add Alt Text a brief description of the image. 4. Click Insert For full column width images, do not set a CSS Class. For less than full-width images, you can set the CSS Class (Left, Right, Centered) in the Image Manager or by clicking on the image and selecting the CSS Class on the WYSIWYG.

15 DNN CMS EDITOR S GUIDE PAGE 15 Home Page Photos Home page communicates relationship between Westar and our customers. Authentic, diverse human presence within each shot. Images are shot slice of life rather than portrait style or subjects acknowledging camera. Images are framed center-to-center-left to accommodate home page login box layout. The home page allows us up to five images that will change randomly with each screen refresh. Images must meet these criteria: Exactly 1440x960 pixels JPEG Files must be named one of the following names: o home-photo-1.jpg o home-photo-2.jpg o home-photo-3.jpg o home-photo-4.jpg o home-photo-5.jpg The images must be placed in the following folder (accessed from DNN Admin > File Management): Root > Images > Home-Photos There must be five photos in the Home-Photos folder at all times. If fewer than five photos are desired, one or more must be duplicated in the folder with a different name. For example, if you want to rotate just the three photos shown at right, two if them will be duplicated in the folder as follows: home-photo-1.jpg (child and worker) home-photo-2.jpg (workers in bucket truck) home-photo-3.jpg (wind turbine) home-photo-4.jpg (child and worker) home-photo-5.jpg (workers in bucket truck) If the images are well optimized, the file size should be 100KB 150KB.

16 DNN CMS EDITOR S GUIDE PAGE 16 Sectional Banner Photos A photo banner is included at the top of each page of the website (except in the My Account section and on form pages). These photos provide continuity within each of the seven sections to which they correspond. Content headers communicate warmth and beauty of seasonal Kansas landscape and urban footprints. Filter is beauty and color, to insert emotion into functional site strategy. Goal is to communicate empathy with our customer base, let them know we see the same beauty in our homeland as they do and we ll do everything in our power to protect it. Images are strategically taken to communicate effectively when cropped to thinner ratio of content pages. The photos should be changed quarterly. This will keep the site fresh and in sync with the changes of the seasons each year. To change out the images, all that is required is for the existing images to be replaced with new photos of the same pixel dimension and having exactly the same names. Images must meet these criteria: Exactly 1440x206 pixels JPEG Files must be named exactly as follows: o outages-section-header.jpg o services-section-header.jpg o helpful-resources-section-header.jpg o community-programs-section-header.jpg o about-us-section-header.jpg o careers-section-header.jpg o contact-section-header.jpg The images must be placed in the following folder (accessed from DNN Admin > File Management): Root > Images > Banners If the images are well optimized the file size should be 50KB 100KB.

17 DNN CMS EDITOR S GUIDE PAGE 17 Adding Marketing Banners Marketing banners can be added to any page in the same location as the sectional banner images. Note: marketing banner images should be the same pixel dimensions as sectional banner photos: Exactly 1440 x 206 pixels If the page you want to add the banner already has a top sectional banner photo, you will replace the sectional image with the marketing banner by editing the content in the module s Content Editor. To add a marketing banner on a page that does not include a sectional banner image, you must first add a Picture Pane module to the top of the page, as follows: From the Modules menu, select: Pane = Picture Pane Insert = Top Click Add Module Once the new Picture Pane module is inserted, hover over the pencil icon and insert the banner image just as you would with any content.

18 DNN CMS EDITOR S GUIDE PAGE 18 Embedding Videos Video content should be hosted on a streaming video site such as YouTube, Vimeo or Brightcove. These instructions are for embedding videos hosted on YouTube, but other services will be similar. First, locate the video to be embedded on YouTube. 1. Click Share 2. Click Embed 3. Copy the embed code. 4. In the HTML view, paste the embed code into the DNN content editor where you want the video to appear. Note that you do not need to change the width and height dimensions of the video. Videos will be sized to the full column width of the site and will automatically adjust for different screen sizes.

19 DNN CMS EDITOR S GUIDE PAGE 19 Version Tracking DNN automatically saves previous versions of each page. The site is set to save the past 10 versions, but this can be increased or decreased as desired. To view a previous version, go into the Edit Content panel under the pencil icon (see page 4). Select the Version Tracking tab at the top of the window. You can compare any two versions by checking the Compare box in the left column and clicking the Compare button. You can view any previous version using the magnifier icon under Actions (or by selecting the Content Preview tab and the version number from the drop-down menu). You can restore any previous version using the back arrow under Actions.

20 DNN CMS EDITOR S GUIDE PAGE 20 Adding Pages To add a new page to the site, you can use one of these two methods: 1. From the Page Management page: On the site tree, right click a page in the section where you want to add a new page and select Add Page(s). Name your new page and click Create Page(s). You can make several new pages as once, and even make parent and child pages all at once by using > like this: Parent one > Child one > Child two 2. From the top page menu on any page: Hover over Pages and name your new page. Leave the Template set to Default. On the Insert menu, specify the page location and click Add Page. s New pages added use the default page template shown on the next page. (Continued on page 21)

21 DNN CMS EDITOR S GUIDE PAGE 21 (Adding pages, continued) 3. Insert the appropriate sectional banner photo. How to update the header photo: Hover over pencil icon for this module and select Edit Content. In Content Editor, click to HTML view and insert HTML for appropriate image. HTML example: <img src="/portals/0/images/ Banners/services-section-header.jpg" alt="services section header photo" /> The HTML should be copied from another header photo content container in the corresponding section (see page 16). If this new page is in the My Account section, hover over the gear icon and delete this header photo module altogether. Note: Regardless of which method you use to create a new page, go immediately to the instructions on the next page of this guide and make the new page SEO friendly. Important Note: Parent and Child Pages Because of the way the Westar site navigation works, parent pages cannot have content (only child pages can have content). That means every parent page leading up to a child page must be disabled in navigation and the child pages (with the content) must be enabled in navigation. To enable or disable pages in navigation, right click the page on the site tree on the Page Management admin page and change the setting. Parent pages symbol indicates link is disabled in navigation Child page no symbol indicates link is enabled in navigation

22 DNN CMS EDITOR S GUIDE PAGE 22 Making Pages SEO Friendly First, access the Page Settings panel from the top menu when you are on the page for which you want to edit the settings, or by right clicking a page on the site tree on the Page Management page. On the Page Details panel (numbers correspond to the screen shot below): 1. Be sure the Page Name uses the correct style; use sentence case (see page 24). Name the page using (ideally) no more than 3 or 4 words, using terms that anyone can understand, and that tell what the page is about (the Page Name appears on the navigation links). 2. Enter a Page Title that gives search engines an idea of the page content Format: Page name short description (think of this as an ad headline). W3C recommends a maximum of 64 characters for page titles. Google displays up to 70 characters but will truncate if wide letters or all caps are used. 3. Edit the URL (if needed) so that the page name is directly after the root For example: WRONG = westarenergy.com/outages/report-an-outage/outage-map CORRECT = westarenergy.com/outage-map 4. Write a Description of the page The description should employ the keywords intelligently but also create a compelling description that a searcher will want to click. Think of it as an ad for the page. Direct relevance to the page and uniqueness between each page s descriptions is key. The description Google search results should optimally be between characters. 5. Keywords can be left blank (search engines ignore them) Note: another aspect of making pages SEO-friendly (and accessible) is to ensure that all images have alt tags. (See page 14.) 4 5

23 DNN CMS EDITOR S GUIDE PAGE 23 Adding News Releases To add a new release to the site you must create a new page for the release content as well as add the headline and lead-in sentence to the 2014 New Releases intro page located here (a new intro page will need to be created each year): First, make the page containing the full news release: 1. Add a page to the site (see page 20) or use one of the placeholder pages that have been created ( etc.). 2. In the Content Editor for the new page, upload news release PDF to the News folder (using the Insert Media icon and Document Manager see page 8). Name the file with the date first and hyphens between the words, like this: Westar-Announces-New-Staff.pdf 3. Paste the release content into the Content Editor (see pages 4-5). 4. Add a link to the PDF under the headline. You can format as described on page 8, or put this in the HTML view directly under the </h1> and change the PDF name: <p class="linkpdf"><a href="/portals/0/resources/documents/news/ pdfname-here.pdf" target="_blank">download PDF</a></p> 5. Update page settings as described on page 22 (add the headline as the Page Title and URL (/inthis-format), add brief summary in the Description field). Next, add the teaser copy to the 2014 News Releases page: 1. Copy the headline and first sentence from the news release. 2. Add teaser copy to top of the 2014 News Releases page. 3. Format it to match the other teasers (cut off the text after 2 lines and add "MORE ". Link the headline and the "MORE " to the newly created release page).

24 DNN CMS EDITOR S GUIDE PAGE 24 Capitalization and Punctuation Styles Use the following guidelines to be consistent with the Westar brand standards. For all navigation link names and page names (see page 14) and on-page headlines, subheads and sub-subheads (see page 5): Use sentence case (cap on first word and proper nouns only) with no period at the end (question marks may be used when relevant). Examples: Bill delivery options Go paperless Choose desired bill delivery option How do EVs work? Report and outage phone numbers When showing the outage 800 numbers, remove the "1-" in front of the 800, and put the regular number first and the text version (800-LIGHT-KS) second, like this: (800-LIGHT-KS) It is not always necessary to show the (800-LIGHT-KS) version if space does not allow.

25 DNN CMS EDITOR S GUIDE PAGE 25 Changing Content Container Size (site admin only) New pages created using the default page template (pages 20-21) are meant to be used for article pages (below left). Article pages use a narrower content container than form pages (below right). Article page narrow content container Form page wide content container If you need a wider content container for a new form page or other similar content, follow these steps to change it: 1. Hover over the content container gear icon and select Settings. 2. Change the Module Container selection to Wester DNN No Title 3. Click Update. To change to a narrower content container, select Reduced Width.

26 DNN CMS EDITOR S GUIDE PAGE 26 Links in Top Navigation and Footer Links (site admin only) The links in the top navigation drop-down menus and the footer links are shortcuts to specific pages on the site. These links can be changed to point to any page. While there is no technical limit, for design purposes there should be no more than 5 links on each header menu and no more than 5 in each footer section (including More, which points to the site map page). First, change the name of one of the existing links to the name of the page to which you want to link. Do that by clicking on the page in the site tree and entering a new Page Name. Second, scroll to the bottom of the page and expand the Link area. Click Page (A Page On Your Site) and select the page you want the link to point to. Click Update Page. Note that because the More links in the footer include anchors, they must be edited using URL (A Link To An External Resource) and entering the entire URL (e.g.

27 DNN CMS EDITOR S GUIDE PAGE 27 Creating Vanity URLs (site admin only) The easiest way to make a vanity URL is to name the destination page with the desired URL. However, it s not good practice to rename pages after the site launches. So, to create a vanity URL for an existing page in the site, you can make a hidden page with the desired vanity name and redirect it to the desired landing page on the site. 1. Create a new page in the Vanity URLs folder (right click on Vanity URLs and select Add Page ). Name the page (your desired vanity URL) and click Create Page. 2. Uncheck Disabled. 3. Scroll down and under Link select Page (A Page On Your Site) and select the desired page from the menu. 4. Right click the vanity URL page in the site tree and select Page Settings. 5. On the page URL, strip out everything except the final / and the page name. For example: /Content/Vanity-URLs/YourNewVanityName becomes just /YourNewVanityName Test the new URL and make sure it is redirecting properly.

28 DNN CMS EDITOR S GUIDE PAGE 28 Page Permission Settings (site admin only) Editing privileges can be set page by page. The default settings for the standard Westar page template are shown below at left. To change the settings, access the Page Settings dialog by right-clicking the page on the site tree (right). Click the Permissions tab (below). Be sure to check at least the View permissions checkbox or the designated users will not be able to see the page. The settings shown below at right have been changed to allow only the Site Administrator to edit the page. De-selecting the checkboxes for all privileges other than View does this. All Roles Westar Roles The following pages have been set to allow only a Site Administrator to edit them (in addition, many of these pages contain modules that can only be edited by a Super User): All pages in the My Account section Start new service Create an online account Service territory and map Ways to pay your bill* Net metering application Outage map Report outage online Report outage by phone Report a street light out Heat pump dealer search Shareholder information request Contact details* Online contact form Social media* *Note to Site Administrators: the content of these pages should only be edited in the HTML view.

29 DNN CMS EDITOR S GUIDE PAGE 29 Return Code Module for managing error messages (site admin only) Once logged in to DNN, you can access the Return Code Message Module at this link: To edit a screen message: 1. Locate the message you want to edit by using the find function of your web browser. 2. Click Edit. 3. In the Friendly Message field, edit the text the user will see. 4. Click Update. Note: editing anything other than the Friendly Message text should be left to the developers. If new web services are added with new return codes, developers can add them to the Return Codes Module using the Service Methods tab.