Web design

Log in to reply
M

Miss R

  • #1
    Hi,

    I'm just learning to design simple website. I wonder if anyone could help me with this. I have a template which I'm practicing on and I would like to edit the colour scheme but when I opened the file I noticed that the bar on left is an image type of file, (photoshop?) its like a jigsaw where its then been put together. Usually I would change the background, frame with simple change of colour but this one is an image. How could I change this to a different colour? Am I making sense?

    Thank you in advance.
     
    K

    kyber

  • #3
    Hi Miss R,

    There are a number of ways of adding colour to a website. The two basic techniques are:

    1. Using images
    2. Using CSS (style markup) - including images

    Images can be used as backgrounds. To get border effects the most common approach is to create a simple wide image (wider than you would normally expect the visitors browser window to be) and of very limited height.

    Using the most basic way of adding an image to the background, the image is automatically repeated in the x and y dimensions (it tiles like wallpaper on Windows desktops). Thus the wide image is repeated down the screen.

    If the image is only 1 pixel high, then the pattern will be very simple. Suppose, in the one pixel line, the first 50 pixels were yellow and the rest of the pixels were blue then you would get a yellow border 50 pixel wide all the way down the screen with the rest of your screen having a blue background.

    If you used instead say a small matrix:

    y b
    b y

    where each colour (y for yellow and b for blue) is 20 pixels wide and 20 pixels high then you would get a chessboard effect.

    CSS lets you specify the foreground & background colours or background images used for each structural element of a page and for images you can specify whether or not they repeat in either, both or none of the x and y dimensions. A structure element can be, for example, a single paragraph, all H1 (headings), a specific named class, or particular layouts.

    As Gary said, you need to use an image editor to get exact background effects you want. You can then use CSS to position multiple images on a page as required. (Keep them very small and efficient though and not too many or you pages will take too long to load.)

    Try this code (with an image file of your choice) to get the idea:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Example</title>
    <style type="text/css">
    <!--
    .important {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    color: #006600;
    background-image: url(yourpic.gif);
    background-repeat: repeat;
    border: medium solid #0000CC;
    }
    -->
    </style>
    </head>
    <body>
    <h1>Welcome to my example page</h1>
    <div class="important">


    This is a normal paragraph.</p>


    This is a normal paragraph.</p>
    </div>
    <div>
    <p class="important">This is an important paragraph.</p>


    This is a normal paragraph.</p>
    </div>
    </body>
    </html>
    Click to expand...
    Your image should appear (and repeat horizontally and vertically) behind both everything in the first <DIV> and just the first paragraph in the second <DIV>. A thick blue line should be drawn around both.

    (Apologies if I am teaching you to suck eggs.)

    Stuart
     
    Upvote 0
    Log in to reply

    Latest Articles

    Join UK Business Forums for free business advice
    Top Bottom
    Community
    Articles
    Menu