Using econtentmanager s ewebeditpro Editor

Transcription

1 Using econtentmanager s ewebeditpro Editor econtentmanager comes with its own content editor, called ewebeditpro. With ewebeditpro, you can add and modify your page content with WYSIWYG ease-of-use. The ewebeditpro button bar provides familiar and most-often used editing functions. The numbers above each button has a corresponding description below the button bar Cut 2 Copy 3 Paste 4 Undo 5 Find 6 Spell Check 7 Font Type 8 Font Size 9 Font Color Highlight text and graphics (either with the mouse or keyboard by holding the shift key and moving the text cursor) and click on this button. The information will disappear, but it is placed in a buffer from which you can retrieve it with the Paste button. However, subsequent cut or copy operations will overwrite the buffer Highlight text and click this button. You will not see anything happen, but the copied information is placed in a buffer that you can retrieve with the Paste button. Click this button to place the contents that were cut or copied. Reverses changes by undoing each operation one step at each click. Displays the Find dialog box in which you type text that you want to find in the document. Click on the Find Next button to find the next occurrence of the text you specified. For more information, see Finding Text in Your Pages on page 21. Displays the Spell Checker dialog box, which guides you through possible spelling errors in your document and gives you suggested corrections. Displays a menu that shows the types of fonts you can use on your web page. You can highlight text and select a font type. For example, this sentence is in Times New Roman. Displays the point sizes of the fonts you can use on your web page. You can highlight text and select a font size. For example, this sentence is in a 12-point font. Displays a color palette. You can highlight text and select a font color. For example, this sentence is red. 10

2 10 Bold 11 Underline 12 Italic 13 Bullets Decrease Indent Increase Indent Left Justify 17 Center Justify Right Justify Insert Bookmark Insert Hyperlink You can highlight text and click on this button to change text into bold text. You can also click the button first and type bold text. You can highlight text and click on this button to underline the text. You can also click the button first and type underlined text. You can highlight text and click on this button to change text into italic text. You can also click the button first and type italic text. Adds a bullet to the left of the specified text, as shown by this sentence. Adjusts the left margin of text toward the left side of the page. Adjusts the left margin of text toward the right side of the page. Aligns text to the left side of the page. For example, in this table, this is what left justified text looks like. Aligns text to the center of the text field. For example, in this table, this is what center justified text looks like. Aligns text to the right side of the text field. For example, in this table, this is what right justified text looks like. Lets you set a bookmark so that it can be used an intrapage hyperlink. For more information, see Managing Bookmarks on page 11. Displays the Hyperlink dialog box which lets you insert a live internet link into your web page just like the following: QuickLinks is a fundamental feature for linking to any page created by econtentmanager. For more information, see Managing Hyperlinks on page

3 21 22 Insert Picture Insert Table 23 About ewebeditpro Displays the Picture dialog box from which you can specify an image file from your image library. For more information, see Inserting Images into Your Web Page on page 16. Displays the Table dialog box from which you can specify the layout of a table. For more information, see Managing Tables on page 17. Displays the version of the ewebeditpro software. Managing Bookmarks You can insert bookmarks onto your page by clicking on the Insert Bookmark button. Bookmarks are especially useful in large web pages because you use them to create hyperlink jumps to the place on the page where you have set the bookmark. For example, if the Ektron Press Release 720 was one of numerous press releases, you may have a list of links at the top of the page like a table of contents. The Bookmark dialog box appears as shown below. To create a bookmark. perform the following steps: 1. Highlight the text you want to bookmark (for example, Ektron Press Release 720). 2. Click on the Insert Bookmark button. 3. Specify Ektron720 in the Bookmark name field of the Bookmark dialog box. 4. Click on the button. You can select a bookmark from the list and click on the button to go directly to the bookmarked location on the web page. You can rename or delete a bookmark by selecting it and clicking on the appropriate button in the Bookmark dialog box. You can use bookmarks in conjunction with hyperlinks so that a hyperlink on your web page links directly to a bookmarked location on another web page. For more information, see Managing Hyperlinks in the following section. 12

4 Managing Hyperlinks You can insert hyperlinks onto your page by clicking on the Insert Hyperlink dialog box appears as shown below. button. The Hyperlink Type Link Bookmark Displays a list of the types of hyperlinks you can use by clicking on the down arrow to the right of the Type field. Displays the URL of the page you want. This field is automatically filled in if you select a link from the Quick Link list. If you want to link to a page that is not in the Quick Link list, you can type it in the Link field and click on the OK button. Enables a hyperlink to go directly to a bookmarked location on the web page specified in the Link field. When the Bookmark field is not empty, the resulting hyperlink consists of the value in the Link and Bookmark fields separated by a "#". For example: Text Target Frame Quick Link Type the text that you want displayed as a blue and underlined link on your page. When this text is clicked on your finished page, it will take the user to the link specified in the Link field. Displays a list of display options. You can also type the name of a frame in the Target Frame field. Each option is defined as follows when the user clicks on your hyperlink: _blank _parent _self _top Display the hyperlinked page in a new window. Display the hyperlinked page in the current parent window. Display the hyperlinked page in the current window pane. Display the hyperlinked page in the current entire browser window. Displays a list of existing link titles that you can select. 13

5 Whenever you create a new document, econtentmanager adds and sorts the title of your new page to the Quick Link list. The Quick Link list also includes the bookmarks within a page. You can select any existing title in the econtentmanager database from the Quick Link list field at the bottom of the Hyperlink dialog box. For information about creating a new document, see Adding a Document on page 24. Creating Hyperlinks On Your Pages You can create a hyperlink on your web page by performing the following steps: 1. Highlight some text on your page. In the example on the right, Theta is highlighted on the Alpha page. 2. Click on the Insert Hyperlink button (shown as an icon on each page in the example). 3. Select the place you want to link to from the Quick Link list. In this example, you would choose the Theta page link from the Quick Link list. Note: The blue and underlined text indicates a hyperlink to another page that has already been created. You can insert a hyperlink without first highlighting text by performing steps 2 and 3. The text you select in the Quick Link list is what appears as a blue and underlined active hyperlink. Title Alpha Link Beta Link Gamma Link Theta Title Gamma Link Alpha Link Beta Link Theta Title Beta Link Alpha Link Gamma Link Theta Title Theta Link Alpha Link Beta Link Gamma Managing Images econtentmanager manages images in a library on the web server. Before you use an image on your web page, you should place it in the image library. Once in the image library, all econtentmanager users can access and use the image on their web pages. Images are stored in the econtentmanager/global directory. Note: You can insert an image on your web page from any location outside the library, as long as you have the full path to the image location i.e. If the image does not contain the full path the image will be a broken image This most often happens when coping content from another web site into the editor. You can copy the images from the web page and upload them to the econtentmanager image library, then replace the broken images, or edit the html link by right mouse button clicking on the broken image, select edit html, modify the image tag is so that the source has the full path. 14

6 Uploading Images to Your Image Library You can create a library of images for use and reuse by clicking on the link in the ewebeditpro window. The Image Upload dialog box appears as shown in the following example. Images that are already in the econtentmanager image library are displayed in the Images list box. Click on a description in the Images list box to see a preview of the image in the lower right pane of the Image Upload dialog box. 15

7 To add a new image to the image library, follow the steps in the left pane of the Image Upload dialog box. The steps are described as follows: 1. Type the path and filename of the image you want in the first text box of the Image Upload dialog box, or click the button to display a file browser similar to the following: Select the image file you want (for example, airplane.jpg) and click on the The file path is automatically entered into the text box. button. 2. Click on the button to display the image in the lower right window pane of the Image Upload dialog box. 3. Type a description of the image that will appear in the Images list box in the upper right window pane of the Image Upload dialog box. 4. Click on the button to add the description and image to the image library. 16

8 Inserting Images into Your Web Page You can insert a picture on your web page by clicking on the Insert Picture button. The Picture dialog box appears as shown below. You specify pictures from image files stored on your system or out on the network. To insert an image, perform the following steps: 1. Place the text cursor on the page where you want the picture to appear. 2. Click on the Insert Picture button. The Picture dialog box appears. 3. Select the Picture from the Picture pull down field, click on the down arrow to the right of the Picture field and click on OK. The pull down list contains all the images in the image library on the server. When you select a picture from the Picture list, the other fields are automatically updated. If you do not find the picture you want in the list and you know the location of the picture that you want, see Uploading Images to Your Image Library on page

9 You can specify additional options for your picture, such as width and height of the picture, and horizontal and vertical spacing of the picture. You also can add a border to your picture. The Alignment field lets you select one of several alignment options. Using Line Breaks and Carriage Returns When you use the Enter key in the ewebeditpro editor, it inserts a new paragraph on the page. If you want to use a line break instead, use the Shift-Enter key combination. Note: In HTML code, the Enter key produces a <P> tag; the Shift-Enter key combination produces a <BR> tag. 18

10 Managing Tables You can insert a table in your web page by clicking on the Insert Table dialog box appears as shown below. button. The Insert Table For a simple table, specify the number of rows and columns you want your table to have and click the button. 19

11 You can also specify additional options as follows: econtentmanager User s Guide Layout Width Sets the width of the table on the page in terms of a percentage or by pixel width. If you select the Not Specified option, the table width is automatically determined. Custom Background Borders Horizontal Alignment Background Color Background Image Border Color Border Size Cell Padding Cell spacing Sets the horizontal position the table in relation to the page. You can choose from left, center, right, or justify. Sets the color of the table borders by clicking in the field, unless Unassigned is checked. Sets the thickness of the table borders in pixels. Sets the color of the table borders by clicking in the field, unless Use Default Color is checked.. Sets the thickness of the table borders. Sets the spacing around the text in a table cell. Sets the spacing between cells in the table After your table has appeared on your page, you can access table functions in one of two ways. 1. You can click on the table with the right mouse button, which displays the following menu. Cuts highlighted text. Copies highlighted text. Pastes text that you most recently cut or copied. Selects all text and graphics in the table. Adds a row to the table above the current row. Adds a column to the left of the current column Deletes one (current) or more (highlighted) rows. Deletes one (current) or more (highlighted) columns. Merges two or more highlighted cells. Splits one or more cells into two of each cell. Displays table properties dialog. Displays cell properties dialog, which is described later in this section. Lets you edit HTML code directly into the page. Displays the HTML code for the page. To return, click on the right mouse button and select View WYSIWYG. The Table Properties menu item displays a dialog very similar to the Insert Table dialog box shown at the beginning of this section. Note: With the Edit HTML command, ewebeditpro lets you directly enter standard HTML code only; other code and erroneous code will not be added to the HTML page code. 20

12 2. You can open the Insert Table button, which display the following menu. Inserts a new table or a table inside a table. Adds a row to the table above the current row. Adds a column to the left of the current column Adds a cell to the end (right) of the current row. Deletes the current row or all the highlighted rows. Deletes the current column or all the highlighted columns. Deletes the current cell or all the highlighted cells. Merges two or more highlighted cells. Splits one or more cells into two of each cell. Displays table properties dialog. Displays cell properties dialog. The Cell Properties menu item displays the following dialog box. 21

13 22

14 You can also specify cell options as follows: Span Layout Custom Background Rows Spanned Columns spanned Width Word Wrap Horizontal Alignment Vertical Alignment Background Color Background Image econtentmanager User s Guide Sets the number of cells in the row merged together into the selected cell Sets the number of cells in the column merged together into the selected cell. Sets the width of the cell within the table in terms of a percentage or by pixel width. If checked, any text within the cell will wrap on to multiple lines. If not checked, the text will remain on a single line. If the text is too wide to fit in the cell, the excess will be clipped. Sets the horizontal position of the text within the cell. For example, left, center, right, or justify. Sets the vertical position of the text within the cell. For example, top, middle, bottom, or baseline. Sets the color of the cell by clicking in the field, unless Unassigned is checked. Sets the image to be displayed in the cell's background. Borders Border Color Sets the color of the table borders by clicking in the field, unless Use Default Color is checked.. Running Spell Checker You can check the spelling and grammar on your page by clicking on the Spell Checker The Spelling dialog box appears as shown below. button. In the example, the word spellling is misspelled. Spell Checker highlights the error in red and offers suggestions as to which may be your intended word. Spell Checker even highlights the most probable suggestion. To accept the suggested correction, click on the Change button. 23