Como podemos observar, el diseño es únicamente un conjunto de tags HTML que proporcionan la
forma del documento. Pero hasta aquí no nos preocupamos de cómo debe mostrarse. Solo de qué debe
mostrarse. Esta aproximación nos permitirá ganar en flexibilidad en futuros cambios de la página.
El código de la página, queda reflejado en el fuente HTML que muestra el Código fuente 48.
<html>
<head>
<title>Ejercicio CSS</title>
</head>
<body>
<h1>Página de aplicación de hojas de estilo en cascada</h1>
<HR>
<p> En esta página vamos a demostrar como se puede formatear
el estilo de una página a través de las Hojas de Estilo en cascada, conocidas
como CSS. Colocaremos dos tablas a la izquierda y a la derecha de la pantalla
con información e hipervínculos interesantes y el centro el logotipo de la
empresay la ventana de login y password de acceso a la aplicación.</p>
<Table border=1>
<TR>
<TD>
<TABLE>
<TR>
<TD>
Cabecera de la tabla
</TD>
</TR>
<TR>
<TD>
Texto contenido en el cuerpo de la tabla.
Haga <A HREF="#">click aquí</A> si desea más información
</TD>
</TR>
</TABLE>
</TD>
<TD>
<FORM>
<CENTER>
Login : <INPUT TYPE="TEXT" NAME="LOGIN">
</CENTER>
<BR>
<CENTER>
Passwd: <INPUT TYPE="PASSWORD" NAME="LOGIN">
</CENTER>
<BR>
<center>
<INPUT TYPE="SUBMIT" NAME="ENVIAR">
</center>
</FORM>
</TD>
<TD>
<TABLE>
<TR>
<TD>
Cabecera de la tabla 2
</TD>
</TR>
<TR>
<TD>
Texto contenido en el cuerpo de la tabla 2.
Haga <A HREF="#">click aquí</A> si desea aún más
información
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<p>(c) grupo EIDOS. Hoja diseñada por Pepe Hevia</p>
</body>
</html>
Código fuente 48. Código HTML de la página en su fase inicial
El diseño inicial de la página...
Como se comentó en el tema de CSS, el primer paso es diseñar el documento HTML tal y como debe representar la información, pero sin ningun tipo de formato gráfico. Puesto que nuestro equipo ya tiene los estilos oportunos creados y documentados. Por lo tanto, la hoja en su primera fase de diseño quedará como muestra la Figura 27
Caso Práctico Definición de la práctica
dicha “moda” premia por encima de todo el mostrar la mayor cantidad de información posible. Por
ello los elementos tradicionales de HTML se quedan un poco “cortos” a no ser que contemos con los
estilos CSS.
Montaremos la página de inicio de “El actual”, un nuevo tipo de publicación virtual que quiere poner
al día al intrépido cibernauta. De tal manera que el diseño quedará como se ve en la figura.
Como premisas:
• los hipervínculos deben activarse al ponerse el ratón encima y no estarán subrayados
• Las tablas de datos tendrán bordes externos y su texto tiene que estar justificado
• Las tablas tendrán un encabezado centrado y de color amarillo de fondo y la fuente en
negrita y cursiva
• Todos los textos que se encuentran cerca de una imagen tendrán que estar alineados al
centro de la altura de dicha imagen
• La fuente del documento estará basada en la familia de “Verdana”
• Se dejarán márgenes del 2% respecto a los bordes del documento
• El fondo del documento llevará un fondo corporativo que además se desea que esté fijo en
la pantalla y no se mueva al hacer Scroll del documento (en el caso de que esto sea
posible).
• Los botones corporativos serán de color azul
• Al final irá información de copyright en cursiva y con un tamaño de 7pt
ello los elementos tradicionales de HTML se quedan un poco “cortos” a no ser que contemos con los
estilos CSS.
Montaremos la página de inicio de “El actual”, un nuevo tipo de publicación virtual que quiere poner
al día al intrépido cibernauta. De tal manera que el diseño quedará como se ve en la figura.
Como premisas:
• los hipervínculos deben activarse al ponerse el ratón encima y no estarán subrayados
• Las tablas de datos tendrán bordes externos y su texto tiene que estar justificado
• Las tablas tendrán un encabezado centrado y de color amarillo de fondo y la fuente en
negrita y cursiva
• Todos los textos que se encuentran cerca de una imagen tendrán que estar alineados al
centro de la altura de dicha imagen
• La fuente del documento estará basada en la familia de “Verdana”
• Se dejarán márgenes del 2% respecto a los bordes del documento
• El fondo del documento llevará un fondo corporativo que además se desea que esté fijo en
la pantalla y no se mueva al hacer Scroll del documento (en el caso de que esto sea
posible).
• Los botones corporativos serán de color azul
• Al final irá información de copyright en cursiva y con un tamaño de 7pt
Curiosidades y nuevos estilos…
Para terminar este capítulo, sólo mostrar un estilo adicional, que es compatible con el navegador Microsoft Internet Explorer en su versión 5.0 o superior, que ya permite incluso interactuar con los elementos activos del propio navegador: el elemento SCROLLBAR. Y qué mejor que documentarlo con el ejemplo que aparece en la Tabla 5.
Especificación CSS (II)
Se va a proceder ahora a la descripción de los atributos de estilo que se pueden emplear para dar
formato a las páginas HTML con CSS. Como nota, indicar que al explorador de usuario se le suele
denominar UserAgent (UA) y así lo nombraremos en esta documentación.
formato a las páginas HTML con CSS. Como nota, indicar que al explorador de usuario se le suele
Suscribirse a:
Entradas (Atom)