Javascript
1º Smooth.pack.js
Este archivo java, "reclamado " desde la cabecera de la página, nos va a permitir movernos dentro de una página que tenga marcadores con movimientos suaves, parecidos a los que haría un ascensor de un rascacielos.
El objetivo del curso no es entender el funcionamiento del archivo, sino como aplicarlo
- Bajarse el archivo del siguiente enlace
- En la cabecera de la web, antes de </head>; añadimos<script type="text/javascript" src="smooth.pack.js"></script>
- En nuestra página debe hacer enlaces a marcadores, del tipo
- <a href="#pie" name="arriba">;Ir a pie de pagina</a>
- <p> Aqui iría el texto </p>
- <a href="#arriba" name="pie>Ir a la cabecera</a>
En la primera línea tenemos un enlace que va a un marcador ( de ahí el signo # ).
En la 2º el texto, que puede ser tan largo como quiera
En la tercera otro enlace interno al marcador posicionado en la Web
Si dentro de vuestra página hay una sección del tipo FAQ ( Frequently Asked Questions ) podeis añadir este archivo y veréis que efecto mas bonito. Comprobarlo en el ejemplo que viene junto al smooth.pack dentro del archivo comprimido
2º Iframe
Con esta etiqueta de html conseguimos incorporar una pagina dentro de otra. La utilidad es la siguiente
Imaginemos que estamos construyendo una Web con diferentes secciones. Si ponemos los enlaces en cada una de ellas para que se acceda desde cualquier página a otra de la Web puede ocurrir lo siguiente.
Terminado el trabajo, nos damos cuenta que deseamos añadir otra página. ¿ Qué hacemos ?. Pues ir página por página añadiendo el dichoso enlace.
Una de las soluciones para html es el iframe, o sea, añadir un pedazo de pagina dentro de otra y llamarla siempre desde todas las páginas. Si queremos modificar uno de los enlaces, solo vamos al trozo de página que tiene los enlaces y lo cambiamos
El código html es
<frame src="/enlaces.html" width="100%" height="60">
<p>Su navegador no soporta iframes</p>
</iframe>
<p>Su navegador no soporta iframes</p>
</iframe>
La primera línea es el llamamiento a la página. Cuando hablamos de trozo de página entiéndase que es un documento donde se va a ver el 100 % de su anchura 60 pixel de alto
La 2º línea nos mostrara un mensaje de error en caso de que el navegador no soporte iframe
Algunos atributos para esta etiqueta son
align. Esta es la alineación de la página a incrustar dentro de la principal . Puede ser
left – ;para Izquierda
right → Para la derecha
top – arriba
middle → en el medio
Frameborder . Especifica si se quiere borde alrededor del iframe. 1 para Si y 0 para no
right → Para la derecha
top – arriba
middle → en el medio
Frameborder . Especifica si se quiere borde alrededor del iframe. 1 para Si y 0 para no
height Especifica la altura del iframe
marginheight Especifica los pixel de margen para la altura
marginwidth Especifica los pixel de margen para la anchura
scrolling Si queremos que aparezca la barrita para movernos sobre la pagina se pone yes. En caso contrario, no. Si queremos que salga en caso de que haya contenido que no aparezca en el cuadro, se pone auto.
3º Como usar javascript para tener una imagen rotativa en la web
Ahora vamos con algo más elaborado a la hora de poner una imagen de fondo que rotará constantemente para dar una impresión de vision 360º. Para ellos usamos unos archivos java ( que no vamos a explicar )
El ejercicio consiste en bajarse el archivo completo con la carpeta de imágenes y java junto a dos archivos html. El primero se llama imagen-rotativa.htm. Éste archivo tiene los suficiente para que la imagen rote. Hemos puesto una de la playa. El 2º archivo index tiene mas elementos para ampliarlos junto al ejercicio de estilos. Se puede bajar desdeimagen-rotativa
En caso de querer un cambio en la posicion del logo y del menú , tenemos que modificar los estilos de menu, que queda como .menu {float:left; padding:5px 0 0 20px;} ( El float le cambiamos por left , antes right y paddind de 150 a 20, que hce referencia a la distancia al margen izquierdoEn el caso deldiv logo, vamos al último .logo de la hoja de estilo y cambiamos left por right
Si quereis suber la web podemos utilizar nixiweb.com que ofrece hosting gratuito.
Añadir un formulario de contacto. Utilizar el servicio de jotform para crear un formulario y añadirlo a la web.
