Home
Calendar
Feedback
Site of the Day
Curriculum
Participants
Final Projects
Mailing List
Jwit Resources

Back to the top.

Demonstration of some formatting techniques

Background and text colors

To change the default color for the entire page, go to Format | Background.  This will only work if the page you're working on does not have a Theme attached to it.

You may change the default colors for background, text, links, visited links, and active links. You can also choose a Background picture by clicking the box, and Browsing to the image you want.

 

A "Watermark" is an image that does not move as you scroll a page. The option of a watermark only becomes available when you choose a background picture.  See this sample page.

 

You can also copy background and other page formatting settings from another page, by checking the box at the bottom of the dialog box and browsing to the appropriate page.

Back to top

Text

justification

Left, center, or right align, or justify.  (Justify makes text straight down the left and the right margins, creating a professional look for full paragraphs.)

Use 

Or use Format | Paragraph | Alignment

Or use CTRL-L to align left or CTRL-R to align right. (There is no keyboard shortcut for align centered.)

size

Font size is always defined relatively, since each browser may have a different default font size.  Size is usually defined in terms of seven steps (from 1 to 7), with 1 being the smallest. 

• To change the size, use the Font size drop-down box on the Formatting toolbar: .  The box shows what the likely apparent size of the font will be if the user's browser is set to the normal default size of 12.
• Or use Format | Font and change the size.

headings

HTML defines a set of "styles" including six available headings, which are (from largest to smallest) Heading 1 through Heading 6. Heading 4 is the same size as regular type, but bolded and with space before and after.

To change to a heading, use the drop-down box on the Formatting toolbar: . You can choose from the six levels of heading or several other styles which we'll discuss in a few moments.

You can also apply a Heading format by using:

CTRL-ALT-1 for Heading 1

CTRL-ALT-2 for Heading 2

CTRL-ALT-3 for Heading 3

CTRL-ALT-4 for Heading 4

CTRL-ALT-5 for Heading 5

CTRL-ALT-6 for Heading 6

Or Use Format | Style and choose h1 to h6:

For now, we'll ignore the other HTML styles available in this dialog box.  Just keep in mind that if you need to change the way any of these (including the Headings) appears on a page, this dialog box is the place to do it.

There are other type styles that can be applied using the Format | Font dialog box:

You can also get to this dialog by highlighting text and right-clicking, and choosing Font...

The standard HTML styles include:

underline

strike-through

overline

blink

^superscript (this is regular text)

_subscript (this is regular text)

Small Caps

All Caps

Capitalize (affects the first letter of every word)

Hidden (<--this is hidden)

citation-- for sources

sample -- used to display text to be entered

keyboard: used for text that has been entered

emphasis -- the official version of "italic"

strong -- the official version of "bold"

code -- used for HTML or other programming code

variable -- used when listing HTML code or programs

definition -- not sure how this is different from citation

These text styles can be applied in combination, for example:

underlined and strong

emphasis and small caps

keyboard and all caps

fonts

You can change the font by using Format | Font...

You must specify a font that is found on the user's machine. Otherwise, the Font will not appear correctly in their browser.

colors

To set a text color for a specific piece of text, highlight it and right-click, then choose Font... and use the color drop-down box.

You can also use Format | Font... to reach same color picker.

Back to top

Lists

bullets

• To create a bulleted list, create your list, then highlight list, then use bullet button on the formatting toolbar:
• You can also hit "enter" to go to new line, then click bullet button and start your list.

   

  • To create lower level bullets,
  • like this,
  • use the indent button on the toolbar in combination with the bullet button. (Sometimes you'll have to hit the indent or outdent button twice to get the bullet to apply as you'd expect it to.)

 

numbered list

1. Create your list, then highlight list, then use numbered list button on the property inspector: Create your list,

2. highlight it,
3. and use the numbered list button on the formatting toolbar:

indentation

• Use the and buttons on the formatting toolbar.
• You can also create indentation from left or right or both by using Format | Paragraph and changing the settings under "indentation."

This dialog box can also be used to change line spacing and spacing before and after a line.

You can also change the word spacing of a paragraph.

(The word spacing will not affect how the paragraph is displayed in the Page editing window. You need to Preview the page to see this effect.)

Note that Netscape and other non-Microsoft browsers will not display all of these settings correctly.

Back to top

Horizontal rules

Horizontal Rules can be used to break up pages of long text.

To insert a horizontal rule, use Insert | Horizontal Line.

Note that the coloring and width of horizontal lines is controlled by the Theme you have applied to a page.  If you do not have a Theme applied to your page, you can format an individual horizontal line by clicking it, then right-clicking it, and choosing Horizontal line properties...

You can control the width, height, or color.  None of these are modifiable if a Theme has been applied to the page.

Back to top

Links

To create a link, highlight the text you want to link from, and right-click and choose Hyperlink.... or use the Hyperlink button . You get:

If you are creating a link to a page in the current Web, just find the file to link to in the current folder list.  If you are linking to an external site, type the URL (beginning with http://...) into the Address field.

To make a neat little description of the hyperlink (like this) that will pop-up when the user points to the link, use the ScreenTip.... button.

To link to an Email address (like this link to Craig's email or this one to Wit-South Cook), use the E-mail Address button on the left of the dialog box. Then, you can enter the email address (the mailto: appears automatically) and the subject of emails that are sent with the link.  If you've previously entered any E-mail links, those email addresses will appear on the list:

Back to top

Bookmarks (Anchors)

You can also link to a specific place in a web page, provided that a "bookmark" (also called an anchor) has been placed there. 

The lesson you are now using contains bookmarks that are placed at each heading, so that the menu at the top of the page (and the links in this sentence) can link to each section of the page.

You can also see this example page with bookmarks that are linked to from the menu.

To define a bookmark, put the cursor where you want the bookmark, and press CTRL-G. 

Or, use Insert | Bookmark:

Type a name for the bookmark and click OK.

The bookmark appears in the Page editing window as a little flag:

To link to a bookmark in the same page as the link, highlight the text, right-click and choose Hyperlink...., than choose "Place in This Document:

Choose the bookmark you want to link to.

You can also link to a bookmark in another file in your Web.  On the Insert Hyperlink dialog box,

choose the file you want to link to, then click "Bookmark..." and the bookmarks that are defined in that file will appear. Choose the one you want and click "OK".

Back to top.

Go to next lesson (Images).