Title page - Michigan



[pic]

WebEdit Pro

Table of Contents

What is WebEdit Pro 3

How to Access it 3

How to Install 3

How to Upgrade 3

Accessing WebEdit Pro 4

Tool Bar Overview 6

Top Row 6

Second Row 11

Optional Buttons 13

Tables 15

Exercise: Insert a Table 15

Exercise: Enter Text Into a Table 17

Exercise: Format a Table 17

Accessing Table Menus 27

Suggested Uses of Tables 28

Images 30

Exercise: Insert an Image 30

Exercise: Move & Resize the Image 34

Exercise: Wrap Text around the Image 35

Exercise: Position Images in a Table 37

Exercise: Edit an Image 37

Links 39

Relative vs. Absolute Links 39

Links Internal to Site 40

Links External to Site 41

Link to e-Mail Address 42

Bookmarks 45

Other Applications of Bookmarks 48

Edit Link 48

Remove Link 49

Special Issues 49

Line Break 49

Done, Cancel & Update 51

Size Limitations 51

Copy-Paste Issues 52

What is WebEdit Pro

The leading browser-based, multi-language “What You See Is What You Get” (WYSIWYG pronounced wiz-e-wig) web content authoring and editing tool – WebEdit Pro, has been integrated into the CMA. This means that content publishers do not need to understand or know HTML to publish content to the Portal. It is a separate program that must be installed on your PC.

Instead, you click Edit with WebEdit Pro and a full feature window allows content entry and formatting.

How to Access it

How to Install

In order to install, you must have “admin” rights to your PC. If you do, WebEdit Pro will walk you through the steps to install the first time you try to use it.

If you do NOT have admin rights to your PC, WebEdit Pro will APPEAR to walk you through the steps to install, but it will not be installed when it is finished. In order to have it installed on your PC you must contact the Help Desk to arrange for installation. (1−9700)

How to Upgrade

If you do not have the most current version of WebEdit Pro installed on you PC, you will be prompted with the link below.

[pic]

In order to upgrade, you must have “admin” rights to your PC. If you do, WebEdit Pro will walk you through the steps to upgrade when you click on the link.

If you do NOT have admin rights to your PC, WebEdit Pro will APPEAR to walk you through the steps to upgrade, but it will not be installed when it is finished. In order to have the upgrade installed on your PC you must contact the Help Desk to arrange for installation. (1−9700)

Accessing WebEdit Pro

WebEdit Pro is only accessible from the Add New Content Item or Edit Content Item screens of the CMA.

Exercise: Edit Content & Open Web Edit Pro

Log on to the CMA using IE at .

Click Production Preview from the top menu

[pic]

Change the site to the Training site

[pic]

Click the About Us button

[pic]

Click the link For Web Edit Pro Class

[pic]

Hold the Shift key while clicking the link for the List of Assets for WebEdit Pro class.

[pic]

Now you will have three browser windows open. We will be using the second two windows for today’s class.

Return to the first Training website and locate content with your student number. Click on the title to open the content.

[pic]

Scroll to the bottom of the screen and click on the link to Edit Content. This will open up another new browser window for the CMA. This is the CMA we will be using for today’s class.

[pic]

Scroll to the Body field in the Edit Content screen.

[pic]

Click Edit with WebEdit Pro.

[pic]

A new window will open with WebEdit Pro loaded and the existing content displayed.

Tool Bar Overview

WebEdit Pro is like many word processing applications. You type text and then use toolbar buttons (illustrated below) and menu options to change the text’s appearance or perform functions on it, such as spell checking.

[pic]

Top Row

Cut, Copy, Paste, Paste Text:

[pic]

The Cut, Copy, and Paste functions work the same as those found in other Windows products. The Paste Text feature works the same Paste as Unformatted Text. It will remove all formatting the text might bring with it and simply include paragraph breaks.

Replace, Find Next:

[pic]

The Replace button allows you to search and replace the text of your content for specific words or phrases. The Find Next button allows you to continue the search. The Find and Replace tool looks like the following:

[pic]

Print:

[pic]

The Print button allows you to print a hard copy of the body that you are creating.

Undo, Redo:

[pic]

These two buttons allow you to undo the last action or redo the last undo. You can use them multiple times.

Spell Check:

[pic]

There are two different modes of spell checking available. The first is to manually spell check to document or selection. Clicking the button with the check mark performs a manual spell check. The second mode is to check spelling as you go. The second button is a toggle button to turn this feature on or off.

Bookmarks & Links:

[pic]

These buttons are used for inserting, editing and deleting bookmarks and links. These will be covered in detail later in this class.

Horizontal Line:

[pic]

This button will insert a horizontal line where ever your cursor is when you click the button. You can change the color of the line by selecting the line and changing the text color. The width and length of the line can be changed by clicking and dragging the handle bars at the corners of the line while it is selected.

[pic]

Picture:

[pic]

The Picture button allows you to insert images. This feature will be covered in more detail later in the class.

Table, Show/Hide Borders:

[pic]

The Table button allows you to insert and edit tables. This feature will be covered thoroughly shortly. Show/Hide Borders works with Tables to turn on or off the display of the borders of the table when the borders are supposed to be hidden (size 0) in the final display.

Edit in Word:

[pic]

The Edit in Word button will take whatever is in the WebEdit Pro window into Word. You can then edit the contents in Word. When you do this you will be given the following warning box:

[pic]

While you are in Word, the content will appear to be in the wrong font while the Style, Font and Font Size drop downs appear accurate. If you are going to select a font, choose the Style Normal (Web) so that it will match the Normal font style that is selected on the web.

[pic]

When you are finished editing in Word, you simply close the document and it will be returned to WebEdit Pro after you answer a warning question.

[pic]

[pic]

Special Toggle Buttons

There are a series of toggle buttons which each performs specific functions.

[pic]

Show Invisible Elements:

[pic] allows you to see paragraph markers, etc. [pic]

WYSIWYG View

[pic] Is the default view. This displays the information in the way it will display on the web. When you click HTML View (below) the WYSIWYG will be turned off.

Source View

[pic] Allows you to see all the Source/HTML code behind the scenes. If you are familiar with HTML, you can use this view to edit the HTML code directly.

[pic]

Preferences

[pic] Is only available when Source/HTML View is selected. It allows you to set your preferred display for the HTML View.

Insert Special Characters:

[pic]

The right side of this portion of the WebEdit Pro toolbar has buttons for inserting copyright and trademark symbols. Click on these buttons now to insert them.

[pic] Registered Trademark

[pic] Copyright

[pic] Trademark

Near these symbols is the Non-Breaking Space button (nbsp). This button inserts an encoded space character. Unlike the spaces that appear when you press the bar, these spaces will keep the word before and the word after the nbsp together on the same line. This is useful for keeping dates or names together.

When you click on the down arrow on either of the drop downs to the right of the special characters buttons, a drop-down list of special characters appears. Scroll down the list until you see the desired character. Click on that character to insert it.

[pic] [pic]

Second Row

Font selections:

[pic]

Paragraph Format

[pic]

The Paragraph Format allows you to set the format for the entire paragraph. This will set the font face, size, color, style, etc. for the text for the entire paragraph.

Normal will set the font to the standard paragraph style for , which is Arial, Helvetica, size 2 (10pt), black text against a white background with no embellishments. Unless you have a good reason for using something different, this is what should be used for all normal paragraphs.

Other styles are used primarily for headings above paragraphs.

Font Face

[pic]

The Font Face can be used to change the font for special circumstances. This is generally only done when there is a specific need, or for headings.

You will note that there are only a few fonts listed and that most fonts are in pairs. This is because the font displayed is on an individual’s monitor is based on what font’s that individual has on their PC more than what font is selected by the web page.

Only the most commonly available fonts are on the list. Fonts are in pairs to accommodate both PCs and Apple-based computers.

Font Size

[pic]

The desired font size is 2 (10pt), however other sizes can be used for headings and other special circumstances. There are only seven (7) sizes listed because web browsers can only display seven different sizes.

Font Color

[pic]

The last two buttons in this section are for font text and background color. This will give you a dialog box that allows you to set the text color and the background color for selected text. Again, this should only be used for headings or special text within your document.

You should always keep in mind visibility for colorblind users. Keep the text and background colors with the highest contrast as possible. Avoid tone-on-tone combinations (light blue text on a dark blue background) and red/green or red/white combinations.

Try to stay with bold, italics, ALL CAPS or size changes for emphasis rather than color changes.

[pic]

Special Font Characteristics:

[pic]

The following are applied to selected text and are self-explanatory.

Bold

Italics

Underline – Avoid using underlining except for links!

Normal – Removes all formatting characteristics and reverts to Normal Paragraph Format

Superscript 1

Subscript m

Paragraph or Line Attributes:

[pic]

The following are applied to selected paragraphs or lines and are self-explanatory.

12 Paragraph/Line Numbering

13 Paragraph/Line Bullets

14 Out-dent – Decrease indentation

15 Indent – Increase indentation

16 Left paragraph align – Default for body text

17 Center paragraph align

18 Right paragraph align

19 Full Justification – Not suitable for the web

Optional Buttons

If you right-click in the tool-bar area, you have the opportunity to add additional tool bars by clicking on the desired tool-bar name.

[pic]

Form Elements

[pic]

The Form Elements tool bar will allow you to insert a form and the form fields. There will be a separate class on forms.

Table

[pic]

The Table tool bar allows you to perform the functions associated with tables. We will explore this feature in detail below.

Position Objects

[pic]

The Position Objects tool bar allows you to adjust the position of objects with relation to each other and with text.

Text Direction

[pic]

The Text Direction tool bar allows you to change the direction of the flow of text. This is useful when using foreign languages that move from right to left instead of left to right.

Miscellaneous

[pic]

The Miscellaneous tool bar includes some features that are included elsewhere, as well as some other features:

• Open – allows you to open an HTML file. It will replace whatever is currently in WebEdit Pro.

• Save – allows you to save what is currently in WebEdit Pro to an HTML file.

• Show/Hide Borders

• Show Invisible Elements

• View Preferences

• About eWebEdit Pro

• Upload Files – will allow you to upload HTML files from a local drive. Warning: Anything you currently have in WebEdit Pro will be erased.

• Content Upload – Does not work appropriately. DO NOT USE.

• Remove Style – will remove any styles that are applied to a given paragraph (one paragraph at a time.

• Style dropdown – will apply a style to a paragraph (one paragraph at a time). Styles are populated when you paste content from Word.

Tables

Tables provide a powerful way to format information for the web. Please bear in mind when using tables that HTML tables are not as robust as Word tables.

Exercise: Insert a Table

1 Position the cursor where you want the table to appear

2 Click the Insert Table button [pic] and select Insert Table.

[pic]

3 The following dialog box appears

[pic]

4 Enter the number of rows and columns.

5 Enter the width of the table.

It is important that the width of the table not exceed the allowed width of the page.

7 Double wide page (with both left and right navigation bars displayed):

1 100% or less

2 420 pixels or less

3 Triple wide page (with only the left navigation bar showing, no right navigation):

4 100% or less

5 570 pixels or less

Horizontal Alignment choices are Left, Center, Right or Justify. (Center is generally recommended.)

Border Size allows you to specify, in pixels, the width of the outside border of the table. If no border is desired, enter the number zero.

Cell Spacing allows you to specify, in pixels, how much space you want to allow between the cells. If the field is left blank, the cells will be spaced 2 pixels apart.

Cell Padding allows you to specify, in pixels, how much space you want between the cell border and the text within the cell.

Colors: Border Color and Background Color allow you to specify a color for each of those. If no Border Color is selected, and there is a Border Size greater than zero, the border will be in a color that matches one of the colors of your site. If no Background Color is selected it will be white.

a. Click OK to create the table.

b. If no border is selected (Border size 0), you may want to “Show Borders” so that you can see outline of the table.

Exercise: Enter Text Into a Table

1 Position the cursor in the cell where you want to enter text

2 Type or paste text into the cell

3 Click in the next cell or use your arrow keys to navigate to the desired cell. Using the Tab key will not take you to the next cell.

Exercise: Format a Table

Table Menu

After a table is created, when the Table button is clicked, the whole menu is available. The items on this menu are also available by right clicking when the cursor is within the table.

[pic]

Add Row or Column

4 Bottom & Right of TABLE

5 One at a time

[pic]

Insert Row or Column

Above & Left

One at a time

[pic]

Delete Row or Column

Selected group

[pic]

Row/column where cursor is located

12 Insert or Delete Cells

13 Cell is inserted to the left of cursor.

[pic]

14 Cell is deleted where cursor is located.

15 When a cell is inserted, the other cells are pushed to the right and the table is distorted.

16 Merge or Split Cells

17 Horizontally only.

[pic]

18 Split one cell into two columns within the cell.

[pic]

Table Properties

Selecting Table Properties from the menu above allows you to edit the properties that you specified when the table was created, with the exception of number of rows and columns.

[pic]

1) Accessibility

Tables that are used to display DATA need to have certain attributes for accessibility compliance. WebEdit Pro includes a tool to allow us to include these attributes.

Tables that are used to enhance layout, do not need to include these attributes, but must be able to be read linearly – that is from left to right – with no problem.

[pic]

a) Heading Rows – Specify the number of rows dedicated to the heading of the table.

b) Heading Columns – Specify the number of columns dedicated to heading of the table.

c) Summary – Give a summary of what the table shows or demonstrates.

d) Caption – Give a brief title or overview of the table. The Caption will display in the web browser.

e) Horizontal/Vertical Caption Alignment – The position or placement of the caption for the table.

Cell Properties

[pic]

23 Width of cells

You can enter the width, in pixels or percent, of each individual cell. When you do so, it affects the entire column that contains the cell you are adjusting.

When entering the width in pixels, please remember the maximum width for the table as a whole. Don’t let the total width of all the cells across the table exceed that number (420 or 570).

24 Horizontal and Vertical Alignment affects the positioning of the text or image within the given cell. Choices are as follows:

Horizontal: Left, Center, Right, Justify

Vertical: Top, Middle, Bottom, Baseline

27 Border and Background Colors affect only the selected cell(s).

28 Accessibility is used when the table is a DATA type table.

-The Abbreviation field is used to abbreviate or shorten long headers/sub-headers.

-The Category field is used to group and identify sub-headers within the Header Rows/Columns. (These turn into Axis tags.)

[pic]

Abbreviation is used to give the browser reader a shorter version of the heading for the column or row.

[pic][pic]

Categories are used for subheadings within a column or row. The Category becomes an Axis tag.

[pic]

[pic]

30 Rows and Columns Spanned:

When you merge cells, the merged cell will span multiple columns.

[pic] [pic]

You can use the Span feature to also create a merged cell vertically. If you place a number in Rows Spanned, the cell will expand to span the number of rows indicated.

[pic]

The result will be that the existing cells will still exist and will be pushed to the end of the row.

[pic]

You can then delete the extra cells by positioning the cursor in them and choosing Delete Cells from the Table menu or from the Right Click menu.

[pic] [pic]

Accessing Table Menus

You can access the table menus by positioning your cursor inside a table and right-clicking the mouse. You must first select the table menu:

[pic]

After you select the Table menu, this menu will disappear and a new menu will take its place:

[pic]

You can also access table functions by enabling the Table Toolbar. To enable to toolbar, right click in the toolbar area and select the Table toolbar.

[pic]

The Table tool bar allows you to perform the functions associated with tables.

• Insert Table

• Add Row

• Add Column

• Insert Row

• Insert Column

• Insert Cell

• Delete Row

• Delete Column

• Delete Cell

• Merge Cells

• Split Cell

• Table Properties

• Cell Properties

Suggested Uses of Tables

Display columns of information

Put borders around a paragraph

Create a table, one column by one row and place some text in it. Customize it however you choose.

Position images within text

Exercise on Own:

1. Add 2 – 3 paragraphs of text to beginning of document.

This will be used when we work with images to learn how to wrap text around an image.

When you enter text into WebEdit Pro and press Enter, text will automatically be double spaced. THIS IS NORMAL.

2. Add an Address Block.

We will learn how to make this single-spaced, later.

3. Add a table in which we will insert images later.

a. 4 rows

b. 2 columns

c. Text in one column (to describe images)

d. Images in the other column (to be added later as a group)

4. Click Done.

5. Click Update in CMA.

If you don’t click Update, the changes will not be saved, and may be lost.

Images

Exercise: Insert an Image

Position the cursor where you want the image to appear.

Click the Insert Image button: [pic]

You will get the Media File Selection box as seen below.

[pic]

You can either enter the path and name of the file for the image or you can select the image.

5 Click the Select New File button.

[pic]

6 The Image Previewer tool will open up.

[pic]

7 Select the site from the Asset Project Folder dropdown and then highlight and scroll through the images to view them.

8 When you find the image you want, click OK.

9 The path to the image will be inserted into the File Selection portion of the dialog box.

[pic]

10 If you already know the asset path, you can simply paste or type it into the File Selection area.

Once the path is in the File Selection box, the Picture area will now contain a Preview button. You can click on the Preview button to see a preview of the image.

[pic]

[pic]

When you clicked Preview, note that the Width and Height are automatically filled in for you.

[pic]

You can add a Border to your image, if desired. This is recommended if your image is going to become a link. Please add a border to your image, as we will be turning these into links later. Place a number (in pixels) in the space provided.

[pic]

Note that the border is visible in the Preview area.

Do not set the Alignment at this time; we will come back to it.

Set Spacing, if desired. Horizontal spacing will add white space to the left and right of the image, Vertical spacing will add white space to the top and bottom the image.

[pic]

Enter the Title. This will be come the Alternate tag which appears when the cursor is placed over the image. This is an ADA requirement. Even though this was already added in the database when the image was added as an asset, Web Edit Pro cannot see that field to include it here. It must be entered again. It does not need to match. You simply need to add a description of the image.

If the image was selected from the Image Previewer tool, the Alternate Tag will be automatically inserted for you.

[pic]

Click OK. The image will be placed in the content.

[pic]

Exercise: Move & Resize the Image

1. Click on the image to select it. Handle Bars will appear at the corners.

[pic]

2. When you place the cursor in the middle of the image, it will turn into a four-cornered arrow. You can use this arrow to move the image around the document wherever text already exists.

[pic]

3. If you place the cursor over one of the Handle Bars, you can change the size/dimensions of the image by clicking and dragging the handle bar the distance you want.

Exercise: Wrap Text around the Image

You may have noticed that as you moved the image around the page, there was always a large white space. The text did not wrap around the image. To make the text wrap around the image, we must edit the image.

1. Right Click on the image.

[pic]

2. Select Picture from the menu.

[pic]

3. In the Picture Properties dialog box, from the Alignment dropdown box, select Left or Right.

[pic]

4. Click OK. Your text will now be wrapped around your image, either on the left or right side, depending on which you chose.

[pic]

5. If you move your image now, you will find that it is tied to the left or right side and that you cannot move it away from the side you chose in the alignment field. To change that, you will need to edit the Picture Properties again.

Exercise: Position Images in a Table

An exercise to do on you own

• Go to the table created earlier.

• Using the techniques learned above, place images in each of the cells in the left column.

o Use images from the “List of Assets for WebEdit Pro class” page opened earlier OR

o Select images from Select New File button

• Place text in the cells in the right column.

• Format the table however you choose.

Exercise: Edit an Image

1. Select the first image you placed in the table.

2. Right click on the image.

[pic]

3. Select Picture to return to the Media File Selection dialog box.

[pic]

4. If you want to change the size of the image, you can easily maintain the aspect ratio of the image.

a. Make sure the Maintain Aspect Ratio box is checked.

b. Change one of the dimensions of the image, width or height.

c. The other dimension will change accordingly.

[pic]

5. Make other changes as desired. Click OK.

Links

The following buttons allow you to create and modify links within the body of a piece of content.

[pic]

Relative vs. Absolute Links

Absolute Links always start with "http://" etc. This tells the browser that it needs to go find the server (machine), which server to find, and then which page to get on that server. A relative link assumes that you will stay on the same server, just find another page on the same server. Relative Links make the user experience faster.

Absolute links, as stated above, include the entire URL for the page to which you want to link. These are necessary when the page is not part of . For example:

(IRS website)

(Michigan Adoption Resource Exchange)

2 Relative links always start with a slash (/) followed by the site name or asset directory. The rest of the URL follows that. For example:

/dmb/1,1607,7-150-9131_9347---,00.html (The Administrative Guide)

/hal/1,1607,7-129-15490---,00.html (Michigan eLibrary)

• External (New Window) links cause the browser to open a new window. These are always used in conjunction with absolute links and with some relative links, such as links to PDF files.

• Internal (Same Window) links will open in the same browser window, meaning that the user will need to use the browser back button to return to the previous page. These are only used in conjunction with some relative links, such as links to other pages in the same web site.

Links Internal to Site

Exercise: Create a Link to a PDF File

Select and copy the path and filename for a PDF file from the “List of Assets for WebEdit Pro class” page.

In WebEdit Pro, select the text that is to become the link.

Click the Hyperlink button: [pic]

The Hyperlink dialog box will open.

[pic]

Remove the http:// that is already in the Link: field and paste the path you copied, being sure that there is a slash (/) at the beginning.

[pic]

To have the document/PDF file open in a new window, click the drop-down box for Target Frame and select: New Window (_blank).

[pic]

Click OK.

Links External to Site

Exercise: Create an Absolute Link

Obtain the URL for the link.

3 In another browser window, navigate to the page to which you wish to link.

4 Copy the URL from that window.

5 Or simply use a known URL.

Click on the first image you created to select it. This will become your link.

Click the Hyperlink Button: [pic]

The Hyperlink dialog box will open in a new window (see above).

Paste the copied hyperlink into the Link field, as above. This time, however you will need to include the HTTP://. Make sure it does not appear twice.

[pic]

In the hyperlink dialog box, click the drop-down box for Target Frame.

[pic]

Select: New Window (_blank)

Click OK

Exercise: Create a Link by Typing the URL

• A link can be created by simply typing the URL.

• Type the URL, including the HTTP://, and press the space bar or the Enter key and it will automatically become a link.

[pic] [pic]

Link to e-Mail Address

NOTE: You can create a link to an e-mail address by simply typing the address in Web Edit Pro and pressing the space bar. Web Edit Pro will turn the text into a link to the specified e-mail address. If you want different text for the link, besides the e-mail address, you will have to follow the directions below.

[pic] [pic]

Exercise: Create Link to an e-Mail Address

1. Type the text you wish to appear as the link to the e-mail address.

[pic]

2. Highlight the desired text.

[pic]

3. Click the Hyperlink button.

[pic]

4. In the Hyperlink dialog box, select mailto: in the Type: drop-down box.

[pic]

5. In the Link: field, type the e-mail address after the mailto: and click OK.

[pic]

6. The link will be created for you.

[pic]

Bookmarks

You can create links within your document to other positions within the same document. This is often used to create a table of contents at the top of a page and to create links back to the top of the page from within the middle or at the bottom.

Insert Bookmark

Before you can create a link to a position internal to the page, you must first create the destinations by marking that position with a bookmark.

Exercise: Create Bookmarks

Highlight the text that is to be the destination of the link.

Click the Bookmark button: [pic]

Enter a name for the bookmark.

[pic]

Click Add.

Repeat for all bookmarks.

Link to Bookmark

Exercise: Create Links to Bookmarks

Type the text of the link that will take the user to the book marked position in the text and highlight it. (Table of Contents at the top of the page, for example.)

[pic]

Click the Insert Hyperlink button: [pic]

Select the bookmark from the Quick Link drop down box:

[pic]

Click OK.

[pic]

Repeat for all destinations.

Create Return to Top links at the end of each section.

16 Position the cursor at the end of the first section and type the desired text for the link and select it.

[pic]

17 Click the Insert Hyperlink button: [pic]

18 From the Quick Link menu, select Top.

[pic]

19 Repeat at the bottom of each section or copy and paste the first link created.

Other Applications of Bookmarks

Text References Within Content

A Table of Contents is not the only place this can be used. You can also use a bookmark and link to a bookmark to reference different parts of the same piece of content. If you want to refer to Table 3 (below), for example, that can become a link, when the table has a bookmark.

Link Different Pages to Specific Bookmarks

You can also use bookmarks to create links from a different page or piece of content. If you know the bookmark, or if you navigate to the page and can click on a bookmark, you can include the bookmark in the URL.

In our example above, we can navigate to our page and click on a link in the table of contents to see the bookmark URL in the address bar.

[pic]

You can then copy and paste the URL into another piece of content.

If you do not have a table of contents and cannot navigate to the bookmark, itself, you can still use the bookmark by appending it to the URL for the page.

Add a # symbol followed by the name of the bookmark.

The bookmark is case sensitive.

The bookmark can contain no spaces.

Edit Link

Exercise: Edit a Hyperlink – Include Hover Text

Position the cursor in the middle of the link to be edited.

Right Click and select Hyperlink…

Enter a Title. This will appear when the user hovers the mouse over the link.

[pic]

Click OK.

Remove Link

Exercise: Remove a Hyperlink

It is important to remove the Hyperlink CODE and not just the Hyperlink Text. Prior to deleting the hyperlink text, ALWAYS remove the Hyperlink Code.

Position the cursor in the middle of the link to be removed.

1. Click the Remove Link button: [pic]

Special Issues

Line Break

You can press Shift-Enter to create a line break. This keeps the text in the same paragraph and all paragraph formatting applies. It puts it on a new line, however.

Exercise: Fix Address Block

Earlier, you were asked to type an Address Block. When you typed it, you probably got something that looks like the following:

[pic]

WebEdit Pro displays things as they will be displayed on the web. When you press enter a paragraph code is added to the end of the line.

1. To see this we can turn on Invisible Elements by clicking [pic].

[pic]

2. The paragraph codes tell the browser to include extra space between the paragraphs.

3. To get rid of that extra space, we need to get rid of the paragraph codes and substitute a Line Break code instead.

4. To do this we are going to delete the current paragraph break.

[pic]

5. To insert a Line Break, hold the Shift key and press Enter.

[pic]

6. Repeat for the rest of the Address Block.

[pic]

7. Turn off Invisible Elements by clicking the same button. [pic]

[pic]

Done, Cancel & Update

There are two buttons above the tool bars. These are used when you are finished using WebEdit Pro.

[pic]

Done is used when you are finished with WebEdit Pro and want the page you have created to be entered into the body field of the Content Entry/Edit screen.

Cancel is used when you choose to abandon your changes and return to the Content Entry/Edit screen.

After you have made changes and clicked Done to finish using WebEdit Pro, the changes have not yet been saved to the database. You then click Update in the Content Entry/Edit screen.

If you click Done and do not click Update, your changes will be lost. If you click Done and wish to return to WebEdit Pro to make further changes, you must first click Update and then click Edit with WebEdit Pro.

Exercise: Test Page in Browser

Now that we have completed the changes, let’s see what they look like in a browser.

1. Click Done.

2. In the CMA, click Update.

3. Return to the Training site and Refresh [pic] your page.

4. Test your links, and bookmarks, see how you tables and images look.

Size Limitations

WebEdit Pro imposes a limit of 100,000 characters on the file size that can be saved. Most often, the file size limit is reached when there are one or more tables with complex formatting. There is no limit in the body field in the CMA. If you exceed the limit, you will receive an error message when you click the Done button. To save your content, do the following:

Instructions for Work-Around for Size Limitations

Click Cancel in the error message dialog box.

Click the View HTML button: [pic]

Right click and click the Select All link.

Right click and click the Copy link.

Click the Cancel button at the top of the screen.

Return to the Content Entry/Edit screen and select everything that may be in the Body field and delete it.

Right click and select Paste.

Click Add or Update

Copy-Paste Issues

When creating content in Word and then pasting it into Web Edit Pro, there are a few things you can do to ensure a good result:

Fonts: Change the font in the word processor to the desired font prior to copying the text, especially in Tables. The proper font should be Arial 10 pt.

Smart Quotes: Smart Quotes will look fine in WebEdit Pro, but will turn into suspicious characters in the web browser. They will look different for different people; depending on what fonts they have available.

[pic]

[pic]

It is best if there are no smart quotes, but rather only straight quotes on the web. Some pointers:

4 Smart Quotes apply to double and single quotes such as apostrophes. Other characters, such as the M-Dash, can be affected as well.

5 Turn Smart Quotes off in Word prior to creating content. (See Tools > AutoCorrect > AutoCorrect As You Type)

6 If you have Smart Quotes turned off and someone sends you a document with Smart Quotes already in them, they will still be there.

7 In WebEdit Pro you can Search and Replace for quotes – both double and single – Search for a double quote and replace with the straight double quote from the keyboard. Repeat for single quotes.

NOTE on Code Cleanup: When pasting content from Word, or other source, WebEdit Pro will ask if you want to “clean the HTML code now?” The appropriate answer to that question is “No.”

[pic]

The excessive HTML code that is unnecessary will be eliminated when you click “Done”.

➢ Paragraph Spacing: In browsers, a single [Enter] or paragraph code indicates that there should be double-spacing showing between paragraphs. This is applied automatically in browsers because of the way HTML coding is read.

When we are creating content in Word, we usually press [Enter] twice to achieve this same effect. When these two keystrokes are interpreted by WebEdit Pro and converted to HTML code, they become two paragraph codes which leads to extra-wide spacing between paragraphs on the web.

To keep this from happening to our pages, it is imperative that you remove the extra [Enter] between your paragraphs in Word prior to copying and pasting the content into WebEdit Pro.

[pic]

[pic]

When the content is first pasted into WebEdit Pro, it will not display the double spacing on the paragraphs. You must click the Done Button at the top and Update the content in the CMA.

[pic]

When you re-enter WebEdit Pro, it will not appear to have changed. You must AGAIN click the Done Button and Update the content in the CMA.

[pic]

The next time you enter WebEdit Pro, the proper spacing will be applied to the paragraphs. You must AGAIN click Done and Update the CMA before it will appear properly in the browser.

[pic]

Existing Incorrect Paragraph Spacing: Extra paragraph spacing will need to be eliminated manually. Sometimes this is easier to see by turning on Invisible Elements. [pic]

[pic]

Existing Larger Fonts in Tables: Tables created in earlier versions/settings of WebEdit Pro are likely to have fonts larger than desired. If we simply open the content into WebEdit Pro and save it, the font size will corrected.

This is an original table created in an earlier version/setting of WebEdit Pro. Note the font size in the table.

[pic]

In WebEdit Pro, the content has simply been opened and no changes have been made.

[pic]

After it is saved in the CMA, it appears appropriately in the browser.

[pic]

-----------------------

Smart Quotes

m-dash

The Category “Expenses” is used to group the various types of expenses together.

The Category “Location” is used to group San Jose and Seattle together.

The Category “Date” is used to group the dates together under each location.

The Abbreviation “Type” is used instead of “Type of Coffee”

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download