Web browsers read content in a special coded format called HTML. While this language is fairly simple to understand, Finalweb church website customers have no need to know it in order to create content for their web pages. This is because we have provided a widely-used solution called the WYSIWYG editor. The acronym stands for "What You See Is What You Get", and refers to a product that converts content in the form of text, images, tables, lists, etc. into HTML which browsers can render correctly. This way, web users need only insert content into an easy-to-use editor to manage the information on their web pages.

This post will provide a few helpful suggestions for beset use of the WYSIWYG text editor.

First, any content section of your website will be editable via a WYSIWYG editor, and the interface will appear like the image below:

Notice that there is a plain white area for typing, and a series of function buttons in the toolbar above. We'll look at just a few of these items to get a feel for what the editor is capable of doing.

1. Source View

The source view provides a way for more advanced users to have full control over the HTML output of the section. Inside this view, HTML, CSS and Javascript code can be created, modified or pasted from external sources. A good example of adding custom code in the source is the addition of a Google Map. We've posted further details on this particular process here, if you're interested.

Clicking the "Source" button will open the source view, and clicking it again toggles back the the WYSIWYG interface. Be careful of any changes you make, because you could end up making a modification that affects the entirety of the web page.

2. Standard Formatting

After typing some text, highlight it will your mouse and select the "Format" dropdown to reveal some formatting options. These formats represent standard HTML elements that can be consistently applied to your pages. The "Heading 2" format, for example, will render the same on any page to which you add it.

3. Hyperlinks

One of the most useful features of a webpage is the use of hyperlinks. Links can point to other websites, to other pages within your site, or even to files (PDFs, Word Docs, Images, etc.). The WYSISYG editor contains a button that makes any hyperlink tasks a breeze.

Simply highlight the text (or image) which will contain the link, and then click the hyperlink button icon in the toolbar. Another window will open, containing many different options for the link. In the Link Info tab, you'll notice a few basic options for link generation. Here are the basics for three different types of links:

    A. Link to an external webpage (such as www.google.com or www.apple.com, etc.)

    In the URL field on the Link Info tab, enter the entire string to the website. An example is "http://www.finalweb.com/blog.asp?message_id=8571". This will create a link to some information on Finalweb's Live Streaming service.

    B. Link to a webpage within your website

    Select the dropdown box in the bottom of the Link Info tab and find a page which you've already created. A link will automatically be created to that page with no extra work. This is a very easy and quick way to create links to your pages.

    C. Link to a file

    If the file has already been uploaded to your site, you can click the "Browse Server" button on the Link Info tab and select the file from the new window. The path to the image will then appear in the URL field.

    If you have not yet added the image to your site, click the Upload tab and then the "Browse" button to bring up a window to select a file from your machine. After selecting the file, click the "Send it to the Server" button to bring the image/document to the correct location for link use. The window will then automatically open the Link Info tab with the URL to the image inserted into the URL field.

Save the changes and then your link is created.

4. Adding Images

Place the mouse cursor in the location in the text where an images should be added, and then click the Image button in the toolbar. A new window will appear with some options.

To add an image, you can either select one from the server by click the "Browse Server" button, or by clicking the Upload tab and sending a new image to the server. After the image has been inserted, you will see a preview, and some properties can then be set to the left of the Image Info tab. Changing the width or height should automatically lock to correct proportions. To modify advanced settings, click the Advanced tab to see availalbe options.

5. Tables

To add a table, click the Table button in the toolbar. In the properties tab, you'll be able to specify Rows and Columns as well as Height and Width. To make the table border not display, set the Border size property to 0, and click OK when it looks right.

Tables are very useful when attempting to have content align nicely to the left or right, or to show service times. If you have experience working with Microsoft Word, you'll find this tool similar in its use, very simple to use.

The Finished product:

We hope these instructions are helpful as you look to make the most of your website.

View All Posts