Guia4de Dreamweaver

Escuela en Ingeniería en Computación

Diseño Web Multimedia I

Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez

TRABAJAR CON CAPAS EN DREAMWEAVER MX

1 – Propiedades de las capas

Las capas tienen un buen uso para DHTML, es decir, HTML dinámico, pero también las

podemos usar para la organización del HTML. Son un instrumento muy útil para

organizar la página, jugar con efectos o construir menús sin conocer programación ni

más tecnología.

Primero que hacemos para comenzar a trabajar con capas es abrir el documento HTML

en el que queremos añadir 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

diseño.

Tenga en cuenta que las capas siempre hay que trabajarlas en las vistas Diseño y Código

(Show Code and Design Views) o Diseño (Show Design View).

Otra forma de insertar la capa en una página es a través del menú Insertar (Insert) –

objetos de diseño (design object) – Capa (Layer).

Con el cursor dibujamos el tamaño de la capa como queramos verla a primera vista. No

es necesario ser muy exactos porque luego podremos modificar el tamaño cambiando

los atributos pero, para ello, deberemos haber seleccionado la capa previamente.




Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el

símbolo , 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

posición 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 ratón podemos

moverlas a donde queramos con todo lo que contengan. También pueden ser

redimensionadas pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir

el tamaño deseado.

Mover una capa Cambiarle tamaño a una capa

Podemos dibujar cuantas capas queramos. En esta ocasión vamos a dibujar dos, una

junto a la otra y en distintos tamaños para jugar con su posición y movimiento.

Cuando existen varias capas en un mismo documento, es preferible

seleccionarlas. Para ello, a través del panel Diseño (Design) elegimos

la pestaña capas (Layer). Si no tenemos el panel Diseño a la vista podemos ir a

Ventana (Windows) y a continuación seleccionar Mostrar capas (Layers), También se

puede abrir el panel de capas directamente pulsando F2.

En dicho panel aparecen las capas que hemos creado. Por defecto, vienen numeradas en

inglés (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 más fácilmente 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 sólo quiere jugar con la distribución de su página podría ponerles

números o letras).




Junto a las capas, hay un espacio en blanco pero que está activo para pulsar. Si lo

hacemos, aparecerá un ojo en diferentes posiciones según el número 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 sólo una, le dejaremos a ésta el ojo abierto, mientras que el resto lo

podrán tener cerrado. Cuando lancemos la ventana al explorador, las capas aparecerán al

cargar la página o no, dependiendo de cómo hayamos dejado el ojo. Como veremos más

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 más 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. También puede ser cambiado a

través del panel Capas (Layers), haciendo doble clic sobre el mismo.

Iz (L) y Sup (T) indican la distancia en píxeles que hay entre los límites izquierdo y

superior del documento y la capa. Este dato es muy importante, ya que le estamos

diciendo a la capa dónde 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 número de orden de colocación de las capas. Este valor

también puede cambiarse a través del panel

Capas (Layers). Una capa será solapada por aquellas capas cuyo índice-Z sea mayor

que el suyo.




Vis (Vis) indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:

- Default (visibilidad según el navegador)

- Inherit (se muestra la capa mientras la página a la que pertenece también se esté

mostrando)

- Visible (muestra la capa, aunque la página no se esté viendo)

- Hidden (la capa está oculta)

Estos atributos cambian según la posición en la que tengamos el ojo junto a la capa. El

atributo Default es el que marca que, una vez que la página esté en Internet, la capa

conserve la propiedad que el ojo le está marcando.

Aunque cambiando estos comandos podemos controlar la posición de nuestras capas en

la página, en principio utilizaremos el sistema de tablas para estructurar su posición

dentro de la página.

La razón es que no todos los navegadores de los usuarios de Internet en el mundo tienen

versiones actualizadas y todavía existen versiones 4 o inferiores y no todos los

navegadores, como Netscape, por ejemplo, reconocen en versiones antiguas la

ubicación precisa de las capas. Pueden leerlas, pero no reconocen su situación. Por

tanto, si no queremos tener este tipo de inconvenientes, directamente, convertimos todo

a una gran tabla asegurándonos, de esa manera, que todos van a poder visualizar

tranquilamente nuestra página Web.

Lo cierto es que si lo que queremos es jugar libremente con las capas, podemos

moverlas, cambiarlas de tamaño y situarlas en la página a nuestro gusto simplemente

utilizando el cursor y nuestra imaginación.

1.1 - Insertar imágenes desde archivos en una capa

Una capa nos sirve como elemento básico para colocar cualquier objeto como texto,

imagen, tabla, etc. dentro de la página Web en la ubicación 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 opción de escoger un archivo de imagen, y una

vez escogido el mismo, le damos a Aceptar (OK).

Podemos repetir esta operación en cuantas capas deseemos, tal y como se aprecia en la

próxima página y con las imágenes que gustemos.




Sin embargo, hay que tener presente que esta posibilidad no nos da derecho a

sobrecargar la página de imágenes. Recuerde que muchas imágenes juntas darán una

sensación de pesadez a la página, además de que tardará mucho en cargar.

1.2 - Ordenar las capas con tablas

Como apuntábamos más arriba, es más 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 precisión posible

(Most Accurate) y que utilice imágenes GIF transparentes (Use Transparent GIFs).

En el caso de que más 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).

Después podemos volver al estado anterior regresando al menú modificar (Modify)

seleccionando convertir (Convert) y escogiendo capas a tablas (Layers to Tables)




COMPORTAMIENTO

1. Ingrese al formulario que creó durante la guía anterior, o cree un formulario

nuevo con las mismas características.

2. Presione la combinación 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 opción 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 valídelo

como Dirección de correo electrónico y valídelo como Obligatorio.

5. Haga clic en el botón 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 botón 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 botón +.

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-dreamweaver-

con.html

http://pruebasoftware.blogspot.com/2009/04/menu-despegable-en-dreamweaver-con.html

http://pruebasoftware.blogspot.com/2009/04/menu-despegable-en-dreamweaver-con.html




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 opción 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 inserción de etiquetas meta será la

segunda (lista de opciones head) de izquierda a derecha del panel Insertar.

3. Procederemos a insertar una descripción de nuestra página, para tal efecto

seleccionaremos Descripción de la lista de opciones, inmediatamente podrá

apreciar el cuadro de dialogo Descripción, deberá ser breve y claro. Escriba el

siguiente texto:

4. Usted podrá apreciar los resultados de insertar la etiqueta meta que describe

nuestra página en la vista Código (Ver > Código), ubíquese dentro de las

etiquetas head, observará una línea de código similar a la siguiente:




5. Para la inserción 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 código se visualizará de la siguiente manera:




7. Ahora bien, existen muchas más etiquetas meta que las mencionadas

previamente, para la inserción de ellas utilizaremos la opción genérica que

ofrece Dreamweaver, dicha opción es Meta.

8. Suponga que desea insertar el autor de la página, 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:




Script

El uso de los script en las páginas web, deben ser de uso moderado, ya que una página

web con demasiados script hace que esta no sea una página propiamente diseñada. Se

podría ocupar con aquellos elementos que el HTML no puede diseñar 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 páginas.

Formulario de contacto, contadores de visitas y libro de visitas

1. Cargamos en primer lugar la página www.iespana.es

2. Hacemos clic en

3. Llenamos el siguiente formulario

Nombre de cómo quieres que se

llame tu sitio ej.: josuefortisitca

(Recuerda que no puedes dejar

espacio en blanco porque es

dirección web). Al final te

quedaría

http://josuefortisitca.iespana.es

Escribe tu contraseña

Repite tu contraseña

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 dirección

Inserta tu ciudad

Inserta el código postal (ej.:

503)

Escoge tun país

Pon tu número telefónico (opcional)

http://www.iespana.es/

http://josuefortisitca.iespana.es/




Pon tu empresa (opcional)

Inserta el código de seguridad ,

el que aparece en el cuadro

Selecciona las casillas de

verificación si quieres que te

envíen información

Selecciona mejor email secundario

Clic en el botón Accede

4. Clic en Acceder al sitio web

5. Clic en Activar servicios web esta opción es la que tiene un chequecito

6. Después que hayas esperado un momento te aparecerán las siguientes opciones

al final de la pagina

7. Sería bueno que revisaras todas pero harás clic en formulario de contacto

8. Te aparecerá la siguiente información:

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

compáralas en la vista

preliminar

Al final clic en validar




9. Copias el script y te vas a dreamweaver a la parte donde pegaras el código. Sería

bueno que lo pongas en una tabla.

10. En dreamweaver te ubicas en donde quieres insertarlo y clic en pestaña código

11. Pegas el código y vuelves a la opción diseño

12. No veras donde pegaste el código pero presiona F12 y te aparecerá tu formulario

de contacto.

13. Si tienes conexión a internet puedes probar el formulario.

Sigue la misma lógica para el contador de visitas, para el libro de visitas y las otras

opciones más.

Foro

Un foro es una página dinámica 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 opción Nuevo usuario para registrarnos

3. Llena el formulario de registro

http://miarroba.com/




4. Tal vez se te pida llenar otros datos más o ir a tu correo para confirmar tu

ingreso. En fin cuando estés registrado entra como usuario y te fijas que estés

conectado (esto es importante)

5. Cuando estés conectado haz clic en la opción derecha de foro

6. Clic en la opción nueva comunidad

7. Llenas el formulario. Acepta las condiciones de uso y después clic en continuar

8. Te aparecerá otro sub formulario. Llénalo y continúa. (no aceptes la opción de

proteger lectura/escritura, porque pedirá contraseña para ingresar un tema)




9. Aparentemente no paso nada pero en la parte de arriba dirá operación realizada

con éxito.

10. Clic en volver

11. Aparecerá la información general de tu foro y la dirección 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 páginas web.

Aquí puedes obtener Chat, libro de visitas y otras cosas más. Casi todos tienen la misma

lógica de creación que el foro.

Por cierto Felicidades ya llegaste al final de las guías de Dreamweaver. Ya viene

Fireworks.

http://disenoweb.mforos.com/

Guia4de Dreamweaver

Education

Transcript of Guia4de Dreamweaver