Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 25. A better design

    Now it would be tempting to do something about the design. For example we can change the font as well as background and text ­colors in the left panel.

    1.   Insert a BASEFONT code in top of the document left.htm. Then select the font Arial in size -3.

    2.   Test the result in the browser. That looks quite suitable for the job, right?

    3.   Background color and color on the text links are controlled in BODY code. Start by changing the background color in the document left.htm to:

    4.   Save the document, and check the page in the browser. That gives a pure blue color, which is quite usable; however it is not smart that the text links appear in black font. The texts are not readable when the background is dark!

    5.   All texts need to be white – that looks good on the blue background. So change the four BODY code parameters TEXT, LINK, VLINK and ALINK to FFFFFF, which is the code for pure white:

    VLINK stands for visited link and ALINK stands for active link. These parameters specify the color on both the links that the user has employed before and the link that is active. Here we color them all white.

    6.   Save the corrections and test the pages in the browser. Now there is a little more style in the design.

    Links without underlining

    You can remove the underlining in text links. Many people like that. You do that with a couple of CSS statement lines. So try:

    1.   You are going to work in the document left.htm. again.

    2.   Place the cursor under the BASEFONT code and enter the following CSS statement:

    <STYLE TYPE="text/css">
    a:hover {          font-weight: bold;
         color: white;
         background-color: blue}

    3.   That was the first part. Then you have to add the following parameters to all the A codes (the links):

    style="text-decoration: none"

    Here you can see that I have added the parameter to the first text link:

    4.   Now add this parameter to all the 10 link codes.

    5.   Save the document and test your frameset in the browser. Now the links in the left frame are no longer underlined. Instead they are highlighted with bold types when the mouse cursor is moved across them.

    End of this exercise

    Don’t do any more about the page for now. Of course there are numerous other options to modify layout and setup, but I think that you can do quite well with what you have learned here.

    Don’t forget that that the most important in any home page is its content. There we have shown the exercises as built of frames that can be used as an excellent ”model” for other home page projects. Design and layout can be fitted to your desires and the model can be used for most any content.

    Figure 58. In the left frame are all texts white on blue background. Notice that no links are underlined.

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

  • Get the files for this tutorial (opens in a new window)