CREATE AN EKTRON MICRO-SITE

Transcription

1 CREATE AN EKTRON MICRO-SITE A self-guided tutorial, Ektron 9.02 Elements of an Ektron micro-site Whether you are creating an online issue of a newsletter consisting of 5 pages, or a much larger campaign-based website the steps outlined in this guide will help you set up a microsite from scratch. This tutorial will first explain a bit about page structure and then show you how to: 1. Log in and navigate to where your folders will be created 2. Create new folders 3. Add new documents and images to the site asset store 4. Create content blocks 5. Build pages using content blocks 6. Add images, documents and other media to your site 7. Publish your site

2 Contents Elements of an Ektron micro-site... 1 Understanding page structure Log in and navigate the Workarea Create new folders The Document Management Store... 6 Add a downloadable document to the DMS... 6 Adding more than one item to the DMS... 7 Updating items in the DMS... 7 Add images to the DMS... 8 Guidelines for image sizes... 8 Adding more than one item to the DMS... 8 Updating items in the DMS Create a new content block... 9 Link to a third-party website Link to a page on the Brookes central website Link to an Link to a document Insert an image Edit an existing content block from the Workarea Edit a content block in design mode Create a new page Add content modules to a page Reposition content blocks on a page Publish your pages Creating links Creating links to the Brookes central website Creating links to documents Add a file to site assets M i c r o - s i t e t u t o r i a l : E k t r o n ,

3 Understanding page structure Webpages in Ektron are built up by adding content modules to a page in Ektron s Design mode using widgets. Widgets are essentially placeholders for content. You first add a placeholder to a page, then tell the system what content module you want to appear in that placeholder. On the page below, for example, you can see four placeholders. 1. & 2. Content block widgets 3. Image widget 4. HTML widget Content modules are created and stored in the Ektron Workarea a database and administration area for all content and can be re-used multiple times. So, for example, a Contact us box can be updated once in the Workarea and automatically update across multiple pages wherever it has been placed. Pages created in this way are known as Pagebuilder pages and are stored in the Pagebuilder folder within the Workarea. You can also navigate through them in design mode, using the menu s, as you would on the live site. 3 M i c r o - s i t e t u t o r i a l : E k t r o n ,

4 1. Log in and navigate the Workarea 1. Go to: and log in using your Brookes login credentials. 2. Then select the Launch Ektron Workarea option from the menu. 3. This will launch a new tab/window displaying the Ektron Workarea. The Workarea defaults to the Desktop tab (this is a housekeeping area for checking when content is about to expire/come up for review). Select the Content tab in the Workarea. 4. To navigate through the folders in the left-hand pane, select the + sign next to a folder. This will open up the folder (the contents will display in the right-hand pane.) Start off by navigating through to: > Folders > Main site Full location path: 4 M i c r o - s i t e t u t o r i a l : E k t r o n ,

5 2. Create new folders Within the Workarea: 1. Navigate to where you want the folder to sit (in the example below: > Content modules > Simple text blocks > Page-specific > Business and employers > Knowledge Transfer Partnership > Brookes Connect 2. Hover over New in the right-hand pane. 3. From the drop-down menu, select Folder. 4. A short new folder form will display. 5. Give the folder a Name. 6. Description leave blank. 7. Style Sheet leave blank. 8. Two check boxes will automatically be ticked: Content Searchable; and Display Settings (circled). Leave these items checked. 9. Use the Add folder button (top-left) to save and exit. 5 M i c r o - s i t e t u t o r i a l : E k t r o n ,

6 3. The Document Management Store Add a downloadable document to the DMS From the Workarea: 1. In the left-hand folders pane, navigate to Site assets, then Documents, then your project folder. Write your folder path here for future reference: Location path: 2. In the right-hand pane, hover over New, select >DMS Document (circled). 3. A blank form will open (below). Enter a Title 4. Select Choose file (circled). The standard Windows Explorer pane will open allowing you to navigate to where the document is stored on your PC. 5. Click on the file name to select it 6. Select Open. 6 M i c r o - s i t e t u t o r i a l : E k t r o n ,

7 Your screen will now look similar to the one below: 7. Select Publish to save the item and make it available on the live site. Note: you need to add a link to the document before users can view it (see p. 12). Please note, when naming your download, using the same title as your PDF file (minus the.pdf) will help you find your content more easily. Other guidelines to bear in mind when naming files: Omit punctuation from titles. Spaces are replaced with hyphens on the CMS sticking to this rule and using hyphens to separate words in the names of your files ensures your PDF will be downloadable across browsers and platforms, and is also good in terms of search engines. Choose a title which makes the content of your PDF clear you could use an abbreviation of your course or department, followed by an identifying description. Adding more than one item to the DMS When you finish creating a download, click on the folder name (in the left-hand pane) before repeating the above steps. This will ensure your item is stored correctly. Updating items in the DMS To update an existing item, click on the title to select. Select Edit (circled below) and repeat steps 4-6 above. Links across the site will then update automatically, you do not need to go back in and edit each instance. 7 M i c r o - s i t e t u t o r i a l : E k t r o n ,

8 Add images to the DMS There is a central image library in the Workarea, found in Site Assets, in a folder called Images. To add an image to the system from the Workarea: 1. In the left-hand folders pane, navigate to > Site assets (towards the bottom of the listing) > Images, then navigate to your folder. Path: 2. In the right-hand pane, hover over New, select >DMS Document. 3. A blank form will open (see below). Enter a Title, then select Choose file (circled). 4. The standard Windows Explorer pane will open allowing you to navigate to where the document is stored on your PC. Click on the file name to select it, then, click Open. 5. Select Publish to save the item and make it available for inserting into your content. Guidelines for image sizes Pixel measurement: Central column - full-span images used in the central column content area x 340 pixels. Thumbnails/link images - 78 x 54. Banners landing page/top banners 757 x 246 pixels and smaller banners are 757 by 170. Adding more than one item to the DMS When you finish adding an image, click on the folder name (in the left-hand pane) before repeating the above steps. This will ensure your item is stored correctly. Updating items in the DMS To update an existing item, click on the title to select and select Edit (circled below). 8 M i c r o - s i t e t u t o r i a l : E k t r o n ,

9 4. Create a new content block For each page within your issue/micro-site, you will need at least one content block. We recommend that you create these blocks before creating your actual pages. Typically a Simple Text Block will contain the bulk of your copy for a page. To create a new content block: 1. Go to the folder Main site > Content modules. 2. Select the content type (eg > Simple Text Block and > Page specific) and select the appropriate sub-folder in which to store your item in the example below > Business and employers > KTP > Brookes Connnect > Issue 1. Note, if a folder doesn t exist already you may need to create one (see p.4) 3. Make a note of your most frequently used path here 4. From the menu in the right-hand pane, select New (circled below). 5. Then, HTML Content. 9 M i c r o - s i t e t u t o r i a l : E k t r o n ,

10 6. A new, blank simple text block will be created. Enter a title. 7. The Content tab will open first, and as you bring your mouse below the blue tab, a yellow/blue (dependent on browser) outline will appear. Click within the area to enter text. (A toolbar will appear you can reposition this toolbar using drag and drop. See Getting started with the Aloha text editor for a full tutorial on how to use the text editor.) 8. When you are finished with your text changes, choose Publish (circled). This will save, check-in and publish the item (the item needs to be published so that you can drop it on to your pages it will not go live on the website until the full page is published. 10 M i c r o - s i t e t u t o r i a l : E k t r o n ,

11 Link to a third-party website 1. Highlight the text you wish to use for the link. 2. Select the hyperlink icon from the text editor toolbar. 3. Enter the URL, then the Return/Enter key. Link to a page on the Brookes central website 1. Highlight the text you are using as the link. 2. Choose the Insert tab on the text editor tool bar. 3. Select the library icon (circled). 4. A new window will open. Navigate to the folder, in the left-hand pane, then select Quicklinks from the drop-down. A list of downloads will appear in the right-hand pane. 5. Click on the title of the document, it will highlight in yellow. Select Insert. 11 M i c r o - s i t e t u t o r i a l : E k t r o n ,

12 6. Save (button top-left). The window will close. 7. Publish. Link to an 1. Highlight the text you wish to use for the link. 2. From the toolbar, select the link icon 3. In the entry field that displays, replace the with: Link to a document 1. Highlight the text you wish to use for the link. 2. Select the Insert tab from the toolbar. 4. Select the library icon (circled). 5. This will open up a window showing all the folders in the main site. 6. Use the left-hand folder pane to navigate to > Site assets > Documents (then to the relevant sub-folder for your area). 7. Change the drop-down from Images (the default) to Quicklinks. 8. Locate and select the document from the list in the right-hand pane. 9. Select Insert. Important: After creating a link, add (PDF) to signal to users that the link opens a downloadable asset, so that they may choose in advance whether they want to download a document. 12 M i c r o - s i t e t u t o r i a l : E k t r o n ,

13 Insert an image From within the content item: 1. Position cursor where image is to appear. 2. Open the Insert tab. 3. Select Library, using the book icon. 4. A windows navigation pane will open. 5. Navigate to > Site assets > Images and to the relevant sub-folder. 6. Scroll through to find your image. Note, when looking through the index of images, if there are a number of images, it may be that you need to click through the pages using the buttons at the bottom of the pane. 7. Click on the title of the image to select it. 8. Use the Insert image icon (circled) to insert the image into your content. 9. Publish your content. 13 M i c r o - s i t e t u t o r i a l : E k t r o n ,

14 Edit an existing content block from the Workarea From the Workarea: 1. Click on the title of the item you want to edit. 2. Select Edit. Edit a content block in design mode Within design mode: 1. The tool bar defaults to preview mode. Switch to edit mode. 2. Select content. 3. Hover over the block you wish to edit. A content block menu (three parallel lines) will appear top-right of the block. Click on the menu icon to open the edit menu for that individual content block. 14 M i c r o - s i t e t u t o r i a l : E k t r o n ,

15 4. Select > Edit from content block menu. 15 M i c r o - s i t e t u t o r i a l : E k t r o n ,

16 4. Create a new page Pages are created within the Workarea. To create a new page: 1. From the Content tab in the Workarea, navigate to > Folders > Main site > Pagebuilder pages. 2. Navigate to the folder you created in the earlier steps. Make a note of the path, for future reference, here 3. Hover over New select > Page layout. 16 M i c r o - s i t e t u t o r i a l : E k t r o n ,

17 4. The template menu automatically defaults to a standard page - with a central content column and a right-hand side panel are called: Templates/Pages/GeneralContentPB.aspx. Only click on another template if you want to switch templates. 5. Select Next. 6. Add a Title (this is the Pagebuilder title and will form your URL omit punctuation as it can cause problems if used as a part of a URL). 7. Place a check mark against Content searchable. Manual aliasing should not have a check mark against it (uncheck if checked). 8. Select > Next. 17 M i c r o - s i t e t u t o r i a l : E k t r o n ,

18 9. Add a Metadata title (note this will form the page title at the top of your page). The Metadata title should match the Pagebuilder title as closely as possible. However, there is room to add a slightly longer title if desired. And you can use a limited range of punctuation marks in this field including: colons question marks, and hyphens. 10. Select Finish then OK to begin editing the page. 18 M i c r o - s i t e t u t o r i a l : E k t r o n ,

19 5. Add content modules to a page 1. Open up the page you want to work on (either by going to the landing page for your area in the CMS or by opening up a Pagebuilder page via the Workarea and then choosing Edit page layout.) When you first open up design mode within Ektron, the tool bar defaults to preview mode. 2. To switch to edit mode move the tool bar slider to Edit (by clicking on it). 3. Select design to open the Page Builder master editing menu. 4. Select > Edit. 19 M i c r o - s i t e t u t o r i a l : E k t r o n ,

20 5. A new item Widgets will appear at the bottom of the menu. Tip: You can reduce the size of this menu by clicking on the category titles. You can also reposition the menu on the page (by hovering over the menu, left-click, hold and drag). 6. Select > Widget. The widget picker will open. 20 M i c r o - s i t e t u t o r i a l : E k t r o n ,

21 In this menu you will see all the widget options. Each widget type can handle a specific type of content ranging from content modules to QR codes. The one that you will most commonly use is a Content block (this holds content modules). If you are interested in utilising other types of widgets please do get in touch with the Web Team for a bit of coaching before starting out webdev@brookes.ac.uk 7. Select > Content block. 21 M i c r o - s i t e t u t o r i a l : E k t r o n ,

22 8. When you choose a widget you will see Place here prompts indicating where you can drop content. Click on one of these to select the position to drop the block in. 9. Once the widget is on the page, you then need to select what content to put in it. 10. Hover over the column containing the Content block widget icons will appear: Move, Edit, Delete choose Edit (the pencil icon). 22 M i c r o - s i t e t u t o r i a l : E k t r o n ,

23 12. Navigate to > Main site > Content modules and then to the specific sub-folder where your content is homed. 13. Click on the title of the content module, then > Save. 14. If you are finished, choose Publish from the main menu. 23 M i c r o - s i t e t u t o r i a l : E k t r o n ,

24 15. Alternatively, to create a new content item, choose > New. 24 M i c r o - s i t e t u t o r i a l : E k t r o n ,

25 Reposition content blocks on a page 1. From the PageBuilder master menu, select > Edit. 2. Minimise the menu (by clicking on the arrow to close up the Page Action sub-menu) then hover over the content block you wish to move. 3. You ll see three icons: four arrows - move; pencil - edit; and rubbish bin - delete. Select > Move. The options of where you can place the block will be indicated by a blue outline and a Place here button. Select the relevant place, then click the button: 25 M i c r o - s i t e t u t o r i a l : E k t r o n ,

26 6. Publish your pages Once you ve finished editing your page, you ll need to either check the page back in to the system using Check-in (so that colleagues can preview your work), or, you ll need to Publish your page to update the live website. To do this, go to the Pagebuilder master menu and choose the relevant action. Pages on the live site are updated hourly from the CMS staging server. 26 M i c r o - s i t e t u t o r i a l : E k t r o n ,

27 7. Creating links Creating links to external websites: 1. Select the text in your document to use as the link. 2. Select the Insert tab from the toolbar. 3. From the Insert tab, select the link icon (circled). 4. Type in the full URL and then use [Return/Enter] on your keyboard to set the link. If you want to add any additional information, for example alt text, you will need to do this via the source code. See Editing source html. Creating links to the Brookes central website 8. Highlight the text you are using as the link. 9. Choose the Insert tab on the text editor tool bar. 10. Select the library icon (circled). A new window will open. 11. Navigate to the Pagebuilder folder, in the left-hand pane. 27 M i c r o - s i t e t u t o r i a l : E k t r o n ,

28 12. Select Quicklinks from the drop-down. A list of downloads will appear in the righthand pane. 13. Click on the title of the document, it will highlight in yellow. 14. Choose Insert. 15. Save (button top-left). The window will close. Then Publish. Creating links to documents Creating links to documents is a two-step process, you will first need to add your document to Site Assets (see 8. Add a file to Site Assets). You can add links to documents (found in > Site Assets >Documents) from within the body of a content block. 10. Highlight the text you wish to use for the link. 11. Select the Insert tab from the toolbar. 28 M i c r o - s i t e t u t o r i a l : E k t r o n ,

29 12. From the Insert tab, select the library icon (circled). 13. This will open up a window showing all the folders in the main site. 14. Use the left-hand folder pane to navigate to > Site assets > Documents (then to the relevant sub-folder for your area). 15. Change the drop-down from Images (the default) to Quicklinks. 16. Locate and select the document from the list in the right-hand pane. 17. Select Insert. Important: After creating a link, add the text: (PDF) to signal to users that the link opens a downloadable asset, so that they may choose in advance whether they want to download a document. 29 M i c r o - s i t e t u t o r i a l : E k t r o n ,

30 8. Add a file to site assets To upload a document or an image to site assets: 1. Go to the Workarea 2. In the left-hand folders pane, navigate to Site assets, then Documents or Images. 3. Navigate to the relevant folder. 4. In the right-hand pane, hover over the New menu, select >DMS Document. 5. Give the item a name. 6. Select the Choose file button. Browse to where the file is stored and save. 7. Select Publish. 30 M i c r o - s i t e t u t o r i a l : E k t r o n ,