WYSIweb User Guide
WYSIweb User Guide
Text Size:

Using This Guide

Please print and read this entire document before using WYSIweb (about 9 pages printed with 0.5 inch margins at default text size).

Notes:

[Return to WYSIweb Home] 


Installation and Set-up

WYSIweb System Requirements

Internet Explorer's Links barWYSIweb Setup

Once you've signed up to use WYSIweb, follow the instructions at http://www.wysiweb.com/setup.html to make a WYSIweb button in IE's Links bar, or Firefox's Bookmarks Toolbar. If you can't see the Links toolbar, read the tips below.

Internet Explorer 6 and 7 Settings:

Firefox Settings:


Editing & Managing Your Website

Basic Steps to Editing a Web Page

  1. Go to the web page you want to edit (in the same way you normally would, e.g. by typing its address in the Address field). The domain name must match the one you signed up with, e.g. "mysite.com" is not the same as "www.mysite.com" (most sites are set-up in WYSIweb to require the "www").
    WARNING:
    Do not attempt to edit any page containing a form, or any page that is dynamically generated, such as one ending in ".asp" or ".php". WYSIweb only works with static HTML pages, and is not compatible with forms that contain editable text areas.
  2. Click the WYSIweb button in your Links bar or Favourites menu (IE), or Bookmarks toolbar or menu (Firefox).
    Note: On some computers, with Internet Explorer, the first time you click this button, Windows may require you to install a component from your original Windows CD. This component is included with most Windows installations, but may be missing in some.
  3. Enter your login and password. Your login is usually your email address. Your password is the one you created when you signed up, and may be different than your site's FTP password. (If you can't remember your password, enter your email in the login box and click 'Forgot Password'.)
  4. The WYSIweb editor will then open with your page inside of it.
  5. Make your changes.
  6. Save the page by clicking the Save button Save. This will upload the changed page to your web server, and may take a few moments. Watch the progress bar at the bottom right and wait for the page to refresh.
    IMPORTANT:
    Do not wait too long before saving your changes, as WYSIweb will "time out" after awhile. We recommend saving every 15 minutes or less. To avoid uploading half-edited pages, you should have a good idea of the changes you want to make and have any graphics prepared ahead of time.
  7. To confirm that your changes are saved and live, simply exit the editor by clicking WYSIweb's Exit button Exit (not to be confused with your browser's close/exit button). If it looks like your changes were not uploaded, try clicking Refresh. See also the Troubleshooting section.

Shortcuts: Status Bar and Right-Click

WYSIweb Status Bar

WYSIweb status bar WYSIweb's status bar is useful in several ways:

Right-Click Menu

WYSIweb's contextual or right-click menu is a handy shortcut to many commands, such as adding or removing table rows or columns. This menu (shown at right) can be accessed by clicking the right mouse button. Mac users with one-button mice can access it by holding the Control key down while clicking. Actions that can be performed on the clicked item (or in the clicked location) appear in the menu. The Properties Editor – which lets you adjust margins, borders and colours on almost any element – is only available via this menu.

Text Formatting and Style Sheets

Paragraphs and Headings

WYSIweb's standard text formatting tools will be familiar if you use a word processor. One difference you may notice with WYSIweb is that pressing Enter sometimes produces a blank line between paragraphs. Web browsers and HTML make a distinction between a line break and a new paragraph. If you want to start a new line without having a blank line appear, type Shift+Enter, but be aware that the new line is still considered part of the same paragraph for formatting purposes, such as centering. If you're not getting a blank line between paragraphs, it may be that it has been suppressed by your style sheet. You can alter paragraph margins using the Properties Editor.

Heading menuThe Heading menu indicates whether the selected text is part or all of a heading (1-6) or a normal paragraph ("None"). To change it, simply click somewhere in the paragraph or heading and then choose the level you want in the menu.

Headings are by default large and bold, with Heading 1 being the largest. They are intended to help define the structure of your page, as well as the relative importance of various sections. So, for example, Heading 1 could be the main heading for a page, Heading 2 could be a sub-heading, Heading 3 a sub-sub-heading, and so on. If an entire paragraph looks large and bold, and you are unable to "unbold" it, it is probably a heading. Simply select None in the menu. Note that Heading formatting may also be controlled with an external style sheet or with the Properties Editor (see the next two sections).

Style Sheets

If your site uses style sheets (also called Cascading Style Sheets or CSS), different sections of the page may have pre-defined styles associated with them. For example, a style sheet may indicate that all level-one headings will be dark green and in italics. If this is the case, all you need to do is select heading 1 in the Heading menu. Style sheets help give the site a consistent look and reduce the amount of manual formatting required. They are usually defined in a separate file and set-up by an experienced web designer.

The Properties Editor

We have discouraged the use of custom styles (such as font and colour) by placing these in the Properties Editor, which is only accessible via the contextual menu (right-click or control-click) on the element. Most web sites use a style sheet created by the web designer in order to maintain a professional look. Because these styles should not normally be over-ridden, the Properties Editor is intended for experienced users.

The properties available to edit depend on the element you are editing (e.g. images can have margins but not padding). Your browser applies default styles or properties on all elements (e.g. paragraphs sometimes have top and bottom margins). In addition, your site's style sheet (or CSS file) may set some values. The Properties Editor does not show you these existing values, but it does allow you to override them.

For example, to reduce the indentation of a bulleted list and make the bullets line up with normal text, change the list's left margin to 18 and its left padding to zero.

Note that entering a value of zero does not restore the default (unless the default was zero). To restore a default value, erase the value completely. To restore all defaults, click Restore Defaults.

Units are pixels unless you put a different unit immediately after the number (e.g., "50%"). Although there are several valid units, we recommend sticking to pixels and percentages.

Inserting Special Characters

Click the Insert Special Character button to insert a symbol or other character that you can't enter from the keyboard. Examples: a long dash; the Euro, copyright or trademark symbols; typographer's quotes. Correct display may depend on the page's character encoding setting. Contact us via the support form if you notice a problem. There are a few characters that Internet Explorer for Windows cannot display. These may appear as boxes in that browser. The most common symbols will display in all modern browsers.

Inserting and Editing Tables

Layout Tables

In addition to regular, visible tables and charts, most websites use borderless tables for layout purposes (e.g. to create columns). You can see the borders by clicking the Toggle Table Borders button -- they will appear as light grey dashed lines (note that this view may hide some existing borders). You can edit layout tables just like any other, though most of the time you will not need to.

Table Properties

Table tools Table widths can be set to a fixed width (in pixels), a percentage, or if no width is set, the cells will automatically adjust to fit the content. You can adjust a table's width with the Properties Editor (right-click on the table and select Table Properties). Another way is to select the table in the status bar, or click on its border, and then drag the "handles" (small white boxes) with your mouse. This will give the table a fixed width. Keep in mind that cell widths can sometimes be overridden by the size of their contents or the contents of adjacent cells. For example, if you place a 200-pixel-wide image inside a 100-pixel table cell, that cell will become 200 pixels wide, even though it's technically still set to 100. In fact, web designers sometimes use invisible images to enforce cell width and gain more control over page layout.

You can change table cell properties by cell, row, column or entire table by right-clicking (control-click on Mac) in the cell and choosing Cell Properties. Here you can change properties such as the width or background colour of an individual cell. Units are in pixels unless you put a unit right after the number, such as a percent sign.

You can add or delete rows or columns by right-clicking in an appropriate cell, or by clicking one of the table tools. Note that adding a row or column via the right-click menu will copy the style of the cell you clicked on to the new row or column. Firefox has a shortcut for adding or deleting columns or rows (see illustration) but using this method will not copy the style of the cell you clicked on.

Inserting A Table

To insert a new table, click the Insert Table button. Here are some options explained:

Make first row a header Cell text will be bold and centred*
Equal-width columns E.g., if you have 5 columns, each cell's width will be set to 20%
Caption A heading centred above the table*
Cell spacing Space between cells (pixels)
Cell padding Space between cells' borders and their contents

*Unless specified otherwise in your site's style sheet

Merging and Splitting Cells

2 cells were merged to create me
   
  and me too

You can merge two or more adjacent cells together into one cell. The contents of all the cells will be copied to the single cell (see example at right).

Internet Explorer
Click in the top left cell of the ones you want to merge, then click the Merge Cells button. Two prompts will appear. In the first one, enter the number of cells to the right of the current cell that you'd like to merge with it. If you only want to merge down, enter zero. In the next prompt, enter the number of cells below to merge. To create the vertical merge in the example (the "me too" cell), you would click in the second column, third cell down, click Merge Cells, enter 0, click OK, enter 1, click OK.

Firefox
Drag your mouse over the cells you would like to merge (the borders should be highlighted), then click the Merge Cells button.

Splitting Cells
To reverse your merge, simply click the appropriate Split button. If you have merged cells in both directions, you can choose to split just the rows Split rows, just the columns Split columns, or both Split all merged cells.

Using the Calendar Tool

Use the Calendar button to insert a calendar for any month of any four-digit year. A WYSIweb calendar is simply a table with special formatting, so you can manipulate it just like any other table using the table tools described above. You can insert a large or small calendar. A large calendar has room to enter event information, but you should keep the text brief and link to event details on another page or in a PDF document. Or, insert a small calendar and simply link the date.

Calendar Examples

Small calendar with linked dates
Large calendar with links, coloured cells and merged cells

 

The File Manager

File Manager The File Manager lets you see all the files and folders that make up your website. It allows you to upload, move, copy, rename and delete files and folders, and even create new folders (directories). The File Manager is also available as part of the Insert Image and Insert Link tools, by clicking the Select File button.

Selecting files or folders in order to perform an action on them is similar to most operating systems. Some actions, such as renaming, can only be done on one item at a time, and you'll notice the buttons will be enabled or disabled depending on what you select.

To select more than one item, hold the Ctrl key down while you click. To select a range of consecutive items, select the first one, then hold the Shift key down while you click the last item in the desired range.

If you're using the Site version of WYSIweb, the File Manager will prevent you from deleting the folders and HTML files that are in your site's navigation menus. These items will appear dimmed (grey lettering), and you will not be able to select them (though you can still double-click dimmed folders to open them). To move or delete these pages, use the editor's built-in page management features. Note that the File Manager does not prevent you from deleting Disconnected pages, so the warning below applies for those.

WARNING:
If you're using WYSIweb Page, be careful because the File Manager will allow you to delete your site's HTML files, and you will not be able to get them back!

Uploading Files

You will use the File Manager mainly to upload images for your site, or other files for your visitors to download, such as PDFs.

To upload a file from your computer, follow these steps:

  1. Click the File Manager button (or the Insert Image or Link button and then Select File).
  2. In the Manage Files section, open the folder in which you would like to place the file, e.g. "resources", "images" or "downloads". To create a new folder, click the New Folder button.
  3. Click the Browse button at the top of the File Manager window.
  4. Windows View menu Locate the file on your computer. Check the file size -- select "Details" in the View menu (see illustration). Avoid large files. Most images should be well under 100 KB, and download files (e.g. PDFs) should be under 1,000 KB. (See Tips under Inserting Images.)
  5. Select the desired file and click Open (or double-click the file).
  6. Click the Upload button and wait for the file to upload. This may take a few moments, depending on file size and connection speed. When the window refreshes you should see your file listed.
  7. If inserting a link or image, click the file you want to insert. If using the stand-alone File Manager, click Done or close the window (unless you want to upload more files).

To display uploaded images on your site, use the Insert Image button. As a convenience, you can also upload images with the Insert Image tool.

If you want to allow your visitors to download a file (such as a PDF or Zip file), use the Insert Link button to create a link to it. The Insert Link tool allows you to access the File Manager and select a file from the list (click Select File).

Inserting Images and Clip Art

To insert an image, first click on your page where you want the image to appear, then click the Insert Image Insert Image button. If you don't know the location of the image you want to insert, or if you want to upload a new image, click Select File.

Once the File Manager loads, locate the desired image in the list of files. Double-click a folder to open it. Images are often stored in a folder named "images", or "resources", or something similar. Only web-friendly (compressed) image files are listed: JPEG, GIF and PNG. If you want to add a new image from your computer, use the Upload feature (see instructions under File Manager). If your version of WYSIweb includes clip art, you can click the Clipart button to list those images.

When you click the file name of the image you want, it will appear in the preview area. This may take a few moments, depending on the size of the image and speed of your connection. Avoid large images. Large images will be scaled down to fit the preview area, but will be full size when you click OK.

Below the Location field, enter the Text equivalent or description of the image, especially if the image contains text. This description is helpful for search engines, for visually-impaired people, and for when the image cannot be loaded (due to a slow connection, for example). Internet Explorer displays this text when the pointer is over the image, but other browsers do not.

Choose left or right Alignment if you want text to wrap around the image. A ten-pixel margin will be inserted automatically, which you can adjust in the margin fields on each side of the example image.

You can add a border to your image if desired. Click the colour square to choose a colour. Some border styles depend on colour and border thickness to be visible. Border styles and margins are not shown in the preview – you'll see them after you insert the image, and you can always edit them later.

To change an image or its properties, click the image and then click the Insert/Edit Image button, or right-click on the image and choose Image Properties.

TIPS:

Cutting and Pasting From Other Programs

WYSIweb allows you to cut and paste text from Microsoft Word, Publisher, Excel and other applications. When you paste via the Paste button or Ctrl+V, a window pops up for you to paste into. After pasting into the window, you can change how the text is to be pasted into the web page:

Match destination formatting Some styles (margins, fonts, colours, etc) are removed, while tables and basic styles (e.g. bold, italics) are preserved. This allows the pasted text to take on the existing style of the page. This is the default and best option most of the time.
Keep source formatting Makes no change to the styles of the content being pasted.
Remove all formatting Converts the pasted content to plain text. All styles, including paragraph breaks, will be removed.

After pasting, you may need to "fix" a few things, like line breaks, headings or lists. If you have trouble pasting special characters, your site's character-encoding meta tag may need to be changed. Use the Insert Special Character tool to insert the characters manually or contact support.

Firefox

In Firefox (on both Windows and Mac OS), the Cut and Copy buttons may not work due to security restrictions. Use keyboard shortcuts instead: Ctrl+C to copy, Ctrl+X to cut.

Macintosh

The special paste options described above are not available with the standard Command or Apple key shortcuts for cutting and pasting. Use the Paste button or Control key instead (Control-V), or the Control-click menu.

Inserting Links and Named Anchors

There are several types of links. You can link text or an image to:

To link to a location on the same page, first insert a named anchor. Put the cursor where you want the anchor to be, and then click the Insert Anchor button. Enter a name in the dialog box, and it will show you how to format the link according to where you will be linking from. After you click OK, an anchor icon will appear in the location, but this is only to make editing easier -- the icon will not be visible on the live page. Now follow the steps below to create a link to the anchor.

To create any type of link, follow these steps:

  1. Select the text or image you want to act as a link.
  2. Click the Insert Link button.
  3. Type the location of the page or anchor you want to link to. You can enter relative addresses (for pages on your own site), or absolute addresses (beginning with "http://"). To make an email link, use the format "mailto:email@ddress.com". If entering the name of an anchor, remember to type "#" in front of the name. Another way to link to a page or other file on your site is to click the Select File button, find the file, and click on its name.
  4. If you want the page to open in a pop-up window, check "Open in new window." If you want to set the size of the window, enter a width and height in pixels. Check any other properties you want it to have. Use the Test Popup button to see what it will look like. On some sites, external links and PDFs automatically open in a new window, so it is not necessary to check the box for those.
  5. Click OK.
  6. Save the page, close the editor, and test the link.

TIP:

Use pop-up windows sparingly. By convention, web pages on the same site should not open in a new window unless they are a short message or advertisement. To avoid confusing your viewers, only open a new window when linking to other websites, or when creating a smaller, pop-up window with a brief message. Note that on some sites, external links and PDFs automatically open in a new window, so it is not necessary to check the pop-up box for those.

Adding New Pages

To add a new main page in the Site version of WYSIweb, simply click the [add new] link that appears as the last item in the section menu. To add a new sub-page to the current section, click the [add new] link that appears as the last item in the sub-menu. Read more about page management in the next section.

To create a new blank page in any version of WYSIweb, follow these steps once you're in the editor:

  1. Click the New Page button (top left). If you haven't saved the current page, you will be prompted to do so.
  2. In the Site version, choose Disconnected Page unless you want a link to the page to appear in one of the navigation menus.
  3. Give the page a name and click Create. The name you type will become the page title, which will appear in the title bar when the new page goes live. A file name will be created from whatever you type minus any spaces or punctuation, converted to lowercase, and the ".html" suffix will be tacked on (so you don't have to type that part).
  4. After a few moments, a new, blank page should open in the editor. It will use the same style sheet as the page you were previously on, if any. Enter the content for the new page and save it.
  5. Note the new page's web address (URL), which appears when you move your mouse pointer over the word "body" in WYSIweb's status bar. Now you can link to it from any other page using the instructions under Inserting Links.

TIP:

Since the new, empty page will use the same styles as the rest of the site, you may find, for example, that it has no margins or that it has a dark background. This may be because the other pages use a table or other containing element for the content. To work around this, insert a one-cell table and set its Cell Padding property to 10 - 20 pixels, and its Width to 100%. Now put all of the page contents inside this table. Another way is to copy an existing page to use as a template (see below).


To create a new page using an existing page as a template, do the following (this feature is not available in the Lite version):

  1. Go to the page you'd like to use as a template, and load the WYSIweb editor.
  2. Click on the Toggle HTML button.
  3. Click inside the code window somewhere to place your cursor there, then Select All (Ctrl+A) and Copy (Ctrl+C) the code.
  4. Click Toggle HTML again.
  5. Click the New Page button. You may be asked if you want to first save the changes you made to the existing page, but if all you did was copy the code, you can safely click No.
  6. Enter a title for the new page, click Create and then wait until you see a blank page (see notes in the previous section).
  7. Click Toggle HTML on this blank page, and if you see any code there, delete it..
  8. Type Ctrl+V to paste the HTML code from the other page here.
  9. Click Toggle HTML, and the page should be identical to the one you copied.
  10. Make your changes and click Save.
  11. Note the new page's web address (URL), which appears when you move your mouse pointer over the word "body" in WYSIweb's status bar. Now you can link to it from any other page using the instructions under Inserting Links.

Managing Site Navigation (WYSIweb Site version only)

The Site version of WYSIweb allows you to easily manage all the pages in a website with a one- or two-level navigation or menu structure. Two levels of navigation means your site is divided into a number of main pages, and each main page has a number of sub-pages.

A number of page management tools appear at the top of WYSIweb's toolbar. Here you can easily change the name of the current page, add a new page , or save , delete or move left arrow  right arrow the current page. If you move your mouse over the Page Name field, a "tool tip" will appear showing the URL of the page you are editing. Note that if you delete a top-level page, all its sub-pages will also be deleted.

The arrow buttons left arrow  right arrow allow you to change the order in which the menu items appear. The arrows point left and right for horizontal menus, or up and down for vertical menus. As an example, say you added a new sub-page to the current section. The new item appears at the bottom of the left-hand menu, but you want it to be the first item in that menu. You would then click the up arrow as many times as necessary to move that item to the top. You will have to wait a few moments each time you click the arrow to allow WYSIweb to save the change to all affected pages.

Editing HTML

If you understand HTML, you can edit the code directly by clicking the Toggle HTML Source button. Click the button again to return to WYSIWYG view.

Some things to note about HTML view:

WYSIweb Home | Top of this page