We are going to link to other pages so we first need to make 2 simple pages.
They will be called chairs.html and cabinet.html and will have the pictures 'chairs.jpg' and 'cabinet.jpg' centered on the page.
I will skim over this quickly as you have already done most of it.
New HTML Page
Page Title 'Chairs'
Save page as chairs.html
To center on the page you can use a very versatile tag.
It is the one that Arachnophilia has on the main toolbar
<div align="center"></div>
The div tag has other uses but in this case we just use the variable 'align. The center can be changed to right or left making it a better tag for justifying text or graphics.
Import the image 'chairs.jpg' by clicking 'NewImg' on the 'Graphics' toolbar and browsing to it.
Save the page.
Make another page 'cabinet.html' using the 'cabinet.jpg' picture and save that page.
Now open page2.html and remove the table code.
Make a new table almost the same as the last one but this time make the width '0' and border '0'
In R1C2 (row 1 column 2) erase the marker and import image 'chairs-thumb.jpg'
Highlite the whole image tag, open the 'Links' toolbar and click 'NewHTML'
Browse to your page 'chairs.html' and click ok.
Do the same thing in R2C2 using the cabinet-thumb.jpg graphic and the cabinet.html page.
I almost forgot because I have changed my 'NewImg' button code to include 'border="0"'
This is where it is needed in the graphics tag. Without it you will see a colored line around the graphic.
In both cells in column 1 (R1C1, R2C1) Click 'Bold' and then type 'Click on image for a closer look.'
In cell R1C3 Type 'Upholstered Dining Chairs' in bold text.
In cell R2C3 Type 'Bedroom Double Chest' in bold text.
Preview
My Second Page
|
Click on image for closer look.
|
|
Upholstered Dining Chairs
|
|
Click on image for closer look.
|
 |
Bedroom Double Chest |
|
We are not going for beauty here but the cabinet picture should be centered in it's cell.
You already know 2 ways to do that but you can also do it in the cell tag.
Add '
align="center" to that
<td> tag.
<td align="center" >
You will notice that since we made the table border '0' the table does not show and because we made the width '0' (resulting in no width variable being included) the table just fits to whatever is in the cells.
This should be your final body code.
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#008000" alink="#ff0000">
<center>
<h1>My Second Page</h1>
<table border="0" cellspacing="0" cellpadding="10">
<tr>
<td >
<b>Click on image for closer look.</b>
</td>
<td
>
<a href="chairs.html"><img src="chairs-thumb.jpg" width="100" height="87" border="0" alt=""></a>
</td>
<td
>
<b>Upholstered Dining Chairs</b>
</td>
</tr>
<tr>
<td
>
<b>Click on image for closer look.</b>
</td>
<td
align="center">
<a href="cabinet.html"><img src="cabinet-thumb.jpg" width="80" height="117" border="0" alt=""></a>
</td>
<td
>
<b>Bedroom Double Chest</b>
</td>
</tr>
</table>
</center>
</body>
|
The great thing about Arachnophilia is that it only puts in the code that you want.
With other programs you will see all kinds of extra code which makes editing harder.
Those 'easy to use' page builders that some sites offer are not only hard to use if you like things your way but they even use a different method of placement of graphics etc. (absolute positioning) making editing almost impossible.
