Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I

 ...
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I


...
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I


...
Escuela en Ingeniería en Computación
                                                             Diseño Web Multimedia I
...
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I


...
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I
  ...
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I

 ...
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I


...
Escuela en Ingeniería en Computación
                                                             Diseño Web Multimedia I
...
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I

 ...
Escuela en Ingeniería en Computación
                                                                Diseño Web Multimedia...
Escuela en Ingeniería en Computación
                                                             Diseño Web Multimedia I
...
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I
  ...
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I


...
Próxima SlideShare
Cargando en…5
×

Guia4de Dreamweaver

1.089 visualizaciones

Publicado el

Visitanos en http://www.josuefortis.info para mayor informacion del diseño web y multimedia. Esta guia trata del uso de las capas, comportamientos, etiquetas metas y Script.

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.089
En SlideShare
0
De insertados
0
Número de insertados
38
Acciones
Compartido
0
Descargas
150
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Guia4de Dreamweaver

  1. 1. 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
  2. 2. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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). Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  3. 3. Escuela en Ingeniería en Computación Diseño 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 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. Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  4. 4. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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. Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  5. 5. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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) Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  6. 6. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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 Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  7. 7. Escuela en Ingeniería en Computación Diseño 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 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: Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  8. 8. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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: Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  9. 9. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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: Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  10. 10. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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) Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  11. 11. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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 Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  12. 12. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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 Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  13. 13. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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) Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  14. 14. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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. Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez

×