Mejoras realizadas
Fijar un elemento en la ventana del navegador
• Cuando un visitante se desplaza por la ventana del navegador, los contenidos de la
ventana normalmente se desplazan arriba o abajo.
• CSS permite fijar elementos en la ventana del navegador de modo que no se muevan
cuando el usuario se desplaza arriba o abajo por la ventana.
• Yo he utilizado esto para fijar el fondo, que es una imagen, y lo que yo he llamado el
contenido de la página, es decir todo lo que es Introducción, Palabras clave, Desarrollo y
correo
• En esta versión:
BODY{
background:url(g1.jpg);
backgroun-color:#FFF;
background-attachment: fixed;
background-repeat:no-repeat;
}
#contenido{
background-image: url(g1.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
text-align:justify;
 Justificar el texto
}
Utilización de bordes
• Para resaltar un poco más el título de lo que lo hacía en las anteriores decidí
utilizar borde;
#contenido h1{ background: url(g1.jpg) 0 0 no-repeat fixed;
border-top: 10px Outset grey;
border-left:10px Outset #005AA7;
border-right:10px Outset grey;
border-bottom:10px Outset #005AA7;
padding:0.5em 1em 0.25em;
text-align:center;
}
• También utilicé bordes en los enlaces a las distintas partes del documento y en
los enlaces a las distintas versiones:
#Lin A{
#Versiones {
position: absolute;
top:700px;
display:block;
border:5px Groove #005AA7;
width:190px;
height:150px;
text-align:center;
}
text-decoration:none;
display:block;
background: #005AA7;
text-align:center;
padding:5px 10px;
margin:0 1 1px;
border:7px double #000f9C;
border-style:Outset;
color:grey;
}
Las propiedades de márgenes y
padding
• La propiedad padding describe cuanto espacio se deja entre un elemento y su
borde
•Hay cinco propiedades padding-top, padding-right, padding-bottom y paddingleft, pudiéndose poner una a una o una única longitud como aparece en la hoja
de estilo que se refiere al espacio a izquierda y derecha.
• Por otro lado la propiedad margin establece los márgenes de cualquier
elemento con respecto a la ventana
• La longitud se puede establecer mediante las unidades antes enumeradas o en
porcentaje
#contenido {margin: 1em 0em 3.5em 13em; <!--top , right,
bottom, left-->
padding: 10px;
border: solid #000;}
Parpadeo de los enlaces
• Utilizando la propiedad blink:
#contenido #Capitulos A{
margin: 0 1em 1em;padding: o;
background:#005AA7;
text-align:center;
text-decoration:blink;
color:#CCC;
}
El estado hover
• Cuando el cursor se encuentr sibre un vínculo, incluso sin hacer clic, se activa el
estado hover.
• Una buena forma de indicar que se trata de un vínculo, de que es algo dinámico, es
modificar el estado de ese enlace cambiando por ejemplo el color de la letra o del borde
como en el ejemplo:
#Lin A{
text-decoration:none;
display:block;
background: #005AA7;
text-align:center;
padding:5px 10px;
margin:0 1 1px;
border:7px double #000f9C;
border-style:Outset;
color:grey;
}
#Lin a:hover{
color:#005AA7;
background:grey;
border-style:Inset;
}
Pop-up
• He utilizado pop-up cogiendo la idea de la página www.meyerweb.com
para explicar los enlaces de la bibliografía, realizando una breve descripción
• Hasta que el usuario no se pone sobre el enlace no aparece la descripción
A span{
display:none;
}
• Cuando se pone sobre el enlace se despliega una ventanita con la
explicación
#contenido A:hover span{
margin: 0 1em 1em;padding: o;
display:block;
width:190px;
color:#005AA7;
background:grey;
font:16px Arial;
text-align:center;
border:2px solid #005AA7;
}
Propuestas de modificación de la DTD
• Con la intención de que el usuario pueda acceder a las páginas que han servido
como bibliografía para el trabajo directamente por medio de un enlace hice una
modificación en la DTD para permitir introducio un item o un enlace dependiendo
de si se tratara de un libro o de una página respectivamente
<!ELEMENT Bibliografia ((Item+|Enlace+))>
• Otra modificación propuesta es que en la página pueda aparecer un logotipo
aprovechando los realizados en las prácticas ya sea con el Gimp o con SVG:
<!ELEMENT Trabajo (Titulo, Grupo, PalabrasClave?, Introduccion, Desarrollo?,
Logotipo?, Archivos?)>
<!ELEMENT Logotipo EMPTY>
<!ATTLIST Logotipo
fichero CDATA #REQUIRED
ancho CDATA #REQUIRED
alto CDATA #REQUIRED
>
Descargar

Diapositiva 1