Experiment 9
— print (last updated: Oct 16, 2009) — print

The desired overall effect is illustrated here: composting.html (final version)

1. Create a folder composting and within it, the subfolder images.
2. Download the starter file to the composting folder using the download link, composting.html (initial version) (view as source and save if necessary).
3. Part of the style modifications require a background image, bg.jpg You can obtain a version of the desired image directly by downloading
   bg.jpg
   and saving it into the images subfolder of composting.

   ---

   Alternatively, use Photoshop to create such an image from the large digital photograph fall-tree.jpg which can be downloaded here:
   fall-tree.jpg
   Save it to the wherever you want to work with it. We will work this into the desired form, subject to these points:
   • it is relatively large and so unlikely to be seen repeating when used as a background image
   • it weighs in at close to 20K
   The Adobe Photoshop steps are these:
   1. reduce the image size somewhat (setting the resolution to 72, width 800 or so)
   2. Use the layers window found via Window Layers and add a solid color layer (of a light, yellowish color) "on top" of the image
   3. reduce the "opacity" of the solid color layer from 100% to, say, 75% so that the original image starts to show through
   4. save the image "for web" as JPEG of low quality as the file bg.jpg in the images subfolder of composting.

4. We want the font to be sans-serif, 14pt.
5. We want the table to be of fixed width of 600px and centered. Use either the "align=center" or center tags to achieve the centering effect.
6. We want 20px more between the top and the start of the content (there are multiple ways to achieve this).
7. Modify the paragraph appearance. We want:
   • less space between paragraphs
   • more space between lines within a paragraph
   • initial indentation of the first line
8. Make bg.jpg the background image. Also try making it it "fixed" to compare the different visual effect.
9. Make the header color #c00
10. Make the "footnote" text at the bottom of a smaller proportional font size and make it align to the right.
11. We want the horizontal ruler's appearance changed. Use these properties:
    • background-color: set it to magenta (#f0f)
    • border-width: set it to 0
    • height: set it to desired value