EJERCICIO 9: Marcos (Frames)

Transcripción

1 EJERCICIO 9: Marcos (Frames) El primer paso será iniciar una nueva página web, a esta página procederemos a crear una distribución de marcos. Para ello primero seleccionaremos la caja de herramientas de diseño, Desde la herramienta de selección de marcos, escogeremos la combinación, Después de activar los Marcos superior e izquierdo anidado el aspecto de la página web será, Nos colocaremos en el frame superior haciendo clic, de forma que quede seleccionado,

2 Macromedia Dreamweaver MX 2 Ahora desde el botón de propiedades de la página seleccionaremos un color para el fondo de esta parte superior de la web, El resultado después de aceptar el color de fondo, Continuaremos seleccionando el marco izquierdo y repetiremos la operación anterior dándole un color como en la muestra,

3 Macromedia Dreamweaver MX 3 Finalmente seleccionaremos el marco central y le daremos de la misma forma que los marcos anteriores un color, Después de determinar el aspecto de cada marco, procederemos a darle nombre a cada uno de los marcos para poder después llamarlos para cargar los contenidos que queramos.

4 Macromedia Dreamweaver MX 4 Repetimos esta operación con los otros dos marcos, de forma que le daremos al marco izquierdo en lugar del nombre LeftFrame Menú y al marco mayor de la página web le cambiamos el nombre de MainFrame Contenido,

5 Macromedia Dreamweaver MX 5 En el marco superior introduciremos un texto a modo de titulo, después de introducir el texto respetaremos el formato de la siguiente imagen de ejemplo, El siguiente paso será modificar la anchura del marco izquierdo para dejar más espacio para poder después introducir el texto de las opciones necesarias para completar la web, A continuación introduciremos el texto de las diferentes opciones que formaran el contenido del marco izquierdo de la página web.

6 Macromedia Dreamweaver MX 6 Después de introducir el texto en el marco izquierdo, daremos el aspecto necesario para obtener la imagen. Después de modificar el aspecto procederemos a asignar a cada texto del menú un enlace adecuado para ello seleccionaremos el primer texto el menú Ejercicio 1 y desde la pantalla de propiedades introduciremos los datos que muestra la siguiente imagen,

7 Macromedia Dreamweaver MX 7 En el lugar del nombre del vínculo tendremos que localizar mediante el icono de la carpeta, el nombre del primer ejercicio que hemos realizado en este curso. Repetimos esta operación con los 7 ejercicios (las opciones del menú), de esta forma al guardar el ejercicio dando nombre a cada marco de esta web, y mediante la tecla F12 realizaremos una vista en nuestro navegador del funcionamiento de la web, y podremos observar como al hacer clic en una opción del menú el contenido aparecerá en el marco principal contenido.

8 Macromedia Dreamweaver MX 8

9 Macromedia Dreamweaver MX 9 EJERCICIO 10: Capas (Layers) En primer lugar vamos a crear un documento nuevo de DreamWeaver, después desde las opciones de propiedades de página daremos color al fondo de la página web. El resultado de esta operación es, El siguiente paso será desde la herramienta de tablas crear una tabla con una fila y cuatro columnas,

10 Macromedia Dreamweaver MX 10 Después procederemos a insertar en cada celda de la tabla una imagen diferente, mediante el icono de imagen, Repetiremos la operación anterior hasta tener toda la tabla llena de iconos, como muestra la siguiente imagen,

11 Macromedia Dreamweaver MX 11 También centraremos la tabla mediante la opción de alinear que aparece en la parte inferior de la pantalla como se indicaba en la imagen anterior. Después de este paso cambiaremos la barra de herramientas, haciendo clic en la lista de barras de herramientas disponibles en DreamWeaver, El siguiente paso es crear una capa en la que especificaremos unas características mediante las diferentes opciones de configuración de la parte inferior de la pantalla de DreamWeaver. Desde las opciones inferiores de la pantalla colocaremos los valores como muestra la imagen ampliada,

12 Macromedia Dreamweaver MX 12 El nombre de la capa le pondremos terra, también seleccionaremos un color para el fondo de la capa, y finalmente colocaremos la visibilidad de la capa a hidden (oculto), después de realizar este paso todavía es visible la capa, pues estamos en el modo diseño, cuando realicemos la ejecución en el navegador es cuando no se visualizara. Dentro de la capa escribiremos el siguiente texto, Colocaremos también las propiedades adecuadas para respetar el formato, Dibujaremos otra capa nueva encima de la anterior y le daremos otro color, y las características que se muestran en la imagen siguiente,

13 Macromedia Dreamweaver MX 13 Repetiremos la misma operación con otras dos capas a las que daremos un nombre y color diferente a cada una, Y finalmente,

14 Macromedia Dreamweaver MX 14 Finalmente daremos a cada imagen de la tabla el comportamiento necesario para que al realizar un clic muestre la capa adecuada. Para ello haremos clic en la imagen de terra y desde la parte derecha de la pantalla en la pestaña de comportamiento haremos el siguiente paso, Al activar la opción de la lista Mostrar Ocultar capas aparecerá la pantalla para determinar el estado que le queremos dar a las capas, Seleccionamos cada capa y con el botón mostrar y ocultar colocaremos al igual que la pantalla anterior.

15 Macromedia Dreamweaver MX 15 Al aceptar la pantalla anterior de mostrar u ocultar las capas, la persiana de comportamientos quedara de la siguiente manera, El siguiente paso es mostrar una vista dividir, En este momento se visualiza el código del comportamiento que hemos colocado anteriormente. Desde el código rectificaremos el siguiente comando, El comando onload lo cambiaremos por onclick. Repetiremos la operación con las otras tres imágenes de la tabla, Al final la pantalla de código tendrá este aspecto, Finalmente almacenamos la página web y pulsamos la tecla F12 para abrir el navegador,

16 Macromedia Dreamweaver MX 16 Al hacer clic en un icono de la tabla se mostrara solamente el contenido de la capa adecuada,

17 Macromedia Dreamweaver MX 17 EJERCICIO 11: Formulario Creamos un nuevo documento de Dreamweaver y mediante las propiedades de página le damos color al fondo. El siguiente paso será mediante la herramienta de tabla insertar una tabla de 1 fila por 1 columna, después mediante las propiedades centrar la tabla en la pagina web, como la imagen siguiente,

18 Macromedia Dreamweaver MX 18 Dentro de la tabla que hemos creado iniciaremos la creación de un formulario para que el usuario pueda solicitarnos información, Cambiamos la barra de herramientas y escogemos las herramientas de Formularios, Mediante el primer botón de la caja de herramientas Formulario iniciamos la creación del mismo,

19 Macromedia Dreamweaver MX 19 Empezamos a introducir los conceptos que formaran el formulario, aunque primero dimensionaremos un poco la anchura de la tabla, tal y como muestra la imagen siguiente, Después de introducir el concepto procederemos a insertar el campo que se enviara por mail desde el formulario. Utilizamos el botón de campo de texto, Recordamos que si es necesario ir ampliando la anchura de la tabla la ampliamos para que los campos nos quepan al lado de los conceptos. A continuación repetimos el paso anterior hasta tener el formulario como la imagen siguiente,

20 Macromedia Dreamweaver MX 20 Después de los campos anteriores seguimos introduciendo el siguiente pero en este en lugar de colocar un campo de texto colocaremos un campo de botón de opción, Y para finalizar colocaremos un campo de lista desplegadle para poder seleccionar la provincia mediante la lista predefinida,

21 Macromedia Dreamweaver MX 21 Después de insertar el campo de tipo lista, mediante las propiedades que tenemos en la parte inferior de la pantalla de DreamWeaver, seleccionaremos la opción Valores de lista y procederemos a crear la lista desplegadle, En la pantalla anterior iremos escribiendo las diferentes provincias y pulsando el botón + para añadir mas provincias, finalmente pulsaremos aceptar. Finalmente haremos clic en la línea que delimita el formulario que estamos creando y en la parte inferior de la pantalla, donde tenemos las propiedades del formulario, en la opción Acción escribiremos la siguiente línea,

22 Macromedia Dreamweaver MX 22 Donde tendremos que escribir la dirección de correo electrónico donde se enviaran los datos introducidos en el formulario, recordamos que el comando (malito:) es obligatorio para el envió de datos mediante . Finalmente almacenamos el ejercicio en nuestro ordenador.

23 Macromedia Dreamweaver MX 23 EJERCICIO 12: Barra de Navegación Primero creamos un documento nuevo de DreamWeaver, después desde las propiedades de página damos color al fondo de la misma, Desde la barra de herramienta de diseño seleccionamos la herramienta de barra de navegación Y desde la pantalla que aparece empezamos a determinar las diferentes opciones que queremos que aparezcan en la barra de navegación que estamos creando, Colocamos un nombre de elemento, una imagen de arriba y la URL donde tiene que ir al hacer clic en la imagen de la barra de navegación,

24 Macromedia Dreamweaver MX 24 Repetimos la operación insertando otra opción nueva pulsando clic en el signo + Finalmente almacenaremos la página web y la reproduciremos en nuestro navegador con la tecla F12. Al ejecutarse el ejercicio en el navegador observaremos como nos muestra las imágenes que hemos especificado en imagen arriba y al hacer clic en cualquiera de ellas se abra la página web.

25 Macromedia Dreamweaver MX 25 EJERCICIO 13: Enlaces a páginas Empezaremos iniciando desde Dreamweaver un nuevo documento de pagina web, como es habitual desde la opción de propiedades de pagina daremos color al fondo de la misma, Después desde la barra de herramientas insertaremos una capa, a la cual le daremos el nombre de mapa, Dentro de la capa introduciremos el texto y las características siguientes,

26 Macromedia Dreamweaver MX 26 También seleccionaremos un vinculo el cual seleccionaremos desde el icono correspondiente a la opción abrir, y seleccionaremos el ejercicio que realizamos anteriormente del mapa, También seleccionaremos el marco de destino, en este caso escogeremos el destino _blank para que los ejercicios se abran en una nueva ventana del navegador y así no perder la pagina principal.

27 Macromedia Dreamweaver MX 27 Repetiremos esta opción también, creando una capa para colocar un enlace que abra el ejercicio del formulario, y una tercera capa para crear un enlace al ejercicio de tablas, el resultado final será, Finalmente almacenaremos la página web y mediante la tecla F12 reproduciremos la web en el navegador para observar como se abren nuevas ventanas para mostrar cada resultado.

29 Macromedia Dreamweaver MX 29 EJERCICIO 14: Comportamientos I (Behaviours) Creamos un nuevo documento y le damos color de fondo mediante la opción adecuada a tal efecto, Después desde la opción del menú principal activaremos la opción Ventana y dentro la opción Comportamientos, Al activar la opción aparece la persiana correspondiente desde la cual podremos activar un comportamiento para reproducir una secuencia de audio de forma automática al reproducir la web,

30 Macromedia Dreamweaver MX 30 Pulsaremos clic en el signo + de los comportamientos y dentro de la lista desplegadle activaremos la opción Controlar sonidos, y desde la pantalla resultante activamos examinar y localizamos archivos de audio wav, mp3.

31 Macromedia Dreamweaver MX 31 Pulsamos aceptar en todas las pantallas que están abiertas, de esta forma aceptaremos la selección del archivo de audio. El resultado es una secuencia donde indica que onload, es decir, que al cargar la web se reproducirá el archivo de audio seleccionado anteriormente. Finalmente almacenamos la web y la reproducimos en el navegador para comprobar la reproducción del sonido.

33 Macromedia Dreamweaver MX 33 EJERCICIO 15: Comportamientos II (Behaviours) Iniciamos una nueva página web a la cual le daremos mediante las propiedades de página una imagen de fondo, Aceptamos la imagen y la web ya tiene como fondo una imagen,

34 Macromedia Dreamweaver MX 34 Introduciremos dentro de la página web una tabla de 1 columna y 3 filas, después de insertar la tabla la centraremos en medio de la web con las opciones de alineación, Dentro de cada celda de la tabla insertaremos una imagen,

35 Macromedia Dreamweaver MX 35 Después seleccionaremos la imagen de la primera celda de la tabla y desde la persiana de comportamientos pulsaremos el signo + y dentro de las diferentes opciones seleccionaremos, Y de la pantalla que aparece introduciremos el mensaje que queremos que aparezca en una pantalla emergente a modo de aviso, Repetiremos este paso con las otras dos imágenes que quedan en la tabla y colocaremos los mensajes oportunos dependiendo de la imagen que se ha clicado. Finalmente, la pantalla de comportamientos tendrá la imagen siguiente,

36 Macromedia Dreamweaver MX 36 Después almacenamos la página web en nuestro ordenador y mediante la tecla F12 reproduciremos el ejercicio en el navegador, el resultado será, Al hacer clic en cualquier logotipo aparece la ventana emergente con el texto que antes hemos determinado.

37 Macromedia Dreamweaver MX 37 EJERCICIO 16: Creación de servidor FTP En este documento veremos como crear un servidor FTP desde Dreamweaver para subir al servidor una página web. En primer lugar recuperaremos el ejercicio recopilatorio que trabaja con marcos, con el documento en dreamweaver abriremos la persiana de Archivos como se muestra en la imagen siguiente, Después desde la línea de menú accederemos a la opción Sitio al hacer clic en esa opción aparece la lista,

38 Macromedia Dreamweaver MX 38 Seguidamente en la pantalla que aparece seleccionaremos mediante un clic en la opción Administrar sitios, pulsaremos Nuevo -- Servidor FTP, Dentro de la ventana resultante introduciremos los datos de nuestro ftp, esos datos nos los ha facilitado nuestro servidor de Internet. Dependiendo del servidor que estemos utilizando tendremos que activar alguna opción de FTP pasivo o FTP seguro, todo depende de las indicaciones del servidor de Internet. Después para comprobar que la conexión funciona utilizaremos el botón Prueba. Si la conexión no es correcta aparecerán las siguientes pantallas indicando el error de conexión,

39 Macromedia Dreamweaver MX 39 Si por el contrario conecta al servidor nos mostrara, Al aceptar la pantalla de prueba, pulsaremos el botón Listo para realizar la conexión, Al pulsar listo aparecen las carpetas que existen en nuestro hosting,

40 Macromedia Dreamweaver MX 40 Después de este paso simplemente hay que hacer clic en archivo de la línea de menú y escoger la opción de Guardar en servidor remoto de esta forma almacenaremos la pagina web directamente en el hosting de Internet,