Hi and Welcome to my page maker tutorial-
Made in Ubuntu Linux at screen size 1024 and resolution of 120DPI

 Please note the Following instructions are for people who are fortunate enough to have a screen size larger than 800x600.

For people who have a screen size of 800x600 please click HERE otherwise:-Continue

At this stage it should be noted that if you are looking for technical detail in order to build your site-you have arrived at the wrong location. Please visit this site:-
http://www.charlescooke.me.uk/web/ugs03.htm#s38

The following few pages are just my humble effort to show how to do a few things-graphically-for those who may get confused by written detaills.

Open a new page in Kompozer.

Now go up to" Table " on the top line.

Click on it and choose "insert" then "table" across to the right
insert the table
Point your cursor at 3 as above and click OK or double click the third block. You will now have a 3 cell table which is the full width of your screen, which may be very wide if you have a newer machine.

Please remember that not everybody has a new machine and these settings may be far too wide for them which has the effect of giving a Horizontal Scroll Bar-which few people like.

We must therefore make the Table a size that may be viewed on smaller screens and at the same time make it centre on larger screens in preference to sitting on one side leaving allot of white space.
So in order to start the procedure click on any part of the Table-leave it highlighted and go up to Table on the top line again-click on it and on the drop down menu go to
" TABLE PROPERTIES" click on that and you will be presented with the picture below.

change properties
Please look at the picture
above and in the Second Row down-" Columns" change the width to 76 % of window.
Come down the picture and you will see "Table Alignment-Change this to "Centre".
(Please note the photos are simply to show where the changes should be made as the % size will depend on your screen size with a Target size of 800.
The formula for working this out is as follows:-800 divided by Your screen size multiplied by 100. Example ( 800/1280x100)= 63% rounded up)

( Please note the program is in English-USA and may appear to have mistakes if viewed in England)
Click OK and you will be presented with the Table below which will fill an 800x600 small screen and will centre itself in larger screens.





It may be a good time to save your work at this time:-
Go up to the top line and Choose FORMAT-click on it and choose the bottom line from the drop menu:-
PAGE TITLE AND PROPERTIES.
Click on it.
Fill in a page name:- Example as this page-Pagemaker- Do not call it INDEX-yet. Fill in YOUR NAME and a description of the Page:- My Photos, My Pets etc....... Close that box when finished and go back to the top line:-
Choose FILE-come down the drop down menu to:-"SAVE AS". You will be presented with the picture on the right. Choose a place to save it too.
Your home folder-My Documents etc.......
It may well be a good idea to make a new folder for this page and others you may make and keep all items relevant to the pages-Pictures , Buttons etc....... in it as all in it will need to be sent to your server in order to appear on the internet.		 Save as

Let us now continue with our work on this table as above.
Each section of the table is called a "cell".
You may place anything you wish in these cells which may be of a fixed or variable width.
If your screen size is 1024 pixels wide as mine you will see as you follow these instructions that the table is split into three sections each 256 pixels wide.( The width will vary dependant on your Settings) If like me for typing these instructions you wish to keep that width in order that your typing does not stretch along across the page-Change the Variable width above to fixed width by double clicking on this cell and it will bring up the photo to the right-Fill in WIDTH and click OK.		 Fixed width cell
You will have noticed as you travel down this page that certain parts of the table although starting off with 3 cells in order to insert a large photo the number of cells in that section of the table have been reduced to 2. This is very easy to do and I will explain shortly.
First of all you should decide what it is you wish to insert in these cells and make any photos a size that they will fit into either one, two or all cells in a table. They can of course be resized in this program but it is better to do it in your photo program----next column		 you can see from the photo above that it takes two cells to facilitate the photo within it. So we need to join those two cells together. To do that leave your cursor blinking in this cell.
Go up to "Table" again at the top of the page-Click on it.
Half way down the drop menu you will see:-
 JOIN WITH CELL TO THE RIGHT-click on it.

You will now have a table with one cell 266pixels wide and another cell which is 540 pixels wide.( You will note that this table still has 3 cells)

An example is shown below:-


This far we have one table of either 3 cells or 2 cells which will leave us with a very limited and bland page so we need to either add rows to the present one we have or depending on your design another table or two!!!!! To add a row to this table. Leave your cursor blinking in this cell:-Go up to "Table" again, "Insert"-choose "Row Below". You will notice that another row which conforms to your original specifications:- 3 cells, has been added. You may continue to do this for as many instances as you require.


You may however wish to add another table in preference to extending another;- to do this as this example simply click on your web page below the last table and insert another as per instructions at the start of this page
Most of the Tables on this page have the BORDERS visible for instructional purposes.
You may colour them if you wish or remove them so as they appear Invisible as in this example.
Simply double click this table and within the box-BORDERS AND SPACING-remove the "1" in Border and make it "0"  (ZERO)
Border description

with border removed
This is what the page looks like as you are preparing it with the Borders hidden.
They appear as RED outlines. They will not be visible when on the Internet.




Once this action has been taken the border will still show, but red, in the preview to help you format your page.
It will not show if previewed in your browser. Now is the time to save your page again-Save as-Index. It will remain the same page name but will be identified to your browser as the first page of your site.		 Top of Page I trust this information may be of use to you and should anyone require any further information it will follow shortly. Thank you for reading this far and please return soon.

Now apart from a couple of coloured cells the page is mainly Black and White.
How do we get colour into the page or cells.
Let us start with the cells:-
Choose the Cell that you wish to change the background colour.
Double click within it.
The picture below is the result
Cell properties
Click on the rectangle to the right of Background colour-The result is the picture below.
Choose your colour and click ok colors
Just a quick Note:- There is a built in Spell Check should anyone require it:- Click the EDIT button above and it is on the drop menu.
How did I change the text colour-Highlight it and press the little Black square beside Variable Width above.
Now how do we change the Background to the whole Page Go up to the top line again:-
Click on FORMAT.
Choose:-Page colours and Background-Click it.		 The result is below:-Click USE CUSTOM COLOURS.
Click on the "Background Rectangle" or "Background Image" if you wish to use a picture
You may change the colours of Links,Text and the Background from this panel.
Click OK when finished to complete your desired changes.

Should you have any questions  please use the button below.

It will open a new window
-close it to return to this page-

                   Thanks		 Change background
Contact Us Page Top

Just for a change this table consists of 4 cells with a wider border which has been coloured Below we will
 insert an Image		 GB Flag The same image with a Border attached
You will notice no Border to the photo.
Maybe you have also noticed this cell has a Blue border.		 Bunnies This example shows how easy it is to layout a page with photos and Text. All you have to do is decide how many cells you require to get the desired effect. You can add, delete, split cells as you progress. Bunnies
Here is how to do it:- The photo is quite large and has been reduced by this program something which is not recommended. Insert the image from the folder that all the web page information is stored otherwise when the page is sent to the internet server it will not be found and you will be left with a blank square. Double click on the image and you will be presented with the photo to the right. In the BORDER section insert a Number-4 -in this instance.
Press OK. Leave the photo Highlighted and click on the Black Square beside the Variable Width. (Top Left of this page)
Choose the colour of your Border ( In this case Blue) and press ok. You now have a blue border around your photo-Easy!!!!!!!!

If you intend to make more than one page you will need a "menu" . An easy example is described below:-
Make a table with as many cells as pages you will have on your site-In this case 6 pages.
(Note-The width of each cell should be fixed as explained earlier). In this case 129 pixels.
This menu can be copied to each individual page which saves time.		 insert image

Home Page 2 page3 page 4 page 5 page 6


In the menu above only the Home Page has been set to our Home domain-It will open in a new window.
The other 5 cells have not been programmed but the Page can be changed to the page name of your page. Therefore if this menu is on all your pages it is easy to navigate around your site.		 The way to do it:- Highlight the word " Home" go up to the top of the page-click "LINK". The "Home "will already be completed.
Insert the address of your Home site given to you by your ISP.
Other page links will need the page name Just a quick Note:- There is a built in Spell Check should anyone require it:- Click the EDIT button above and it is on the drop menu.
How did I change the text colour-Highlight it and press the little Black square beside Variable Width above. followed by.html.
The link may be opened in the same window or if it is an external site it may be opened in" Another window" tick which ever is appropriate to your wishes.
Photo below:-
When you have completed the details click-OK.
Your link will then have been made.
Repeat the procedure for each individual link.		 Just a quick Note:- There is a built in Spell Check should anyone require it:- Click the EDIT button above and it is on the drop menu.
How did I change the text colour-Highlight it and press the little Black square beside Variable Width above. Links

As for the production of a web Page we are about finished.

This small tutorial is only intended to give you a rough idea of how to start and place both photos and text on a page and have them remain in place when put onto the internet.


If however you are interested in other things please continue down the page.		 All that remains is a few words of explanation about how search engines or web crawlers find your page.

If you want to find something on the internet you type in a description in a search box-Say Yahoo or Google and they will go off and search their records very quickly and produce the results. In order for them to produce results about your page you have to put in a few details which are not normally visible on the page but reside behind it where the crawlers look and are called Meta Tags.
These tags may be viewed by you by pressing the "Source" button at the bottom of your page. Then go to the top of the source code where you will find a few tags which say
"Meta content" which if you have followed all the instructions so far will contain your details.
It would however be beneficial to improve them a little. That can be a bit of a job if you know little about them. You may wish to use  my Tag Generator located HERE.  Fill in as instructed and paste the results into your page. (The link will open a new window)

No doubt you have noticed that this table has a thicker border (6 pixels) than others and is coloured. Background is filled as can be seen on photo.
In order to get the border colour you have to go into the advanced Edit and do a bit of typing Advanced Properties
Type into Attribute- bordercolor
and in Value-green. If the border is not already showing as above type it in as well.


Now that you have found your way down this far you probably have a web page which you could send to the internet which has on it a very basic Menu.  The above menu is suitable for half a dozen pages but if you intend to have more you really need a drop down menu in order to save space. There are many free scripts together with instructions on how to insert them and what to change-your page addresses etc. Visit www.dynamicdrive.com and look for Menus.
I already use at least one of these menus on my sites-an example can be found here-. It will open in a new window, so just close it to return here.

Now one of the problems with any menu on many pages is that if at a later stage you add more pages you have to change each individual page menu. I have just completed such an operation and believe me it was not fun.

Why did I do this I hear you ask. Well from the documentation I have read relative to Kompozer I was lead to believe it neither supported "Frames" or could make them work.

What has been done on other sites using different programs is to have an area on your web pages in which a Common Menu will show and work.

The way to do this, I believe, is to Download your Menu script from the above mentioned site and put it on a web page. Follow all the instructions given with it and change all the links to addresses relative to all your pages. The result is a web page with nothing but a menu on it but if you add more pages to your site you only have to alter that one page. A considerable saving in time and effort than changing 20 or more individual pages. Shall we call it: menu.html

To create the space needed for the picture we will insert a one row table, as close to the top of the page as is possible, at the same width you have been working at farther up the page and centre it. That was easy and so is what is to follow:- Click HERE to take a look at what we will produce.

Now that you have seen what it looks like I will explain what you actually saw.
The photo is within the table and your menu below it.This is your page called "Menu".

Insert another table below the menu and centre it.

The other web pages on your site are within a box which is called an Iframe. That  box may be of a fixed size or have scroll bars. It can be used to display any web page or part of it.
The size that you make your iFrame will depend on your target screen resolution.
 Make yours HERE The page will open in a new window.

To insert the iFrame code place your cursor within the Table. Leave it blinking-change you page View to Source-you will then see where the cursor is. At that point insert your iFrame code.

Please note from that point on each time you open the page in Kompozer it will Flash up a Message-This page cannot be edited for some reason. Photo Below.

This is caused by the inability  of the program to support Frames.

First time I saw it I thought Oh Dear-Thats that is it then-Knackered- In maybe a little more strong language-Ha.

Anyway it actually makes little difference to what you wish to do!!!!!!!. The solution I use is to change the view from "Normal" to "Source" and back again, then continue working.
Frames alert
Last updated 5th November 2007.  Please return soon as the page is being constantly updated      (If you came from my Friend Doug's site-hit the link below to go back)


PAGE TOP Sitemap   Doug & Peggy