| 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 MTSAC 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 MTSAC 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 →
|
|
|
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.
|
|
|
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.
|
|
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 →
|
|
|
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.
|
|
|
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.
|
|
|
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 →
|
|
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.
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.
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.
|
|
|
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
|
|
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
|
MTSAC
|
2:00
|
|
Friday
|
March 7
|
*Ohlone
|
MTSAC
|
2:00
|
|
Tuesday
|
March 11
|
*Foothill
|
De Anza
|
2:00
|
|
Friday
|
March 14
|
*Chabot
|
Chabot
|
2:00
|
|
Tuesday
|
March 18
|
*Cabrillo
|
MTSAC
|
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. |
|
|
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.
|
|
Styling the header row
To apply some style to the header row:
- Click in any cell of the first row and then click the table row properties button.
- 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
|
|
