Creating a WYSIWYG Page

WYSIWYG means: "What You See Is What You Get". In other words, what you create on a page represents how it will look as a finished product. This webpage system offers a number of templates that can be used to create pages. The most flexible, user friendly approach to making a webpage with information likely is the WYSIWYG template. Most of the pages on this website were created with the WYSIWYG template. And, it is the most efficient approach to moving material from a word processor (Word) document to a webpage.

Following is a basic step by step approach to creating a WYSIWYG page.

1. You need to be an editor and have editing privilege assigned to an area on this website. This is done by the system administrator. Once established, you will be able to log in and begin editing the area in which you have been given editing privilege, and you may create new pages. An area with your name can be created under “Personal Home Pages” that can be a place for more personal or family information and an area with an “Organization” name can be created. In either kind of area, one can create sub-sections (that show up in the left column) and subpages (that show up in the right column.) One can create unlimited numbers of subsections and subpages. Neat, huh?

2. Once an area is established for you it is possible to edit and create. First… LOG IN to the website and go to the area or page that you wish to edit. You may also click the “Edit” button in the upper right corner of any page in the website. This will appear only after you log in. You will be brought to your editing page which lists all the pages you have available to edit. Choose your target page and click it.

3. You will see a small edit button next to the page title. Click it to see the edit menu.

4. For a new page or section, click “Subpages / Sections”. You will need to choose whether to create a new subsection for the left column or a new subpage for the right column. Click the correct “Create” button. Then create the new page.

Step 1 – Choose a page type. Click “Use This Template” under WYSIWYG.

Step 2 – General Information. You will need to then fill in a name for the new page in the Page Title space provided. You may add information about the page in Page Description but this isn’t required. Who Can See This makes it available to everyone or limits accessibility to certain groups. When ready to move on, click the Continue button.

Step 3 – Create Page. This is the bulk of the webpage. When ready to move on, click the Continue button. There are a number of features and techniques in this step:

You can “cut and paste” from an existing Word document (a great approach).
You can also simply type in a document using the word processor provided on the webpage: font, size, bold, underline, italic, etc.
Typing a website or email name will be turned into a link automatically. You can use the special tools for various effects… the last six icons:
“T with a little color box” lets you change color
“Little Mountain” Photo adds images (referencing to URL locations on the web someplace)
“Tables” may be created
“Horizontal Line”
“Links” to other webpages can be created (choose “new window” option?)
“<>” toggles the page to the actual HTML (and can be cut and pasted to another page)

Step 4 – Select Editors. You don’t need to add any editors. Click Continue.

Step 5 – Right Column Options. You don’t need to add any right column items. Click Continue.

Step 6 – Preview and Activate. Making the page active is a two step operation. First, click the button next to Confirm. Then, click Make Active.

You’re done. You have a new page that can be viewed and edited.

Creating a Data Page

This page is a “Data Page” and is trickier to put together than a WYSIWYG page. But a Data Page has some features that are quite useful. It begins with a title (as seen at the top of this page) and General Information (again at the top) that is put together with a word processor like that available in the WYSIWYG template (a few links are included in the General Information of this webpage, created with the template’s word processor.)

Then, the bulk of the Data Page is comprised of Content Areas. The first Content Area in this page (entitled “Creating a WYSIWYG Page” located just above) has a box-border around it. The second Content Area on this page is this one… and it also has a box-border around it.

So far, the content areas of this page have only one column… but each content area can be set up with one, two or three columns, even with different sized columns (as illustrated below.) Images can be added to content areas using images stored on TandJ.org. Other images located elsewhere on the web can be added into Content Areas, but it’s a bit tricky to describe the process. Actual demonstration of talking through the process is a more effective means of conveying the information.

To create a new Data Page, go to the page in which the data page will be added as a subsection or subpage. Click the “Edit” button, then the “Sub Pages / Sections” button, choose the desired “Create” button,

Step 1 – Create Page. Click “Use This Template” under Data Page.

Step 2 – Data Page Title. Name the page, add General Information if desired using the word processor (General Information might describe what will follow… or ignore the space), select other options if desired, finally, click “Continue” to go on.

Step 3 – Add New Content Area. Something needs to be done in this step to be able to activate the page. Click the “Add New Content Area” button.
Choose the column configuration desired and click the appropriate “Add This Content Area” button. Choosing the one column option is a good one… or choose more than one (columns might be left blank until later.)
Click “Select Design” and note the variations available between text and images. Click the chosen “Add This Design” button. (Again, note that images and text can be left blank until later.)
If your design includes a text area, a text tool appears (a little box with two buttons at the bottom: Update and Cancel.) Type in your words (or cut and paste from something else (note – this tool uses only HTML and a cut and paste operations won’t bring in all the format code.)

Now – a powerful tip – if you use a word processor as available in a WYSIWYG edit page, you can make things the way you want, click the “<>” toggle button to turn everything to HTML, copy the whole HTML mess, and paste it into the text box of the Data Page editor (and don’t forget to click “Update”.) You’ll see that the whole works turns back into the WYSWYG appearance. I know, it’s easier to demonstrate that to explain. (This process will also bring in images, links, etc. placed into the WYSIWYG page.)
You may select images that available to you as save into TandJ.org (talk with the System Administrator about uploading files to TandJ.org)

Throughout the process, don’t forget to Update. When ready to move on, click “Continue”.

Step 4 – Select Editors. (as explained in WYSIWYG above)

Step 5 – Right Column Options (as explained in WYSIWYG above)

Step 6 – Preview and Activate (as explained in WYSIWYG above)

Here is another Content Area with two columns of different size. This text is input by typing in words, adding some basic HTML, and using the available tools.

The Tools of the text box let one add a title with a different text. Also, (get ready to click your browser's "return" button if your click this) this Link changes the webpage to another page on TandJ.org and is made with the text tools. One can also add Links to other websites.

HTML code can be inserted for style, such as bold, underline, italic, etc. In fact, most any HTML code works in this Data Page approach.

Note that this column is slender and the right column is wider.