KompoZer Walkthrough

Where To Get KompoZer

Setting Up KompoZer

• One of the first things you'll see is a choice between "Retain original source formatting" and "Reformat HTML Source". You should probably leave this as "Reformat HTML Source", as it makes the code a bit more readable.
  
  
• If you have a high-speed Internet connection, you can check "Save images and other associated files when saving pages". Otherwise, it'd probably be a good idea to leave it unchecked, because whenever you include an image you'll re-upload to the server it if this is checked.
  
  
• Make sure "Maintain table layout when inserting or deleting cells" is checked.
  
  
• Make sure "Use CSS styles instead of HTML elements and attributes" is unchecked.
  
  

What Can KompoZer Do?

• Text Formatting: You can make text bold or italic, or make it bigger or smaller. You can also make it "fixed-width". There are other styles, but you should probably stay away from them (this includes underlined text, because it makes it difficult to tell whether or not a word is a link). You can also make your text one of six "header types".
  
  
• Aligning text, images, and headers to the center, left, right, or justified.
  
  
• Indent text.
  
  
• Bullet lists: You can include bullet lists like this one. You can also make a numerical list, where the numbers are automatically filled in for you. If you want to make a "sub-list" (nested list), you can do so by hitting the "indent text" button while editing a list.
  
  
• Add images. Note that when you do this, you'll need to make sure the image has been uploaded to your account.
  
  
• Add links to other pages or to other parts of the same page. The easiest way to do the latter is to just make a header and to add a link to that header. You can also add a link to a specific part of another page (e.g. "page1.shtml") by first making an anchor on that page (let's say you call it "anchor1"). You can then add a link on your own page to "page1.shtml#anchor1" to create a link to that specific part of page1.shtml.
  
  
• You can also "anchor" a specific spot in your page, so that you can include a link to it from another spot. For example, you may have a list of links at the top of the page, and clicking each link would take you to another part of the same page (further down).
  
  
• Horizontal lines that go across the page.
  
  
• Tables for organizing information easily. Each cell can be aligned differently, both vertically and horizontally (right-click and go to the cell properties to set this information).
  
  
• You can work directly from the RPGClassics server by clicking the "Publish" button. However, don't forget to back your work up on your own computer!
  
  
  

Rules For Using KompoZer

• NEVER open a page that begins with http:// - this is the address of the page you've already published; it's the output of the page you should be making. If you can see all the backgrounds and table of contents along the left, you're editing the wrong page. It should look like black text on a white background.
  
  
• When making a new page, the first thing you should do is go to Format -> "Page Title and Properties", and enter a title for the page.
  
  
• When you make a new table, ONLY use "percentage of the screen", not pixel widths. This ensures that people with different resolutions will still see basically the same thing.
  
  
• Do not resize a table manually using the mouse. A bug in KompoZer turns the table back into pixel widths when you do this! ^^; Instead, right-click the table, click on "Table Cell Properties", click on the "Table" tab, and change the percentage of the screen.
  
  
• Do not change the background of your page or your tables, or the default color of the text. These are automatically supplied by the RPGClassics stylesheet. It'll look like black-on-white on your computer, but if you click the Publish button and then the Browse button you can see how it really looks on RPGC's server.
  
  
• Do not use lots of spaces or tabs to lay out your text and images. This results in terrible code. You can use a table with a border of 0 instead (as well as using the "indent text" tabs, and the various paragraph alignments).
  
  
• If you want to center (or right-align or whatever) headers, images, tables, etc., first create the object and then center it. This avoids a bunch of silly tags that don't need to be there.
  
  
• If you make text bigger, do not negate the "bigness" by then clicking the "smaller" button. This ends up being really messy. Instead, just go to Format -> Discontinue Text Styles (or hit Control-Shift-Y). The same thing holds if you make text smaller (vice versa).
  
  

Tips On Using KompoZer

• Note that the only way to "undo" indenting text is to click the "outdent text" button.
  
  
• When making a table with a border, you should utilize a way that automatically gives your table the proper backgrounds, built into the RPGClassics stylesheet. Do this by clicking "Advanced Edit..." when you create the table. In the "attribute" box, type "class", and in the "value" box, type "info"; then hit "OK". If you forgot to do this when you created the table, you can get back to this screen by right-clicking it, going to "Table Cell Properties...", clicking the "Table" tag, and clicking "Advanced Edit...".
  
  
• There are two types of table cells. Regular cells will be given a dark blue background if you listened to the above rule. You can (and should) also use table headers, which will be given a gray background, and the text will be bolded and centered. To turn a cell into a header, select it (you can select many cells at once), right-click, and go to "Table Cell Properties...". Next to "Cell Style" it should say "Normal". Change that to "Header", click "OK" and voila. 8-)
  
  
• Often, you may find it difficult to insert a line break; hitting Enter sometimes has side effects like closing a list or a header. (You do NOT want to hit Enter twice after every list item, because that will actually end up putting every list item in its own list!) In those situations, go to Insert -> HTML... and type "<br>" (without the quotation marks) to manually insert a line break. (Sometimes you may need a "<br><br>" for it to actually work.)