DISEÑO WEB ADOBE DREAMWEAVER CS3

Transcripción

1 CLASE 8 TRABAJO PRÁCTICO Crear un nuevo sitio web llamada portal de juegos utilizando, tablas, bordes, imagen de fondo, un diseño de login y aplicando comportamientos, que contenga un formulario y subir el sitio. 1. Primero empezaremos un documento desde 0 2. Después ponemos el fondo de la página en negro. 3. Luego insertaremos una tabla que ocupara el 100 % del espacio disponible y tendrá solo una fila y una columna. 4. Ahora insertaremos otra tabla dentro de la primera, pero esta le pondremos una cantidad de 10 filas y 5 columnas (esto puede variar según el diseño, no hay ninguna regla que lo defina.) 5. Luego en el 2º tabla insertaremos una imagen como fondo. Debemos asegurarnos que el tamaño de la tabla sea el mismo que el de la foto. 6. Hacemos clic en la tabla y la ponemos centrada. Si se desea se puede agrandar el alto de la 1º tabla para que ocupe mas espacio y la 2º tabla quede centrada dentro de la 1º. (ver ejemplo). 7. Lo siguiente es cambiar el borde de la tabla Nº 1 a «0», con la tabla Nº 2 haremos lo mismo. (Noten que al poner el borde en 0 aparecen líneas de punto en el diseño y en la vista previa las tablas desaparecen). 1

2 8. Ahora tenemos que seleccionar de la columna 5, las filas 1 (1 celdas en total). Una vez que ya tenemos el área seleccionada insertamos la foto «Login.gif» 9. Luego cambiamos el tamaño de la celda a 200 x 150 píxeles aprox., lo suficiente como para que entre la nueva imagen.(cuidar que la tabla 2 mantenga las dimensiones, si aumentan podemos achicarla arrastrando las filas o las columnas). 10. Una vez que insertamos la foto «Login.gif», tenemos que insertar las siguientes fotos como muestra el ejemplo. 11. Lo siguiente es agregar comportamientos a los botones 1, 2, 3 y 4. Para ello tendremos que ir al menú Ventana >Comportamientos. 12. Hacemos clic en el botón del «+» y seleccionamos la opción que dice intercambio de imágenes. 13. En esta ventana tendremos que elegir la foto con la cual realizaremos el rollover. 14. Remplazar «boton1.gif» por «boton1b.gif» y así sucesivamente con los 3 botones restantes. 2

3 15. Por ultimo finalizaremos creando el diseño del Login. Para ello insertaremos un formulario en la última celda de la 1º fila. Clic dentro de la celda, luego en el botón de insertar para que despliegue la barra. 16. En la barra seleccionar la opción formulario, que es el primer botón de la misma. 17. Dentro del formulario insertaremos una tabla, la misma tendrá el 80 % del tamaño de la celda y será de 3 filas por 2 columnas. 18. Seleccionamos la última fila completa y la combinamos para quede como si fuera un sola división. 19. A la fila combinada le insertaremos un botón con el texto «Login» 20. En la columna número 1, filas 1 y 2. Pondremos el siguiente texto «ID» en la fila 1 y «PASS» en la fila Cambiamos la alineación de estas 2 celdas para que se aliñen a la derecha. 22. En la columna 2 filas 1 y 2 insertaremos 2 campos de textos, a estos no se les debe modificar la alineación. 3

4 4

5 23. Seleccionamos los 2 textos «ID» y «PASS» y les cambiamos el formato a «Encabezado 5». 24. cambiar el tamaño de las cajas de textos, para ello seleccionamos la primera haciendo un clic sobre ella, y completamos donde dice «Ancho Car» con el número 12. Repetir lo mismo para la 2º caja d texto. 25. Por último deberán crear un formulario de envío para este sitio con lo dado anteriormente. 5