Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 21. Layout with table

    You have made a large and well functioning home page in the previous exercise. And that was a good exercise, since you can to your advantage divide web design in the two separate phases:

    ·        Content/navigation

    ·        Layout/design

    Now we are at the second phase: We need to optimize the layout in an otherwise well designed home page. You can do that in many ways, and I will show you two options. First we use the traditional HTML, where you with a little trick can make a much better design. Later I will show a more thorough solution where you will try to play with CSS (Cascading Style Sheets).

    Line length

    I a previous chapter I mentioned how important it is to understand the break down of text in lines and paragraphs. Below I show the Raphael page as it will appear on a screen with a resolution of 1280 X 1024 pixels:

    You can surely see that this is not very smart. Actually the lines are more than 140 characters long. That is completely wrong – such a text is unreadable. The problem is not so much in the large resolution 1024 x 768; here the line lengths are about 110 characters, but that is still way too much. Compare with Figure 49 on page 115.

    Our task is then to format the document so the line length is limited. And we do that by placing the content in a table!

    The table width controls the text

    Tables have the characteristic that you can specify their width. You have seen that before where we set a table width to 80%. That is a relative measure, where the 80% adjusts itself to the actual width of the screen window, which will typically be 800, 1024 or 1280 pixels.

    Here you need to specify an absolute table width. You could set it to a width of 650 pixels. And the table will maintain that size regardless of the screen window size.

    You will also create a table with just one cell that  has a specified width. The trick is that all the contents of the raphael.htm document are placed in this cell. Then the line length is no longer controlled by the screen resolution but by the table width.

    1.   Open the document raphael.htm in NoteTab.

    2.   Test it in the browser window, and notice the line length as it appears on your screen.

    3.   Save the document under a new name raphael_t.htm in the site1 folder. Then you still have the old document with the original settings available. Now we will only work in the new.

    4.   Place the cursor in top of the document, between the bookmark top and the heading. Insert a couple of empty lines there:


    5.   Here you need to insert a table with one row and one cell. Use the autotext clip ta2, and select one row and one cell.

    6.   The code is inserted with the default parameter WINDTH="80%". Change it to WINDTH="650" like here:


    7.   Save the document, and the exercise continues.

    Notice the cursors placement in the figure above. All of the documents content of text, pictures etc. needs to be inserted there!

    Cut and move all the contents

    Now you need to cut all the contents. That might sound dramatic, but it isn’t really. Then be careful and hit the keys very precisely!

    1.   Press ArrowDown a couple or time or three, so the cursor is under the table – but above the line with the H1 heading.

    2.   Then hold the Shift key down, because you now have to select. Then press the PgDn key a suitable number of times, so you reach the bottom of the document.

    3.   Continue to hold the Shift key down, and press ArrowUp a couple of times, so the selection releases the HTML documents end codes:

    4.   Now you have a selection that includes all the contents. Then press Control+x to cut the selection away. Then there is not much left in the document.

    5.   Move the cursor a couple of lines up and into the cell:


    6.   Insert the cut section with Control+v.

    7.   Save the document, and test it in the browser.

    I hope that the exercise works for you. The important thing is that you selected all of the big block precisely, like I described in point two and three of the exercise. Then you moved the whole block into the table, which only consist of one cell.

    Since the cell is defined with a fixed width of  650 pixels, the text is forced to spread over the same width, as seen in Figure 49.

    Figure 49. Now you get a Line length that reads comfortably, and the home page will present itself well on any screen.

    Left margin and font

    If you see the raphael_t.htm page in the browser window, you might want an indent in the left sinde. That can be done in different ways; here is the easiest:

    1.   You need to place the cursor in the end of the of the BODY code, in top of the document.

    2.   Make a space like in the Figure here:

    3.   Enter the parameter leftmargin="40". The parameter will then be placed within the BODY code.

    4.   Save the document, and test it in the browser. Hopefully you can see the indent in the entire left side of the window:

    5.   Notice that the lines have the same lengths as before. The 40 pixels margin is thus added to the 650 pixels table, so the page now occupies a total of 690 pixels of width. That is still fine for all thee common screen resolutions.

    6.   The page is shown with the Times font, which in my experience is not very good in a graphic environment. I personally think that the fonts Arial or Verdana are generally more suitable for home pages.

    7.   Place the cursor under the end of the BODY code. Then add this code (see page 38):

    <BASEFONT FACE="Arial, Helvetica, Sans Serif">

    8.   Test the page in the browser. Is this not much better?

    9.   Then change the BASEFONT code so you add Vardana like here:

    10. Save the page and test again.

    Arial is the classical font for headings and text on colored back ground. It is called a grotesque. Verdana is a new font in the same family, and it is created for screen use.

    Home pages are often designed with lots of graphics and relatively limited amounts of text. For that use fonts like Arial and Verdana are obvious choices!

    Find and replace

    Find/replace routines are among the most effective tools when you work with HTML documents. Often there are many repetitions of one code block or another that just needs a slight modification, and NoteTab is a good tool for that.

    In your latest Raphael page there is an element that is repeated in different places, and I would like to change that. I am talking about the link To top, which currently is not located in the right margin. It is indented, and that is not optimal:

    The reason for this indent is that the text link is placed in a table that only has a width of 80% of the normal width. The table is thus not by the right margin; but we can change that.

    1.   Press PgUp a few times in NoteTab, so you get to the top of the document.

    2.   Find the second TABLE code and select the parameter like here:

    3.   Then press Control+c to make a copy. Then press Control+r (to replace).

    4.   Now the dialog box Find and Replace opens, and in the search field (Find what) you can read just the selected text.

    5.   Press Tab to jump to the next field (Replace with).

    6.   Insert the copy there with Control+v. Press ArrowLeft a couple of times. The cursor is still in the field.

    7.   Adjust the replacement text to WIDTH="100%" like here:

    8.   Then click on the button Replace All:


    9.   Here you ask NoteTab to replace all
    appearances of the text WIDTH="80%" with text WIDTH="100%". That happens instantly, and you are told that there were 6 appearances. Click on OK:

    10. Then click on the Close button, to close the Find and Replace dialog box.

    11. Save the page and test it in the browser.

    Figure 50. Now the text is flush with the right margin.

    The Find and Replace function is incredibly powerful in NoteTab. You can search for anything and replace that with something else. But you have to be alert, since you can also destroy any document in no time with a thoughtless find/replace routine.

    In the above instance there was no reason for hesitation; one parameter was changed to another, and that was done in 6 locations in one operation. The result is that the link ToTop now is flush with texts right margin in the browser window (like you see in Figure 50).

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

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