A la hora de diseñar la apariencia de las páginas resulta conveniente considerar las indicaciones respecto a colores, simplicidad de elementos y indicación de la situación dentro del sitio. Teniendo todo esto en cuenta se ha llegado a la plantilla mostrada en la Figura 4.1. En ella se pueden ver los distintos elementos considerados.
El código fuente de dicha plantilla es la siguiente:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>página del profesor</title> </head> <body text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#551A8B" alink="#FF0000"> <!-- linea con el nombre del profesor y la foto --> <table BORDER CELLSPACING=0 CELLPADDING=0 WIDTH="700" HEIGHT="20" NOSAVE > <tr VALIGN=BOTTOM NOSAVE> <td WIDTH="100%" NOSAVE> <font size=+4> <font color="#FF0000">P</font><font color="#3333FF">ágina del <font color="#FF0000">P</font><font color="#3333FF">rofesor</font> </font></td> <td ALIGN=CENTER VALIGN=CENTER WIDTH="50%" NOSAVE> <img SRC="foto.gif" ALT="foto del profesor" height=98 width=69 align=ABSCENTER></td> </tr> </table> <!-- linea separadora --> <hr ALIGN=LEFT NOSHADE WIDTH="700"> <!-- tabla con el menu principal --> <table BORDER COLS=4 WIDTH="700" NOSAVE > <tr ALIGN=CENTER VALIGN=TOP BGCOLOR="#CCCCCC" NOSAVE> <td BGCOLOR="#FFCCCC" NOSAVE> <center><font size=+2> <a href="index.html">Inicio</a></font></center></td> <td> <center><font size=+2> <a href="docencia/index.html">Docencia</a></font></center></td> <td> <center><font size=+2> <a href="investigacion/index.html">Investigación</a> </font></center></td> <td> <center><font size=+2> <a href="otros/index.html">Otros</a></font></center></td> </tr> </table> <!-- tabla con el contenido de la página --> <table BORDER CELLSPACING=5 CELLPADDING=10 WIDTH="700" NOSAVE > <tr ALIGN=LEFT VALIGN=TOP NOSAVE> <td WIDTH="25%" HEIGHT="200" BGCOLOR="#F0F0F0" NOSAVE> <!-- enlaces internos o descendentes --> <a href="#enlace1">enlace 1</a> <br><a href="enlace2.html">enlace 2</a> <br><a href="enlace3.html">enlace 3</a> </td> <td WIDTH="75%" NOSAVE> <!-- información --> <h2>Información</h2> (Introduzca aquí la información)</td> </tr> </table> <!-- linea separadora --> <hr ALIGN=LEFT NOSHADE WIDTH="700"> <!-- pie de página --> <table BORDER WIDTH="700" NOSAVE > <tr NOSAVE> <td ALIGN=LEFT VALIGN=CENTER NOSAVE> <a href="http://www.uva.es"> <img SRC="escudouva.gif" ALT="Universidad de Valladolid" BORDER=0 height=60 width=60></a></td> <td ALIGN=RIGHT VALIGN=CENTER NOSAVE> <!-- enlaces principales --> <a href="index.html">inicio</a> | <a href="docencia/index.html">docencia</a> | <a href="investigacion/index.html">investigación</a> | <a href="otros/index.html">otros</a> <br> <!-- enlaces secundarios --> <!-- firma --> <a href="mailto:profesor@dpto.uva.es">profesor@dpto.uva.es</a> <!-- fecha última modificación --> <br><font size=-1>18/03/2002</font></td> </tr> </table> </body> </html>