Exercise 6: Controlling page layout

The pages we have created so far have been quite simple: a few lines of text and a few photos. Page layout has been handled by the website. It generally makes a good job of the layout, but you may want more control if you want to tell a story or explain how you made a particular image.

A common requirement is to have images that "float" in the text of the page. A lot of Rod Bird's walks pages work like this, and so does the club homepage. It works best when the images are relatively small and there is quite a lot of text.

1. Go to your playpen page and edit it.
2. Copy in a page or two of text from another page. Save the changes and check that you have enough text to fill the screen.
3. Upload two or three small images, making sure that the "Create a link" box is ticked. The images should appear at the bottom of the page. You can copy the small images from the club homepage to save time if you do not have images already resized.
4. Edit the page and move the images up into the text. Place them one or two paragraphs apart and save the changes. You should now have a "ladder" layout with blocks of text interspersed with photographs. There will be large blank areas to the right of each photo.
5. Edit the page again and find the img tag that displays the first photo. It will start something like this: <img src="%ATTACHURLPATH%/...
6. Add class="leftfloat" after the img tag: <img class="leftfloat" src="%ATTACHURLPATH%/...
7. Save the changes. You will see that the first image now "floats" in the text and is on the left of the page.
8. Edit the page again and float the other images. Alternate leftfloat and rightfloat as you go down the page.
9. Save the changes. You should now have images floating on both sides of the page.
10. It is important to remember that people have different computers and different preferences. Some have very large screens, some have very small ones. Some people like their text very large. Test your page to see how it behaves: make the browser window smaller, try setting the browser font size to very small or to very large.

The TWiki system has many formatting controls which are described in the TextFormattingRules page. If you see a page on the club website that you want to emulate then you can always find out how it was done using the Raw text link in the lower menu.

-- AndrewFindlay - 02 Dec 2008