Next: Construcción del Sitio Web Up: Un Ejemplo de Portal Previous: Información y Estructura Lógica

Diseño Físico de las Páginas

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.

**Figura:** Plantilla de página Web.
$\begin{figure}\epsfxsize =15cm \centerline{\epsfbox{plan.eps}}\end{figure}$

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">&aacute;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&oacute;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&oacute;n</h2>
   (Introduzca aqu&iacute; la informaci&oacute;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&oacute;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>

Jesús Vegas 2002-03-21