Creating a Website 05: Template Images

[Mimi58]

We are ready to continue with the series by seeing what can be done with some specific templates. First we'll look at some examples of things that can be done, then we will closely examine and experiment with the "Flourish" template from Templated.co If you want to play along, you can download it to your computer and unzip it. It will unzip to show a folder containing a "default.css" file, an "images" folder, an "index.html" file and a "license.txt"

Around 7 or 8 years ago, we played with some templates on another (now defunct) website. Although these templates are outdated now (not responsive), you can still learn a little from the exercises.


For one tutorial, we used the Pomodoro template. First, we used a WYSIWYG HTML editor - Kompozer -  to change the content in the template without changing the template itself (Subject for another series)


Then, in exercise 1, we changed the "look" of the template by changing the images, but without touching any code. We did this by
1. viewing the images in the images folder that came with the template to see what each one was and where it was used.
2. Then we made a new folder named, "images 2" and moved the original
images to that folder leaving the "images" folder empty (Or you could
rename the original images folder and create a new "images" folder. - The
purpose is to put the original images in a safe place.)
3. Then we made images to put in the empty "images" folder. Here is the
criteria we used for the new images for the Pomodoro template:

• img1.gif is the background for the page.  (Any size, but use a .gif image)
•  img2.gif is the background for the content area. (Any size, but use a .gif image)
• img3.jpg is the banner. You will need a banner that is 700 wide by 160 tall
• img4.jpg is the little picture. You will need a picture that is 120 wide by 160 tall.

You can compare the original template  with the template with the content changed and then see the template with the images changed.

The tutorial "CSS Template Exercise 01" includes more detailed instructions as well as suggestions for creating the new images.

If you find a template that has the layout you like, you can use it without touching any code simply by replacing the images (background,logo, etc.) to images you want to use.

However, most of us will want to change one thing or another about a template and that's what we are going to learn to do with the "Flourish" template.  You might want to become familiar with the images in the "Flourish" template and experiment with changing the images to see how the template looks. Feel free to take screenshots to share what you've done at any point as we go along.

Most of all, Have Fun!