Aquí va la imagen de cabecera de mi web
Workspace DW

NUEVAS METODOLOGÍAS PARA LA DOCENCIA DEL DISEÑO DE APLICACIONES MULTIMEDIA

  • Metodologías docentes
  • Espacio de trabajo
  • Ayudas para diseñar
  • Comportamientos
  1. Lección magistral participativa: mediante el uso de las NTICs, la exploración dirigida de enlaces de internet y de la aplicación Dreamweaver CS4© y esta guía didáctica.
  2. Aprendizaje Basado en Problemas: los alumnos resolverán unos ejercicios y representarán las soluciones utilizando Dreamweaver CS4©.
  3. E-learnig: aprendizaje con medios electrónicos que utiliza la web como medio y recurso para la realización de actividades formativas. Se seguirán utilizando el grupo de Delicious (práctica 1) y el blog (práctica 2) para construir el conocimiento de forma cooperativa.
paso anterior

ELEMENTOS DEL ESPACIO DE TRABAJO

 paso siguiente
  1. Espacio de trabajo (configurar a partir de la opción Diseñador)
  2. Barras de herramientas (Menú Ver): Documento, Estándar y Programación
  3. Panel Insertar, Paneles Estilos y PA (Capas) e Inspector de Etiquetas, Paneles Archivos y Activos
  4. Panel de Propiedades (HTML o CSS)
  5. Vistas de Código y Diseño.DW Workspace
  6. Archivos enlazados desde la página
  7. Selector de etiquetas HTML
  8. Propiedades de la página web
  9. Preferencias (Menú Edición)

    Coloque el ratón sobre la imagen de la derecha para ampliarla, y mueva
     el ratón fuera de la imagen ampliada para volver a este apartado.
paso anterior

ADMINISTRACIÓN DEL SITIO WEB

 paso siguiente
  • Dw CS4 incluye una serie de funciones que permiten administrar un sitio localizadas o bien en el Panel ArchivosMenú Sitio o bien en el Panel Archivos para transferir archivos entre el Sitio Local y el Remoto (en servidor), crear carpetas para organizar los archivos, cambiar sus nombres, etc. Utilizando sólo este explorador Dw CS4 mantiene actualizados todos los enlaces de nuestras páginas.
  • La función Administrar sitio permite definirlo y establecer un servidor de prueba y un servidor remoto.
  • Utilice la función Comprobar página del Menú Archivo para buscar vínculos rotos y archivos huérfanos (archivos que todavía existen en el sitio sin vínculo con ningún otro archivo del sitio). Puede buscar en un archivo abierto, en una parte de un sitio local o en un sitio local completo.
  • Utilice la función Limpiar HTML del Menú Comandos para limpiar el código, pero antes haga una copia del archivo como backup para evitar acciones imprevistas. Más información en la Ayuda de Adobe.
  • Dreamweaver Help and Support
paso anterior

CREACIÓN DE PÁGINAS

 paso siguiente

Es posible crear páginas nuevas desde el inicio del programa, desde la barra de herramientas estándar, desde el Menú Archivo o desde el Panel Archivos.Nuevo Documento

Permite crear diferentes tipos de páginas y, para HTML, ASP, JSP y PHP, elegir una estructura predefinida para maquetar con capas y elegir la hoja de estilos CSS.

En el menú de la izquierda, desde la opción Página de muestra, es posible elegir una maquetación con marcos, o vincular una hoja de estilos predefinida.

 
  • Es muy interesante tener siempre visible el Panel de Archivos para fácilmente: seleccionar los archivos de trabajo, abrirlos, moverlos de carpeta, cambiar los nombres, copiar archivos desde el exterior del sitio al mismo, insertar imágenes y otros objetos arrastrándolos a una página, hacer enlaces con el señalizador señalizador de archivos del Panel de Propiedades al arrastrarlo sobre los archivos.
  • Escribiremos el nombre de nuestros archivos en minúsculas, sin espacios, sin acentos ni símbolos de puntuación especiales, para evitar problemas de accesibilidad en el servidorSelector de etiquetas.
  • DW dispone de un selector de etiquetas para seleccionar, editar o quitar etiquetas sin salir de la vista Diseño. Navegador de CódigoTambién, una función Navegador de Código que se activa seleccionando un objeto en la Vista de Diseño y manteniendo pulsada la tecla Alt (o en la barra de herr. de Documento) y muestra los códigos relacionados con la selección, por ejemplo, con clic en una regla CSS Dw nos llevará directamenteSelección de colores al código correspondiente.
  • En Propiedades de Página, si no escribimos nada en márgenes de la página (al menos un cero), el navegador siempre aplicará unos márgenes predeterminados que varían de un navegador a otro.
  • Eligiremos un color seguro para la Web (Cubos de color o Tono continuo).
  • Considere que una imagen de fondo decorativa puede dificultar la lectura de los textos que van sobre ella. .
  • Panel Inspector de EtiquetasUn comportamiento es una acción de algún tipo. Por ejemplo, es la acción de ocultar una capa, o la acción de validar un formulario, o la acción de abrir una ventana emergente, o la acción de comprobar qué tipo de navegador ha abierto nuestra página. Estos comportamientos están escritos en lenguaje Javascript. Ayuda de Adobe.
  • Los comportamientos se aplican desde el Panel Inspector de etiquetas. Una acción siempre se ejecutará en respuesta a un evento (en la columna de la izquierda) que se aplican a determinadas etiquetas HTML y no a todas. Por ejemplo, para aplicar algunas acciones a algunos objetos, es preciso añadirles una etiqueta <A> de Vínculo con destino javascript:;
  • Es posible insertar código javascript preprogramado por Dreamweaver CS4© desde el Panel Fragmentos, y hacer la llamada con el comportamiento correspondiente. Ayuda de Adobe.
  • Los widgets de Spry se comentarán en el capítulo de DHTML.
  • Las extensiones son funciones nuevas que se pueden añadir fácilmente a Dreamweaver. Ayuda de Adobe.
  1. Modifique el espacio de trabajo Diseñador y recree la misma situación de paneles que se muestra en la figura.
  2. Active la visualización de las barras de herram. Documento y Estándar.
  3. Edite las Preferencias desde Menú Edición. Active la marca de todos los Elementos Invisibles y elija su navegador para vista previa.
  4. Guarde el espacio de trabajo con el nombre Clase desde Menú Ventana / Diseño del espacio de trabajo.

    Paneles del espacio de trabajo
  
  1. Vamos a crear un nuevo sitio desde el Panel Archivos llamado daam, que almacene los archivos en una carpeta de vuestro dispositivo externo de almacenamiento de datos y que no se conecte a ningún servidor remoto.
  2. Explore los iconos del Panel Archivos y las opciones del menú desplegable.
  3. En la raíz del sitio cree la carpeta practica3 y dentro las carpetas textos, imagenes, animaciones, audio, video y javascript.
  
  1. Cree la página web estática ejercicios.html dentro de la carpeta practica3
  2. Explore y defina las Propiedades de la Página. El título es muy importante.
  3. Explore las posibilidades del Panel Insertar y del Panel Activos. Personalice la página. Utilice el Selector de Etiquetas para editar el código desde la Vista de Diseño o para marcar rápidamente la posición de un elemento en la Vista de Código.

    Editor de código

  4. Practique la inserción de comportamientos con el Panel Inspector de Etiquetas.

  1. Descargue e inserte en su página ejercicios.html la imagen de la figura, junto a un pequeño párrafo introductorio sobre La Rioja. Alinee la imagen a la derecha Elemento alineado .
  2. Cree con ella un mapa de imagen con 4 zonas interactivas que abran 4 páginas distintas con propiedades diferentes (color, título, etc.). Busque algún texto o imagen de cada tema para personalizar cada página de cada zona de La Rioja. Cree las carpetas necesarias para ordenar las páginas y archivos.

Mapa de La Rioja

Terminología práctica:

  • La unidad em es igual a la altura de la letra del elemento en el que se usa.
  • El parámetro margin especifica la cantidad de espacio entre el borde de un elemento (o el relleno si no hay borde) y otro elemento exterior.
  • El parámetro padding especifica la cantidad de espacio entre el contenido (interior) de un elemento y su borde (o el margen si no hay ningún borde).
  • Las imágenes en una página web tienen formatos GIF, JPEG o PNG, el primero se emplea en imágenes con pocos colores y los otros para imágenes de miles de colores (primero y tercero con transparencia).
  • Los elementos PA tienen Posición Absoluta y ésta se calcula respecto al punto superior izquierdo de la página o de la capa que lo contiene. La Posición Relativa se calcula respecto al lugar en el que se escribió la etiqueta del elemento a posicionar (siguen el flujo HTML).
NUEVAS METODOLOGÍAS PARA LA DOCENCIA DEL DISEÑO DE APLICACIONES MULTIMEDIA by
MERCEDES PEREZ DE LA PARTE, EMILIO JIMENEZ MACIAS, JULIO BLANCO FERNANDEZ Y EDUARDO MARTINEZ CAMARA
is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License