COPYRIGHT: Copyright 2015 Word-Tech, Inc. All rights reserved. U.S. Patent No: 8,365,080 and additional patents pending.

Transcription

1

2 COPYRIGHT: Copyright 2015 Word-Tech, Inc. All rights reserved. U.S. Patent No: 8,365,080 and additional patents pending. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Word-Tech, Inc. Notwithstanding the foregoing, the licensee of the software with which this document was provided may make a reasonable number of copies of this document solely for internal use. TRADEMARKS: Word-Tech, Inc., and DocMinder are either registered trademarks or trademarks of Word-Tech, Inc. and its affiliates in the United States and/or other countries. The names of actual companies and products mentioned herein may be trademarks or registered marks - in the United States and/or other countries - of their respective owners. Unless otherwise noted, the example companies, organizations, products, domain names, addresses, logos, people, places, and events depicted herein are fictitious. No association with any real company, organization, product, domain name, address, logo, person, place, or event is intended or should be inferred. INTELLECTUAL PROPERTY: Word-Tech, Inc. may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document; except as expressly provided in any written license agreement from Word-Tech, Inc., the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property. LIMITATION OF LIABILITY: The content of this document is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Word-Tech, Inc. Word-Tech, Inc. assumes no responsibility or liability for any errors or inaccuracies that may appear in this manual. Neither Word-Tech, Inc. nor anyone else who has been involved in the creation, production or delivery of this documentation shall be liable for any indirect, incidental, special, exemplary or consequential damages, including but not limited to any loss of anticipated profit or benefits, resulting from the use of this documentation or sample code. LICENSE AGREEMENT: Use of this product is covered by a license agreement provided with the software product. If you have any questions, please call Word-Tech, Inc (in the US or Canada). PUBLICATION DATE: May Page

3 Contents About... 5 About the Designer... 6 Access the Designer... 7 Create and Edit Templates... 8 Toolbars Toolbar Buttons Button Descriptions Toolbar Buttons Button Descriptions Toolbar Buttons Button Descriptions Toolbar Buttons Button Descriptions Conditional Blocks Adding Conditional Fields Formatting Text Indentation Apply CSS Classes Applying Paragraph Styles Copying Formatted Text from MS-Word and Other Applications Inserting Hyperlinks Inserting a Hyperlink via the Insert Link Dialog Modifying a Hyperlink via the Insert Link Dialog Removing a Hyperlink Inserting Anchors Inserting Links Find and Replace Working with Tables Creating a Table Using the Table Builder Creating a Table Using the Table Builder Creating a Table Using the Insert Table Light Dialog Inserting a Table from Other Applications Page

4 Show/Hide Table Borders Table Properties Table Properties Explained Cell Properties Cell Properties Explained Inserting/Deleting Rows and Columns Merging/Splitting Cells Formatting Tables with CSS Classes Creating Bulleted/Numbered Lists Inserting Special Characters Working with Images Inserting an Image from a Web-Server Editing Image Properties Editing Image Properties via the Insert Image Dialog Absolute Positioning Working with Documents Inserting Documents Uploading Documents to a Web-Server Using the Format Code Block Dialog Using the Spell Check Feature Using Code Snippets Inserting Code Snippets Creating Accessible Content (508 & WCAG2 Compliant) Creating Accessible Tables Creating Accessible Hyperlinks Creating Accessible Images Using Headers in Content Using the HTML Mode Using the Preview Mode Printing Content Page

5 About This guide provides comprehensive guidelines and step-by-step instructions for working with the DocMinder Designer. This guide is intended for end-users who have basic knowledge of HTML programming language. For deployment and configuration instructions, please refer to your Installation Files. 5 Page

6 About the Designer DocMinder s designer is a powerful WYSIWYG (What You See Is What You Get) HTML editor allowing users to author and manage HTML content as easily as writing a document. In its familiar Word R like interface users can seamlessly format text, set hyperlinks, build tables insert images, and much more. Supports XHTML and HTML specifications and structural features. Users can see, edit and produce content in HTML mode. Allows equivalent alternatives for supported image formats. Generates out-of-the box XHTML compliant markup. Change the presentation within editing views without affecting the document markup. Ability to zoom the content without affecting the produced XHTML. Content appearance can be changed by external CSS style sheets. Provides the option to display text elements, instead of a generic marker <html>. Edit the content using the tools provided by the editor, without going to HTML mode. Edit all properties of each element and object in an accessible fashion. Allows users to specify Alt Text and Long Description for images. Users can directly modify properties/attributes of a selected element in Design mode. Tag specific context menus to access the properties/attributes of a selected element. Allows users to define their own custom tags or attributes. Allows users to search within editing views. ~Note~ Features described in this manual may not be available in your application. Please consult your DocMinder Administrator for availability of features and further instructions. 6 Page

7 Access the Designer From the Application: 1. Click File; 2. Select Options; 3. Select Launch Web-Admin; From Web Browser: 1. Open New Browser Tab or Window; 2. Type Web-Admin URL (If you do not have this information, contact your DocMinder Admin) 3. Press Enter; Once you re logged into the Web-Admin you will perform the following actions to navigate to the Designer: 1. Click Permissions (top-horizontal menu) 2. Click Designer (left-vertical menu) 7 Page

8 Create and Edit Templates The Designer page displays all DocMinder templates in your system. Select a template Click to add selected Template ID Status Template Name Edit Link Click the Edit Link to modify the template. 8 Page

9 The Designer page will display allowing you to edit, add, and remove, etc., the template. Save: saves changes. Preview: click to see the template in a full browser window. Toolbars Overview in the next section Design: edit contents with WYSIWYG capabilities. HTML: displays HTML markdown. Preview: displays a preview of the template. 9 Page

10 Toolbars DocMinder s Designer toolbars are a set of buttons and dropdown lists you click to perform common tasks (e.g. make text bold, apply color, build tables, etc.). Most of these buttons work in the same way as in Microsoft Word. ~Note~ Depending on your particular DocMinder version, you may not be able to see all the buttons as displayed above. Please consult your DocMinder Administrator. The functions of the buttons and dropdowns on the Designer toolbar are described further in this guide. You will also find instructions on how to format text, insert hyperlinks, working with images, etc. 10 Page

11 Toolbar Buttons Undo Redo Style Builder Format Code Block Insert Link Insert Form Element Insert Button Insert Hidden Insert Reset Insert Submit Insert Textbox Strip CSS Format Strip Span Elements Format Stripper Page Properties Track Changes Insert Image Insert Table Insert Form Insert Check box Insert Radio Button Insert Select Insert Textarea Strip All Format Strip Font Elements Strip Word Format Help 11 Page

12 Button Descriptions Undo click to undo your last changes Redo click to redo the last undone action Page Properties click to view page attributes (page title, description, keywords, meta-tags, etc.) Style Builder provides options to define cascading style sheet (CSS) style attributes Track Changes turns Track Changes on or off Format Code Block edit and format code blocks of text ( HTML, CSS, JavaScript as well as C# and VB) Insert Image insert and edit images Insert Link create a hyperlink from the selected text, number or image Insert Table inserts a table in the Editor Insert Form Element inserts a form element from a list of elements Insert Form inserts an HTML Form Element Insert Button inserts an HTML Button Insert Checkbox inserts an HTML Checkbox element Insert Hidden Field inserts an HTML Hidden Field Insert Radio Button inserts an HTML Radio Button Insert Reset inserts an HTML Reset Button Insert Select inserts an HTML Select Element Insert Submit inserts an HTML Submit Button Insert Text Area inserts an HTML Text area Field Insert Textbox inserts an HTML Textbox Field Strip All Formatting removes all formatting from selected text Strip CSS Formatting removes all CSS formatting from selected text Strip Form Elements removes all form elements formatting from selected text Strip Span Elements removes all Span Element formatting from selected text Strip Word Formatting removes all Word formatting from selected text Format Stripper removes custom or all formatting from selected text Help Button launches the Quick Help you are currently viewing 12 Page

13 13 Page Toolbar Buttons Spell Check Image Manger Insert External Video Document Manager Insert Table Insert Row Above Insert Row Below Delete Row Insert Column Left Insert Column Right Merge Cells Horizontal Split Cells Horiz. Delete Column Merge Cells Verical Split Cells Vertical Delete Cell Cell Properties Cut Copy Paste Select All Paste from Word Strip Font Paste from Word Paste as HTML Paste Plain Text Paste HTML Media Manger Table Properties

14 Button Descriptions Spellchecker check spelling of the written text Image Manager insert, upload, create thumbnails and set image properties Media Manger insert/upload media objects (AVI, MPEG, WAV, etc.) and set their properties Insert External Video embed a YouTube or a Vimeo stream providing just the URL Document Manager insert a predefined document at the cursor position into the editor Insert Table inserts a table in the Editor Insert Row Above inserts a row directly above the selected row Insert Row Below inserts a row directly below the selected row Delete Row deletes the select row Insert Column to the Left inserts a column directly to the left of the selected column Insert Column to the Right inserts a column directly to the right of the selected column Delete Column deletes the select column Merge Cells Horizontally merges the selected cells horizontally (right to left) Merge Cells Vertically merges the selected cells vertically (up and down) Split Cell Horizontally splits the selected cells horizontally (right to left) Split Cell Vertically splits the selected cells vertically (up and down) Delete Cell deletes the selected cell Cell Properties displays the properties of the selected cell Table Properties display the properties of the selected table Cut cuts the selected content and copies it to the clipboard Copy copies the selected content to the clipboard Paste pastes the copied content from the clipboard into the editor Select All selects the whole content of the editor (text, images, tables, etc.) Paste from Word pastes content copied from Word and removes the web-unfriendly tags Paste from Word, Strip Font paste from Word and removes font names and text sizes Paste Plain Text pastes plain text (no formatting) into the editor Paste as HTML pastes HTML code in to the current selection and renders it 14 Page

15 Toolbar Buttons Print Insert Groupbox Horizontal Rule Insert Symbol Insert Time Align Center Justify Indent Superscript Convert Upper Case # List Set Absolute Image Remove Link Toggle Full Screen Find & Replace New Paragraph Insert Code Snippet Insert Date Align Left Align Right Remove Align Outdent Subscript Convert Lower Case Bullet List Hyper Link Manager Show/ Hide Border 15 Page

16 Button Descriptions Print prints the contents of the editor or the whole web page Find and Replace find (and replaces) text in the editor's content area Insert Group-box inserts a field-set element in the content area New Paragraph inserts a new paragraph Horizontal Line Rule inserts a horizontal line at the cursor position Insert Code Snippet inserts pre-defined code snippets Insert Symbol inserts a special character (,,, ±, etc.) Insert Date inserts current date Insert Time inserts current time Align Left aligns the selected paragraph to the left Align Center aligns the selected paragraph to the center Align Right aligns the selected paragraph to the right Justify justifies the selected paragraph Remove Alignment removes the alignment Indent indents paragraphs to the right Out-dent indents paragraphs to the left Superscript makes the selected text superscript Subscript makes the selected text subscript Convert to Lowercase convert the text of the current selection to lower case Covert to Uppercase convert the text of the current selection to upper case Numbered List creates a numbered list from the selection Bullet List creates a bulleted list from the selection Set Absolute Position sets an absolute position of an object (free move) Hyperlink Manager makes the selected text or image a hyperlink Remove Hyperlink removes the hyperlink from the selected text or image Show/Hide Border shows or hides borders around tables in the content area Toggle Full Screen Mode switches Editor into full screen mode 16 Page

17 Toolbar Buttons Bold Italicize Background Indent Color Font Name Size Real Font Size Apply CSS Class Custom Links Paragraph Style Underline Foreground Color Zoom 17 Page

18 Button Descriptions Bold applies bold formatting to the selected text Italic applies italic formatting to the selected text Underline applies underline formatting to the selected text Strikethrough applies strikethrough formatting to the selected text Foreground Color changes the foreground color of the selected text (text color) Background Color changes the background color of the selected text (background color) Font Name sets the font typeface Size sets the font size - fixed-size 1 to 7 Real Font Size the font size measured in pixels (px) or points (pt) Apply CSS Class applies custom, predefined styles to the selected text Custom Links inserts an internal or external link from a predefined list Paragraph Style applies standard or predefined text styles to the selected paragraph Zoom changes the level of text magnification 18 Page

19 Conditional Blocks Conditional blocks act much the same way that merge fields do in that their use is dependent upon the recipient data available in the message. Conditional blocks can also save time by allowing one message to contain different content for different recipients that would otherwise have to be sent in multiple s. Conditional Blocks are sections of text that are inserted into the DocMinder messages based on a conditional statement. If the condition is True, a particular section of text will be inserted into the message. If the condition is False, the text will not be inserted. Conditional Operator Symbolds: Square Brackets [ ]: Define the beginning and end of inserted data. Curly Brackets { }: Placeholders for inserted data. The structure consists of Square and Curly Bracket operator symbols with text. [BegIsToRecipient]{RecipientName}, You are assigned to: {Subject} due on {DueDate} [EndIsToRecipient] When recipients receive an message the conditional blocks are replaced by actual data. Christina Thomas, you are assigned to: Self Certification Checklist due on 03/28/ Page

20 Adding Conditional Fields To add more conditional fields to your DocMinder template, peform the following: 1. Put your cursor where you want to display the information; 2. Click a conditional block field to insert onto your page; 3. The block will now display. 20 Page

21 Formatting Text Change Font: To change the font, select the text first and then select a font from the drop-down list on the toolbar. Change Font-Size: To change the font-size, select the text first and then select a font-size from the drop-down list on the toolbar. Size: displays font size as 1, 2, 3... Real Font-Size: displays font sizes in pixels (i.e., 14px) 21 Page

22 Apply Font-Color: To apply font-color, select the text first and then click FOREGROUND COLOR button on the toolbar. This opens a color picker where you select a color to apply. Add Custom Color: Click to add a custom RGB color code. Apply Background Color: To apply a background color to text, select the text first and then click the BACKGROUND COLOR button on the toolbar. This opens a color picker where you select a background color to apply. Add Custom Color: Click to add a custom RGB color code. 22 Page

23 Set Text Alignment: You can set the paragraph alignment to left, right or justify. Select the text and from the toolbar, click the button for the alignment you want to set. Left Alignment: Center Alignment: Right Alignment: Justify: 23 Page

24 Indentation Indentation allows you to move the selected paragraph to the left (INDENT) or to the right (OUTDENT). The OUTDENT works only if Indent has been applied first. To apply indentation to the selected text, place the cursor inside a paragraph and click the indentation button. ~NOTE~ You can also highlight the text/paragraph to apply indentation. Apply Indent: Apply Outdent: 24 Page

25 Apply CSS Classes Predefined CSS classes are used to ease the process of formatting. To apply a CSS class, select the text first and then select a class from the APPLY CSS CLASS dropdown list on the toolbar. To clear an activated CSS class is as easy as applying it. To clear the CSS class, select the text first, and then select CLEAR STYLE from the CSS class dropdown list. 25 Page

26 Applying Paragraph Styles Predefined paragraph styles are used to ease the process of formatting paragraphs. The user can apply consistent paragraph styles to a document. The predefined styles include different heading styles, and/or other styles defined by your team. To apply a paragraph style to some text, first place the cursor within the text, then from the paragraph styles dropdown list, select the style you want to apply. 26 Page

27 Copying Formatted Text from MS-Word and Other Applications Copying formatted text from MS-Word, Internet Explorer, Google Chrome, or other applications, is pretty straightforward. The Designer introduces a number of tools that help users paste formatted text from Microsoft Word or other applications, and apply different types of format stripping. Here is a list of different Paste buttons and Dialogs: Paste button or -CTRL + V=: In case the user is trying to paste Word content with the regular Paste button or CTRL+V, a dialog will prompt whether the Word markup should be cleaned. If the Clipboard content does not come from Word, the dialog will not be shown. Paste from Word button: To strip MS-Word formatting (<o:p>, mso and other Word tags) from the copied MS-Word content before pasting it into the Designer, click the PASTE FROM WORD button: Paste from Word, Strip Font Button: When pasting MS-Word content by clicking on the PASTE FROM WORD CLEAN FONTS button the Designer will clean unnecessary MS-office related tags plus font formatting. Paste Plain Text: The Paste Plain Text button works similarly to PASTE FROM WORD, but removes all HTML formatting and pastes plain text, preserving the line breaks. 27 Page

28 Paste as HTML: The PASTE AS HTML tool allows you to paste the HTML content from the Clipboard as code, which may be quite convenient for developer-oriented applications (e.g., support systems, forums, etc.) The pasted text will look something like this: <img alt= # src= designer-logo.gif /> <br/> <span style= font-family: Arial; > Paste HTML: This dialog allows you to paste HTML code into the designer s current selection and render it. It is helpful when you need to enter predefined HTML code such as media embed source. Click the icon to launch the dialog In the text-area paste the HTML content that you want to render in the content area. Click PASTE 28 Page

29 Pasting Content in Non-Internet Explorer (IE) Browsers: When the Designer is under Firefox, Opera, Safari and Google Chrome, is used in combination with any of the paste events discussed above, a new dialog window appears. This is due to browser restrictions that do not allow accessing the content from the clipboard. To copy and paste content from and into the Designer, the user should use the CTRL+C and CTRL+V keyboard shortcuts. The text to be pasted is entered in this dialog. After the PASTE button is clicked, the text is added to the designer text area. 29 Page

30 Inserting Hyperlinks 1. Select the text or object that you want to set as a hyperlink. 2. Click the [Hyperlink Manager] button. The HYPERLINK MANAGER dialog appears. 3. In the URL field, enter the web address that you want the link to point to or from the Existing Anchor dropdown list, choose an anchor inserted in the current document. It is also possible to insert a link pointing to a document by pressing the Document Manager icon in the link manager, selecting a file and pressing the Insert button. 4. ~Optional~ Fill the Link Text field if you want to specify the text of the link, 5. ~Optional~ Select a target for the link. 6. ~Optional~ Enter a tooltip. This text will appear when the mouse cursor is placed over the hyperlink (text or image). 7. Click [OK] 30 Page

31 Inserting a Hyperlink via the Insert Link Dialog 1. Select the text object that you want to set as a hyperlink. 2. Click the [INSERT LINK DIALOG] button. The Insert Link dialog appears. 3. In the URL field, enter the web address that you want the link to point to. 4. ~Optional~ Fill the Link Text field if you want to specify the text of the link, 5. ~Optional~ Select a target for the link. 6. ~Optional~ Click the All Properties... button to set additional properties through the Hyperlink Manager. 7. Click [OK] 31 Page

32 Modifying a Hyperlink via the Insert Link Dialog 1. Click inside the hyperlink (or in the image if you have an image link) 2. Click the [INSERT LINK DIALOG] button. The Insert Link dialog will appear. 3. Modify the hyperlink attributes (URL, Link Text, etc.) and click [OK]. Removing a Hyperlink 1. Select the text or image that has been set as a hyperlink. 2. Click the [REMOVE LINK] button. You will notice that all formatting, related to links (blue color, underline, etc.) will be removed from the text. This holds true for the inserted documents as well. 32 Page

33 Inserting Anchors The anchor function is particularly helpful if you have a very long web-page. With this function, your readers will be able to jump from one section on the page to another. In other words, the anchor is used for hyperlinks that lead to the same page or particular place in another page. The anchor defines the destination to which a hyperlink must lead. Then you can create a hyperlink and point it to that anchor. 1. Define the Anchor. Place the cursor where you want the hyperlink to lead. 2. Click the [HYPERLINK MANAGER] button. 3. Select the [ANCHOR] tab. Enter a unique name for the anchor (e.g., Anchor1 ) 4. Click [OK] 5. Create the hyperlink that will lead to the Anchor. Select some text or an image. 6. Click the [HYPERLINK MANAGER] button again. Select the [HYPERLINK] tab. 7. In the URL field type # followed by the name of the anchor (in our case Anchor1, so you will have to enter #Anchor1). In addition, from the Existing Anchor dropdown list, you can select an anchor inserted in the current document. 33 Page

34 8. Change the type to Other 9. Click [OK] 34 Page

35 Inserting Links In some cases, the Designer may be configured to display and insert a set of frequently-used links. Such links may be all the web pages of a site (a.k.a. Internal Links). They will appear in the [CUSTOM LINKS] dropdown list assign a predefined hyperlink to an object and type its URL address.. As a result, you can quickly 1. Select the text or image that you want to set as a hyperlink. 2. Click the [CUSTOM LINKS] dropdown list. 3. From the dropdown list, select the desired link. 35 Page

36 Find and Replace To find (and subsequently replace) a word or passage of text in the content, click the button on the toolbar to open the Find and Replace dialog. This dialog provides options like search direction, scope, match case and match whole words only. To find and replace a certain abstract of text do the following: 1. Select a range of content (it may contain images and tables as well) if you want to search only in that content. 2. Click the [FIND AND REPLACE] button or press [CTRL+F]. The Find and Replace dialog appears. 3. Type the word or abstract of text you want to find in the Find field. 4. (Replace) If you want to replace this text with a different on, click the [REPLACE] tab. 5. (Replace) Choose other options like search direction, scope, etc. 6. (Replace) Click [Find Next], [Replace], or [Replace All]. ~NOTE~ If you have replaced a given text with the Replace or Replace All functions by mistake, you can click [Cancel] and the replacement will be undone. To confirm the replacement click [OK]. 36 Page

37 Working with Tables The designer offers two ways for creating tables. The best approach in each particular situation depends on your preferences and the table complexity. For simpler tables we recommend the click-and-drag Table Builder, whereas, for more complex tables the Table Wizard is more appropriate. Creating a Table Using the Table Builder 1. Position the cursor where you want to create the table. 2. Click the [INSERT TABLE] button on the designer toolbar. 3. Drag the mouse cursor to select the number of rows and columns you want. Click the left mouse button. Alternatively, you can click-and-drag to make the selection. 37 Page

38 Creating a Table Using the Table Builder 1. Position the cursor where you want to create the table. 2. Click the [INSERT TABLE] button on the designer toolbar. 3. Click the [All Properties...] button at the bottom left of the dialog. The table wizard appears and you can use it to create your table and set its properties. To add or remove columns or rows, click [+] or [-] next to Columns and Rows 1. Click [+] next to Column span to merge the right cell with the cell you have selected. Click the [-] button to unmerge the left cell. 2. The [-] or [+] buttons next to Row span work in a similar way as Column span but for rows. ~NOTE~ If you click the [Insert] button, the defined table will be created. Further customization of this table is allowed using the [Table Properties], [Cell Properties], and [Accessibility] tabs of the Table Wizard. The next sections describe how to modify tables. 38 Page

39 Creating a Table Using the Insert Table Light Dialog Insert Table Light dialog is a light version of the Table Wizard. When enabled, its content is rendered on page load and as a result the content is immediately loaded when the dialog is shown without any delay. 1. Position the cursor where you want to create the table. 2. Click the [INSERT TABLE] button on the designer toolbar. 3. Specify the desired number of columns and rows. 4. Apply the desired alignment, cell padding, cell spacing, and border if needed. 5. Click [OK] to insert the table. The All Properties... button inside the Insert Table dialog will load the Table Properties panel of the Table Wizard dialog which features more table options. It is possible to edit the properties of a selected table in the content area by clicking on the [INSERT TABLE] button and loading the Insert Table dialog. 39 Page

40 Inserting a Table from Other Applications Inserting a table from Microsoft Word or other applications into the designer is an easy copy-paste operation. Most of the formatting is preserved, including borders, text, numbers, and cell color. Formula, however, will not be pasted. Show/Hide Table Borders If you have created a table that has no borders by default, you can switch on the auxiliary borders. They are not saved in the content but can help you locate and work with your table. You can toggle the auxiliary borders using the [SHOW/HIDE BORDERS] button on the toolbar. 40 Page

41 Table Properties The Table Properties dialog allows you to fine-tune the appearance of a new or existing table. You can reach the [TABLE PROPERTIES] tab in either of the following ways. From the Insert Table Button From the Insert Table dialog, click the [INSERT TABLE] button the toolbar. Click All Properties... button the Insert Table dialog box. The Table Wizard dialog will appear. Click the Table Properties tab in the Table Wizard dialog box. From the Table Properties Button You can also access the table properties by clicking the [TABLE PROPERTIES] button the designer toolbar. 41 Page

42 Table Properties Explained Once the Table Properties dialog tab is opened, you can set the appearance of the table. This involves setting one or more of the following table properties: Width/Height Specifies the height and the width of the table (in pixels or percent). Background Sets the background color of the table. Alignment Aligns the table to the left, center or right side of the page. Cell Spacing Increases or decreases the space between the borders of the cells. Cell Padding Increases or decreases the space between the content and the border of the cell. Border Includes setting border width, color and layout. ID Setting an ID for a table gives some options for advanced table handling. Background Image Sets an image as the table background. CSS Class Specifies table CSS class and style. (For advanced users and developers) Style Builder Provides options to define cascading style sheet (CSS) style attributes. A CSS style combines individual formatting and positioning attributes into a set that you can apply all at one time. 42 Page

43 Cell Properties The Cell Properties dialog allows you to fine-tune the appearance of individual cells of a given table. You can reach the [CELL PROPERTIES] tab in either of the following ways: From the Insert Table Button From the Insert Table dialog, click the [INSERT TABLE] button the toolbar. Click All Properties... button the Insert Table dialog box. The Table Wizard dialog will appear. Click the Cell Properties tab in the Table Wizard dialog box. From the Table Properties Button Click the [TABLE PROPERTIES] button the designer toolbar. The Table Wizard dialog appears. Select Cell Properties from the Table Wizard dialog box. 43 Page

44 Cell Properties Explained Width/Height Specifies the height and width of the selected cell (in pixels or percent). Content Alignment Aligns the content within the selected cell, vertically and horizontally. Background (Color) Changes the background color of the selected cell. Background Image Sets an image as the cell background. Style Builder Provides options to define cascading style sheet (CSS) style attributes. A CSS style combines individual formatting and positioning attributes into a set that you can apply all at one time. ID Setting an ID for a cell gives options for some better cell handling. (For advanced users and developers) No Wrapping Enables/disables text wrapping (i.e., forces a new line when text reaches the Cell Border). CSS Class Specifies cell CSS class and style. (For advanced users and developers) 44 Page

45 Inserting/Deleting Rows and Columns Once you have created a table, you can easily add or delete rows and columns - to do this, rightclick inside a table or cell to display the context menu. To insert a new row, do the following: 1. Place the cursor in the row on top or beneath where you want to insert a new row. 2. From the toolbar, select the Insert Row Above/below button. You can insert new columns in a similar fashion. To delete rows or columns, simply place the cursor in the respective row/column and select Delete Row/Column button from the toolbar. Merging/Splitting Cells To merge a cell with the adjacent cell, do the following: 1. Select the cell. 2. From the toolbar, select the Merge Cells Horizontally/Vertically button. To split a cell, do the following: 1. Select the cell. 2. From the toolbar, select the Split Cell/Split Cell Horizontally button. 45 Page

46 Formatting Tables with CSS Classes CSS classes provide an easy and consistent way for formatting tables. In order to use the CSS Class, you have to first create the table and then open the Table Properties dialog to apply the predefined CSS class. To apply a CSS class to a table or individual cell, you need to do the following: 1. Click the table/cell. Right-click to open then context menu. 2. Click Set Table/Cell Properties to open the Table/Cell Properties dialog. 3. Select the CSS class from the dropdown list at the bottom of the dialog. 4. Click the [UPDATE] button. 46 Page

47 Creating Bulleted/Numbered Lists To create bulleted or numbered lists, do the following: 1. Select the text that you want to convert to a bulleted/numbered list. 2. Click the [BULLETED/NUMBERED LIST] button on the toolbar. 3. Press [ENTER] to create a new list item. 4. Press [CTRL + ENTER] to end the list. 5. Click the [INDENT] or [OUTDENT] buttons to create an inner level of numbering or bullets. Inserting Special Characters To insert a special character, do the following: 1. Select the place where you want to insert a special character. 2. Click the [INSERT SPECIAL CHARACTER] button 3. Click to select the respective character in the dropdown list. 47 Page

48 Working with Images The Image Manager dialog allows you to browse folders on the web-server just like a regular Windows Explorer. The folders to which you have access are pre-set by the site administrator. The Image Manager allows you to perform the following tasks: Browse folders and files; Select multiple files; Sort files by name and type; Preview images, zoom in and out; Upload new images to the server (if you are given permissions to upload in the respective folder. Please contact your DocMinder Administrator for details about the given permissions). Generate thumbnails of the uploaded images (if you are given permissions to generate thumbnails. Please contact your DocMinder Administrator for details about the given permissions). Create new sub-folders (if you are given permissions to create sub-folders in the respective folder. Please contact your DocMinder Administrator for details about the given permissions). The Image Manager offers two ways of viewing files: Thumbnails View all files are loaded and displayed as icons in the central area of the dialog; Grid View all files are loaded and displayed as a list in the central area of the dialog. 48 Page

49 Inserting an Image from a Web-Server 1. Position the cursor at the place where you need to insert the image. 2. Click the [IMAGE MANAGER] button from the toolbar. A dialog box appears. 3. To go to a new subfolder, double-click its name or use the Treeview control to expand the parent folder and access the available subfolder(s). 49 Page

50 4. If the file browser lists more than 100 images use the paging slider to navigate to the rest of the pages: 5. Locate the image file that you want to insert and click it once. A preview of the image appears in the right-hand side of the dialog box. 6. To set the image properties of the selected image, navigate to the Properties tab (using Tab key or clicking on the Properties button). The Properties panel can be used to set ALT TEXT and LONG DESCRIPTION attributes of the inserted image, which is a requirement for producing accessible content. 7. Click [INSERT] to finish or [CLOSE] to cancel the operation. 50 Page

51 Editing Image Properties By selecting an image in the Image Manager, you can use the properties tab on the right to set its properties before insertion. Once the image is inserted, you can manage its properties through the right-click Options context menu. Set Image Properties dialog with populated fields of a selected image. 51 Page

52 Set Image Properties of a selected image within the Image Manager 52 Page

53 The image properties that can be managed are described below (the options may vary depending on the customization of the dialog): 1. Border Width: Specifies width (thickness) of the image border. Select NO BORDER to remove the border. 2. Border Color: Specifies the color of the image border. 3. Image Alt Text: Specifies the alternative text that is displayed in some cases instead of the image. 4. Long Description: This is an Accessibility option. The text entered in the Long Description field will be read by the Windows Narrator tool. 5. Image Alignment: Specifies the alignment of the image, with respect to the adjacent text/images. When you choose left or right alignment, the text wraps around the image. 6. Margin: Specifies the margin (distance to the top, to the left, to the right and to the bottom) between the image and the adjacent text/images. 7. Width: Specifies a custom width for the image (you can constrain the proportions to avoid distortion). The image is not resampled or modified, but rather displayed with specified width. 8. Height: Specifies a custom field for the image (you can constrain the proportions to avoid distortion). The image is not resampled or modified, but rather displayed with the specified height. 9. CSS Class: Specifies image CSS class and style. Only advanced users should use this property. 10. Title Text: Specifies the title for the image. 53 Page

54 Editing Image Properties via the Insert Image Dialog 1. Click on the image in the content area. 2. Click the [INSERT IMAGE DIALOG] button. The Insert Image dialog will appear. 3. Modify the image attributes (Image SRC, Alt Text, Width and Height). Setting the Alt Text value is a requirement for producing accessible content. 4. Click the All Properties... button to set additional properties through the Properties... dialog. 5. Click [OK]. Absolute Positioning In some scenarios, you may want to position an image absolutely. This will make the image float freely so you can move it around the content with the mouse. To set absolute positioning for a given image, simply select the image and click the [SET ABSOLUTE POSITION] button on the toolbar. 54 Page

55 Working with Documents The Document Manager allows you to insert hyperlinks to document files stored on the webserver by simply selecting them from a list. The dialog is similar to the Image Manager and allows you to browse, upload, and delete documents. Inserting Documents 1. (Optional) Select text or an image that you want to set as the hyperlink to the document. 2. Click the [INSERT DOCUMENT] button. 3. A dialog opens to display a list of folders and documents that you are allowed to browse. Select the document you want to insert. 4. (Optional) Type a tooltip. The tooltip will be read by the Windows Narrator. 5. (Optional) Select a target for the link. 6. Click [INSERT]. ~NOTE~ In case you have selected some text or an image in step (i), it becomes a hyperlink to the document. In case you have not, the name of the document appears at the cursor point and is set as a hyperlink to the document. 55 Page

56 Uploading Documents to a Web-Server You can use the Document Manager dialog to upload document files from your computer to the web-server. Once uploaded, the documents will appear in the File Browser at the bottom of the filelist in the current folder. To upload new Document Files on a Web-Server, do the following: 1. Click the [DOCUMENT MANAGER] button to open the dialog. 2. Navigate to the folder in which you want to upload the Document. 3. Click the [UPLOAD] button. 4. Click [SELECT] to select a Document file from your computer. 5. Click [UPLOAD]. 56 Page

57 Using the Format Code Block Dialog The Format Code Block dialog provides the ability to edit and format code blocks of: Markup, i.e., HTML, XHTML, ASPX, XML CSS JavaScript C# VB Code Blocks PHP Delphi Python SQL 1. Click the [FORMAT CODE] button. 2. Paste lines of text or code into the upper pane of the Format Code dialog. 3. Select the format from the Select Language dropdown. 4. Click the [OK] button to insert the formatted content into the editor. The dialog also provides a Preview button which allows you to see how the formatted content will look (depending on the selected Language item in the dropdown) before insertion into the content area. You can see a sample dialog preview below, which shows formatted content prior to insertion in the content area: 57 Page

58 Using the Spell Check Feature The Designer features a multilingual spellchecker that is invoked when clicking the [SPELL CHECKER] button on the toolbar. If there are several spellchecking dictionaries available, you will see a dropdown where you can choose which dictionary to use. By default, the initial spellchecking language is the localization language of the Designer, (i.e., the language in which the editor s menus, toolbars, modules, etc., are set.) The Ajax Spellchecker of the Designer brings the spellchecking experience to a whole new level with the addition of an inline AJAX spellchecker. You can now check your spelling asynchronously and all your mistaken words will be highlighted inline in yellow. The context menu on every word gives you a quick and easy way to Change, Ignore, or Add the word to a custom dictionary. 58 Page

59 Using Code Snippets The Code Snippets dropdown list is a very convenient tool for inserting predefined chunks of content (HTML) like signatures, product description templates, etc. Inserting Code Snippets 1. Place the cursor where you want to insert the code snippet. 2. Click the [INSERT CODE SNIPPET] button. 3. From the dropdown list, select the respective snippet. 59 Page

60 Creating Accessible Content (508 & WCAG2 Compliant) To generate content that can be interpreted by assistive technologies such as the Accessibility Tools integrated in Microsoft Windows (the Narrator, Magnifier, and On-Screen Keyboard), the Designer includes additional fields in the Table, Hyperlink, and Image Dialogs. By making content Section 508 or WCAG2 compliant, it means that equivalent access to information is available for all users. Creating Accessible Tables The narrative software uses the information from the Accessibility table fields (heading rows, columns, caption alignment and summary) to produce a Tooltip message for each table cell. Users with impaired vision can see those Tooltips as they hover over the cells with the mouse. Also assistive technologies are able to read the text included in these fields and make it available through synthesized speech or Braille output. You can create a Section 508 compliant table with the Table Wizard. Alternatively, you can convert an existing table to a Section 508 compliant table using the Table Properties context menu. 60 Page

61 1. Create a new table with the Table Wizard or open the Table Properties dialog. 2. Click the Accessibility tab. 3. In the Accessibility tab, fill in the fields: Headings rows/columns, Caption and Summary about the table. Select the [ASSOCIATE CELLS WITH HEADERS] checkbox. a. The caption should specify the title of the table. For information about table captions, go to: b. Summary is used to give more details on the contents of the table. This attribute only needs to be completed if user sets 2 for the Heading rows or Heading columns field. For more information about Summary attribute include link to: c. Always select the [ASSOCIATE CELLS WITH HEADERS] checkbox. Here is an example demonstrating how the produced accessible table should look: <table summary="this table gives per diem rates"> <caption> Per Diem Rates</caption> <tr> <th></th> <th colspan="2" id="hotels">hotels</th> <th colspan="2" id="meals">meals</th> </tr> <tr> <th id-"city">city</th> <th id="hwinter">winter</th> <th id="hsummer">summer</th> <th id="mwinter">winter</th> <th id="msummer">summer</th> </tr> <tr> <th id="loc" headers="city">seattle</th> <td headers="loc hotels hwinter"> $200</td> <td headers="loc hotels hsummer">$150</td> <td headers="loc meals mwinter">$70</td> <td headers="loc meals msummer">$90</td> </tr> <tr> <th id="loc2" headers="city">denver</th> <td headers="loc2 meals hwinter">$170</td> <td headers="loc2 meals hsummer">$180</td> <td headers="loc2 meals mwinter">$75</td> <td headers="loc2 meals msummer">$75</td> </tr> </table> 61 Page

62 Creating Accessible Hyperlinks A hyperlink can be interpreted by the narrative software if you specify an additional description in the Tooltip field. ~Note~ that link text should never be Click Here or More Information. The link text should always describe specifically where the user will navigate to once activating the link. In the example below the Link Text should be DocMinder Home Page there does not need to be a Tooltip added. Optionally the user could include the text Link opens in New Window see information at: The produced link markup is: <a href= target= _blank >DocMinder Home Page</a> 62 Page

63 Creating Accessible Images An image can be interpreted by the narrative software if you specify an additional description in the Long Description field. To make an image accessible fill the Alt Text field. For example, insert a pie chart image and fill the box with Amount Spent Chart Long Description should be set when displaying charts and graphs to provide detailed information. The value of this box should point to a separate description file. For example, create an HTML file named chartdesc.html and write more detailed information about the image: Amount Spent Chart Description. This chart shows the monthly amount spent on different products... Here is the produced image tag: <img src="/images/complex_chart.png" alt="amount Spent Chart" longdesc="chartdesc.html" /> Information on Alt Attribute: Information on LongDesc attribute: 63 Page

64 Using Headers in Content If there is a large amount of text (over 750 characters) then headers make it much easier for all users to navigate through the content. You can see how to apply a heading into the Designer in the Apply Paragraph Styles section. Using the HTML Mode More advanced users sometimes need to modify the HTML code of the content directly. For this reason, the Designer provides the so called HTML mode that gives you access to the content code. The author could switch to HTML mode either by clicking the HTML button using the mouse or navigating to the HTML button using the TAB key. ~NOTE~ The HTML mode may be disabled by the site administrator. 64 Page

65 Using the Preview Mode After editing the document in the editor preview, users may like to see a preview before updating the page. The designer switches to the Preview Mode with a single click of the Preview Button. 65 Page

66 Printing Content To print the whole web-page including the Designer, click the [PRINT] button. It will open the Printer Properties dialog where you can choose a printer and printing options. To print only the content of the Designer, do the following: 1. Make sure the cursor is positioned inside the editor s content. 2. Click the [PRINT] button to open the Printing Preferences dialog and confirm the printing operation. 66 Page