Turtle Sculpture

OmniUpdate User's Guide

Importing content from Word


If you have content in a Word document that you would like to import into your Web page using OmniUpdate, here are the steps, tricks and precautions to follow.

But first, to stay consistent with the De Anza College Web font style guide, please convert the paragraph text to Arial pt 10 within your Word document. Once imported, you can choose text formatting from a variety of styles that fit the De Anza Web site color palette.

Importing text From Microsoft Word (Windows users)

1. Open your Word document and open the Web page in which you want to paste content in editing mode.

2. Highlight the portion of text in the Word document that you want to copy. If you want to copy everything, a shortcut is CTRL+A to select it all.

3. Once you have highlighted the text, copy it by either right mouse click → copy or with the shortcut CTRL+C.

 

Click on the image to enlarge →

Selecting text from word

4. Now go to the OmniUpdate editor where your page is open for editing, and use the Paste From Word button from the top/left of the tool bar.

NOTE: It is important that you use the Paste from Word tool to prevent formatting conflicts with Microsoft Word coding in the IE browser.

Paste from Word

5. A pop-up window will appear with a text field in which you can paste your text. Use CTRL+V for a shortcut.

 

6. Paste your text in the pop-up and then click on Insert. Your text will then appear in your editable area of your page.

Paste From Word Popup

 

Importing Tables and Layout From Word (Windows users)

1. Open your Word document and open the web page in which you want to paste content in editing mode.

2. Highlight the table in the Word document that you want to copy by drag and dropping.


Or click inside the table, then right click on the little cursor with arrows on the top left corner of the table and select → COPY

Click on the image to enlarge →

Selecting table from word

3. Now go to the OmniUpdate editor where your page is open for editing, and use the Paste From Word button from the top/left of the tool bar.

It is important that you use the Paste from Word button because it will take care of converting your formatting (headings, bold, etc.) to the best format for a web page. If you do not, you might have problems later in formatting your content. If you do not use the Paste from Word the page will contain some unnecessary "garbage" HTML code that −even if invisible to you− might cause accessibility and validation issues to other users or other browsers.

Paste from Word

4. A pop-up window will appear with a text field in which you can paste your table. Use CTRL+V for a shortcut. The pasted table should look something like this, don't worry too much if you cannot see the borders, as long as the data is displayed in a table looking layout, you are doing fine.

Click on the image to enlarge →

 

If your pasted content does not look like a table but like a paragraph, go back and repeat step 3 making sure that the whole table is selected and copied and not just a portion of it.

 

Pasting Table From Word Popup

5. Once you pasted your table in the pop-up click on Insert. Your table will then appear in your editable area of your page. You should be able to see the borders, displayed as a dotted gray [doubled] line. But if you still do not see the borders, don't worry; save your page an re-open for editing and they should appear.

Click on the image to enlarge →

 

Pasted table from word

 

Refining your table

Your table might not look exactly as it was in Word, but this is good because it has been cleaned from unnecessary formatting.


Unless you worked perfectly in Word, your table might look like it needs some fixing. In this example, you can see how one of the title of the header 'DATE' is much larger than the others.

Because this kind of problem is common, we are going to examine the reasons and suggest ways to fix it.

To find out why a certain word or paragraph looks different from another place the cursor or select the desired text and then take a look in the bottom-left part of the editor frame. You will see some specification about the HTML of that part.

Refining a table
Refining a table

Even if you are not confident with HTML and tags you can easily notice what the difference is. In the table we used for our example, the text 'DATE' is a h3 tag, that is a heading 3. All the others are not tagged as heading, they only have a paragraph "p" and a bold "strong".

Now if you we go back to the word document and highlight the text in the table we will get a confirmation that not all headers in the table were tagged as h3 but just the DATE one.

For better standards we should not assign h3 to a table element unless is an important title. In this case the text was supposed to be a header. To continue refining this table we will remove the h3 tag assignment from the text: DATE.

Click in the middle of the word or paragraph you want to remove the formatting from, in this case 'DATE' [you do not have to highlight it all, just place the cursor in the middle] and you will see that the toolbar will automatically change to show you what style is set to the selected portion of your text. Then use the toolbar to change it, in this example we change from Heading 3 to --Format--, this will remove the assigned heading tag to the selected text.

Refining a table
Refining a table


To make the table accessible is important that the cells which contain text that is the heading of a column are assigned the proper table heading tag and the column scope.

Table headings

These are the steps to properly set the table headings:

1. Place the cursor and click in any of the cells of the first row. The path on the bottom of the editor frame should be like: Path: table » tbody » tr » td
TRICK: You can click on the td portion of the path so that you select the cell, if you do so it will be highlighted with a border to represent that the cell is selected.

 

2. With the cell selected, click on the Table Cell Properties button from the toolbar or right click in it and select Table Cell Properties.


Table cell properties

3. A dialog box will appear.


You will have to select Header from the Cell Type, Col for the Scope, and in the bottom, select Update all cells in row.

When all these settings are like in the image, click Update.
This l make all your cells in the top rows to be header, in the correct way for accessibility.

Cells which are headers are automatically bolded and centered.

A cell that is tagged as header will be tagged with th [table header] instead of td [table definition]. If you now click in one of these cells, the path at the bottom of the editor frame will show:

Path: table » tbody » tr » th
Setting Header Cells



This is the result of the table so far:

DAY
DATE

OPPONENT

LOCATION

TIME

Friday

January 25

UC Berkeley scrimmage

De Anza

2:00

Friday

February 1

Diablo Valley College

DVC

2:00

Thurs-Sat

February 7-8

Modesto Tournament

Modesto

TBA

Friday

February 15

American River College

DA

2:00

Tuesday

February 19

Sierra College

SC

2:00

 

 

 

 

 

 

 

 

 

 

Tuesday

February 26

*Mission

Mission

2:00

Friday

February 29

*Cabrillo

Cabrillo

2:00

Tuesday

March 4

*Chabot

De Anza

2:00

Friday

March 7

*Ohlone

De Anza

2:00

Tuesday

March 11

*Foothill

De Anza

2:00

Friday

March 14

*Chabot

Chabot

2:00

Tuesday

March 18

*Cabrillo

De Anza

2:00

Friday

March 21

*Mission

De Anza

2:00

Tuesday

April 1

*Ohlone

Ohlone

2:00

Friday

April 4

*Foothill

Foothill

2:00

 

 

 

 

 

Thurs-Sat

April 17-19

*Conference Tourney

Mission

TBA

Thurs-Sun

April 24-27

Ojai Tournament

Ojai

TBA

Thurs-Sat

May 1-3

*Nor Cal Dual Team Finals

TBA

TBA

Friday & Sat

May 8-10

State Tournament

Claremont

TBA

 

 

 

 

 

 

Styling your table

To apply some style to your table click anywhere in the table to select it (when the table is selected it will show some little white squares in the corners) and then click the Insert a new table button −because a table is selected the current table options will be displayed to be changed, and no new table will be created− this will open a dialog bod for you to edit the properties of the currently selected table.

TRICK: if you have nested tables, you will have to use the Path displayed at the bottom left of the editor frame to help you selecting the nested table or the container table. The Path will look something like this:

Path: table » tbody » tr » td » table » tbody » tr » td

Click on the table tags you want to select and apply changes globally to a table, click on the tr if you want to select a row, td if you want to select a specific cell, or th if is a header cell. Make sure that the cursor is in the correct cell or row you intend to edit.

 

If you click on the table and then right click you will be able to select Table properties, either way you will get the same pop-up window where you change setting of the selected table.


In the pop-up dialog click on the class drop-down menu and select one of the class labeled as border (like: Gold border, Green border etc..). This will apply a border of the selected color to the perimeter of your table. It does not display the preview in the editor unless you save and re-load the page for editing.

If you want the border to be applied to every single cell in the table, then set border to 1 in the table property dialog window.
Table border style

To make the cells to have a little margin, select a Cellpadding size of 2 or 4 (pixel)

 

When you are done with your settings click on the Update button. To see the results you might have to save the page, because some styles are not automatically displayed in the editor.

Table cellpadding


Styling the header row

 

To apply some style to the header row:

  1. Click in any cell of the first row and then click the table row properties button.
  2. Assign an height of 26 (pixel), or anything that works for you, and then in the second tab "Advanced" set a background color, for example #FFD700. Make sure that on the bottom of the dialog the selection is on: "Update current row" that will apply the change to all the cells in the row.

NOTE: some of the styles in the Class drop-down are NOT designed to be used for tables, but are designed for text and heading, we recommend to only use those labeled as 'border'.

To delete empty rows, click on any cell of the empty row and then click the button Delete Row (or right click and select Delete Row from the menu).


This is the result of the table so far:

DAY
DATE

OPPONENT

LOCATION

TIME

Friday

January 25

UC Berkeley scrimmage

De Anza

2:00

Friday

February 1

Diablo Valley College

DVC

2:00

Thurs-Sat

February 7-8

Modesto Tournament

Modesto

TBA

Friday

February 15

American River College

DA

2:00

Tuesday

February 19

Sierra College

SC

2:00

Tuesday

February 26

*Mission

Mission

2:00

Friday

February 29

*Cabrillo

Cabrillo

2:00

Tuesday

March 4

*Chabot

De Anza

2:00

Friday

March 7

*Ohlone

De Anza

2:00

Tuesday

March 11

*Foothill

De Anza

2:00

Friday

March 14

*Chabot

Chabot

2:00

Tuesday

March 18

*Cabrillo

De Anza

2:00

Friday

March 21

*Mission

De Anza

2:00

Tuesday

April 1

*Ohlone

Ohlone

2:00

Friday

April 4

*Foothill

Foothill

2:00

Thurs-Sat

April 17-19

*Conference Tourney

Mission

TBA

Thurs-Sun

April 24-27

Ojai Tournament

Ojai

TBA

Thurs-Sat

May 1-3

*Nor Cal Dual Team Finals

TBA

TBA

Friday & Sat

May 8-10

State Tournament

Claremont

TBA

 



WebGuide :: OmniUpdate
Contact: Web Team
sizeplaceholder


Last Updated: 4/17/09