• Los botones corporativos serán de color azul.Como podremos encontrarnos con <INPUT
STYLE=”Button”> o bien el tag <BUTTON>, para hacerlo más flexible, como clase.
.BOTON_CORP
{ BORDER-RIGHT: #ffffff 2px outset;
BORDER-TOP: #ffffff 2px outset;
FONT-WEIGHT: bold;
BORDER-LEFT: #5895ff 2px outset;
CURSOR: hand;
COLOR: #003366;
BORDER-BOTTOM: #5895ff 2px outset;
FONT-FAMILY: "Verdana";
BACKGROUND-COLOR: #58d2ff
}
Código fuente 55
Con lo que habrá que modificar la línea de la página original por la que muestra el Código
fuente 56.
<INPUT TYPE=”SUBMIT” CLASS=”BOTON_CORP”> (...)
Código fuente 56
la página principal irá información de copyright que irá cursiva y con un tamaño de 7pt y tipo de letra
Arial”. Con lo cual, si echamos un ojo al código original, veremos que va dentro de un párrafo. Por
tanto, asignaremos al tag <P> del copyright, los datos de estilo que muestra el Código fuente 57.
<P ALIGN=center STYLE=”font-style:italic;font-size:7pt;font-family:Verdana”>
(c) grupo EIDOS. Hoja diseñada por Pepe Hevia
</p>
Código fuente 57
Quedando finalmente la página como ya se mostró en la Figura 26. Por último, especificar como
quedará la estructura del directorio:
C:\ EJERCICIOCSS --- \ejercicio.htm
--- \documento.css
--- \vinculos.css
--- \tablas.css
--- \controles.css
--- \fondo.gif
Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
Afectan a tablas TABLAS.CSS
Las tablas de datos tendrán bordes externos y su texto tiene que estar justificado
TABLE
{ border:1;
text-align:justify;
}
Código fuente 52
• Las tablas tendrán un encabezado centrado y de color amarillo de fondo y la fuente en
negrita y cursiva. En este caso, se define como clase ya que no podemos depender de si el
usuario utiliza el tag <TH> para definir las cabeceras.
.CABECERA
{ text-align:center;
background-color:yellow;
font-weight:bold;
font-style:italic;
}
Código fuente 53
Con lo que habrá que modificar en el código, las líneas que muestra el Código fuente 54.
<TD CLASS=”CABECERA”> Cabecera de la tabla </TD> (...)
<TD CLASS=”CABECERA”> Cabecera de la tabla 2 </TD> (...)
Código fuente 54
TABLE
{ border:1;
text-align:justify;
}
Código fuente 52
• Las tablas tendrán un encabezado centrado y de color amarillo de fondo y la fuente en
negrita y cursiva. En este caso, se define como clase ya que no podemos depender de si el
usuario utiliza el tag <TH> para definir las cabeceras.
.CABECERA
{ text-align:center;
background-color:yellow;
font-weight:bold;
font-style:italic;
}
Código fuente 53
Con lo que habrá que modificar en el código, las líneas que muestra el Código fuente 54.
<TD CLASS=”CABECERA”> Cabecera de la tabla </TD> (...)
<TD CLASS=”CABECERA”> Cabecera de la tabla 2 </TD> (...)
Código fuente 54
Afectan a hipervínculos VINCULOS.CSS
• los hipervínculos deben activarse al ponerse el ratón encima, y no deben tener el
subrayado
A,A:link,A:vlink,A:active
{ color:blue;
font-family:Verdana;
text-decoration:none;
}
A:hover
{ color:red;
font-family:Verdana;
text-decoration:none;
}
Código fuente 51
subrayado
A,A:link,A:vlink,A:active
{ color:blue;
font-family:Verdana;
text-decoration:none;
}
A:hover
{ color:red;
font-family:Verdana;
text-decoration:none;
}
Código fuente 51
Aplicando estilos. Análisis de requisitos. (II)
b) Y los que son específicos de la página, que irán o bien como bloque o bien como IN-LINE.
En nuestro caso, que es muy específico, será IN-LINE.
• Al final de la página principal irá información de copyright que irá cursiva y con un
tamaño de 7pt y tipo de letra Arial.
Pues manos a la obra....
Afectan al documento en sí DOCUMENTO.CSS
• Todos los textos que se encuentran cerca de una imagen tendrán que estar alineados al
centro de la altura de dicha imagen
IMG
{ text-align=center;
}
Código fuente 49
• 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) y que esté centrado en el fondo del escritorio.
BODY
{ font-family:Verdana;
background-image:url(fondo.gif);
background-position:center;
background-attachment:fixed;
margin:2%;
}
Código fuente 50
En nuestro caso, que es muy específico, será IN-LINE.
• Al final de la página principal irá información de copyright que irá cursiva y con un
tamaño de 7pt y tipo de letra Arial.
Pues manos a la obra....
Afectan al documento en sí DOCUMENTO.CSS
• Todos los textos que se encuentran cerca de una imagen tendrán que estar alineados al
centro de la altura de dicha imagen
IMG
{ text-align=center;
}
Código fuente 49
• 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) y que esté centrado en el fondo del escritorio.
BODY
{ font-family:Verdana;
background-image:url(fondo.gif);
background-position:center;
background-attachment:fixed;
margin:2%;
}
Código fuente 50
Aplicando estilos. Análisis de requisitos.
De los requisitos especificados en el enunciado, podemos deducir que nos encontremos dos maneras
de definir los estilos:
a) los que afectan no a esta página sino a todas: son aquellos que establecen los estilos
“corporativos”. Por tanto, es necesario que los podamos reutilizar. Con lo cual los
definiremos en ficheros independientes a la página, con extensión .CSS. Y además,
intentaremos agrupar los estilos por objetivos y funcionalidades:
Afectan al documento en sí DOCUMENTO.CSS
• 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).
Afectan a hipervínculos VINCULOS.CSS
• los hipervínculos deben activarse al ponerse el ratón encima y no estarán subrayados
Afectan a tablas TABLAS.CSS
• 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
Afectan a controles CONTROLES.CSS
• Los botones corporativos serán de color azul
de definir los estilos:
a) los que afectan no a esta página sino a todas: son aquellos que establecen los estilos
“corporativos”. Por tanto, es necesario que los podamos reutilizar. Con lo cual los
definiremos en ficheros independientes a la página, con extensión .CSS. Y además,
intentaremos agrupar los estilos por objetivos y funcionalidades:
Afectan al documento en sí DOCUMENTO.CSS
• 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).
Afectan a hipervínculos VINCULOS.CSS
• los hipervínculos deben activarse al ponerse el ratón encima y no estarán subrayados
Afectan a tablas TABLAS.CSS
• 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
Afectan a controles CONTROLES.CSS
• Los botones corporativos serán de color azul
El diseño inicial de la página... (II)
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
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
Especificación CSS (I)
En base a la documentación del estándar CSS nos encontramos con las declaraciones de estilos siguientes, clasificadas en función de su utilidad.
Versión “XHTML”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
Código fuente 46
Posteriormente, en el bloque <HEAD><HEAD> colocaremos ya la referencia externa a la hoja de
estilos correspondiente.
<HEAD>
(...)
<LINK REL=STYLESHEET HREF="mi_hoja_estilo.css">
</HEAD>
Código fuente 47
"DTD/xhtml1-strict.dtd">
Código fuente 46
Posteriormente, en el bloque <HEAD><HEAD> colocaremos ya la referencia externa a la hoja de
estilos correspondiente.
<HEAD>
(...)
<LINK REL=STYLESHEET HREF="mi_hoja_estilo.css">
</HEAD>
Código fuente 47
Suscribirse a:
Entradas (Atom)