Course support : You can ask your course questions in Learnem support forums .
Please support us by visiting our support forums and asking your questions and answering questions of others.
Registration: You can also register for paid web design email course. If you register you will benefit from strong one to one student support, personal tutor, more facilities, discount for other courses, access to students area and many more. Course fee for web page design email course is $15 only. Paid students will receive 13 advanced lessons in addition to 7 general lessons. You can register for paid course at:
Course Registration Here6-1 Introduction
We started our study on tables in previous lesson and We will continue our study in this lesson. As I told you in previous lesson, tables are very important in professional web design. You will need them for holding pictures, buttons, text etc.
In this lesson we will cover more options about table cells, cell padding, cell spacing and finally we will learn how to link different parts of an image to different locations on the web.6-2 Cell Width (Column Width) In previous lesson we learned how we can determine width and height of a table.
<HTML>
<HEAD>
<TITLE>Table: Column widths not specified</TITLE> </HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3> <TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE> </BODY> </HTML>
You can determine width of each column in your table by specifying width of cells in first row. Just be careful
about correctness of sizes you specify. For example if your table width is 200 pixels sum of cell widths must be exactly 200.
<HTML>
<HEAD>
<TITLE>Example 6-1a</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3> <TR>
<TD WIDTH=140>TOP LEFT</TD>
<TD WIDTH=260>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Example 6-1b:
<HTML>
<HEAD>
<TITLE>Example 6-1b</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3> <TR>
<TD WIDTH=35%>TOP LEFT</TD>
<TD WIDTH=65%>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
If you want a cell to be empty, you cannot omit definition for that cell. Insert cell definition, and enter a between <TD></TD> tags .As we told in later lessons this means a space character. You must enter at least a space in this form if you need an empty cell.Otherwise area of that cell will not apear like an empty cell.
Example 6-2:<HTML>
<HEAD>
<TITLE>Example 6-2</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3> <TR>
<TD WIDTH=140>TOP LEFT</TD>
<TD WIDTH=260> </TD>
</TR>
<TR>
<TD> </TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In above example we have two empty cells but as we have specified both table and cell sizes, table will not lose it's shape. If we remove sizes, we cannot guarantee how it will be displayed on different browsers and screen modes.
For the above reason we suggest you to determine table sizes in every table you use. Using fixed sizes is not a good idea. Use percent sizes instead of fixed sizes.6-3 Cell padding You can specify two other important size parameters for a table. Cell padding is the space between cell borders and table contents such as text, image etc.
Example 6-3:
<HTML>
<HEAD>
<TITLE>Example 6-3</TITLE>
</HEAD>
<BODY>
Cell padding effect : <BR><BR> <TABLE BORDER=3 CELLPADDING=20> <TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE> </BODY> </HTML>
Default value for this option is 1. It means that contents of a cell will have a distance of one pixel with borders. If you don't want any space between object inside the cells and its borders you can determine the value of 0 for this option.
6-4 Cell spacingCell spacing parameter determines the space between inner and outer parts of a table. In fact a table is constructed form two borders . A border area and a cell area. There is a space between cell area and outer border. We call this "cell spacing".
If you increase this value you will have a thick border. Default value for this property is 2. If you specify 0 for
it, you will have a very thin border.
<HTML>
<HEAD>
<TITLE>Example 6-4</TITLE>
</HEAD>
<BODY>
Cell spacing effect : <BR><BR> <TABLE BORDER=3 CELLSPACING=10> <TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
6-5 Tables and images Sometimes you need an image that when users clicks on different parts of it they go to different pages. In previous lessons you learned how to use an image as a link to another address or page.
In this special case you will need to cut your picture into as many parts as you need and insert them in a table that holds image parts beside each other. Then you will link each image part to a different page.
You will also need to set both cell spacing and cell padding to the value of 0 to prevent the table to be seen between image parts.
In this way users will see a single image but when they click on different parts of image they will go to different
addresses.
6-6 Working with graphic editing programs
As a web designer you need a graphics manipulation program.There are many professional programs in the market.
Photoshop is a very professional and powerful program but it is an expensive program. You can use PaintShop Pro instead. This is another professional but easy program. You can even download limited versions of this program from many download sites.
These programs will enable you to cut pictures into parts, add many effects on your graphics, decrease graphics
size etc.
Now in this lesson you will need such a program. You must work with the program to increase your expertise with it. In this way it will be possible for you to make interesting images for your web pages.
In exercises of this lesson you must use sucha program to cut an image into four parts. It is a starting point. One side of web design art is graphics design. So start Now !Notice: You can find examples of this lessons in our website. There you must go to resources section and then click on "Web email course example page."
Exercises:
Attention:
Do not use any html editing program like MS FrontPage . You must work on the codes yourself.
Course support:
Paid students must send exercises to their tutor. Tutor will return corrected exercise to the student. Others can ask their questions in Support forums in our web site.
in our web site.
In previous lesson we asked you to create a 2*2 table with images inside each cell that gather at the center of the table. As we did not know how to omit cell padding and cell spacing, image parts had a little space between them. Rewrite that example in a way that picture parts stick to each other so that the user can not realize that they are different images. Cut a ready image to four parts with your desired graphics editing program. Then use these 4 images for this exercise.If you send your exercise to your tutor send pictures too. Also tell which program you are using for editing images.
editing images.
Rewrite above example so that each part of image links us to a different page in your website. Use
<A HREF=""></A> inside <TD></TD> tags.
© 2000,2001 Siamak Sarmady and Learnem Group . All rights reserved. This text is written to be used as text material for "Web Page design Email Course". Any kind of reproduction, redistribution in any form without written permission of the writer is strictly prohibited. This special version is prepared in PDF form. You can redistribute this file without any changes either in contents or in file format. It can not be redistributed in printed form or any other media without permission of the writer.
Back Next
Back
Next
Lesson 7