Styled Windows

Here are some examples of a "window type" effect that can be achieved by using styles to describe tables. Each window has 2 parts - the table body and a header which is simply the top row. The only problem with this approach is that each header has to be explicitly set up which can be awkward. However, with Dreamweaver extensions this is quite straightforward. Once one table has been made then others can be simply copied and the class name changed to the appropriate style (eg. ex2). And provided that the style sheet is linked in then an example table can be made a Library item.

 

How to do it
  • Insert a 2 row table with cellpad = 0, cellspace = 0 and border = 0
  • Set first row up as a header
  • Apply styles to the table and header

 

 

Table ex1 - Here is some text

Style description for this table. Comes in 2 parts - main table and a header.

table.ex1 {
background-color : #F9F6E1; font-family : "Times New Roman", Times, serif; font-size : x-small; color : Black;
border : 4px solid #EEA0AA;
padding-left : 5%; padding-top : 2%; padding-right : 1%;
}

th.ex1 {
background-color : #EEA0AA; font-family : "Times New Roman", Times, serif; font-size : small; color : Black;
text-align : left;
padding-left : 1%; padding-top : 0%; padding-right : 0%;
}

 

Table ex2 - Here is some text

Similar style description for this window but different font (Courier) and obviously a different color. The table properties have been set to 50% width and centered so that you can see that the style and property descriptions work together.

 

 

Table ex3 - Here is some text

This window has Verdana as text. Note how the borders within the windows determine how the text flows. Most of the borders are quite tight. However, the left hand one is 5% which gives quite a nice indent.

 
How to do it
  • Insert a 2 row table with cellpad = 0, cellspace = 0 and border = 0
  • Set first row up as a header
  • Apply styles to the table and header

 

 

Here is the header text..
Another window in here. Not very much text in here to read.

 

Moveable window..
This is a nice little pop up box that you can move around because it is in a moveable layer. Just click on the window and move it around.