1. Using Image Tables for Controlling Images
This Page is intended to demonstrate samples on how to use Images and Image Tables in the Adelaide Hills LocalWiki for Janis Haynes. This will allow experimentation to take place without involving individual Pages being played around with excessively.
-
Make sure desired Image is already loaded or if not do so via the 'Image Icon' located on top Edit Bar.
-
Please note that Images and Text within individual Cells can be considered as basically equivalent in construction and detail as if they were contained as part the main body of a Page (ie not Index).
-
Normally don't use more than 3 columns for any Table when using Images.
-
Make sure desired Image/s are already loaded or if not do so via the 'Image Icon' located on top Edit Bar.
-
Janis - please experiment with whatever appears on this Page as you wish, perhaps attempt to duplicate/or similar under the existing Image Table shown to see what questions/problems might arise.
Please contact me via email as necessary - Tony.
1.1 Basic Table with Text only
-
This was made by creating a 'Table' with 1 row set to 100 percent (not pixels) width and 1 column.
-
Text was then entered as desired and when completed was hi-lighted and the Alignment set via the top Edit Bar to whatever desired (in this case - Center).
-
Right click within Table and click on 'Cell' then left click on 'Cell Properties' - select 'Backgound Color' and choose desired color, then OK.
|
-
yes this is exactly right
-
I forgot to check on the image for left alignment and came up with that over night as well
-
yes I can do this easily.... what a relief
-
I thought I was going mad
|
-
yes this is exactly right
-
I forgot to check on the image for left alignment and came up with that over night as well
-
yes I can do this easily... what a relief
-
I thought I was going mad
|
Janis - Is this what you require?
Very Funny Dog
-
Removed colour from your 'Image Cell' so that I could see what I was doing?
-
Double click on Image and align 'Left' - so that text can be placed on right of Image
-
Started inputting text above etc then 'enter' for next line of text.
-
Don't number above lines yet, but wait until all text has been inputted.
-
Now we will think about numbering and bulleting the above, so I will repeat the above text below and number the above from the number Icon and bullet the bottom from the bullet icon both available from the 'Edit Bar'.
-
Removed colour from cell so that I could see what I was doing?
-
Double click on Image and align 'Left' - so that text can be placed on right of Image
-
Started inputting text above etc then 'enter' for next line of text.
-
Don't number above lines yet, but wait until all text has been inputted.
-
Now we will think about numbering and bulleting the above, so I will repeat the above text below and number the above from the number Icon and bullet the bottom from the bullet icon both available from the 'Edit Bar'.
NOTE - If you require space between the Image and the text you will need to have 2 columns as explained in 1.2 below and basically follow the above.
|
1.2 Adding single Image and Text
Funny Frog
-
Create 'Image Table' with 1 row set to 100 percent (not pixels) width and 1 column.
-
Click 2 or so times in Table so that depth of Table increases. Leave cursor in left side of Table after checking that Align left is set in Edit Bar.
-
Select or load desired Image to be displayed from top Edit Bar 'Image Icon' and then...................
-
Enter desired text on right side of Image, and adjust if necessary.
-
Add 'Background Color' as described in 1.1 above (if desired), then OK.
Note: to create space between Image and numbered/bulleted text - This does not now appear to be working. More experimentation required ----- See Below.
|
Funny Frog.
|
Further experimentation on above using an additional Column.
-
Created 'Image Table' with 1 row , 100 percent width, and 2 columns.
-
Added 'Funny Frog' Image into left Cell.
-
Added Text into right Cell.
-
Set left Cell width to 175 pixels to suit Image width
-
Added 'Background Color' to left Cell
-
Hi-lighted text to be moved and listed in right Cell.
-
Clicked on 'Increase Indent' in top 'Edit Bar'.
-
Clicked on 'Numbered List' in top 'Edit Bar'.
-
Saved changes and all seemed OK.
|
Funny Frog |
Further experimentation on above using an additional Column.
-
Created 'Image Table' with 1 row , 100 percent width, and 2 columns.
-
Added 'Funny Frog' Image into left Cell.
-
Added Text into right Cell.
-
Set left Cell width to 175 pixels to suit Image width
-
Added 'Background Color' to left Cell
-
Hi-lighted text to be moved and listed in right Cell.
-
Clicked on 'Increase Indent' in top 'Edit Bar'.
-
Clicked on 'Numbered List' in top 'Edit Bar'.
-
Saved changes and all seemed OK.
|
Professor 'Angus'
|
Funny Frog |
1.3 Adding several Images
Professor 'Angus' |
'Funny Frog' |
Above example involves 2 Images but no text apart from adding Captions under Images, and with 'silver' as background colour to hide Table lines.
.'Angus'
|
This example involves 2 Images with text between the Images.
Create 'Table' with 1 row set to 100 percent width and 3 columns.
Treat each Column as was done for the individual Column in 1.2 above.
Add Image to each Cell as described in 1.2 above - however
|
Professor 'Angus' |
'Angus' |
This example involves 2 images with text between the Imaes
Create 'Table' with 1 row set to 100 percent width and 3
columns.
Treat each Column as was done for the individual Column in
1.2 above.
Add image to each Cell as described in 1.2 above
|
'Angus' |