Mejoras realizadas Cuando un visitante se desplaza por la ventana del navegador, los contenidos de la ventana normalmente se desplazan arriba o abajo.

Presentación del tema: "Mejoras realizadas Cuando un visitante se desplaza por la ventana del navegador, los contenidos de la ventana normalmente se desplazan arriba o abajo."— Transcripción de la presentación:

1 Mejoras realizadas 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 } Fijar un elemento en la ventana del navegador

2 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: #Versiones { position: absolute; top:700px; display:block; border:5px Groove #005AA7; width:190px; height:150px; text-align:center; } Utilización de bordes #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; }

3 La propiedad padding describe cuanto espacio se deja entre un elemento y su borde Hay cinco propiedades padding-top, padding-right, padding-bottom y padding- left, 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; padding: 10px; border: solid #000;} Las propiedades de márgenes y padding 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; }

4 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; } El estado hover #Lin a:hover{ color:#005AA7; background:grey; border-style:Inset; }

5 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ónwww.meyerweb.com 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; } Pop-up

6 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 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: <!ATTLIST Logotipo fichero CDATA #REQUIRED ancho CDATA #REQUIRED alto CDATA #REQUIRED > Propuestas de modificación de la DTD