Académique Documents
Professionnel Documents
Culture Documents
En este ejercicio enlazaremos varias pginas HTML usando fotos y enlaces en texto. Los pasos
seran los siguientes:
Primeramente, Creamos una carpeta, llamada como se quiera, en la que guardaremos las
cuatro fotos que se nos proporcionan (1.png, 2.png, 3.png y 4.png) y cinco archivos HTML
en blanco que habremos creado en DW, llamados index.html, 1.html, 2.html, 3.html y
4.html. Con esto, le damos, en DW, a Sitio -> Nuevo sitio -> La carpeta que hayamos
escogido.
A continuacin, en index.html insertamos las cuatro imgenes proporcionadas. Ya sea a
travs de Insertar -> Imagen, o ya sea a travs de las etiquetas en el Body.
<img src="1.png"/>
<img src="2.png"/>
<img src="3.png"/>
<img src="4.png"/>
Con esto ya deberan aparecernos las cuatro fotos en pantalla. Ahora, vayamos a 1.html.
En 1.html introducimos la imagen 1.png, ya sea mediante Insertar -> Imagen, o ya sea por
<img src="1.png"/>
Una vez hecho esto, volvemos a index.html. Para enlazar cada foto a su pgina
correspondiente, hacemos lo siguiente: Clicamos o bien en cada enlace de
<img src="RUTA"> y le damos a Vincular->Pgina correspondiente.html, o bien metemos
el cdigo a mano, utilizando la etiqueta <a href="1.html> </a>, quedndonos algo as.(Todo
esto en el Body).
Con todo esto, las imgenes deberan estar enlazadas. Al clicar en la imagen 1.png, debera
llevarte a 1.html, y as con el resto. Para volver desde estas pginas (1,2,3 y 4.html) al index
solo tenemos que escribir en el Body, la palabra "Volver", entre una etiqueta <a href>, de la
siguiente forma:
<a href="index.html">VOLVER</a>
PD: Pueden meterse comandos dentro de las etiquetas <img src> para modificar sus
propiedades, como por ejemplo:
Capturas:
SEGUNDO EJERCICIO: PRCTICA GALERA (LIGHTBOX CON FOTOS)
- Para esta prctica es necesario que nos proporcionen los scripts. De otra forma, no podremos hacer
nada. Nos harn falta, tambin, cuatro fotos distintas y una carpeta en la que ir todo (capturas de
cmo debe quedar la carpeta, adjunta). Creamos tambin una carpeta llamada "Fotos" en la cual
meteremos las fotos que vamos a utilizar.
-Tenemos que meter este cdigo en el HEAD del documento, si no viene ya proporcionado:
-Una vez hecho esto, continuamos. Insertamos dos de las fotos que queramos en el BODY,
ponindolas a un tamao similar (no es obligatorio, pero me gusta que haya un mnimo de esttica).
Ya sea dndole a Insertar -> Imagen, o mediante cdigo.
-Para clicar en una de las fotos, y que aparezca otra en una ventana, deberemos hacer lo siguiente:
Meter un cdigo <a href=" "> </a> en las dos fotos, enlazando a las fotos que queramos que se vean
al clicar. Con la peculiaridad de que, en esta ocasin, el cdigo es ms extensa, pues tenemos que
llamar al script Lightbox. Por ello, el cdigo debera tener la siguiente forma:
Captura:
TERCER EJERCICIO: PRCTICA GALERA (LIGHTBOX CON VDEOS O SWF'S)
- Para esta prctica es necesario que nos proporcionen los scripts. De otra forma, no podremos hacer
nada. Nos harn falta, tambin, un vdeo, o un linf de Youtube, o una pelcula .swf. Creamos una
carpeta, y metemos los scripts y el material en ella, como se adjunta en la foto. Tras eso, creamos un
archivo HTML llamado index.html, y Creamos un sitio en dicha carpeta.
-Tras esto, si no se nos proporciona, debemos colocar este cdigo en el HEAD, para habilitar los
scripts:
-Ahora, en el BODY, o bien ponemos una imagen como enlace (lo cual es adornarse), o bien
ponemos una palabra como link y la cosa va que chuta. En esta prctica he usado la opcin "va que
chuta", as que prosigamos con ella. Ponemos una frase, estilo "Ver el vdeo", y le aadimos una
etiqueta <a href=" "> </a>, pero ms extensa. Debe tener esta forma:
El parmetro title=" " es el ttulo que aparecer en la ventanita. Los atributos de params=" " , como
width o height, indican el tamao de la ventanita. En este caso, es 500x500, pero podemos
cambiarlo a voluntad. Lo que aparece en <a href=" " .... > Es el vdeo enlazado.
Disposicin en la carpeta:
Captura:
CUARTO EJERCICIO: PEQUEO SITE CON HEADER, FOOTER Y EL RESTO
- Esta es una prctica bastante sencilla, as que esperemos que caiga en el examen. Solo nos hace
falta un documento html (S, llamado index.html), y si quieres poner fotos en el header o en el
footer, pues una foto. Si no, pues nada. Lo metes todo en una carpeta, y creas un sitio en esa
carpeta.
<style type="text/css">
</style>
En ese espacio entre etiquetas, pondremos atributos. Yo voy a poner atributos a mi estilo, que para ir
tirando no est mal. Por ejemplo, estos:
<style type="text/css">
#header {
position:relative;
width:850px;
height:100px;
background-color: red;
border: 1px solid black;
left: 250px;
}
#content {
position: relative;
width: 850px;
height:400px;
background-color: white;
border: 1px solid black;
left: 250px;
}
#footer {
position: relative;
width: 850px;
height:100px;
background-color: blue;
border: 1px solid black;
left: 250px;
}
#titulo {
font-size: 24px;
color: white;
position: relative;
left: 415px;
top: 30px;
}
</style>
Los atributos puedes ponerlos ya a medida, como se vea. Al final de este documento (al final del
todo) se adjunta una pgina con los diferentes atributos que se pueden utilizar. Pero lo de arriba es
para no experimentar.
Con esto tendramos los espacios sin rellenar. Los divs colocan objetos con las caractersticas dadas
en el HEAD. Rellenando, podramos poner:
El tamao width y height deben ponerse iguales que los del footer y el header, para que queden
encajados.
El ejercicio debera quedar as:
QUINTO EJERCICIO: PEQUEO MEN HECHO EN CSS
- Este es un ejercicio medianamente asequible. Solo nos hace falta un documento html, que
meteremos en una carpeta. Pondremos un sitio en esa carpeta, tambin. El documento ya sabis
cmo se llama, index.html. Se puede llamar como quieras, realmente, pero ya por seguir.
<style type="text/css">
</style>
Ojo ahora. No trabajaremos con #divs. Trabajaremos con ul y li. Veris. Esto que pondremos a
continuacin, dentro del Style, en el HEAD, es la barra de color en s (el men). Los atributos los
ponis como queris:
ul{
position:absolute;
top:40px;
left:50px;
width:240px;
height:20px;
background-color: #C30;
border:1px solid #FC3;
text-align:center;
margin:0px;
padding:0px;
}
Si escribimos <ul></ul> en el BODY, en pantalla debera salirnos una barra de color (inserte aqu
el color escogido). Ahora pondremos la fuente que vendr dentro del men, en su estado normal:
li{
list-style:none;
width:60px;
height:20px;
float:left;
color: #FC0;
}
li a {
text-decoration:none;
display:block;
color: #FF0;
}
Y ahora, la fuente cuando ponemos el cursor del ratn encima:
li a:hover{
color:#9F0;
width:60px;
}
<style type="text/css">
ul{
position:absolute;
top:40px;
left:50px;
width:240px;
height:20px;
background-color: #C30;
border:1px solid #FC3;
text-align:center;
margin:0px;
padding:0px;
}
li{
list-style:none;
width:60px;
height:20px;
float:left;
color: #FC0;
}
li a {
text-decoration:none;
display:block;
color: #FF0;
}
li a:hover{
color:#9F0;
width:60px;
}
</style>
-Vayamos ahora al BODY. Lo que queda aqu, es tan solo colocar las palabras que queramos que
salgan en las pestaas, con sus correspondientes etiquetas para que aparezcan en el men:
<ul>
<li> <a href="http://www.google.es">Home </a></li>
<li> <a href="http://www.google.es">Flash </a></li>
<li> <a href="http://www.google.es">Galera </a></li>
<li> <a href="http://www.google.es"> Contacto </a></li>
</ul>
La etiqueta <a href=" "> est puesta aqu para que al clicar en cada botn, te lleve a alguna parte.
En este caso, a Google. Y con esto, ya tendramos nuestro men.
SEXTO EJERCICIO: WEB CON LAYOUTS
- A decir verdad, no s muy bien qu quiere decirse con layouts. Creo que quiere decir capas, o al
menos, eso es lo que veo a simple vista. Hagamos una pgina con capas, por probar, as vemos bien
cmo van los floats.
-En primer lugar, crear carpeta, archivo index.html, guardar una imagen (la que queramos, yo usar
una de Pingu), y sitio en esa carpeta.
<style type="text/css">
</style>
-Ahora, lo que vamos a hacer es crear varias capas. Con CSS. Crearemos un contenedor, en el que
est todo. Vamos a utilizar diferentes comandos para que veamos como funcionan. Tendremos una
parte izquierda, una parte derecha, una parte superior, y una parte inferior. Comencemos con el
contenedor:
#contenedor{
width:900px;
position:relative;
margin:auto;
}
No le hemos puesto altura, pero si anchura. De altura no tenemos lmites, de anchura s, 900px.
Vayamos a la parte derecha:
#right{
width:299px;
height:400px;
background-color:orange;
float:right;
}
Si ponemos el DIV correspondiente en el BODY, veremos como se coloca en la derecha del lmite
del contenedor. Para eso sirve float. Empuja a un elemento a la izquierda del todo o a la derecha del
todo, colocando el resto al otro lado. Pongamos ahora la parte izquierda. En esta parte, colocaremos
nuestra foto.
#left{
width:600px;
height:400px;
border-right:1px solid #000;
background-color:blue;
float:left;
background-image:url(pingu.png);
background-position:center;
background-repeat:no-repeat;
}
Hemos tenido que colocar comandos de background diciendo cual es la imagen (primer comando de
background), su posicin (center), y que no queremos que se repita (no-repeat). Como vemos, la
suma de los anchos de left y right (600 y 299) suman 900, el ancho del contenedor. Suman eso
porque left tiene un borde a la derecha de un pixel (299+600+1) cuadrando todas las partes. De otro
modo, una parte saldra debajo de la otra.
#top{
width:900px;
height:50px;
background-color:red;
position:relative;
}
#bottom{
width:900px;
background-color:purple;
height:50px;
position:relative;
clear:both;
}
Como vemos, el bottom tiene ms cositas. El clear:both. Esto, lo que hace es que ignore las rdenes
del float. Por ello, podremos colocarlo en la parte inferior sin problemas.
Tras todo esto, tan slo tendramos que colocar esto en el BODY (En este necesario orden)
- Vale. Esto es una serie de ejercicios diversos que necesitan el material de la carpeta NNTT_7,
Subcarpeta DW. Copiamos la carpeta primera en otra carpeta, que es en la que vamos a trabajar. Y
colocamos el sitio ah.
-Primer ejercicio. Creamos un .html. Lo llamaremos como queramos. No tiene por qu ser
index.html esta vez. Yo lo llamar ROLLOVER.html. Lo guardar en la carpeta primera. En el
body, clicamos, y le damos a Insertar -> Objeto de imagen -> Imagen de sustitucin. En la imagen
de origen, ponemos la de smstar-off.gif, y en imagen de sustitucin, smstar-on.gif. En al hacer
click, ir a Ponemos cualquiera de los html que tengamos. Solo queda probar. Si todo est bien,
tendremos en pantalla una estrella, la cual, al pasar el cursor por encima, se encender. Y si
clicamos, nos llevar al HTML que le hayamos asignado. Fin de ese ejercicio (No pongo captura
porque al insertar, sale un cdigo que no vamos a meter a mano en la vida).
-Parecido al anterior, pero diferente. Esta vez, no crearemos un html, sino que cargaremos una del
NNTT. Abrimos index.html, de la carpeta html, de la carpeta primera. La guardamos con otro
nombre, para no destruir index.html (en mi caso, ANIMADO.html). Ahora, dentro de cada celda
que aparece, Insertar Objeto de Imagen Imagen de sustitucin. E insertaremos, como hicimos
antes, about.gif y about.anim.gif - rooms.gif y rooms-anim.gif - services.gif y services-anim.gif -
reservations.gif y reservations-anim.gif. De URL podis poner https://www.google.com, para no
complicaros la vida, como he hecho yo. Y ya estara todo. Comprobad que funcione en el
navegador.
Ahora (algo que parece lioso al explicar) clicamos sobre la imagen de About. Es decir, sobre about-
p.gif . Entonces, clicamos en Ventana Comportamientos. Slo la que pone Comportamientos, sin
nada detrs. Tras esto, nos saldr una pantallita a la derecha. Con About todava seleccionado, le
damos al signo + que hay en comportamientos, para aadir un comportamiento. Aadimos
Intercambiar Imagen. Nos saldr una pantallita con los nombres de todas las imgenes que hemos
insertado. Clicamos sobre b1, y en el espacio en blanco que sale abajo, seleccionamos star.gif.
Guardamos y probamos. Si ha salido bien, al pasar el cursor por encima de About, saldr una
estrellita a la izquierda. Hacemos lo mismo con Rooms (seleccionando b2 y star.gif), y los otros dos
(b3 y b4, con la misma imagen). Comprobar para ver si funciona.
CREAR IMGENES DE SUSTITUCIN MLTIPLE
Ese cuadradito celeste, entre la flecha negra y el crculo blanco. Con eso seleccionado, creamos un
cuadro alrededor de Opcin Una, en el panel izquierdo. Le ponemos como vnculo uno.html, y
Destino, derecha. Guardamos y probamos. Si sale, hacer lo mismo con el resto de opciones y
pginas.
OCTAVO EJERCICIO: EL FLIPPING BOOK
-Necesitamos el NNTT_8 para poder hacer esta prctica. Metemos en una carpeta todo el contenido
de sta. Creamos un archivo html llamado flipping.html y lo guardaremos en esa carpeta.
Estableceremos un sitio en esa misma carpeta, tambin.
-En la pgina flipping.html solamente tendremos que escribir una frase o poner una imagen para
vincularla a index.html, que es el archivo que reproduce el Flipping Book. Yo he optado por una
frase (En el body).
Con esto, ya podremos acceder al Flipping. No tiene misterio. Cosa distinta es si nos preguntan
cmo cambiar las pginas. Procedamos a ello.
Si queremos retocar las imgenes del Flipping, tenemos que abrir bookSettings.js . En ella, lo
primero que veamos ser esto:
flippingBook.pages = [
"pages/cero.jpg",
"pages/una.jpg",
"pages/dos.jpg",
"pages/tres.jpg",
"pages/cuatro.jpg",
"pages/cinco.jpg"
];
Esas son las lneas que debemos retocar. Solamente tenemos que ir metiendo rutas y sustituyendo
para poner las pginas que queramos en el Flipping. Pero ojo. Para ello, debemos copiar nuestra
imagen (grande primeramente, tamao 912x1403) en la carpeta large (dentro de pages), y
luego, reducir esa imagen a tamao 413x585, para pegarla en la misma pages. Ambos archivos
deben tener el mismo nombre. Una vez hecho eso, y retocado las rutas, el Flipping ir bien.
NOVENO EJERCICIO: VDEO HTML5
-Antes que nada, aclarar. El buscador y el formulario, al ser casi automtico de por pginas
externas, no lo he incluido en este documento.
Para el buscador, buscar por Custom Google Search.
Para el formulario, buscar por JotForm.
Bien, el vdeo en HTML5. Nos hacen falta los archivos de la carpeta NNTT_10. Es una prctica
muy tonta.
Creamos una carpeta. En esa carpeta, metemos los archivos del NNTT_10. Son tres vdeos
(diferentes formatos) y una imagen que acta como pster. Creamos un documento HTML, y lo
guardamos en esa carpeta. Creamos un sitio aqu. Una vez hecho, solo tenemos que poner lo
siguiente en el BODY:
Esto permitir reproducir el archivo en los diferentes navegadores, ya que el navegador escoger el
indicado. Para incluir un poster y unas medidas de vdeo, debemos meter los siguientes comandos:
As, ya tendremos una imagen de previsualizacin en nuestro vdeo. El cdigo quedaria as:
FLASH
PRIMER EJERCICIO: CARGADOR FLASH
Bien, haremos un cargador Flash como el que se hizo en clase. Para ello necesitamos una imagen
que nos sirva de base para clicar. Esta es la que utilizamos en clase
http://imgur.com/Y9vimGF,BD4qvV
P,EwVIksz#2 al no contar con un vdeo. Lo meteremos todo en una misma
carpeta.
Creamos un documento Action Script 2.0, importante que sea de este tipo. Medidas, 700x300 en
este caso. Importamos la imagen base (la tricolor) a biblioteca. Archivo Importar A
Biblioteca.
Tras esto, creamos cuatro capas, las cuales llamaremos Loader, B1, B2, y B3. O no, como queris.
Con esto hecho, vayamos a crear los botones, uno en B1, otro en B2 y otro en B3. Para ello,
seleccionamos B1. Con la herramiento Rectngulo ( R ) creamos un rectngulo sobre la franja roja,
sin trazo. Tras esto, seleccionamos el rectngulo que acabamos de hacer con la herramienta
Seleccin (V). Y le damos a Modificar Convertir en Smbolo Botn. Una vez convertido, lo
volvemos a seleccionar y le ponemos Efecto de color Efecto Alfa. En B2 hacemos lo mismo
con un rectngulo sobre una franja, y en B3, lo mismo con la que falta. Hasta tener los tres botones.
Con los tres botones creados, creamos ahora un loader. Dndole al siguiente icono:
En la capa Loader. Tamao, 350x300. Una vez colocado, clicamos encima del loader, ENCIMA,
para ponerle un nombre, load1 , en este caso.
Si no sale la tuerquecita, es que no lo estis haciendo bien. Una vez hecho esto, pinchamos en el
botn 1, en B1. SOBRE el Botn, porque el cdigo hay que escribirlo ah, no en la capa ni fuera.
Clicando entonces en Ventana Acciones , escribimos el siguiente cdigo:
on (release) {
loadMovie ("red.jpg","load1");
}
Hacemos lo propio en cada botn, y si todo est bien, el cargador cargar cada color correctamente
al clicar sobre cada botn.
Si quisisemos cargar un vdeo en lugar de una imagen, igualmente. Pero cuidando de que la
extensin sea .swf
SEGUNDO EJERCICIO: VDEO INTERACTIVO EN FLASH
Nos hace falta el NNTT_5 para realizar este ejercicio. Creamos un documento Action Script 2.0 en
Flash (650x490). Lo guardamos en una carpeta, junto al resto de material (vdeos en .flv).
Tras esto, creamos tres capas. Una llamada acciones, otra, etiquetas, y otra, videos. Vamos clicando
en cada una con F6, para aadir fotogramas clave. Debe quedarnos algo as:
stop();
Ahora, importamos a biblioteca los vdeos flv que usaremos. Le damos a Importar A Biblioteca.
En la ventanita que nos sale, tenemos que seleccionar:
En la primera:
En la segunda:
As, con los cinco vdeos. Tras esto, creamos un smbolo. Insertar Nuevo smbolo Clip de
pelcula. Le llamamos vela (primeramente). Una vez creado, arrastramos el vdeo de vela al
smbolo, y lo centramos. Creamos dos capas, video (la capa sombreada, en la cual est el vdeo) y
acciones. En el primer fotograma de acciones, metemos la siguiente accin:
gotoAndPlay ("ok");
En la capa acciones (igualmente), vamos al fotograma en el que queramos que empiece la accin.
Insertamos un fotograma clave en blanco, y le ponemos de nombre ok.
Tras esto, vamos al fotograma (en acciones) en el que queramos que acabe, aadimos un
fotograma clave, y escribimos:
_root.gotoAndStop ("home");
En home hacemos lo mismo. Pero de una forma peculiar. Debemos tener cinco capas. Video,
accion, B1, B2 y B3, para los botones. En acciones, sobre la mitad de la duracin, escribimos lo
siguiente:
_root.gotoAndStop("pasada");
En las capas de los botones, crearemos botones. Con la herramienta Rectngulo ( R ) vamos
tapando cada uno de los objetos con los que se va a interactuar (a poder ser, sin trazo, y cada uno en
una capa). Convertir en Smbolo Botn. Efecto de color Estilo Alfa.
Ahora, con la herramienta Seleccionar (V), clicamos sobre cada uno de los botones, y escribimos:
on(release){
_root.gotoAndStop("vela/libro/negro"); <------Uno de los tres, no los tres a la vez.
}
Una vez tengamos todos los botones con accin, volvemos a la pantalla principal. A esta:
Y clicamos en los fotogramas de videos. Ah vamos colocando los Smbolos (clips de pelcula)
que hemos estado tocando. Cada uno en el fotograma cuya etiqueta tiene su nombre. Si la etiqueta
pone home, en el fotograma de videos metemos el smbolo home. Y as con todos. Y ya
tenemos hecho nuestro fantstico vdeo interactivo.