Using the Woodland Public Schools Web Editor

Part 3

This tutorial will demonstrate the many features of the web editor used by staff at the Woodland Public Schools.

Section One:

Text formatting tools and working with graphics

• Editing Tools
• Font Style
• Text Alignment
• Lists
• Outdent and Indent
• Undo and Redo
• Hyperlinks and Anchors
• Text Format
• Images

Section Two:

Additional font manipulation tools and eding tools

• Cleanup messy code
• Select text color
• Superscript & subscript
• Edit HTML source
• Insert horizontal ruler
• Preview
• Find

Section Three:

Editing and advanced layout tools

• Cut
• Copy
• Paste
• Toggle guidelines/invisible elements
• Remove formatting
• Insert custom character
• Help
• Toggle fullscreen mode
• Insert new layer
• Move forward
• Move backward
• Paste as plain text
• Paste from Word
• Select all
• Print
• Inserts a new table
• Table row properties
• Table cell properties
• Insert row before
• Insert row after
• Delete row
• insert column before
• Insert column after
• Remove column
• Split table cells
• Merge table cells

In section three we'll be demonstrating the use of the buttons in the bottom row of the editor.

Cut, copy, and paste

The first three buttons on the bottom row involve repositioning or removal of text so we'll start with them.

The first button is the cut button. To use the cut button select the text to be cut then click on the button. The text will be removed from the edit screen but there will be a copy of the text in the computer's clipboard.

The second button is used to copy text. To copy text select the text to be copied then click on the copy button. The text will remain but there will be a copy in the computer's clipboard.

The third button is the paste button and is used in conjunction with the cut or copy button. Use the paste button to place text elsewhere in the edit menu from either the cut text or the copied text.

The cut, copy, and paste buttons also work on images.

back

Toggle gridlines/invisible elements

By default this button is in the on position. the Gridlines/invisible elements button is used to show or hide formatting elements such as anchors. It's strongly recommended that this button be left in the on state.

back

Removing formatting

The Remove formatting button is useful for fixing web page formatting issues that are being difficult to track down.

To use the Remove formatting button select a desired section of the web document then click on the Remove formatting button. If you're happy with the results save the page, otherwise undo the change with the Undo button or by pressing [CTRL]+z.

back

Insert custom character

The Insert custom character button is used to insert characters that are not normally available on the keyboard.

Place your cursor where you want the special character to appear, then press the Insert custom character button. The following pop-up menu will appear.

Click on the character you want to insert and it will be placed in your document and the Insert custom character window will close.

back

Help

The Help button brings up a pop-up menu about this web editor.

The Help menu contains three tabs:

• About
• Help
• Plugins

The About tab (shown abov) displays the editor name and version as well as a brief description of the product.

The Help tab contains a table of contents with links to help menus. You're strongly encouraged to explore the help tab of the Help menu.

The Plugins tab contains a list of the plugins used in the editor as well as their version number.

back

Toggle fullscreen mode

Selecting the Toggle fullscreen button toggles the document editor back and forth from windowed to fullscreen mode.

The fullscreen mode gives plenty of realestate for editing documents.

back

Insert new layer

This tool is used to manually add CSS code to your document. It's strongly recommended that you not use this tool unless you have a firm understanding of CSS.

back

Move forward

When working with layers containing css code it's possible to overlap layers. The top layer will take prority over lower layers.

The Move foward button can be used to bring a lower layer up one layer at a time.

back

Move backward

When working with layers containing css code it's possible to overlap layers. The top layer will take prority over lower layers.

The Move backward button can be used bury a layer down one layer at a time.

back

Paste as plain text

Inserting text from another document can be a time saver, but can also cause formatting issues. Paste as plain text will paste text copied from a document into the web document but does so without copying any of the hidden page formatting.

Clicking on the Paste as plain text button will bring up a window that you'll paste the desired text into.

Optionally, you may choose to remove linebreaks by deselecting the Keep linebreaks check box.

Selecting the Insert button will place the pasted text into your document at the point where the cursor is in the document. Hitting the Cancel button will cancel the Paste as plain text operation.

back

Paste from Word

Paste from Word allows you to paste Word documents into your web site without including text formatting which could cause formatting issues with your web document.

Clicking on the Paste from Word button will open a pop-up winder where the text from Word can be entered.

Hitting the Cancel button will cancel the Paste from Word operation.

back

Select all

The Select all buttons allows you to quickly select all the items in your web document. These items can then be copied, cut, or deleted.

back

Print

The Print button will send a copy of the document to the printer to create a hard copy.

back

Inserts a new table

The Inserts new table button is used to place tables in your web document.

Tables are a formatting tool and can be used to arrange lists of text, or display multiple images.

The following window appears when the Inserts a new table button is selected.

The General tab contains the most often used options associated with inserting a table.

You'll select the number of rows and number of columns you want to have in the table, the cell padding and cell spacing, table alignment, border thickness, desired cell width and height, and table class.

• Columns - The number of columns the table will contain
• Rows - The number of rows the table will contain
• Cellpadding - Space between cell tables and items within the cell
• Alignment - Sets the table alignment to left, center, or right. The default setting is left
• Border - Sets table border width. The default is 0 which is no border. Border width is in pixels.
• Cellspacing - Space between cells in a table
• Width - Cell width in pixels
• Height - Cell height in pixels
• Class - Currently not enabled

Example:

Alignment choices

You can place the table on the left side of the page, the right side of the page, or the center of the page. This does not affect vertical alignment.

Selecting the Advanced tab brings up the following window.

Here you can specify an ID, summary, style, language direction, language code, background image, border color, and background color.

• Id - Adds a label name for the table
• Summary - A brief explanation of the table's use or contents
• Style - Overrides the table's formatting tags
• Language direction - Sets the justification of text in the table
• Language code - Sets the language code
• Background image - Specify a background image for the table
• Border color - Sets the color of the borders if used
• Background color - Sets the table background color

We currently don't support language code or background images.

Example:

Language direction

You can set the text justification in the table to run from left to right, or right to left.

Left to right

This text is left justified

Right to left

This text is right justified

Example:

Border color

Selecting the Border color box brings up a window containing a set of colors to choose from.

Hovering over a color will display it's html color code as well as a swatch of the color hovered over. Click on a color to select it, or hit cancel to exit the menu.

The border is html color #9900cc

Example:

Background color

Selecting background color in the Advanced tab allows you to set a background color for your table.

The background is html color #99ff33

back

Table row properties

The Table row properties button is used to change the properties of a selected row in a table.

Here's a plain table containing two rows and two columns

row one column one	row one column two
row two column one	row two column two

This table works fine and is useful for formatting text, but it isn't particulary attractive or eye catching. Let's see what we can do with it.

We start by selecting a row to work with. In this case I'll be working with row one so I'll select one of the cells in row one.

It's possible to set the row to Table Head, Table Body, or Table Foot.

• Table Head - The header row for the table
• Table Body - The main body of the table
• Table Foot - The footer row of the table

Text alignment can be set to center, left, or right. The default text alignment is left

• Center - Objects are center justified in the cells
• Left - Objects are left justified in the cells
• Right - Objects are right justified in the cells

Example:

Justification

Center Justification	Left Justification	Right Justification
This text is centered	This text is left justified	This text is right justified

In this table the Table row properties were used to set the top row with centered text and to set it to the header row. Notice how much taller this row is than the body row. Using the Table cell properties button the bottom row text alignment was set as seen in the table.

The Vertical alignment tool is used to align objects in the table rows to top, center, or bottom.

• Top - Aligns objects to the top of the cell
• Center - Aligns objects to the center of the cell
• Bottom - Aligns objects to the bottom of the cell

Example:

Vertical alignment

Top	Center	Bottm
This text is top aligned	This text is center aligned	This text is bottom aligned

The table row class property is not supported.

The Height property box is used to set the table row height in pixels. If a row height is set shorter than the height of objects in that table row, then the minimum height may be the same as the object height for all cells in that row.

Example:

Table row height

This row is set to 20 pixels high

This row is set to 30 pixels high

This row is set to 40 pixels high

Update options are:

• Update current row

• Update odd rows in table

• Update even rows in table

• Update all rows in table

The Table row properties Advanced tab is used to set up advanced table row properties.

The Id property is used to give the table row a name.

Style is a non-supported CSS property.

Language direction determins if text is left or right justified.

Example:

Language direction:

Left to right

This text is left justified

Language code is not supported.

Right to left

This text is right justified

Background image is not supported.

Background color is used to select the background color of the current row.

Example:

This row has a green background.

Update options are:

• Update current row

• Update odd rows in table

• Update even rows in table

• Update all rows in table

back

Table cell properties

The Table cell properties button is used to change the properties of a selected cell in a table.

Here's a plain table containing two rows and two columns

row one column one	row one column two
row two column one	row two column two

This table works fine and is useful for formatting text, but it isn't particulary attractive or eye catching. Let's see what we can do with it.

We start by selecting a cell to work with. In this case I'll be working with row one, column one.

Text alignment can be set to center, left, or right. The default text alignment is left

• Center - Objects are center justified in the cells
• Left - Objects are left justified in the cells
• Right - Objects are right justified in the cells

Example:

Justification

Center Justification	Left Justification	Right Justification
This text is centered	This text is left justified	This text is right justified

In this table the Table row properties were used to set the top row with centered text and to set it to the header row. Notice how much taller this row is than the body row. Using the Table cell properties button the bottom row text alignment was set as seen in the table.

The Virtical alignment tool is used to align objects in the table cells to top, center, or bottom.

The Table cell properties Advanced tab is used to set up advanced table cell properties.

The Id property is used to give the table cell a name.

Style is a non-supported CSS property.

Language direction determins if text is left or right justified.

Example:

Language direction:

Left to right

This text is left justified

Language code is not supported.

Right to left

This text is right justified

Background image is not supported.

Border color is used to select the border color of the current cell.

Background color is used to select the background color of the current cell.

This cell has a green background with a thin blue border.

Update options are:

• Update current cell

• Update all cells in row

• Update all cells in table

Example:

Using cell properties it's possible to mix text jusification and background colors in one table.

Left to right	Right to left
This text is left justified	This text is right justified

back

Insert row before

This button is used to add a row above the selected row in a table.

To use this tool select a cell above which you want to add a row then click on the Insert row before button.

back

Insert row after

This button is used to add a row below the selected row in a table.

To use this tool select a cell below which you want to add a row then click on the Insert row after button.

back

Delete row

This button is used to delete a selected row in a table.

To use this tool select a cell within the row you want to delete then click on the Delete row button.

back

Insert column before

This button is used to insert a column before the selected column.

To use this tool select a column before which you'd like to insert the column then click on the Insert column before button.

back

Insert colum after

This button is used to insert a column after the selected column.

To use this tool select a column afterwhich you'd like to insert the column then click on the Insert column after button.

back

Remove column

This button is used to remove a selected column.

To use this tool select a column which you'd like to remove then click on the Remove column button.

back

Split table cells

This button is currently unsupported.

back

Merge table cells

This button is currently unsupported.

back

-- JamesDoty - 11 Feb 2011