Creating Web Pages with KompoZer

Setup

Starting a Web Page

Adding Images

Making Another Page

Linking to Named Anchors

Tables


Setup

The web pages you create can be viewed locally without the need for a domain and webhost.  I can already open an html file in a browser from Windows Explorer.  If there are photos and or links in that file, they work just like in a browser referencing online.  Any linked files (pages) and any photos should be in the same folder with the originally file (page).

Step 1 is to create a main folder for your website.  This will keep everything together if in the future you want to move it all to an online site.

I’ll preface by saying, all folder and file names are up to you.  There are no restrictions beyond what Windows will let you do.  Upper and lower case, some special characters, spaces are all allowed.

I’ve called my main folder LCS.  Within this folder I have sub folders for main sections of the site.  In my LCS folder I hadn’t initially separated the pages.  I thought the page names grouped them.  As I’m writing this, I checked and there are 98 pages in my main folder.  I’ve now added sub folders and I’m in the process of re-linking the images for those pages.  It’s easy but tedious.  Originally, I had no idea I would build this so big.  Warning: Plan Ahead!

This is the main LCS folder:


LCS.htm is the main web page.

And this is the Travel sub folder:

I do suggest a separate folder for images.  Since I have lots more images than pages, I separate the Images sub folder into further sub folders.

This is part of the main LCS Images sub folder in the LCS main folder:

Each of those sub folders has either just images or they may be divided further.

To start just create a main folder and an images sub folder.  As you create pages you can create and add to sub folders.

Back to top


Starting a Web Page

New | Page in New Tab

Format | Page Title and Properties


Title – this is what will appear in the page’s tab header as well as the Browser’s tab.

Author and Description are only saved in the generated HTML text.

The option for making a page a template seemed too complicated for what I wanted.  So I made a page I called xxxTemplate with the general setup (page color, header, text font/size/style).  Then when I make a new page, I open the template, save it as a new page name and modify that as needed.

OK

For this project, I’ve created a folder called Main and a Main Images sub folder.  I reference these throughout this project.

Save – saves the new page in the folder or subfolder on the local computer.  Give it a unique name with some indication of its meaning.

Now you can start making the page look like something.

Format | Page Colors and Background


Select Use custom colors, then select the color you want for background and each kind of text.  You can also use an image for the background.

When you click on any of the rectangles next to a title, a color selection box opens.


You pick the basic color and can then specify brightness, saturation and hue.  Or you can enter the RGB numbers for the color you want.  I’ve picked a light yellow.


Now you can see how the text colors look on that background.  Make more changes as desired.

Let’s add some text and photos.

Click in the page.  The cursor is at the top of the page.

Format | Font | xxxxx to select a font or select font from the drop-down left of the color selector.  Then type some text.  Use the Format menu or the format bar to select text attributes.  I have found that using the Format menu gives more reliable consistent results (I don’t remember what the problem was).



Go on with your text as you like.  You can intersperse photos and other images within the text.

Back to top



Adding Images

Insert | Image at the cursor position.


Click Don’t use alternate text so you don’t need to enter text for the photo.  Select the photo you want to show.  It should be in the same main folder as you web pages.

Click OK.

This will insert the photo at its full size on your page.  If that’s what you want, fine.  But if it’s too big, delete the photo (click on it and Delete).  Make a resized copy and insert that.  Use FastStone or other program to create a resized or cropped photo.


Remember to Save your web page often.

You can add text next to the photos, but the text will start at the lower corner of the image and wrap to the next line to the left.

Paragraphs of text can be aligned next to a photo by putting both in a table.  See Tables below.

I’ve saved this page in Main as Al’s New Web Page.



More than 1 image can be shown horizontally.  KompoZer shows them “wrapped” just like a browser would, depending on the width of your window.  Widen the window and they “un-wrap”.



You can make your page as long as you like.  Keep adding text and images.  The browser just keeps scrolling.

But you can also split the page into subpages.  Create separate pages and add links to one from another.  It’s easiest to have all the linked pages within the same main folder.

Just to contradict myself, you can also add links to other folders if you want to, including links to real web addresses.  Ex. A link can be added to the above page to:

https://en.wikipedia.org/wiki/Sunset

This will open another tab and show the Wikipedia page on sunsets.  Even when it’s run from your local folder.  Cool, huh?

Highlight the text for the link, Insert | Link.  Paste or enter the Link Location.  If you like, check Link is to be opened “in a new window” to open a new tab for the link.  (I don’t really know what the other Link is to be opened options mean.)  If you leave this unchecked, the new page will replace the current page.


When you’ve clicked OK, the link text on your page will change to the color you picked (or defaulted) in the page properties dialog.



Assuming you have an internet connection, clicking the link will open a new tab with the wiki page.  All the links on this page will work as well.


When you return to the original page, since the link has been visited, it will change to the color for visited link text.  Without you doing anything!


Pretty cool.

Back to top



Making another page

This is when you realize the you’ve gotten page format the way you want but now have to do it over for the next page.  Unless of course it’s going to be all different.  But let’s assume you’re going for a theme of sorts.  You want a consistent “look” for all the pages.

Enter the template.

KompoZer’s template allows for more complex pages with fixed and editable sections of the pages, like Front Page and Dreamweaver provide.

I made mine simple.  Once I make a page that I like, I Save As, for example, Places template.htm.

I simplify the template page, leaving the important things like header font and size, tables, etc.  All the colors are already set.

When I want to create a new Places page, I Open Places template.htm, and Save As my new page name.  I give it a page title.  Then I just go thru and change and/or enter as needed.

When I want a set of pages with a different but similar theme, I can take my Places template and save it as Animals template, change its colors, etc.  Now I have a new setup for my new collection.

I’ve saved Al’s New Web page as Al’s template.  The I open the template and save it as Al’s Next Web Page.

I changed some text and replaced the sunset photos with others from winter.



Now that we have a second page, we can add a link to it from the first page.  I’ve added text at the bottom of the first page but it can be anywhere.

Highlight the link text on the page, then Insert | Link or Alt I then Alt L or the Link tool in the top tool bar.

You can also use an image to make the link.  But this link doesn’t seem to have the option to open in a new page. But…

In the html, add target=”_blank” to the <a…> specification.


Click to open folder icon for Link Location.  This opens the Main folder so you can select to page to link to.


Select Al’s Next Web Page.htm.  Click OK.  Check Link is to be opened in a new window (or not).

Click OK to complete the link.

Save


When you open Al’s New Web Page in a browser, you’ll see the link at the bottom.  Click it and Al’s Next Web Page opens in a new browser tab.


Back to top



Linking to Named Anchors

Named Anchors are points within a page that can be linked to.  If you have a longish page with multiple points of interest, you can make those and make a menu list at the top.  This saves viewers from having to scroll to get to the part they want to see.

This is from the beginning of my 2015 Kalispell Montana trip.  I added to links because I could.


The small yellow squares with an anchor indicate the location that will be linked to.  The Travel to Kalispell link will go to the Travel to Kalispell, Montana line.

With the anchor on the first line, you can make Back to Top links at the end of each section.

To Place an anchor:

Put the cursor at the position to link to (the start of the line).
Click the Anchor icon on the tool bar.
Name the Anchor.
Click OK.


To Link to an anchor:

Highlight the Link Text.
Click the Link icon in the tool bar.
Click the Link Location down arrow and select the anchor to link to.
Click OK.


Back to top



Tables

Tables provide a way to display items in columns and rows.

Adding a Table

Place the cursor where you want the new table.

In the Table menu, select Insert, then Table.

Using the Quickly tab, you indicate the size of the table by moving the cursor to the intended lower right corner.


Using the Precisely tab, you enter the exect number of rows and columns you want.  Either method creates the same table.

Click OK and the table will be drawn empty.

The cursor is at the left edge of the left cell.  Insert your image.

The image is shown and the left cell takes up most of the table width.  See the very narrow right cell.  Place the cursor in the right cell.

Then insert your text.

The text within the table can be adjusted to be centered/left/right/top/bottom.

Right click the text cell | Table Cell Properties.  You can change Content Alignment to Vertical Middle. Then OK.




Pick the Table tab to control other table features, like spacing and borders.



This is how my house projects table looks in a browser.



This is how it looks in KompoZer.



It’s spread out further in the browser because its columns are set as a percentage of the screen.  Widen the page and the columns get wider.

The table is set to 100% of the page and each column is set to 25%, while the rows are set as a specific height.

You set the alignment, vertical and horizontal, for the whole table, for a row, for a column or for an individual cell.

It takes some playing to get it the way you want.

Right-click in a cell, then pick then pick Table Select.  From here you can select Table (for the whole table), or Row (for this row), or Column (for this column), or Cell (for this cell), or All Cells (for all cells).  Right-click within the selected area and pick the properties option.

Refer back to previous info about table and cell properties.

Once your table is created and filled you may need to expand it.  Since they provided a method to do this, you know it’s happened to others than just you.

To add a row, right-click on a cell either just above or just below where you want the new row.  Pick Table Insert, then pick Row above or Row below.  The new row is inserted.

Same process to insert a column.

And yes, you can insert a new table within a table’s cell.

For a live example, see:  http://www.sys-10.com/LCS/LCS_Places.htm.  Scroll to Illinois.


Back to top