Escuela en Ingeniera en Computacin Diseo Web Multimedia I

TRABAJAR CON CAPAS EN DREAMWEAVER MX 1 Propiedades de las capas Las capas tienen un buen uso para DHTML, es decir, HTML dinmico, pero tambin las podemos usar para la organizacin del HTML. Son un instrumento muy til para organizar la pgina, jugar con efectos o construir mens sin conocer programacin ni ms tecnologa. Primero que hacemos para comenzar a trabajar con capas es abrir el documento HTML en el que queremos aadir la capa. En nuestro caso vamos a crear el documento llamado ejem_capa. Una vez abierto se selecciona el icono Capa (Draw Layer) que se encuentra al lado derecho del icono Tabla (Insert Table). En la barra insertar ficha diseo.

Tenga en cuenta que las capas siempre hay que trabajarlas en las vistas Diseo y Cdigo (Show Code and Design Views) o Diseo (Show Design View). Otra forma de insertar la capa en una pgina es a travs del men Insertar (Insert) objetos de diseo (design object) Capa (Layer).

Con el cursor dibujamos el tamao de la capa como queramos verla a primera vista. No es necesario ser muy exactos porque luego podremos modificar el tamao cambiando los atributos pero, para ello, deberemos haber seleccionado la capa previamente.

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el smbolo , pero esto no resulta til cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a sta ( ), una de las principales ventajas de las capas es su versatilidad, ya que pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro en el margen superior izquierdo de cada una de ellas, donde tenemos un cuadradito, y desde ah con el ratn podemos moverlas a donde queramos con todo lo que contengan. Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrndolos hasta conseguir el tamao deseado.

Mover una capa

Cambiarle tamao a una capa

Podemos dibujar cuantas capas queramos. En esta ocasin vamos a dibujar dos, una junto a la otra y en distintos tamaos para jugar con su posicin y movimiento.

Cuando existen varias capas en un mismo documento, es preferible seleccionarlas. Para ello, a travs del panel Diseo (Design) elegimos la pestaa capas (Layer). Si no tenemos el panel Diseo a la vista podemos ir a Ventana (Windows) y a continuacin seleccionar Mostrar capas (Layers), Tambin se puede abrir el panel de capas directamente pulsando F2. En dicho panel aparecen las capas que hemos creado. Por defecto, vienen numeradas en ingls (layers 1) pero les podemos dar los nombres que queramos como si fueran un archivo corriente. Es importante escoger nombres significativos del contenido de cada capa para luego poder trabajar ms fcilmente con ellas. (En el ejemplo se denominan Edificio UN y bandera porque tenemos una idea muy clara del contenido que van a llevar. Si en principio slo quiere jugar con la distribucin de su pgina podra ponerles nmeros o letras).

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

Junto a las capas, hay un espacio en blanco pero que est activo para pulsar. Si lo hacemos, aparecer un ojo en diferentes posiciones segn el nmero de veces que pulsemos sobre l. Este ojo nos va a indicar si la capa est visible por defecto o no. Aunque suene complicado es una herramienta muy til para trabajar con capas. Si nos interesa cambiar slo una, le dejaremos a sta el ojo abierto, mientras que el resto lo podrn tener cerrado. Cuando lancemos la ventana al explorador, las capas aparecern al cargar la pgina o no, dependiendo de cmo hayamos dejado el ojo. Como veremos ms adelante, si lo que queremos es jugar con las capas para que stas aparezcan y desaparezcan, lo mejor ser dejar siempre el ojo cerrado por defecto.

El panel de propiedades de capas es un poco ms complicado que el habitual y nos conviene saber qu es lo que cambia cada uno de los atributos que podemos variar en este panel.

El ID de capa (Layer ID) es el nombre de la capa. Tambin puede ser cambiado a travs del panel Capas (Layers), haciendo doble clic sobre el mismo. Iz (L) y Sup (T) indican la distancia en pxeles que hay entre los lmites izquierdo y superior del documento y la capa. Este dato es muy importante, ya que le estamos diciendo a la capa dnde debe anclarse dentro del lugar donde la hemos insertado. An (W) y Al (H) indican la anchura y la altura de la capa. ndice-Z (Z-Index) es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs del panel Capas (Layers). Una capa ser solapada por aquellas capas cuyo ndice-Z sea mayor que el suyo.
Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

Vis (Vis) indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:
- Default (visibilidad segn el navegador) Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando) Visible (muestra la capa, aunque la pgina no se est viendo) Hidden (la capa est oculta)

Estos atributos cambian segn la posicin en la que tengamos el ojo junto a la capa. El atributo Default es el que marca que, una vez que la pgina est en Internet, la capa conserve la propiedad que el ojo le est marcando. Aunque cambiando estos comandos podemos controlar la posicin de nuestras capas en la pgina, en principio utilizaremos el sistema de tablas para estructurar su posicin dentro de la pgina. La razn es que no todos los navegadores de los usuarios de Internet en el mundo tienen versiones actualizadas y todava existen versiones 4 o inferiores y no todos los navegadores, como Netscape, por ejemplo, reconocen en versiones antiguas la ubicacin precisa de las capas. Pueden leerlas, pero no reconocen su situacin. Por tanto, si no queremos tener este tipo de inconvenientes, directamente, convertimos todo a una gran tabla asegurndonos, de esa manera, que todos van a poder visualizar tranquilamente nuestra pgina Web. Lo cierto es que si lo que queremos es jugar libremente con las capas, podemos moverlas, cambiarlas de tamao y situarlas en la pgina a nuestro gusto simplemente utilizando el cursor y nuestra imaginacin. 1.1 - Insertar imgenes desde archivos en una capa Una capa nos sirve como elemento bsico para colocar cualquier objeto como texto, imagen, tabla, etc. dentro de la pgina Web en la ubicacin que nos guste sin estar sujetos al editor de texto. Para insertar una imagen, lo nico que debemos hacer es activar la capa en la que queremos insertar la imagen, y una vez activada sta, situaremos el cursor dentro de la misma y pulsaremos el icono de insertar imagen.

Seguidamente, el programa nos dar la opcin de escoger un archivo de imagen, y una vez escogido el mismo, le damos a Aceptar (OK). Podemos repetir esta operacin en cuantas capas deseemos, tal y como se aprecia en la prxima pgina y con las imgenes que gustemos.

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

Sin embargo, hay que tener presente que esta posibilidad no nos da derecho a sobrecargar la pgina de imgenes. Recuerde que muchas imgenes juntas darn una sensacin de pesadez a la pgina, adems de que tardar mucho en cargar. 1.2 - Ordenar las capas con tablas Como apuntbamos ms arriba, es ms eficiente ordenar las capas con tablas para que puedan ser visualizadas en todos los navegadores. Una vez agregadas las capas necesarias y las ubicamos como deseamos, las seleccionamos haciendo clic sobre los bordes de las capas y presionando SHIFT, luego vamos al men Modificar (Modify), escogemos Convertir (Convert) y seleccionamos Capas a tablas (Layers to Table).

Nos aparece la siguiente ventana:

Aqu le indicaremos que convierta las capas a tablas con la mayor precisin posible (Most Accurate) y que utilice imgenes GIF transparentes (Use Transparent GIFs). En el caso de que ms adelante tengamos que mover algo de lugar y retocarlo, volveremos al men Modificar (Modify), escogeremos Convertir (Convert) y esta vez seleccionaremos el proceso contrario, convertir la tabla a capas (Tables to Layers). Despus podemos volver al estado anterior regresando al men modificar (Modify) seleccionando convertir (Convert) y escogiendo capas a tablas (Layers to Tables)

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

COMPORTAMIENTO 1. Ingrese al formulario que cre durante la gua anterior, o cree un formulario nuevo con las mismas caractersticas. 2. Presione la combinacin de teclas Shift+F3, o haga clic en el men Ventana||Comportamiento. Esto desplegar el Panel Comportamiento (Ver imagen inferior)

3. Haga clic en el comando + que se encuentra el Panel Comportamientos, luego haga clic en la opcin Validar formulario. 4. Se le mostrar una ventana similar a la inferior.

Valide el primer cuadro de texto como Obligatorio, luego pase al segundo, y valdelo como Direccin de correo electrnico y valdelo como Obligatorio. 5. Haga clic en el botn Enviar, luego haga clic en del panel Comportamiento, y elija Mensaje emergente. Escriba en el cuadro de texto que se le muestra:

Y luego haga clic en el botn aceptar. 6. Compruebe los cambios efectuados en su formulario 7. Utilice los comportamientos con el documento en Capas que creo, utilizando el atributo Mostrar-Ocultar Capas en el botn

+.

Importante: Si quieres tener un men despegable con capas y comportamientos visita este mini tutorial en http://pruebasoftware.blogspot.com/2009/04/menu-despegable-en-dreamweavercon.html

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

POSICIONAMIENTO WEB META ETIQUETAS O META TAGS

1. Para proceder a insertar una etiqueta meta debemos en primera instancia dirigirnos al panel Insertar (Ventana > Insertar Ctrl + F2), posteriormente seleccionaremos la opcin HTML de la lista de opciones que se encuentra en la parte izquierda de dicho panel.

2. La lista de opciones que utilizaremos para la insercin de etiquetas meta ser la segunda (lista de opciones head) de izquierda a derecha del panel Insertar. 3. Procederemos a insertar una descripcin de nuestra pgina, para tal efecto seleccionaremos Descripcin de la lista de opciones, inmediatamente podr apreciar el cuadro de dialogo Descripcin, deber ser breve y claro. Escriba el siguiente texto:

4. Usted podr apreciar los resultados de insertar la etiqueta meta que describe nuestra pgina en la vista Cdigo (Ver > Cdigo), ubquese dentro de las etiquetas head, observar una lnea de cdigo similar a la siguiente:

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

5. Para la insercin de las palabras claves o keywords procederemos de manera similar a lo anterior, pero en este caso seleccionaremos Palabras Claves de la lista de opciones. Usted inmediatamente observar el cuadro de dialogo Palabras clave, las palabras usadas deber separarlas con el uso de la coma (,).

6. El cdigo se visualizar de la siguiente manera:

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

7. Ahora bien, existen muchas ms etiquetas meta que las mencionadas previamente, para la insercin de ellas utilizaremos la opcin genrica que ofrece Dreamweaver, dicha opcin es Meta. 8. Suponga que desea insertar el autor de la pgina, para tal efecto seleccionaremos Meta de la lista de opciones, en el campo Nombre colocaremos Author, en el campo contenido colocaremos el nombre de dicho autor,

9. El resultado ser algo similar a esto:

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

Script
El uso de los script en las pginas web, deben ser de uso moderado, ya que una pgina web con demasiados script hace que esta no sea una pgina propiamente diseada. Se podra ocupar con aquellos elementos que el HTML no puede disear o trabajar, como por ejemplo un formulario de contacto, contadores de visitas, libro de visitas o un foro. Nuestros script de estos elementos los sacaremos del sitio web de iespana aprovechando que en ese mismo sitio subiremos nuestras pginas.

Formulario de contacto, contadores de visitas y libro de visitas

1. Cargamos en primer lugar la pgina www.iespana.es 2. Hacemos clic en 3. Llenamos el siguiente formulario Nombre de cmo quieres que se llame tu sitio ej.: josuefortisitca (Recuerda que no puedes dejar espacio en blanco porque es direccin web). Al final te quedara http://josuefortisitca.iespana.es

Escribe tu contrasea Repite tu contrasea Elige una pregunta secreta Contesta la pregunta secreta Escribe tu E-mail que mas ocupas

Selecciona tu sexo Digita tu apellido Digita tu nombre Inserta tu fecha de nacimiento Inserta tu direccin Inserta tu ciudad Inserta el cdigo postal (ej.: 503) Escoge tun pas
Pon tu nmero telefnico (opcional)

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

Pon tu empresa (opcional)

Inserta el cdigo de seguridad , el que aparece en el cuadro Selecciona las casillas de verificacin si quieres que te enven informacin
Selecciona mejor email secundario

Clic en el botn Accede

4. Clic en Acceder al sitio web 5. Clic en Activar servicios web esta opcin es la que tiene un chequecito 6. Despus que hayas esperado un momento te aparecern las siguientes opciones al final de la pagina

7. Sera bueno que revisaras todas pero hars clic en formulario de contacto 8. Te aparecer la siguiente informacin:

Este ser el script que copiaras cuando lo hayas configurado y validado

Inserta el email donde te mandaran el comentario y clic en OK Vista preliminar Configura las opciones y compralas en la vista preliminar

Al final clic en validar

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

9. Copias el script y te vas a dreamweaver a la parte donde pegaras el cdigo. Sera bueno que lo pongas en una tabla. 10. En dreamweaver te ubicas en donde quieres insertarlo y clic en pestaa cdigo

11. Pegas el cdigo y vuelves a la opcin diseo 12. No veras donde pegaste el cdigo pero presiona F12 y te aparecer tu formulario de contacto.

13. Si tienes conexin a internet puedes probar el formulario. Sigue la misma lgica para el contador de visitas, para el libro de visitas y las otras opciones ms.

Foro
Un foro es una pgina dinmica con el fin de plantear una pregunta abierta, para que los usuarios que deseen contestar puedan hacerlo. Claro guardando siempre el respeto correspondiente al contestar la pregunta. 1. Ingresamos al sitio http://miarroba.com/ 2. Clic en la opcin Nuevo usuario 3. Llena el formulario de registro para registrarnos

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

4. Tal vez se te pida llenar otros datos ms o ir a tu correo para confirmar tu ingreso. En fin cuando ests registrado entra como usuario y te fijas que ests conectado (esto es importante) 5. Cuando ests conectado haz clic en la opcin derecha de foro

6. Clic en la opcin nueva comunidad 7. Llenas el formulario. Acepta las condiciones de uso y despus clic en continuar

8. Te aparecer otro sub formulario. Llnalo y contina. (no aceptes la opcin de proteger lectura/escritura, porque pedir contrasea para ingresar un tema)

Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez

Escuela en Ingeniera en Computacin Diseo Web Multimedia I

9. Aparentemente no paso nada pero en la parte de arriba dir operacin realizada con xito.

10. Clic en volver 11. Aparecer la informacin general de tu foro y la direccin de URL es la que pegaras en tus botones y enlaces junto con http:// ej.: http://disenoweb.mforos.com

12. Arregla algunas opciones y sobre todo prueba tu Foro aqu y ya puesto en marcha en dreamweaver desde tus pginas web. Aqu puedes obtener Chat, libro de visitas y otras cosas ms. Casi todos tienen la misma lgica de creacin que el foro. Por cierto Felicidades ya llegaste al final de las guas de Dreamweaver. Ya viene Fireworks.
Instructores: Milagro de Arvalo, Josu Fortis, Christopher Lara, Carlos Narvez