MENU

Fake Link

Another Link

Link No. 3

Try inserting your own link here. Use the Insert Link button on the tool bar (chain link icon).

Because of a "rule" in the style sheet, links in this area look like buttons -- they are centred and bold, with a border and mouse-over effect. (In Firefox these links are blue only when editing.)

All other text in this area is plain, light grey and small. Notice that bold text is white.

Headings 1-3 (such as the word "MENU" above) in this area will have extra space between the letters.

Click inside this paragraph and choose "Heading 1" in the Paragraph Format Menu.

Welcome! (Heading 1)

With this demo you will use the WYSIweb Page Editor to edit the page you are currently viewing. This page takes advantage of WYSIweb's built-in support for Cascading Style Sheets, to illustrate how you can maintain control over the look of your web site.

1. Simply click the "Edit this page" button at the top right to open the editor. When you see the Login screen, just click the Login button (the username and password fields should be automatically filled in with "demo").
2. Explore the many features of WYSIweb by cutting, pasting, deleting and formatting anything you like. For example, try moving or resizing the hand image above. See the User Guide for tips.
3. After you've made some changes, click Save to see the results live on a temporary page. Close this window to return to the main site. (Links on this page will not work while inside the editor, but they can be edited.)

Note: WYSIweb requires Internet Explorer 6.0 or Firefox 1.x on Windows, or Firefox on Mac OS X, and JavaScript enabled. Some features are disabled for this demo (e.g. the File Manager and inserting images).

Controlling the Look of a Web Site (Heading 2)

A web designer can control the look of each section of a page through proper use of Cascading Style Sheets (CSS). This can include fonts, colours, text alignment, margins and more (notice the indented paragraphs). The styles are defined in a separate file which WYSIweb loads when you go to edit the page.

Although WYSIweb allows you to override these pre-defined styles (using the Properties Editor via the right-click menu), it is best to avoid doing this in order to keep the look of the web site consistent.

For example, by always using "Heading 1" for main headings and "Heading 2" for sub-headings, you can maintain a consistent structure and look throughout the site if the style sheet has been set up correctly.

Notice the sub-headings in this section are green, bold, font size 17 pixels, and in italics. A designer could limit inappropriate use of headings by making headings 3 through 6 all look the same. Go ahead and try using a "Heading 4" on this page!

Notes

The button above will not be required on your site to use WYSIweb. It is only there as a convenience for this demo.

Editing Tables

This whole page is inside a table with three columns. Right-click here and choose "Cell Properties." Try changing the cell width to 40%.

Headings

If you put a Heading 1, 2 or 3 in here, it will be small, bold and purple, thanks to the style sheet controlling this page.

Links

Links in this section are standard underlined blue. They will not work while you are editing.

To learn more about using WYSIweb, take a look at the WYSIweb User Guide.

To end the demo, just close this window.