Guia4de Dreamweaver

Escuela en Ingeniería en Computación
Diseño 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 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.

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


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



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)



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


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.


Guia4de Dreamweaver

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (9)

En vedette

En vedette (20)

Similaire à Guia4de Dreamweaver

Similaire à Guia4de Dreamweaver (20)

Dernier

Dernier (20)

Guia4de Dreamweaver