Table of Contents. MySource Matrix Content Types Manual

Transcription

1

2

3 Table of Contents Chapter 1 Introduction... 5 Chapter 2 WYSIWYG Editor... 6 Replace Text... 6 Select Snippet Keyword... 7 Insert Table and Table Properties... 8 Editing the Table...10 Editing a Cell...12 Editing a Row...13 Editing a Column...14 Colour...15 Font Colour...15 Background Colour...15 Insert Link...16 Quick Search...16 General...17 Options...17 New Window Options...17 Remove Link...18 Insert Anchor...18 Insert Image...18 Quick Search...19 General...20 Optional Attributes...20 Preview...20 Layout...20 Size...21 Embed Movie...21 Quick Search...22 General...23 Controls...23 Size...23 Insert Abbreviation...23 Insert Acronym...24 Insert Special Character...24 Choose Language...25 Insert Definition Term and Insert Definition Description...25 Insert Citation...26 Insert Definition...26 Quotation...26 Visual Aid...27 Check Spelling...28 Current Style...28 Toggle HTML Source...28 HTMLTidy Status...29 HTML Tidy Accessibility Checker...29 Chapter 3 Code...30 Chapter 4 Image...32 Chapter 5 Nest Content...34 Chapter 6 Raw HTML...35 Chapter 7 Structure Tree...36 Chapter 8 Snippet...37 Setting Up the Snippet Content Type...37 Using the Snippet Content Type...37 Page 3 of 3

4 Revision History Revision Date MySource V3.18a 15 th May Matrix Version Comment Initial release for version Copyright Squiz Pty Ltd. All Rights Reserved. No part of this publication may be reproduced by any process, electronic or otherwise, in any material form or transmitted to any other person or stored electronically in any form, without the prior written consent of Squiz Pty Ltd, except as permitted under the Copyright Act Trade Marks Notice Squiz.net, MySource and MySource Matrix, are registered trademarks of Squiz Pty Ltd and may not be used without the prior specific written consent. All other registered and unregistered trademarks in this document are the sole property of their respective owners, which may not be used without their written permission. Page 4 of 4

5 Chapter 1 Introduction The MySource Matrix Content Types manual describes each of the content types that are available in MySource Matrix. These content types include: WYSIWYG Edit Code Image Next Content Raw HTML Structure Tree Snippet This manual is aimed at users who are Backend Users with Write Permission to assets within the system. These users are known as content authors and are not involved in the administration of the web site. This manual should be read in conjunction with the MySource Matrix Concepts manual. This manual assumes you have a fully installed and operational MySource Matrix system that you can access via a valid username and password, a connection to the Internet and a recent version of a web browser. Please note that this manual does not cover any of the functionality provided in the MySource Matrix modules. All screen shots within this manual have been taken once the Acquire Lock(s) button has been clicked on the screen. Chapter 1 Introduction Page 5 of 5

6 Chapter 2 WYSIWYG Editor The WYSIWYG Editor allows you to enter content onto a page without having to know how to use HTML. You can use the buttons provided in the tool bar to format the content, insert images and hyperlinks. When the content type for a division is set to WYSIWYG Editor, the Edit Contents icon is displayed in the top left hand corner of the division. Click on this icon to bring up the WYSIWYG Editor, as shown in the figure below. Click within the white space and enter the required content. Figure 2.1: WYSIWYG Editor content type Tip: You can copy and paste content from various applications including Microsoft Office Word. For more information refer to the Replace Text section in this chapter. You may not have access to all of the buttons in the WYSIWYG Editor toolbar. A System Administrator may have limited the buttons that are available to you. To find out what a button is, hover your mouse over the icon a pop up will appear outlining the functionality of the icon. Many of the icons in the WYSIWYG Editor toolbar are the same as those used in Microsoft Office applications. The non-standard buttons are described below. Replace Text This button allows you to remove various tags and attributes from the HTML source code. It is used when you are copying in content from various other applications including Microsoft Office Word. When you copy content from Microsoft Office Word into the WYSIWYG Editor, various other tags and attributes are also copied across. These tags and attributes can potentially break the content of the page and hence need to be removed. When you click on this icon the Replace Text pop up will appear as shown in the figure to the right. From the list, click on the tags and attributes that you would like to remove. You can select all of the options by clicking on Figure 2.2: Replace Text pop up the Check All box in the Replacement types section of the screen. Chapter 2 WYSIWYG Editor Page 6 of 6

7 Select Snippet Keyword The select snippet keyword list allows you to select from a list of Bodycopy assets to use within the content of the page. This is similar to linking a division or nesting the asset into the content of the page. When you select a value from the list, a keyword replacement will be added into the content, for example %globals_snippet_459_copyright%. When the page is displayed within your Site, this keyword replacement will be replaced with the content of the Bodycopy in this case the content of the Copyright Bodycopy will be shown. When you click on the icon, the Global Snippet Keyword Information pop up will appear, as shown in the figure below. Figure 2.3: Global Snippet Keyword Information pop up This pop up will show a list of all of the Bodycopy assets available in the select snippet keyword list. For each Bodycopy, the name, its keyword replacement and description is shown. Tip: You can edit the name or description of a Bodycopy asset on its Details screen. By default, this list will not appear within the WYSIWYG Editor toolbar. For this to appear, Snippet Keyword Replace needs to be selected on the Preferences screen. For more information about this screen please refer to the MySource Matrix Core Assets manual. The list of Bodycopy assets that are available will depend on how the Snippet content type has been set up. For more information on how to set up this content type, please refer to the Snippet chapter in this manual. Chapter 2 WYSIWYG Editor Page 7 of 7

8 Insert Table and Table Properties The Insert Table button allows you to insert a table within the content of your page. The Table Properties button allows you to edit the properties of a row in a table or insert, delete, split or merge a row. To insert a table into the content, click on the Insert Table button. The pop up shown in the figure to the right will appear where you can specify the following information: Rows: enter the number of rows for the table. Cols: enter the number of columns for the table. First Row: click this box to indicate that the first row in the table will be used as a heading row. You would tick this option if you wanted to have a heading for each Figure 2.4: Insert Table pop up column of the table. The text entered into each cell in the first row will have the HTML <th> tag wrapped around it. First Column: click this box to indicate that the first column in the table will be used as a heading column. You would tick this option if you wanted to have a heading for each row of the table. The text entered into each cell in the first column will have the HTML <th> tag wrapped around it. Class Name: enter a class name that has been defined in the style sheet of the design. This will be the style that the table will use. Width: set the width of the table. You can specify width in the following units: %: specifies the width of the table as a percentage of the current screen width. Tip: If you enter a percentage of the current screen width, the width of the table will change if the window is resized. px: specifies the exact width of the table in pixels. Border: set the width of the table border in pixels. This is the HTML table border= attribute. You can set the value to 0 to display the table with no border. The default value entered is 1. Tip: If no border setting is entered, newer browsers will display a one-pixel border by default. Cell Spacing: enter the amount of space between the cells in the table in pixels. Cell Padding: enter the amount of space between the edges of the cells and the contents of the cell in pixels. Chapter 2 WYSIWYG Editor Page 8 of 8

9 Summary: enter a summary for the table that is being created. This will be placed in the HTML <table> summary attribute which is helpful for people using screen readers and text based browsers. Once you have entered in the necessary information, click the OK button. The table will be created in the WYSIWYG Editor as shown in the figure below. Figure 2.5: Example table in the WYSIWYG Editor To edit the properties of a table in the WYSIWYG Editor, click within the table and then click the Table Properties button. The Table Properties screen shown in the figure below will appear. Figure 2.6: Table Properties pop up Chapter 2 WYSIWYG Editor Page 9 of 9

10 On this screen you can edit the properties of the table, cell, row or column. By default, the properties of the table are displayed when the Table Properties pop up first appears. Editing the Table To edit the properties of the table click on the icon in the Selectors section - the fields shown in the figure above will appear on the right hand side of the screen. The properties that can been changed for the table include the following fields: ID: enter the unique ID to be used for the table. This enables the table to be identified in a style sheet. Caption: enter the caption to be used for the table. This is a caption will appear at the top of the table in the content of the page and will also appear in the HTML <caption> tag in the source code. The caption of the table is suggested for accessibility purposes. Class name: by default, the Class Name that was entered into the Class Name field when the table was created will appear in this field. You can change the Class Name by clicking into this field and entering the new Class Name for the table. If this Class Name has be defined in the style sheet, the style of the table will be set to this class. Width: by default, the width that was entered into the Width field when the table was created will appear in this field. You can change either the CSS or HTML width of the table in this field. CSS: select CSS from the list if you wish to specify the width of the table in HTML similar to <table style= width: 80%;...>. Enter the width in the text field and then select the unit from the list provided. The units that are available include the following values: px: specifies the exact width of the table in pixels. %: specifies the width of the table as a percentage of the current screen width. Tip: If you enter a percentage of the current screen width, the width of the table will change if the window is resized. pt: specifies the exact width of the table in font points. em: specifies the width of the table in terms of the 'font-size' of the relevant font. The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. This unit is also sometimes called the quad-width in typographic texts. ex: specifies the width of the table in terms of the 'x-height' of the relevant font. The x- height is so called because it is often equal to the height of the lowercase "x". HTML: select HTML from the list if you wish to specify the width of the table in HTML similar to <table WIDTH="80%"...>. Enter the width in the text field and then select the unit from the list. The units that are available include the following values: px: specifies the exact width of the table in pixels. %: specifies the width of the table as a percentage of the current screen width. Border: by default, the border that was entered into the Border field when the table was created will appear in this field. You can change either the CSS or HTML border of the table in this field. HTML: select HTML from the list if you only want to specify the width of the border. Enter the value in the text field provided. CSS: select CSS from the list if you wish to specify a style for the border of the table. Enter the border width in the text field and then select the style of the border from the list provided. The available selections include solid, dotted, dashed, double, grove, ridge, inset, outset, none and hidden. Chapter 2 WYSIWYG Editor Page 10 of 10

11 Cell Spacing: by default, the spacing that was entered into the Cell Spacing field when the table was created will appear in this field. You can change the spacing by clicking into this field and entering the new Cell Spacing. This Cell Spacing is the space between the cells in the table in pixels. Cell Padding: by default, the padding that was entered into the Cell Padding field when the table was created will appear in this field. You can change the padding by clicking into this field and entering the new Cell Padding. This Cell Padding is the amount of space between the edges of the cells and the contents of the cell in pixels. Summary: by default, the summary that was entered into the Summary field when the table was created will appear in this field. You can change the summary by clicking into this field and entering the new Summary. This will be placed in the HTML <table> summary attribute which is helpful for people using screen readers and text based browsers. Frame: select which sides of your table cells should have a border. You can select from Empty, No sides, The top side only, The bottom side only, The top and bottom sides only, The right and left sides only, The left-hand side only, The right-hand side only, and All four sides. Tip: If you select Empty, your table will inherit any style sheet definition for this table with relation to borders. If you select No sides, your table will have no borders, regardless of any style sheet definitions. Rules: select what type of rules should appear within your table. These rules are the lines that are placed between each row and column. When a rule is defined, it is placed within the HTML <table> rules attribute. The values available in the list include the following: Empty: this is the default option and will select not put any lines within your table. The rules attribute will not appear in the HTML source code of the page. No Rules: select this option to have no rules appear within your table. In other words, no lines will appear between each column and row, as shown in the figure below. The rules attribute will be set to none within the HTML source code of the page. Figure 2.7: No rules Rules will appear between rows: select this option to have rules appear between rows in your table. In other words, lines will appear between each row, as shown in the figure below. The rules attribute will be set to rows within the HTML source code of the page. Figure 2.8: Rules between rows Chapter 2 WYSIWYG Editor Page 11 of 11

12 Rules will appear between columns: select this option to have rules appear between columns in your table. In other words, lines will appear between each column, as shown in the figure below. The rules attribute will be set to cols within the HTML source code of the page. Figure 2.9: Rules between columns Rules will appear between rows and columns: select this option to have rules appear both between rows and columns in your table. In other words, lines will appear between each column and row as shown in the figure below. The rules attribute will be set to all within the HTML source code of the page. Figure 2.10: Rules between rows and columns Editing a Cell To edit the properties for a single cell, click on the icon in the Selectors section and select the cell you want to edit in the table on the left had side of the screen. The fields shown in the figure to the right will appear on the right hand side of the screen. Tip: You must select a cell in the table on the left hand side of the window, before trying to edit the settings for a cell. The properties that can been changed for the cell include the following fields: Class name: enter a class name that has been defined in the style sheet to set the style of the cell. Width: specify the width of the cell in the boxes Figure 2.11: Cell properties provided. You can select from the following for units: %: specifies the width of the cell as a percentage of the table width. px: specifies the exact width of the cell in pixels. pt: specifies the exact width of the cell in font points. em: specifies the width of the cell in terms of the 'font-size' of the relevant font. ex: specifies the width of the cell in terms of the 'x-height' of the relevant font. Height: specify the height of the cell in the boxes provided. The units that are available for the Height are the same as those provided for the Width field and are described in the section above. Chapter 2 WYSIWYG Editor Page 12 of 12

13 Border: enter the width of the border in pixels and select the style of the border from the drop down list. The available style options include solid, dotted, dashed, double, groove, ridge, inset, outset, none, or hidden. Modify: these buttons allow you to merge the cell you currently have selected over the next row or column. Add Colspan: click this button to span the cell that is currently selected over the next column. Delete Colspan: click this button to remove the colspan of the currently selected cell. Add Rowspan: click this button to span the currently selected cell over the next row. Delete Rowspan: click this button to remove the rowspan of the currently selected cell. Head Cell: click this button to set the currently selected cell as the head cell. Horizontal: click on the icon to set the horizontal alignment of the currently selected cell. Align left Align center Align right Vertical: click on the icon to set the vertical alignment of the currently selected cell. Align top Align middle Align bottom Abbr: enter an abbreviation to be used for the cell. Axis: enter an axis to be used for the cell. Scope: enter the scope to be used for the cell. Headings: click on this button to make this cell a heading cell. It will be given a <th> tag rather than a <tr> tag in the HTML source code. This is required to make your content accessible. Editing a Row To edit the properties for a row, click on the icon in the Selectors section and select the row you want to edit in the table on the left had side of the screen. The fields shown in the figure to the right will appear on the right hand side of the screen. Tip: You must select a row in the table on the left hand side of the window, before trying to edit the settings of the row. The properties that can been changed for the row Figure 2.12; Row properties include the following fields: Class name: enter a class name that has been defined in the style sheet to set the style of the row. Height: specify the height of the row in the boxes provided. The units that are available for the Height are the same as those provided for the Width field in the Cell Properties and are described in the section above. Chapter 2 WYSIWYG Editor Page 13 of 13

14 Border: enter the width of the border in pixels and select the style of the border from the drop down list provided. The available style options include solid, dotted, dashed, double, groove, ridge, inset, outset, none, or hidden. Modify: Add Row: click on this icon to add a row below the currently selected row. Delete Row: click on this icon to delete the currently selected row. Head Cell: click this button the set the currently selected row as the head. Horizontal: click on the icon to set the horizontal alignment of the currently selected row. Align left Align center Align right Vertical: click on the icon to set the vertical alignment of the currently selected row. Align top Align middle Align bottom Editing a Column To edit the properties for a column, click on the icon in the Selectors section and select the column you want to edit in the table on the left had side of the screen. The fields shown in the figure to the right will appear on the right hand side of the screen. Tip: You must select a column in the table on the left hand side of the window, before trying to edit the settings for a cell. Figure 2.13: Column properties The properties that can been changed for the row include the following fields: Class name: enter a class name that has been defined in the style sheet to set the style of the column. Height: specify the height of the column in the boxes provided. The units that are available for the Height are the same as those provided for the Width field in the Cell Properties and are described in the section above. Border: enter the width of the border in pixels and select the style of the border from the drop down list provided. The available style options include solid, dotted, dashed, double, groove, ridge, inset, outset, none, or hidden. Modify: Add Column: click on this icon to add a column after the currently selected column. Delete Column: click on this icon to delete the currently selected column. Head Cell: click this button the set the currently selected column as the head. Horizontal: click on the icon to set the horizontal alignment of the currently selected column. Align left Align center Align right Chapter 2 WYSIWYG Editor Page 14 of 14

15 Vertical: click on the icon to set the vertical alignment of the currently selected column: Align top Align middle Align bottom Colour The Colour section of the Table Properties screen is shown for all options in the Selectors section. You can use the colour picker to set the background or border colour of the table, cell, row or column depending on which option you have selected. The icons at the top left hand side of the colour picker determine whether you set the background colour or the border: : click this icon to set the background colour of the table, cell, row or column. When you select a colour, the background colour is changed for the table, cell, row or column on the left hand side of the screen. : click on this icon to set the border colour of the table, cell, row or column. When you select a colour, the border colour is changed for the table, cell, row or column on the left hand side of the screen. Font Colour This button allows you to change the colour of the text. To do this, highlight the text you want to change and click the Font Colour button. The colour picker screen shown in the figure to the right will appear. Double click on the colour you want to use and click the OK button. The colour of the font will change. Background Colour Figure 2.14: Colour picker screen This button allows you to change the background colour of the text. Highlight the text you want to change and click the Background Colour button. The colour picker screen shown in the figure above will appear. Double click on the colour you want to use and click the OK button. The background colour of the font will change. Chapter 2 WYSIWYG Editor Page 15 of 15

16 Insert Link This button allows you to insert a hyperlink to an external site or an internal asset. To add a hyperlink into the content of a page, select a piece of text and then click on the Insert Link button. The Insert Link pop up will be displayed, as shown in the figure below. Figure 2.15: Insert Link pop up Quick Search This field allows you to search for an asset to link to from within your system. Enter a keyword, asset id or URL into the field and press Enter. A list of search results will appear, as shown in the figure below. Figure 2.16: Quick search results Chapter 2 WYSIWYG Editor Page 16 of 16

17 You can either click on the binoculars icon to view the asset in the Asset Map or click on the hyperlink to select the asset as the asset to use within the Insert Link pop up. For example, in the figure shown on the previous page, when you click on the hyperlink Newsletter 143, the Select Asset field will be filled in with the asset name and id. General This section allows you to either enter the URL of the external site, select the internal asset to link to or enter the anchor on the page. For more information on how to insert an anchor please refer to the Insert Anchor section within this chapter. Protocol: select the protocol for the external URL from the following options: used to create a link to a web page with a normal connection used to create a link to a web page with a secure connection using SSL ftp://: used to create a link to an ftp server mailto: used to create a link to an address Link: enter the address of the link without the protocol. For example if the URL you wish to link to is you would select in the Protocol field and enter into the link field. If the Protocol you select is mailto: the link is the address you want to send the to, for example feedback@squiz.net. Select Asset: you can select a MySource Matrix asset to create a hyperlink to. For example, you may want to create a hyperlink to a MS Word Document or PDF File so that a user can click on it to download and view the file. Anchor Name: type the name of an anchor on the linked external page, or on the current asset. For more information on how to insert an anchor please refer to the Insert Anchor section within this chapter. Options Status Bar Text: enter optional text to be displayed in the status bar at the bottom of the window. Title: enter the title of the URL. This value will be assigned to the HTML title attribute for the <a> tag. New Window Options Select whether to show the linked asset or URL in a new window or the current one. No: if you select No, the hyperlink will open in the current window. Yes: if you select Yes, the hyperlink will open in a new window with all browser options available. Advanced: if you select Advanced, you can select whether or not to show the tool bar, menu bars, location bar, status bar or scroll bars and whether the window is re-sizable or not. You can also determine the exact size of the new browser window by specifying the height and width in pixels. Tip: It is good practice to open your file in a new window rather than in the same browser window as the one displaying the web page. This allows users to resize and in particular print the document separately. Chapter 2 WYSIWYG Editor Page 17 of 17

18 Remove Link This button allows you to remove a link without having to delete the text. To do this, highlight the text that is currently linked and click the Remove Link button. Insert Anchor This button allows you to insert an anchor into your content. Anchors can be used on the page to enable quick navigation to content within your page. For example, you can create links at the top of the page for each section of content within your page. Outlined below are the steps you need to follow to create an anchor. 1. Enter the content in the WYSIWYG Editor that you want to create an anchor to. 2. Place the cursor at the start of the section or highlight the text you want to create the anchor on and click the Insert Anchor button. The pop up shown in the figure below will appear. Figure 2.17: Insert Anchor pop up 3. Enter the name of the anchor in the Anchor Name field and click the OK button. 4. At the top of the WYSIWYG Editor, enter the text for the link that will take you to the anchor. 5. Highlight the text and click the Insert Link button in the WYSIWYG Editor tool bar. The Insert Link pop up will appear. 6. Enter the name of the anchor in the Anchor Name field and click the OK button. The name you enter in this field must match the name you entered when you created the anchor. When you click on this link it will take you to the start of the content that you entered. If you want to delete an anchor, either place the cursor where the anchor is located or highlight the text that has been anchored and click the Insert Anchor button in the WYSIWYG Editor tool bar. The Insert Anchor pop up will appear. Click on the Remove field and click the OK button. The anchor will be deleted. Insert Image This button allows you to insert an image into your content. Before you can do this, however, you need to make sure that an Image asset has been created within MySource Matrix that contains the image file. For more information on how to create an Image asset, refer to the MySource Matrix Core Assets manual. To insert an image, click on the Insert Image button in the WYSIWYG Editor tool bar. The pop up shown in the figure on the following page will appear. Chapter 2 WYSIWYG Editor Page 18 of 18

19 Figure 2.18: Insert Image pop up Quick Search This field allows you to search for an Image to use within your system. Enter a keyword, asset id or URL into the field and press Enter. A list of search results will appear, as shown in the figure below. Figure 2.19: Search results pop up Chapter 2 WYSIWYG Editor Page 19 of 19

20 You can either click on the binoculars icon to view the asset in the Asset Map or click on the hyperlink to select the Image as the image to use within the content of the page. For example, in the figure shown above, when you click on the hyperlink matrix_logo.gif, the Image URL field will be filled in with the name and id of the asset and it will appear in the Preview section. General Image URL: select the image to use in this field. Alternate Text: by default the Alt text that was entered into the Alt field when the Image asset was created will appear in this field. If the Alt text is not set, then the default value of this field will be set to the name of the image file you have selected. You can change the Alternate Text by clicking into this field and entering the new Alternate Text for the image. This value will be used in the HTML alt attribute of the <img> tag in the source code of the page. Tip: If change the Alternate Text in the Insert Image pop up, it will not change the Alt text on the Image asset. To change the Alt text on the Image asset you need to go to the Details screen of the asset. Optional Attributes This section allows you to specify a URL for the long description of the image. It will be assigned to the HTML longdesc attribute of the <img> tag in the code of the page and is used for accessibility purposes. There are two ways to specify the URL for the description of the image. The first way is to specify the link manually by selecting either or from the Protocol list and entering the URL into the Link field. The second way is to select a Standard Page asset in your system to be used for the link. Preview This section shows a preview of the image that has been selected. Layout This section allows you to change the layout of the image within the content of the page. Alignment: select the alignment of the text around the image. You can choose from: Left or Right: select these options to specify a floating image; the image is placed at the left or right margin and content flows around it. Top: aligns the top of the image with the top of the tallest item in the line. This could be text or another image. Texttop: aligns the top of the image with the top of the tallest text in the line. This is usually the same as Top, but not always, depending on whether there is another image in the line. Middle: aligns the middle of the image with the baseline of the current line. Absmiddle: aligns the middle of the image with the middle of the current line. Baseline: aligns the bottom of the image with the baseline of the current line. Bottom: aligns the bottom of the image with the bottom of the current line. This is essentially the same as Baseline. Absbottom: aligns the bottom of the image with the bottom of the current line. Chapter 2 WYSIWYG Editor Page 20 of 20

21 Tip: The align attribute is deprecated in HTML 4.0 and the vertical-align and float properties of style sheets provide more flexible methods of aligning images. Border Thickness: enter the number of pixels for the border. By default this value is 0 meaning that no border will be applied to the image. This value will be used in the HTML border attribute of the <img> tag in the source code of the page. Horizontal: enter the spacing to be applied to the left and right of the image. By default this value is -1 meaning that no spacing will be applied to the image. This value will be used in the HTML hspace attribute of the <img> tag in the source code of the page. Vertical: enter the spacing to be applied to the top and bottom of the image. By default this value is -1 meaning that no spacing will be applied to the image. This value will be used in the HTML vspace attribute of the <img> tag in the source code of the page. Name: enter the ID for the image. This ID can then be used in a CSS or Javascript. Class: enter the HTML or CSS class for the image. Size This section allows you to change the size of the image. A System Administrator may have limited your access to these fields and hence you will not be able to edit them. Width: enter the width of the image in pixels. This value will be used in the HTML width attribute of the <img> tag in the source code of the page. Height: enter the height of the image in pixels. This value will be used in the HTML height attribute of the <img> tag in the source code of the page. Embed Movie This button allows you to embed a movie file into your content. Movies are files that are generally of the type mov, swf, wmv, asf, asx and mpg. To insert a movie, select the Embed Movie button on the WYSIWYG Editor tool bar. The pop up shown in the figure on the following page will appear. Chapter 2 WYSIWYG Editor Page 21 of 21

22 Figure 2.20: Embed Movie pop up Quick Search This field allows you to search for a File to use from within your system. Enter a keyword, asset id or URL into the field and press Enter. A list of search results will appear, as shown in the figure below. Figure 2.21: Search results pop up You can either click on the binoculars icon to view the asset in the Asset Map or click on the hyperlink to select the File as the movie to use within the content of the page. For example, in the figure shown above, when you click on the hyperlink Conference.swf, the Select Asset field will be filled in with the name and id of the asset. Chapter 2 WYSIWYG Editor Page 22 of 22

23 General This section allows you to select which movie you want to embed. This can be an external URL or an internal asset. To embed an external movie, use the Protocol and Link field. To embed an internal movie, use the Select Asset field. Protocol: select the protocol of the URL you want to use. For example, if the URL is then select from the Protocol list. The available options are ftp:// or rtsp://. Link: enter the address of the URL you want to use. For example, if the URL is then enter into the Link field. Select Asset: select the asset to embed. Before you can do this, however, you need to make sure that a File asset has been created within MySource Matrix that contains the movie file. For more information on how to create a File asset, refer to the MySource Matrix Core Assets manual. Controls If the file you are using is of type wmv, asf or asx, you can set the following options: Auto Start: check this box to autostart the movie. Loop: check this box to loop the movie. If the file you are using is of type mov, wmv, asf and asx, you can set the following option: Show Controls: check this box to show the movie controls. Size This section allows you to change the size of the movie. Width: enter the width of the movie in pixels. Height: enter the height of the movie in pixels. Insert Abbreviation This button allows you to insert a definition for an abbreviation that is in the content of the page. This definition will appear when a user hovers the mouse over the word on the page. For example, Mass. is entered as content in the WYSIWYG Editor. The word Mass. is highlighted and the Insert Abbreviation button is clicked. The Insert Abbreviation pop will appear, as shown in the figure below. Figure 2.22: Insert Abbreviation pop up The full definition of the abbreviation is entered into the Definition field. When you hover the mouse over the word Mass. the definition appears, as shown in the figure to the right. This Definition will appear in the HTML title attribute of the <abbr> tag in Figure 2.23: Definition the source code of the page. The word Mass. will have a dotted line under it to indicate that it is an abbreviation. Please note that Internet Explorer does not support the automatic insertion of an abbreviation tag, and you may have to enter this tag manually in the HTML source view. Chapter 2 WYSIWYG Editor Page 23 of 23

24 Tip: For accessibility reasons, it is recommended that you insert an abbreviation for the first occurrence of the abbreviation on each page. Insert Acronym This button allows you to insert a definition for an acronym that is in the content of the page. This definition will appear when a user hovers the mouse over the word on the page. For example, ASAP is entered as content in the WYSIWYG Editor. The word ASAP is highlighted and the Insert Acronym button is clicked. The Insert Acronym pop up will appear, as shown in the figure below. Figure 2.24: Insert Acronym pop up The full definition of the acronym is entered into the Definition field. When you hover the mouse over the word ASAP the definition appears, as shown in the figure to the right. Figure 2.25: Definition This Definition will appear in the HTML title attribute of the <acronym> tag in the source code of the page. The word ASAP will have a dotted line under it to indicate that it is an abbreviation. Tip: For accessibility reasons, it is recommended that you insert an acronym for the first occurrence of the acronym on each page. Insert Special Character This button allows you to insert a special character into the content of the page. When you click on the button, the special character pop up appears as shown in the figure to the right. Click on the character you want to insert. Figure 2.26: Insert character pop up Chapter 2 WYSIWYG Editor Page 24 of 24

25 Choose Language This list allows you to specify the language for a piece of text in your content. For example, if you have some content that is in Italian, you can highlight the text and select Italian from the list. This will then insert the HTML <span> tag around the text and set the tag's lang attribute to it which is Italian. Tip: This is useful for accessibility purposes, as it will assist screen readers to determine that the text is in a different language. Insert Definition Term and Insert Definition Description When these two buttons are used in conjunction with each other, you can build a definition list within the content. A definition list consists of terms and descriptions with the term being defined in a HTML <dt> tag and the description being defined in a HTML <dd> tag. An example of this is shown in the table below. HTML Code Output <dl> <dt>coffee</dt> <dd>black hot drink</dd> <dt>milk</dt> <dd>white cold drink</dd> </dl> Coffee Black hot drink Milk White cold drink To enter this list into the WYSIWYG Editor, the following steps are followed. 1. Click on the Insert Definition Term icon. The text shown in the figure below will appear in the WYSIWYG Editor. Figure 2.27: Inserting the definition term into the WYSIWYG Editor 2. Replace the Type the term text with the term for the list. For this example the term Coffee is entered. 3. To enter the definition of the term, hold down the Ctrl key and press the D key on the keyboard. The text shown in the figure below will appear under the term. Figure 2.28: Inserting the definition into the WYSIWYG Editor Chapter 2 WYSIWYG Editor Page 25 of 25

26 4. Replace the Type the definition text with the definition of the term. For this example the definition Black hot drink is entered. 5. To enter the next term, hold down the Ctrl key and press the D key on the keyboard. The Type the term text will appear under the definition. 6. Repeat steps 2 5 to add additional terms and definitions to the list. 7. Once you have completed building the list, hold down the Ctrl key and press the D key twice. This will return the WYSIWYG Editor into the normal editing mode. Insert Citation This button allows you to specify that a piece of text is a citation. The WYSIWYG Editor will wrap the text with the HTML <cite> tag. When a user views this text in your site, it will be in italics. To use this button, highlight the text to be marked as a citation and click on this button. Insert Definition This button allows you to insert a definition for a word in the content of the page. This definition will appear when a user hovers the mouse over the word on the page. For example, Definition is entered as content in the WYSIWYG Editor. The word Definition is highlighted and the Insert Definition button is clicked. The following pop up will appear. Figure 2.29: Insert Definition pop up The definition of the word is entered into the Title field. The word Definition will appear in italics indicating that it has been defined and when you hover the mouse over it, the definition appears, as shown in the figure below. Figure 2.30: Example definition Quotation This button allows you to specify that a piece of text is a quote. The WYSIWYG Editor will wrap the text with the HTML <blockquote> tag. This should be used when you have a long quote to present in your content. When a user views this text in you site it will be indented on either side, as shown in the figure on the following page. Chapter 2 WYSIWYG Editor Page 26 of 26

27 Figure 2.31: Example quotation To use this icon, highlight the text to be marked as a quote and click on this button. Visual Aid This button allows you to display the visual indicators for hidden elements. When this button is clicked, indicators for the lang attribute, anchors and table borders will be displayed. It will also display the difference between a table header and a table cell. The figure below shows the WYSIWYG Editor when the Visual Aid button has been clicked. Figure 2.32: Visual aid example in the WYSIWYG Editor Chapter 2 WYSIWYG Editor Page 27 of 27

28 Check Spelling This button allows you to check the spelling of the content that has been entered into the WYSIWYG Editor. When you click on the Check Spelling button, the following pop up is shown. Figure 2.33: Check spelling pop up You can fix the spelling mistakes by either entering the correct spelling into the Replace with field or double clicking on the correct word in the Suggestions list. If there are multiple spelling mistakes, after you have fixed the first spelling mistake, the spell checker will move onto the next one. Current Style This button shows the current style of the text. For example, if your text is red and bold, the A in this icon will be red and bold. Toggle HTML Source This button allows you to toggle between the WYSIWYG Editor and the HTML source code of the content. The figure on the following page shows a WYSIWYG Editor where the Toggle HTML Source button has been clicked. Chapter 2 WYSIWYG Editor Page 28 of 28

29 Figure 2.34: Toggled HTML source code in the WYSIWYG Editor If you want to, you can modify the HTML source code. To go back to the WYSIWYG Editor view, click on the Toggle HTML Source button again. HTMLTidy Status After you edit the content of your page in a WYSIWYG Editor and click Commit, MySource Matrix will clean up the HTML code that was created to ensure that it meets coding standards. The icon located in the top right hand corner of the division indicates the HTMLTidy status and shows the following information: Grey icon: HTMLTidy is disabled and is not running for this MySource Matrix system. Yellow icon: HTMLTidy has never been run on the content in the division. Green icon: HTMLTidy was able to clean the content in the WYSIWYG Editor last time the Commit button was clicked. Red icon: HTMLTidy failed to clean the content in the WYSIWYG Editor last time the Commit button was clicked. HTML Tidy Accessibility Checker After you edit the content of your page in the WYSIWYG Editor and click Commit, MySource Matrix will check the accessibility of the content that was created. The icon in the top right hand corner of the division indicates the HTMLTidy accessibility checker status and shows the following information: Green icon: the content in the WYSIWYG Editor was accessible the last time the Commit button was clicked. Red icon: the content is not accessible. To find out what is wrong with the content hover the mouse over the icon. A pop up will appear that contains information about what is not accessible in the content. Please note this icon will only appear if the HTML Tidy Accessibility Check Level has been set on the External Tools Configuration screen. For more information on this, please refer to the MySource Matrix System Administration manual. Chapter 2 WYSIWYG Editor Page 29 of 29

30 Chapter 3 Code The Code content type allows you to display code as content on a page, as shown in the figure below. Figure 3.1: Example code appearing as content within a web site When the content type for a division is set to Code, the fields shown in the figure below will appear. Figure 3.2: Code content type Chapter 3 Code Page 30 of 30

31 Type the code to be displayed into the text box. You can also configure the way that it is going to be displayed on the Site through the following fields: Show Line Numbers: check this box to display line numbers for the code. Line Numbers Orientation: select whether to display line numbers on the left hand side or the right hand side of the code. Line Number Style: select whether to use the HTML span tag or the HTML list tag to display the line numbers. Line Number Class: enter the name of the class from the style sheet to be be used for the line numbers. Chapter 3 Code Page 31 of 31

32 Chapter 4 Image The Image content type allows you insert an image as a new division on the page. Unlike the WYSIWYG Editor, this division does not let you wrap content around the image. Instead, the content of the page would appear in separate divisions above and below the image. When the content type for a division is set to Image, the fields shown in the figure below will appear. Figure 4.1: Image content type You can configure the division through the following fields: Image: select which Image to use in this field. Before you can do this, however, you need to make sure that an Image asset has been created within MySource Matrix that contains the image file. For more information on how to create an Image asset, refer to the MySource Matrix Core Assets manual. Caption: enter the caption that you want to display for the image. You can either enter a new caption into the text field or select to use the Caption that has been entered on the Image asset. Caption Position: select to show the Caption at the Top of the image or at the Bottom. Dimensions: these fields allow you to change the size of the image. Width: enter the width for the image. By default this value is 400. Height: enter the height for the image. By default this value is 400. Constrain Proportions: check this box to specify that the proportions should be Chapter 4 Image Page 32 of 32

33 constrained. By default this option is selected. Shrink/Stretch to Dimensions: check this box to specify that the image should be shrunk or stretched to the dimensions. By default this option is selected. On Clicking: select what happens when a user clicks on the image. You can choose from No Action, Open Image in New Window, Open Image in Current Window and Open Inline Image Preview. HTML Layout: select whether to wrap the image in either a <table> or <div> tag in the HTML source code of the page. By default this is set to <table>. Chapter 4 Image Page 33 of 33

34 Chapter 5 Nest Content The Nest Content content type allows you to take the content of another asset in the system and show it inside the current page. For example, you can nest a What's New page into your Home page so the users can view the latest pages that have been added to the Site. For more information on the What's New page please refer to the MySource Matrix Asset Listing Manual. When the content type for a division is set to Nest Content, the fields shown in the figure below will appear. Figure 5.1: Nest Content content type Select the asset you want to nest onto the page in the field provided and click Commit - additional fields will appear within the content type, as shown in the figure below. Figure 5.2: Nest Content content type These fields allow you to style the content that is being nested through the use of a Paint Layout. You can use either: No Paint Layout by selecting Raw The Paint Layout that is applied to the asset you have selected by selecting Using default Paint Layout A different Paint Layout that you have created for the nested content. Chapter 5 Nest Content Page 34 of 34

35 Chapter 6 Raw HTML The Raw HTML content type allows you to manually enter HTML code. You would use this content type if you know HTML and wanted to have full control over the content that is produced. When the content type for a division is set to Raw HTML, the fields shown in the figure below will appear. Figure 6.1: Raw HTML content type Enter the content and HTML code into the text box. Chapter 6 Raw HTML Page 35 of 35

36 Chapter 7 Structure Tree The Structure Tree content type allows you to create a hierarchy of information. For example, you can show the structure of your organisation through a Structure Tree. When the content type for a division is set to Structure Tree, the fields shown in the figure below will appear. Figure 7.1: Structure Tree content type To add a new value to the Structure Tree, enter the text into the Add New Row field and click the icon the value will be added as shown in the figure below. Figure 7.2: Structure Tree content type For each row that has been added to the tree, you can click on the left or right arrows to change the indentation or click on the up and down arrows to change its position in the tree. To change the format of the text for a value in the Structure Tree, click on either the bold, underline or italics icon. To delete a value from the Structure Tree click on the icon. When you preview the Structure Tree, it will look similar to the one shown in the figure below. Figure 7.3: Example structure tree By default, the Show Connections between non-adjacent nodes on the frontend is turned on, as shown in the figure above. When it is turned off, the Structure Tree will look similar to the one shown in the figure below. Figure 7.4: Example structure tree Chapter 7 Structure Tree Page 36 of 36

37 MySource Matrix Fundamentals Manual Chapter 8 Snippet The Snippet content type allows you to select from a list of Bodycopy assets to use within the content of the page. These Bodycopy assets are child assets of a certain root node in the system. This is similar to linking a division into multiple locations; however, when you need to update the content of a Bodycopy you can easily find the division in the Asset Map as it is stored in a pre-defined location. Also, you can define through the use of the Preferences screen which Bodycopy assets are available in the list to which users. For example, User Group A can use one list of Bodycopy assets, while User Group B can use a different list of Bodycopy assets. For more information about the Preferences screen please refer to the MySource Matrix Core Assets manual. Setting Up the Snippet Content Type The first thing you need to do is to create a section within your Asset Map where you will store the Bodycopy assets that can be used in the Snippet content type. These Bodycopy assets need to be created on a separate Standard Page and then either moved, linked or cloned into the specific Figure 8.1: Bodycopies location. For example, in the figure shown to the right, the Reusable Content Folder contains the Bodycopies Privacy Policy and Disclaimer which will be available within the Snippet content type. The second step is to select the root node where the Bodycopy assets are being stored in the Snippet Root Node field on the Preferences screen. For example, in the figure shown below, the Reusable Content Folder has been selected in this field. Figure 8.2: Snippet Root Node field Tip: Alternatively, you can create a Standard Page instead of a Folder and add Bodycopies to that page. The Standard Page is then selected as the Snippet Root Node on the Preferences screen. For more information about the Preferences screen, please refer to the MySource Matrix Administration manual. Using the Snippet Content Type Once you have performed the necessary set up for the Snippet content type, you can use the content type on assets within your system. When the content type for a division is set to Snippet, the fields shown in the figure on the following page. Chapter 9 Snippet Page 37 of 37

38 MySource Matrix Fundamentals Manual Figure 8.3: Snippet content type The first box lists the Bodycopy assets that have been stored under the root node. For example, in the figure shown below, the Bodycopy assets that have been stored under the Reusable Content Folder appear in the list. Figure 8.4: Snippet content type Select the Bodycopy asset that you want to use from the list provided. The second box allows you to view either the source code or the HTML version of the Bodycopy asset, as shown in the figures below. Figure 8.5: View HTML option Figure 8.6: View source option Chapter 9 Snippet Page 38 of 38