Tell a Friend About Our Cool Software
Chapter 4: Review and Practice
It's time to get back to the photographer's Web page that we have been
developing. You'll remember that in Chapter 3 we added some formatting
to the page and it was starting to look good, but there were still layout
problems. That version of the page is shown in Figure 4.10.
Figure 4-10. The practice Web page before modifications.
The main thing that the page needs now is some changes to the layout, the
way the text and images are arranged. Tables, which you learned about in
this chapter, are just the tool for this job! So, let's get to work. First, the
plan:
For the top part of the page we will insert a 3 row, 3 column table. The
three cells in the first row will be merged to a single cell which will hold
the page's main heading. The second row will hold an image in the left
cell, the list of photo services in the center cell, and another image in the
right cell. The last row will have the Resume link in the center and images
on the two ends.
At the bottom of the page we'll insert another table, this one a single row and two columns. The left cell will hold the Education part of the resume and the right cell will hold the Exhibitions information.
Both tables will be set to have no borders so the images and text elements
simply appear to "float" on the page. Padding and alignment will be set as
needed for the best appearance.
The final source code is presented in Listing 4.1. Because the photos are
now displayed in two rows rather than one, the page is longer, so cannot
be shown in a single image. Figure 4.11 shows the top part of the modified
page in a browser and Figure 4.12 shows the bottom part.
Listing 4.1. The modified HTML source code after adding tables to the page.
<html>
<head>
<title>Dave Davison Photographer</title>
<meta name="keywords" content="photography, photographer" />
</head>
<body background="paper1.gif">
<table border="0" cellpadding="5" width="100%">
<tr>
<td width="100%" colspan="3">
<p align="center"><font size="7" face="Calligrapher"
color="#0000FF">Dave Davidson, Photographer</font></p>
</td>
</tr><tr>
<td width="33%">
<p align="center">
<img src="image01.jpg" width="314" height="210" /></td>
<td width="33%">
<font size="4" face="Cornerstone">
<p align="center">Fine Art</p>
<p align="center">Landscapes</p>
<p align="center">Architecture</p>
</font>
<td width="34%">
<p align="center">
<img src="image02.jpg" width="230" height="307" /></td>
</tr>
<tr>
<td width="33%">
<p align="center">
<img src="image04.jpg" width="225" height="300" /></td>
<td width="33%">
<p align="center"><a href="#resume">View my resume</a></p>
</td>
<td width="34%">
<p align="center">
<img src="image03.jpg" width="307" height="230" /></td>
</tr>
</table>
<hr>
<h2><a name="resume">Resume</a></h2>
<p>Dave Davidson has been an active photographer
since 1992. He specializes in
portraits and fine art prints.</p>
<table border="0" width="100%">
<tr>
<td width="50%" valign="top">
<h3>Education</h3>
<ul>
<li>BS, Art History, University of Pennsylvania,
1988</li>
<li>MS, Photography, Chicago School of Design,
1991</li>
</ul>
</td>
<td width="50%" valign="top">
<h3>Exhibitions</h3>
<ul>
<li>Images From Nature, Smith Gallery, Los Angeles,
1994</li>
<li>Dave Davidson, Photographer in Nature, Oak Creek
Center, Houston, 1996</li>
<li>Architecture of Manhattan, Bowles Museum, New York,
1999</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Figure 4.10. The top part of the modified page.
Figure 4.11. The bottom part of the modified page.
I hope that you'll agree with me--the page looks really nice now and is
ready to be uploaded to the Web. That does not mean it could not be
improved further! We'll be revisiting this page in later chapters.
CoffeeCup Software started in a real Coffee House 1996. Our first program was the HTML Editor. Over the last 10 years we have created a lot more Web Design & Flash Software. Our philosophy has always been to create software and services so you can make better Websites. We are dedicated to helping you by offering extraordinary support so we can succeed together. Consider us a partner and a friend, because we really are about Fresh Software and Warm People.
