Manual Diseño Web

Especialidad:
COMPUTACIN E INFORMTICA
CICLO I
ASIGNATURA:
DISEO WEB
Lima - Per
Carrera: Computacin e Informtica
Curso: Diseo Web
SILABO ACADMICO
I. Identificadores del programa Carrera: Computacin e Informtica DISEO WEB I Ciclo: I Cdigo: Tipo: Curso Sesin: 2 hrs. Horas: 40 pedaggicas Totales : 40 Teora: 0 Prctica : 40
Sesiones x Semana: 1
II. Ubicacin del programa Antecedentes -Requisitos: -- Diseo Grfico I III. Contenidos Contenido INTRODUCCION - CREACION DE UN SITIO WEB Programas de Macromedia y Editores visuales para Web. Novedades en Macromedia Dreamweaver 8. Entorno de trabajo: Definicin de un Sitio Web. Estructura de un Sitio Web y manejo del Panel Archivos. Propiedades y caractersticas de una Pgina Web. Exportacin y vista previa. Insercin de elementos textuales y caracteres: Manejo de sus atributos, opciones desde la Barra Insertar, Barra de Mens y el Panel Propiedades. IMGENES- HIPERVINCULOS ELEMENTOS INTERACTIVOS Manejo de Imgenes: - Insercin, Modificacin y Edicin. - Opciones de insertar imgenes: Marcador, Sustitucin, etc. - Mapas de Imagen. Multimedia: - Insercin de elementos Flash: Animacin, Botn, Texto, etc. - Interactividad con hipervnculos tipos TABLAS Insercin y manejo de Tablas: - Panel Propiedades y atributos en general para una Tabla. - Panel Propiedades y atributos en general para Celdas. - Opciones de manejo desde la barra de Mens.
Consecuentes Todos los siguientes mdulos
Actividad - Reconoce el entorno de trabajo para el diseo de pginas web y sus principales herramientas. - Aprende a crear sitios web, mediante una planificacin de pginas informativas de acuerdo a un tema especifico. - Aplica formatos a los textos y reconoce etiquetas.
Sesin
- Inserta imgenes dentro de una pgina web. - Disear marcadores para el enlace de reas fijas en una pgina - Inserta enlaces con otras pginas web
- Utiliza las tablas para organizar elementos dentro de una web - Aplica formatos a las tablas, para combinar y dividir celdas de trabajo - Reconoce etiquetas para el diseo web
Curso: Diseo Web
Opciones Avanzadas de trabajo con Tablas: Exportacin e Importacin de Tablas. Ordenamiento y Formato de Tablas. ESTILOS Y CAPAS Panel Diseo, Estilos: - Definicin y aplicacin de estilos: Caractersticas y Tipos. - Archivos fuente CSS. - Combinacin de colores. Panel Diseo, Capas: Definicin y aplicacin de capas. Personalizacin de contenido Web mediante Plantillas de estilos. PRIMERA PRACTICA CALIFICADA 01 - Disea estilos para mejorar el aspecto de los textos y prrafos - Inserta capas para fijar objetos dentro de una pgina web. - Aplica plantillas para mejorar la apariencia del sitio web - Medir el nivel alcanzado por el alumno en las primeras cuatro semanas de clase - Divide la pgina en sectores para una mejor visualizacin. - Reconoce los controles bsicos y su utilidad en el diseo web. - Utiliza formularios para almacenar informacin y tener un respuesta interactiva con el usuario. - Aplica la forma de envi de informacin de un formulario a una cuenta de correo electrnico. 6 4
MARCOS Y FORMULARIOS Definicin de Marcos: Modificacin y manejo desde el Panel Propiedades y el Panel Marcos. Opciones de Guardar y Abrir Marcos. Manejo de los Marcos mediante la barra de Mens. Definicin de Formularios: Control de Atributos desde el Panel Propiedades. Campos de texto, campos ocultos y reas de texto. Casillas de verificacin y botones de opcin. Lista/Men. Campos de imagen y de bsqueda. Botones. - Propiedades y atributos de los objetos de Formulario. PLANTILLAS - LINEAS DE TIEMPO Creacin de Plantillas. Definicin de regiones editables. Modificacin de Plantilla y actualizacin de documentos. Definicin de atributos editables. Definicin de regin opcional. Definicin de regin repetida. Definicin de Lneas de Tiempo: Panel Lneas de tiempo y sus caractersticas. Opciones para la animacin. - lbum Web. COMPORTAMIENTOS Panel Comportamientos Definicin de los Comportamientos. Tipos de Comportamientos:
- Utiliza plantillas para definir modelos de pgina en el sitio web - Realiza animaciones usando la lnea de tiempo - Disea un lbum web con fotos personales
- Define comportamientos para agregar interactividad en las pginas web - Realiza intercambio de
Curso: Diseo Web
Abrir ventana del navegador. Comprobar navegador. Definir texto. Intercambiar imagen. Ir a URL. Mensaje emergente. Men emergente. Etc. Aplicacin y edicin de comportamientos. BASES DE DATOS Sitio Web local y Sitio Web remoto. Tecnologas y caractersticas en los Servidores. Sistemas y Herramientas para trabajar Bases de datos. Panel Aplicacin: Bases de Datos. Vinculaciones. Comportamientos del Servidor. Componentes. - Configuracin de un Servidor de prueba. - Conexin a Bases de Datos. - Trabajando con ASP y Microsoft Access. Mantenimiento de registros: - Insercin de registros. - Actualizacin de registros. - Borrar registros. Examen Parcial
imgenes y define texto en la barra de estado - Inserta mens emergentes con contenido interactivo
- Define un sitio web para interactuar con informacin contenida en un BD - Utiliza paneles de diseo para conectar a registros de datos - Disea una interfaz maestro detalle con datos almacenados en tablas. - Realiza insercin de registros para almacenarlos en un BD 9
- Comprobar los conocimientos adquiridos desarrollando una pgina web comercial de empresa. - Reconoce el entorno de flash y sus principales herramientas de trabajo. - Aplica la forma de guardar pelculas e inserta fondo al escenario. - Realiza una vista previa en el navegador web.
10
MACROMEDIA FLASH I. Fundamentos y nociones generales sobre el entorno vectorial. II. Novedades en Macromedia Flash 8. III. Entorno del Programa: 1. Barra de Mens. 2. Barra de Herramientas. 3. Vistas y Ventana principal del documento. 4. Paneles. Conceptos bsicos: Resolucin, Formatos, Animaciones, etc. Gestin de documentos: Abrir, Guardar, Cerrar, etc. VISUALIZACION, FORMATOS Y HERRAMIENTAS - Opciones de visualizacin en Flash: - Regla. - Cuadrcula. - Gua. - Preferencias en el Programa. - Importacin/Exportacin.
11
- Utiliza la cuadricula para posicionar los objetos en el escenario de trabajo. 12 - Importa imgenes, y utiliza los paneles para transformar objetos vectoriales
Curso: Diseo Web
Vistas previas. Paneles de Diseo: Alinear, Informacin, Transformar, Muestras de color, Mezclador de colores, Escenas. Barra de Herramientas de Flash: Herramientas grficas. Herramientas de seleccin. Herramientas de visualizacin. Herramientas de color. Herramientas de pintura. Herramientas de transformacin. Herramientas texto.
- Utiliza herramientas graficas y aplica degradados en cada objeto vectorial - Disea textos artsticos y utiliza el panel propiedades para dar formato a los textos.
HERRAMIENTAS GRAFICAS - Herramienta Pluma: Utilizacin y caractersticas. - Herramienta Pincel: Utilizacin y caractersticas. - Herramienta Cubo de Pintura: Utilizacin y caractersticas. - Herramienta Bote de tinta. - Herramienta Cuentagotas. - Herramienta Borrador: Utilizacin y caractersticas. - Herramienta Transformacin de relleno. - Herramienta Transformacin libre. - Panel Muestras de color y Mezclador de colores. EDICION VECTORIAL, HISTORIAL Y COMANDOS Trabajando con los objetos: Copiar, Cortar, Pegar, etc. Editando los objetos: Transformar lneas rectas en curvas y viceversa. Transformacin y conversin de objetos mediante la seleccin y subseleccin. Agrupar/Desagrupar Modificar objetos: Escalar. Distorsionar. Rotar. Sesgar. Envoltura. Transformacin libre. Convertir Mapas de bits a Vectores: Trazar mapa de bits. SEGUNDA PRACTICA CALIFICADA LINEA DE TIEMPO Y ANIMACION Conceptos bsicos de la animacin. Panel Lnea de Tiempo: Caractersticas generales.
- Trabaja con formas bsicas, aplicando colores de relleno - Aplica transformacin a los objetos - Comprobar el uso de formas en la creacin de banners publicitarios 13
- Emplea efectos agrupando objetos de diferentes formas. - Reconoce las tcnicas de transformacin de objetos - Edita objetos mediante la conversin de mapa de bits. 14
I. Medir el nivel alcanzado por los alumnos durante las sesiones 11 a 14 - Reconoce la lnea de tiempo para aplicar efectos en cada fotograma.
15
16
Curso: Diseo Web
Pelculas:. Propiedades de una pelcula. Uso de lneas de tiempo. Capas: Crear, ocultar, bloquear. Insertar, renombrar y administrar las propiedades. Fotogramas: Tipos de fotogramas. Insertar, Copiar, Cortar, Pegar, Eliminar fotogramas. Seleccionar y mover fotogramas. Ampliar y reducir la duracin de los fotogramas. Previsualizar la animacin en el navegador. Animaciones en Flash: - Animacin fotograma a fotograma. - Animacin X interpolacin: - Interpolacin de Forma. - Interpolacin de Movimiento. SIMBOLOS Y PANEL BIBLIOTECA Panel Biblioteca: Utilizacin y caractersticas. Smbolos: - Convertir objetos en smbolos. - Tipos de smbolos: Grficos, Botones y Clips de pelcula. - Gestin de smbolos e importacin de archivos externos. Interpolacin de Movimiento: Animar X Movimiento. Animar X Color. Mscaras: Utilizacin y caractersticas. Capas de Guas de movimiento: Utilizacin y caractersticas. Panel Escenas: Insertando Escenas. Trabajando con Escenas. AUDIO Y VIDEO AUDIO: Nociones y fundamentos. El audio en Flash. Formatos y caractersticas en Flash (Panel Propiedades y Biblioteca). Importar/Exportar contenido de audio en Flash. Trabajando con el audio. VIDEO: Nociones y fundamentos. - El vdeo en Flash. - Formatos y caractersticas en Flash (Panel Propiedades y Biblioteca). - Importar/Exportar contenido de vdeo en Flash. - Trabajando con el vdeo. -
- Reconoce las capas para organizar los objetos dentro del escenario. - Emplea tcnicas de animacin para realizar animaciones. - Realiza animaciones con texto e imgenes - Disea banners publicitarios - Visualiza las animaciones en el navegador
- Reconoce la utilidad de los smbolos dentro de una animacin o pelcula - Emplea efectos con interpolacin x forma y movimiento - Disea efectos con la lnea de tiempo - Realiza pelculas interactivas con el uso de escenas.
17
- Comprende la utilidad del audio y sonido dentro de una animacin - Realiza animaciones multimedia para presentaciones de alto contenido interactivo - Utiliza componentes multimedia
18
Curso: Diseo Web
XIX. EXAMEN FINAL
XX. EXAMEN SUSTITUTORIO
II. Medir el nivel de conocimiento alcanzado por el alumno durante toda la segunda unidad formativa III. Medir el nivel de conocimiento alcanzado por el alumno durante todo el curso
19
20
IV. Criterios de evaluacin y acreditacin Institucionales de acreditacin: Matriculado Mensualidad al da Asistencia mnima de 70% de las clases programadas. Entrega oportuna de trabajos. Certificacin con calificacin mnima de 13.00 (Trece) y Constancia con calificacin de 11.00 (Once) Evaluacin del mdulo: Practicas Calificadas (PC) P.U. = (PC+Part)*0.5 + EP 2 Exmenes: parcial (EP), final (EF) S.U. = (PC+Part)*0.5+Trab+EF 3 Trabajos encargados (TE)
Curso: Diseo Web
IT - Expert
Secretariado Ejecutivo de Sistemas
Contabilidad Computarizada
Computacin e Informtica
Diseo Grfico
COMPUTACIN E INFORMTICA
Ensamblaje mantenimiento y Reparacin de PC.
Fast Office
Asistente de Gerencia
DISEO WEB
Secretariado Ejecutivo Computarizado
Curso: Diseo Web
INTRODUCCIN A DREAMWEAVER
Macromedia Dreamweaver es un editor HTML para disear, codificar y desarrollar sitios, pginas y aplicaciones Web. Dreamweaver le proporciona tiles herramientas tanto si desea controlar manualmente el cdigo HTML como si prefiere trabajar en un entorno de edicin visual. Con Dreamweaver se puede controlar todo el proceso de creacin de un sitio web: creacin del sitio, estructurar el rbol de links, disear las pginas y la subida de nuestro trabajo a nuestro servidor web. Por ejemplo, puede crear y editar imgenes en Macromedia Fireworks o en otra aplicacin de grficos y su posterior importacin directa a Dreamweaver, o bien aadir objetos Macromedia Flash. Tambin ofrece un entorno de codificacin con todas las funciones. Incluye herramientas para la edicin de cdigo (tales como coloreado de cdigo y terminacin automtica de etiquetas) y material de referencia sobre HTML, hojas de estilos en cascada (CSS), JavaScript, ColdFusion Markup Language (CFML), Microsoft Active Server Pages (ASP) y JavaServer Pages (JSP). Dreamweaver le permite crear aplicaciones Web dinmicas basadas en bases de datos empleando tecnologas de servidor como CFML, ASP, NET, JSP y PHP. Dreamweaver se puede personalizar totalmente. Puede crear sus propios objetos y comandos, modificar mtodos abreviados de teclado e incluso escribir cdigo JavaScript para ampliar las posibilidades que ofrece Dreamweaver con nuevos comportamientos, inspectores de propiedades e informes de sitios.
1.1. Flujo de trabajo de Dreamweaver para la creacin de sitios Web

Se debe empezar definiendo la estrategia o la finalidad de un sitio. Luego, debe disear el aspecto y el funcionamiento del sitio. Una vez que el diseo est finalizado, es cuando se crea el sitio y codifican las pginas, aadiendo el contenido y la interactividad. A continuacin, vincular las pginas y comprobar si el sitio funciona y si cumple los objetivos para los que ha sido diseado. Adems, si lo desea, puede incluir pginas dinmicas Para terminar el ciclo, publicar el sitio en un servidor. 1) Planificacin del sitio Planificar y organizar cuidadosamente el sitio desde el primer momento puede ayudar a ahorrar tiempo ms adelante. La organizacin del sitio no slo implica la determinacin de los archivos que van a incluirse, sino que tambin requiere un examen de las necesidades del sitio, el perfil de la audiencia y sus objetivos. Una vez que haya organizado la informacin y determinado una estructura, podr comenzar a crear el sitio. 2) Diseo de las pginas Web Puede empezar creando pginas de muestra y trabajar en el diseo definitivo de sus pginas. Son interesantes herramientas como: las capas, hojas de estilo, las tablas para la estructura de las pginas, los marcos para la organizacin o las plantillas para reutilizar los diseos. 3) Adicin de contenido a las pginas Con Dreamweaver, es muy fcil aadir todo tipo de contenidos (texto, imgenes, pelculas, sonidos y elementos multimedia). 4) Codificacin manual Hay dos mtodos para crear las pginas. La edicin visual, con herramientas sencillas, o el entorno de codificacin que permite trabajar directamente con cdigo. Puede utilizar el modo que quiera, o una combinacin de ambos. 5) Pginas dinmicas Este tipo de pginas permite ver a los visitantes informacin almacenada en bases de datos, e incluso aadirles nueva informacin. Los pasos preliminares a realizar son algo ms complejos. Configurar el servidor Web y el servidor de aplicaciones, y conectarse a la base de datos.
Curso: Diseo Web
1.2. Gua de recursos de formacin de Dreamweaver

Ayuda Se accede a la ayuda desde el men Ayuda. Incluye los sistemas de Primeros pasos y tutoriales, enfocados para orientar la creacin de sitios Web sencillos. Utilizacin de Dreamweaver proporciona informacin completa sobre todas las funciones. Referencia En Referencia se recogen todas las explicaciones de cdigo, etiquetas y atributos, extradas de diferentes libros. Y diferentes opciones de Extensiones. Recursos del sitio Web de Macromedia El sitio Web de Macromedia ofrece apartados como el Centro de soporte, para las actualizaciones, ejemplos y ltimas noticias para sacar el mximo partido al programa. El Centro de desarrolladores proporciona herramientas y tutoriales. A travs de los Foros se pueden intercambiar ideas o compartir consejos tiles.
2. Entorno de trabajo
El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Adems, coloca muchas de las operaciones ms frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rpidamente.
2.1. Elemen tos del entorn o de trabajo
1. La pgina de inicio permite abrir un documento reciente o crear un documento nuevo. Desde la pgina de inicio tambin puede profundizar sus conocimientos sobre Dreamweaver mediante una visita guiada o un tutorial del producto. 2. La barra de herramientas Insertar contiene botones para la insercin de diversos tipos de objetos, como imgenes, tablas y capas, en un documento. Cada objeto es un fragmento de cdigo HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el botn Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos utilizando el men Insertar en lugar de la barra Insertar.
Curso: Diseo Web
3. La barra de herramientas Documento contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento (como la vista Diseo y la vista Cdigo), diversas opciones de visualizacin y algunas operaciones comunes como la obtencin de una vista previa en un navegador. 4. La barra de herramientas Estndar (que no aparece en el diseo de espacio de trabajo predeterminado) contiene botones para las operaciones ms habituales de los mens Archivo y Edicin: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estndar, seleccione Ver > Barras de herramientas > Estndar. 5. La ventana de documento muestra el documento actual mientras lo est creando y editando. 6. El inspector de propiedades permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades. 7. El selector de etiquetas, que aparece en la barra de estado en la parte inferior de la ventana de documento, muestra la jerarqua de etiquetas que rodean a la seleccin actual. 8. Los grupos de paneles son conjuntos de paneles relacionados apilados bajo un encabezado comn. Para ampliar un grupo de paneles, haga clic en la flecha de ampliacin situada a la izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrastre el punto de sujecin situado en el borde izquierdo de la barra de ttulo del grupo. 9. El panel de archivos permite gestionar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel de archivos tambin proporciona una vista de todos los archivos del disco local, como ocurre en el Explorador de Windows.
2.2. Barras de herramientas

Para mostrar y ocultar las barras de herramientas Ver > Barras de herramientas
Barra de herramientas Documento

La barra de herramientas contiene tambin algunos comandos y opciones relativos a la visualizacin del documento y a su transferencia entre los sitios local y remoto.
Barra de herramientas Insertar

La barra de herramientas contiene botones para crear e insertar objetos tales como tablas e imgenes. Al pasar el puntero sobre un botn, aparece una descripcin de la herramienta con el nombre del botn. Los botones estn organizados en categoras. Para verlas haga clic en la flecha del men desplegable.
Curso: Diseo Web
2.3. Inspector de propiedades

El Inspector de propiedades permite examinar y editar las propiedades ms comunes del elemento de pgina seleccionado actualmente, como texto o un objeto insertado. El contenido del inspector de propiedades es distinto en funcin del elemento seleccionado.
Men Ventana > Propiedades
2.4. Mens contextuales

Par acceder de forma rpida a los comandos y las propiedades ms tiles relacionadas con la ventana o el objeto con el que est trabajando. Haga clic con el botn derecho del ratn sobre el objeto o ventana.
2.5. Paneles
En Dreamweaver, los paneles se organizan en grupos. El panel seleccionado en un grupo de paneles aparece como una ficha. Para ampliar o contraer .
para cerrar, con el fin de que no aparezcan en la pantalla, o para maximizar. Tambin se puede acoplar a un panel existente o desacoplar, agrupndolo con uno nuevo. Para mover los paneles, clic en , apareciendo esta cruz de flechas . Para desplazarse por los paneles es muy cmodo el teclado Control+Alt+Tab.
3. Definicin de un sitio local. Diferencias entre sitio local y sitio remoto.

Un sitio Web es un conjunto de documentos y de objetos vinculados, bajo un diseo similar u objetivo comn. Macromedia Dreamweaver MX 2004 es una herramienta de creacin y administracin de sitios, por lo que puede utilizarla para crear sitios Web completos, adems de documentos por separado. El primer paso al crear un sitio Web consiste en planificarlo. Para obtener resultados ptimos, disee y planifique la estructura del sitio Web antes de crear las pginas. El siguiente paso consiste en configurar Dreamweaver para poder trabajar con la estructura bsica del sitio. Este es el paso ms importante: dejar bien configurado en qu carpeta vamos a colocar todo lo que vamos Por tanto el desarrollo de un sitio Web con Dreamweaver comienza en la definicin de una carpeta local para el sitio. En esta carpeta se guardarn todos los archivos que lo compongan.
Curso: Diseo Web
3.1. Configuracin de un sitio de Dreamweaver nuevo: carpeta local

Men Sitio > Administrar sitios
Haga clic en el botn Nuevo y elija Sitio. Aparece el cuadro Definicin del sitio para (y el nombre que le quiera dar)
La diferencia entre las pestaas Bsicas y Avanzadas es que con la primera se puede utilizar el asistente que nos guiar en la configuracin de la carpeta local. En la pestaa Avanzadas no tenemos asistente, por lo que convendr a los usuarios con experiencia, y a parte de la carpeta local, se pueden configurar las carpetas: remota y la de prueba.
Curso: Diseo Web
Definido nuestro sitio, aparece en el Panel de Archivos los archivos de los que consta nuestro sitio (ahora vaco). Desde aqu podemos administrar, borrar, copiar, pegar, mover y abrir los archivos que componen el sitio como si estuviramos en el explorador de Windows.
3.2. Carpeta remota

La carpeta remota es el lugar en el que se almacenan los archivos para fines de prueba, colaboracin, produccin, implementacin. Se configura desde la pestaa Avanzadas de Sitio > Administrar sitios Tras definir la carpeta local puede configurar la carpeta remota. Determine cmo acceder a la carpeta remota y anote la informacin de conexin.
3.3. Diferencias entre sitio local y sitio remoto

La carpeta local es el directorio de trabajo. En Dreamweaver se conoce como sitio local. En ella se almacenan los archivos con los que se est trabajando. En la carpeta remota se almacenan los archivos, segn el entorno de desarrollo, para fines de prueba, produccin, colaboracin, etc. En dreamweaver esta carpeta se conoce como sitio remoto en el panel Archivos. En general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web. Las carpetas de datos locales y remotos permiten transferir archivos entre el disco local y el servidor Web, lo cual facilita la administracin de los archivos en los sitios de Dreamweaver. En la carpeta del servidor de prueba, Dreamweaver procesa pginas dinmicas.
4. Creacin de una pgina con Dreamweaver

Volviendo a insistir en el punto de partida, cuando hacemos una web, previamente tenemos que tener bien claro el aspecto y la informacin que queremos dar a la pgina. Se recomienda que se haga una optimizacin previa de las imgenes tal y como se van a insertar, y que los textos se redacten en un editor de textos. Con esto ahorraremos tiempo y dudas a la hora de hacer la web. Hay varias formas de seleccionar un nuevo documento para
Curso: Diseo Web
empezar a trabajar en l: con un documento en blanco, partiendo de un archivo de diseo de Dreamweaver o utilizando una plantilla que defina el aspecto del documento y establezca las partes que se puedan cambiar.
Creacin de un documento en blanco

Para empezar con las pginas de nuestro sitio Men Archivo > Nuevo documento Aparece el cuadro de Nuevo documento
En la lista de categora elegiremos Pgina bsica para crear un documento HTML, al que vamos a llamar index.html, que va a ser nuestra pgina principal. La guardamos Archivo > Guardar nuestro sitio local. dentro de la carpeta anteriormente configurada como
Creacin de un documento basado en una archivo de diseo Dreamweaver

Puede partir de estos archivos de diseos propuestos por el programa. Los pasos son los mismos que los de creacin de un documento nuevo, salvo que en este caso en vez de elegir Pgina bsica, escogeremos Hojas de estilos CSS. El documento CSS aparecer en la ventana del documento y se abrir en la vista Cdigo.
Creacin de un documento basado en una plantilla existente

Esta vez partiremos de una plantilla. Los pasos a seguir son los mismos que para crear un documento en blanco, salvo que ahora, en vez de elegir la pestaa General, elegimos la de Plantillas. Seleccione el sitio donde est la plantilla en la zona derecha del cuadro y en la izquierda seleccione la plantilla.
Curso: Diseo Web
4.1. Modos de edicin en Dreamweaver

Se puede elegir entre tres vistas para visualizar el documento en el que estamos trabajando. Se eligen desde el men Ver o pulsando los botones correspondientes de la Barra de herramientas Documento: La vista diseo es un entorno de diseo para el diseo visual de la pgina, la edicin visual y el desarrollo rpido de aplicaciones. En esta vista, Dreamweaver muestra una representacin visual del documento completamente editable, similar a la que aparecera en un navegador. La vista cdigo es un entorno de codificacin manual para escribir y editar cdigo HTML, JavaScript, cdigo de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML) y otros tipos de cdigo. Es posible ver el mismo documento en Cdigo y Diseo, en una sola ventana de documento. Cuando la ventana de documento tiene una barra de ttulo, sta muestra el ttulo de la pgina y, entre parntesis, el nombre y la ruta del archivo. Si se han realizado cambios que an no se han guardado, despus del nombre del archivo Dreamweaver incluye un asterisco.
4.2. Definir las caractersticas de la pgina

Para cada pgina que cree en Dreamweaver, puede especificar las propiedades de diseo y formato mediante el cuadro de dilogo Propiedades de la pgina. Modificar > Propiedades de la pgina
El cuadro de dilogo Propiedades de la pgina permite especificar la familia y el tamao de fuente predeterminada, el color de fondo, los mrgenes, los estilos de los vnculos y otros muchos aspectos relacionados con el diseo de pginas. Puede asignar nuevas propiedades de pgina a cada pgina que cree, as como modificar las propiedades de las pginas existentes.
Curso: Diseo Web
Cambio de ttulo
El ttulo de una pgina HTML ayuda a los visitantes del sitio a realizar un seguimiento de lo que ven mientras navegan, al tiempo que identifica la pgina en listas de historial y de marcadores. Si no asigna ningn ttulo a una pgina, sta aparecer en la ventana del navegador y en las listas de marcadores y de historial como Documento sin ttulo. Para cambiar el ttulo de una pgina, puede hacerlo de dos maneras: Ver > Barra de herramientas > Documento Modificar > Propiedades de la pgina En el cuadro de texto Ttulo, introduzca el ttulo de la pgina y presione Enter
Si est editando el ttulo en el cuadro de dilogo Propiedades de la pgina, haga clic en Aceptar.
El ttulo aparecer en la barra de ttulo de la ventana de documento (y en la barra de herramientas Documento, si sta se encuentra visible).
Imagen de fondo o un color de fondo para la pgina
Modificar > Propiedades de la pgina > Aspecto
Para establecer una imagen de fondo, haga clic en el botn Examinar, vaya hasta la imagen y seleccinela. Como alternativa, introduzca la ruta de acceso a la imagen de fondo en el cuadro Imagen de fondo. Dreamweaver forma un mosaico con la imagen de fondo (la repite) si sta no ocupa toda la ventana del navegador. Para evitar que se forme un mosaico con la imagen de fondo, utilice hojas de estilo en cascada (CSS) para desactivar la formacin de mosaicos con la imagen. Para definir un color de fondo, haga clic en el cuadro Color de fondo y seleccione un color del selector de color.
Curso: Diseo Web
Definicin de colores predeterminados para el texto

Defina colores predeterminados para el texto normal, vnculos, vnculos visitados y vnculos activos en el cuadro de dilogo Propiedades de la pgina o bien elija una combinacin de colores preestablecida para definir los colores del fondo de la pgina y del texto. Modificar > Propiedades de la pgina
Seleccione colores para las opciones Color del texto, Color de los vnculos, Vnculos visitados y Vnculos activos. Para elegir una combinacin de colores preestablecida segura para la Web, es decir, que sus autores nos aseguran que se van a ver tal cual en todos los navegadores ir a: Comandos > Establecer combinacin de colores y seleccione un color de fondo y una combinacin de colores de texto y vnculos. El cuadro de muestra da una idea de cul ser la apariencia de la combinacin de colores en el navegador.
Propiedades de pgina CSS frente a propiedades de pgina HTML

De forma predeterminada, Dreamweaver utiliza CSS para asignar propiedades de pgina. Si en su lugar desea utilizar etiquetas HTML, debe especificarlo en el cuadro de dilogo Preferencias. Edicin > Preferencias Y desactive la casilla de verificacin Utilizar CSS en lugar de etiquetas HTML, en la categora General.
Curso: Diseo Web
4.3. Insertar texto

Dreamweaver permite aadir texto a pginas Web escribiendo el texto directamente en la ventana del documento, copiando y pegando texto de otro documento o de otra aplicacin. En este ltimo caso, Dreamweaver, no mantiene el formato del texto pero s los saltos de lnea.
Copiar y pegar texto de Word

Puede aadir contenido de un documento Word, seleccionando, copiando y pegando. Al aadir contenido a una pgina, Dreamweaver convierte el contenido en HTML y lo copia en una pgina Web. Puede editar el contenido en Dreamweaver. Para importarse el archivo completo
Archivo > Importar > Documento de Word Dar formato al texto

La aplicacin de formato a texto en Dreamweaver es similar a la utilizacin de un programa estndar de tratamiento de texto. Puede establecer estilos de formato predeterminados (Prrafo, Encabezado 1, Encabezado 2, etc.) para un bloque de texto, cambiar la fuente, el tamao, el color y la alineacin del texto seleccionado o aplicar estilos de texto, como negrita, cursiva y subrayado. Pero el mtodo preferido para aplicar formato al texto y presentar las pgina Web, es la utilizacin de las hojas de estilo. Ayuda a controlar mejor el diseo de una pgina Web al separar los elementos visuales (fuentes, colores) de la estructura lgica de la pgina. Lo que facilita unas descargas ms rpidas y un mantenimiento ms fcil. De forma predeterminada, Dreamweaver aplica formato a texto mediante hojas de estilos en cascada (CSS). Si necesita utilizar etiquetas HTML en lugar de estilos CSS, debe cambiar las preferencias de formato de texto predeterminadas de Dreamweaver en Men Edicin > Preferencias (casilla de verificacin Utilizar CSS en lugar de etiquetas HTML)
Inspector de propiedades en la aplicacin de formato al texto

El inspector de propiedades de texto permite aplicar un estilo y un formato al texto seleccionado actualmente.
Dreamweaver realiza un seguimiento de las propiedades de formato que el usuario asigna a todos los elementos del texto y asigna una etiqueta a cada uno de ellos mediante una convencin de asignacin de nombres: Style1, Style2, Style3, Style n. Si asigna los mismos atributos de formato a dos o ms elementos del texto, Dreamweaver asigna una etiqueta a los elementos que tengan el mismo ttulo; de este modo, se eliminan los nombres de estilo redundantes. La etiqueta que Dreamweaver aplica a un cuerpo de texto determinado se puede aplicar posteriormente mediante el men emergente Estilo, lo que permite crear una biblioteca de estilos dentro de una pgina y aplicar esos mismos estilos simplemente seleccionando el elemento de texto en la pgina y seleccionando un estilo en el men emergente Estilos.
Curso: Diseo Web
Aplicacin de formato a los prrafos

Para aplicar una etiqueta de prrafo o encabezado, site el punto de insercin donde quiere el prrafo o el encabezado. En Texto > Formato de prrafo o con el Inspector de propiedades en Formato elija lo que ms convenga.
La etiqueta HTML asociada con el estilo seleccionado (por ejemplo, h1 para Encabezado 1, h2 para Encabezado 2) se aplicar a todo el prrafo. Seleccione Ninguno para quitar un formato de prrafo.
Aadir un espaciado de prrafo

Para crear un nuevo prrafo pulse Enter. En este caso se inserta una lnea en blanco de espacio entre los prrafos. En caso de querer aadir una nica lnea de espacio, y no ese espacio en blanco, presione Shift +Enter en caso contrario. Insertar > HTML > Caracteres especiales > Salto de lnea.
Utilizacin de reglas horizontales

Son muy tiles para organizar la informacin y separar visualmente texto .
Insertar > HTML > Regla horizontal

O bien en la categora HTML de la barra de herramientas Insertar
Para modificarla, Ventana > Propiedades y en el Inspector de propiedades especificamos sus caractersticas
Creacin de listas ordenadas y sin ordenar

Puede crear listas ordenadas (numeradas) o sin ordenar (vietas). Adems, las listas se pueden anidar. Una lista anidada es aquella que contiene otra lista. Coloque el punto de insercin en el lugar donde quiere la lista Texto > Lista y elija el tipo de lista que desea.
Tambin puede seleccionar el prrafo que quiere convertir en lista y elegir el tipo de lista desde el men Texto > Lista. Para las listas anidadas seleccione los elementos de la lista que quiera anidar y haga clic en el botn de sangra del Inspector de propiedades o elija Texto > Sangra.
Curso: Diseo Web
Cambio del color del texto

Puede cambiar el color del texto seleccionado de modo que el nuevo color prevalezca sobre el color establecido en Propiedades de la pgina. Si no se ha establecido ningn color de texto en Propiedades de la pgina, se utilizar el negro como color predeterminado. Puede elegir, seleccionando primero el texto, desde el Inspector de propiedades o desde Texto > Color. Para volver al color predeterminado del texto, haga clic en el botn propiedades. del Inspector de
Insercin de caracteres especiales

Insertar > HTML > Caracteres especiales
Primero aparecen los ms comunes y en Otro... puede elegir ms.
Adicin de espacio entre caracteres

HTML slo permite un espacio entre caracteres; para aadir espacio adicional en un documento debe insertar un espacio indivisible Control+Shift + Espacio. Tambin en Insertar > HTML > Caracteres especiales > Espacio invisible o bien en la categora Texto de la barra Insertar hacer clic en el botn .
4.5. Incluyendo imgenes

En Macromedia Dreamweaver MX 2004, puede trabajar en la vista Diseo o en la vista Cdigo para insertar imgenes en un documento. Al aadir imgenes a un documento de Dreamweaver, puede establecer o modificar las propiedades de imagen y ver los cambios directamente en la ventana de documento. Existen muy diversos formatos de archivo grfico, aunque para pginas Web generalmente se utilizan tres formatos de archivo grfico: GIF, JPEG y PNG. Actualmente, GIF y JPEG son los formatos de archivo que cuentan con mayor compatibilidad y pueden verse en la mayora de los navegadores. Los archivos GIF utilizan un mximo de 256 colores y son idneos para visualizar imgenes con grandes reas de color homogneo, como barras de navegacin, botones, iconos, logotipos u otras imgenes con colores y tonos uniformes. El formato de archivo JPG es el mejor para imgenes fotogrficas o de tonos continuos, ya que puede contener millones de colores. A medida que la calidad de un archivo JPEG aumenta, tambin lo hace su tamao y el tiempo que tarda en descargarse. Dreamweaver proporciona unas funciones bsicas de edicin de imgenes que permiten modificar las imgenes sin tener que iniciar una aplicacin externa de edicin de imgenes como Macromedia Fireworks.
Insercin de una imagen

Al insertar una imagen en un documento de Dreamweaver, el programa genera automticamente una referencia al archivo de imagen en el cdigo HTML. Para asegurarse de
Curso: Diseo Web
que esta referencia es correcta, el archivo de imagen deber estar en el sitio actual. Si no lo est, Dreamweaver le preguntar si desea copiar el archivo en el sitio. Coloque el punto de insercin en el lugar de la ventana del documento donde quiere que aparezca la imagen. En la categora Comn de la barra de herramientas Insertar, haga clic en el botn de Imagen . En el cuadro de dilogo que aparece elija la imagen que quiera. Al insertarse la imagen se abre automticamente el Inspector de propiedades
Puede cambiar el ancho, el alto, darle nombre o establecer el texto alternativo de manera que al pasar el ratn por encima de la imagen aparezca una breve explicacin de la misma. Para alinear la imagen es muy til el men que se abre al seleccionar la imagen y abrir el men emergente con el botn derecho del ratn. En este men emergente Imagen hay mltiples posibilidades. En el Inspector de propiedades de la imagen hay un apartado especfico
Cambio de tamao de una imagen

Si cambia el tamao de una imagen visualmente en Dreamweaver, el navegador del usuario deber escalar la imagen cuando se cargue la pgina. Esto puede hacer aumentar el tiempo de descarga de la pgina y puede provocar que la imagen no se vea correctamente en el navegador del usuario. Si desea reducir el tiempo de descarga y conseguir que todas las instancias de una imagen tengan el mismo tamao, utilice una aplicacin de edicin de imgenes. Puede cambiar el tamao seleccionando la imagen y con los manejadores de tamao que aparecen dar el tamao que desea. En caso de que quiera respetar la relacin ancho y alto, presione Mays. mientras arrastra el manejador. Para mayor precisin especificar el nuevo tamao en los apartados de altura y anchura del Inspector de propiedades. Para volver al tamao original haga clic en el botn Restablecer tamao
Recorte de una imagen

Se puede hacer desde el Inspector de propiedades, botn Recorte o desde Modificar > Imagen > Recortar Aparecern manejadores de recorte alrededor de la imagen. Arrastre los manejadores hasta la zona que quiere visualizar y presione Intro. En caso de querer deshacer el recorte vaya a Edicin > Deshacer o Ctrl+Z.
4.5.1. Crear una imagen de sustitucin

Una imagen de sustitucin es una imagen que, al visualizarse en un navegador, cambia cuando el puntero pasa sobre ella. Son conocidas tambin por imgenes Rollover. Se puede crear una imagen de sustitucin con dos archivos de imgenes: la imagen principal (la que aparece al cargarse inicialmente la pgina) y la imagen secundaria (la que aparece al pasar el puntero sobre la imagen principal). Ambas imgenes deben tener el mismo tamao. Si tienen tamaos distintos, Dreamweaver cambia automticamente el tamao de la segunda imagen para que se ajuste a las propiedades de la primera. Site el puntero de insercin donde quiera que aparezca la imagen de sustitucin. En la categora Comn de la barra herramientas Insertar, haga clic en el botn
Curso: Diseo Web
o bien Insertar > Objetos de imagen > Imagen de sustitucin
Rellene el cuadro que aparece con el nombre de la imagen de sustitucin, la ubicacin de imagen principal y la secundaria. El texto alternativo o la accin a realizar para que aparezca la imagen de sustitucin. Para ver el efecto F12 o Archivo > Vista previa en el navegador.
4.6. Creando vnculos

Una vez creadas su pgina HTML deber establecer las conexiones entre sus documentos y otros documentos. Tambin puede establecer vnculos con cualquier texto o imagen de cualquier lugar del mismo documento. Los vnculos se pueden crear y administrar de varias forma distintas. Algunos diseadores de sitios Web prefieren crear vnculos con pginas o archivos que todava no existen cuando estn trabajando, mientras que otros prefieren crear primero todos los archivos y las pginas y aadir los vnculos ms tarde.
4.6.1. Aspectos bsicos de ubicacin y rutas de documentos

A la hora de crear vnculos resulta fundamental conocer la ruta de archivo entre el documento desde el que establece el vnculo y el documento con el que lo establece. Cada pgina Web tiene una direccin exclusiva, denominada URL (Localizador Uniforme de Recursos, Uniform Resource Locator). Sin embargo, cuando se crea un vnculo local (un vnculo de un documento con otro documento del mismo sitio), no suele ser necesario especificar el URL completo del documento de destino. En este caso se especifica una ruta relativa desde el documento actual o desde la carpeta raz del sitio. En lugar de escribir las rutas, conviene acceder a los vnculos a travs del botn Examinar, mtodo que asegura la correcta introduccin de la ruta. Existen tres tipos de rutas de vnculos:
Rutas absolutas
Proporcionan la URL completa y se utilizan para vincular con pginas Web externas. No se aconseja poner rutas absolutas para vnculos locales porque si mueve el sitio a otro dominio se rompern todos los vnculos de las rutas absolutas locales.
Rutas relativas
Son las ms adecuadas para los vnculos locales. Particularmente tiles cuando el documento actual y el documento con el que se establece el vnculo se encuentran en la
Curso: Diseo Web
misma carpeta. En una ruta relativa al documento se omite la parte del URL absoluto que coincide en los documentos actual y vinculado y se indica nicamente la parte de la ruta que difiere.
Rutas relativas a la raz del sitio

Las rutas relativas a la raz del sitio indican la ruta desde la carpeta raz del sitio hasta un documento. Puede utilizar este tipo de rutas si trabaja con un sitio Web grande que usa varios servidores o un servidor que alberga varios sitios distintos. Sin embargo, si no est familiarizado con este tipo de ruta, le resultar ms cmodo mantener las rutas relativas al documento. Una ruta relativa a la raz del sitio comienza por una barra diagonal, que representa la carpeta raz del sitio. Sin embargo, al mover o cambiar el nombre de documentos con vnculos relativos a la raz, deber actualizar esos vnculos, incluso aunque las rutas de los documentos no hayan cambiado en su relacin mutua.
4.6.2. Tipos de vnculos

Puede crear varios tipos de vnculos en un documento: Un vnculo con otro documento o archivo, como un archivo grfico, de pelcula, PDF o de sonido Un vnculo de anclaje con nombre, que salta a un emplazamiento especfico dentro de un documento Un vnculo de correo electrnico, que crea un mensaje de correo electrnico en blanco con la direccin del destinatario ya rellenada Vnculos nulos y de script, que permiten adjuntar comportamientos a un objeto o crear un vnculo que ejecuta cdigo JavaScript.
Vincular mediante el Inspector de propiedades

Seleccione el texto o imagen, que va a servir de enlace, en la vista Diseo de la ventana del documento. Ventana > Propiedades para abrir el Inspector de propiedades Bien si se ha seleccionado texto o una imagen, el Inspector de propiedades oportuno tiene una zona exclusiva para establecer vnculos.
Al hacer clic en la carpeta podemos localizar y seleccionar el archivo con el que queremos vincular. En este cuadro de dilogo de Seleccionar archivo podemos elegir entre si la ruta es relativa al documento o a la raz del sitio.
Para una pgina Web, por el contrario, la ruta que se debe escribir debe ser la absoluta. El documento vinculado puede aparecer en un lugar distinto de la ventana o en el marco actual, segn lo que se seleccione entre las diferentes opciones del men Dest. del Inspector de propiedades. _blank carga el documento vinculado en una nueva ventana sin nombre del navegador. _parent carga el documento vinculado en el marco padre o en la ventana padre del marco que contiene el vnculo. _self carga el documento vinculado en el mismo marco o la misma ventana que el vnculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo.
Curso: Diseo Web
_top carga el documento vinculado en la ventana completa del navegador, eliminando de esta forma todos los marcos. Vincular mediante el icono de sealizacin de archivos Seleccione el texto o imagen, que va a servir de enlace, en la vista Diseo de la ventana del documento. Arrastre el icono de sealizacin de archivos situado a la derecha del cuadro de texto Vnculo del Inspector de propiedades y seale otro documento del panel Archivos. El cuadro de texto Vnculo se actualizar para mostrar el vnculo. Libere el botn del ratn. . Vincular con el comando Hipervnculo Seleccione el texto o imagen, que va a servir de enlace, en la vista Diseo de la ventana del documento. Insertar > Hipervnculo o con el botn Hipervnculo de la categora Comn de la barra Insertar Aparecer el cuadro para que lo complete.
4.6.3. Establecer vnculos con una parte especfica del documento: anclas
Podemos crear un vnculo con una parte de nuestro documento, pero previamente hay que identificarlo de alguna manera. Para ello le vamos a dar un nombre. Nos situamos en el lugar al que nos queremos dirigir. Insertar > Anclaje con nombre o bien clic en el botn de la categora Comn de la barra de Insertar Nos aparece el cuadro para darle nombre a ese lugar
Un marcador de anclaje aparecer en el punto de insercin A continuacin seleccionamos el texto o imagen que nos van a servir de enlace para llevarnos a ese lugar de anclaje con nombre. En la zona Vnculo del Inspector de propiedades introducimos el signo (#) y a continuacin el nombre que del anclaje que nos interesa. En caso de ese anclaje est en otro archivo distinto de la misma carpeta, se pondra antes de # el nombre y la extensin de ese archivo. Esto
Curso: Diseo Web
mismo lo podemos hacer con el icono de sealizacin o el comando hipervnculo, de la forma anteriormente explicada.
4.6.4. Establecer vnculos con correos electrnicos

En la vista Diseo de la ventana de documento, coloque el punto de insercin donde desea que aparezca el vnculo de correo electrnico o seleccione el texto o la imagen que desea que aparezca como vnculo de correo electrnico. Insertar > Vnculo de correo electrnico o bien en la categora Comn de la barra Insertar hacer clic en el botn Complete el cuadro
En el caso de querer hacer el vnculo a travs del Inspector de propiedades, se tendr que escribir en rea reservada al Vnculo, la palabra mailto: seguido de la direccin electrnica (sin espacio entre los dos puntos y la direccin)
4.6.5. Barra de navegacin

Una barra de navegacin se compone de una imagen o un conjunto de imgenes cuya visualizacin cambia segn las acciones que realice el usuario. Antes de usar el comando Insertar barra de navegacin, debe crear un conjunto de imgenes para los estados de visualizacin de cada elemento de navegacin. (Considere el elemento de la barra de navegacin como si fuera un botn, ya que cuando el usuario hace clic en l, le lleva a otra pgina). Insertar > Objetos de imagen > Barra de navegacin o bien en la categora Comn de la barra Insertar hacer clic en el botn Aparecer este cuadro que tiene que completar con lo anteriormente creado.
Curso: Diseo Web
Para modificar la barra de navegacin Modificar > Barra de navegacin En este cuadro puede realizar los cambios necesarios.
4.6.6. Mapas de imagen

Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas. Cuando el usuario hace clic en una zona interactiva, se realiza una accin, por ejemplo, se abre un archivo nuevo. En la ventana del documento inserte la imagen. Aparecer el Inspector de propiedades y en la parte baja la zona reservada para elaborar un mapa con la imagen. Si no lo ve haga clic en la flecha que se encuentra a la derecha del Inspector de propiedades .
Introduzca un nombre exclusivo para el mapa de imagen. A continuacin vamos a especificar las reas. Escogeremos bien la rectangular, circular o poligonal, segn lo que nos interese y con la flecha cerraremos la forma. Despus de crear la zona interactiva nos aparecer el Inspector de propiedades de las zonas interactivas para especificar lo que queremos.
Para modificar el mapa solamente nos situamos en las zonas interactivas creadas y podremos moverlas, cambiar su tamao, cambiar sus vnculos.
4.6.7. Comprobacin de vnculos

Dreamweaver puede verificar los vnculos establecidos con los documentos del sitio por si hay algn vnculo roto o archivos sin referencia. Los vnculos externos no los verifica pero puede elaborar una lista con todos ellos. Para comprobar los vnculos de la pgina actual Archivo > Comprobar pgina > Comprobar vnculos
Curso: Diseo Web
El panel donde aparecer el informe es el inferior de la pantalla, llamado Resultados, en la pestaa Verificador de vnculos. Para comprobar los vnculos de todo el sitio Sitio > Comprobar vnculos en todo el sitio.
4.7. Ayudas a la maquetacin: reglas y cuadrculas, tablas y plantillas

Las reglas y cuadrculas son tiles como ayudas visuales para dibujar, ubicar o cambiar el tamao de los elementos en la vista de diseo de la ventana de documento. Ver > Reglas > Mostrar Estas son las opciones que tienes relacionadas con la herramienta Regla Ver > Cuadrcula > Mostrar cuadrcula Estas son las opciones relacionadas con la herramienta Cuadrcula
Ver > Cuadrcula > Mostrar cuadrcula Estas son las opciones relacionadas con la herramienta Cuadrcula
Una imagen de rastreo es una imagen JPEG, GIF o PNG que se sita en el fondo de la ventana de documento. Puede ocultar la imagen, configurar su opacidad y cambiar su posicin. La imagen de rastreo slo se encuentra visible en Dreamweaver. sta nunca puede verse en la pgina desde un navegador. Cuando est visible la imagen de rastreo, la imagen y el color de fondo real no estn visibles en la ventana de documento; no obstante, se encontrarn visibles cuando la pgina se muestre en un navegador. Ver > Imagen de rastreo > Cargar Especifique la transparencia. Estas son las opciones relacionadas con la herramienta Imagen de rastreo
4.7.2. Tablas
Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el diseo de texto y grficos en una pgina HTML.
Insercin de una tabla y adicin de contenido

En la vista de diseo coloque el punto de insercin en el lugar donde quiere la tabla Insertar > Tabla o bien en la categora Comn de la barra de Insertar haga clic en el botn cuadro de dialogo Insertar tabla Aparece el
Curso: Diseo Web
Los datos se pueden traer de otra tabla elaborada con otra aplicacin (por ejemplo, Microsoft Excel) y guardados en un formato de texto delimitado (con elementos separados por tabuladores, comas, dos puntos, puntos y comas u otros delimitadores) se pueden importar a Dreamweaver. Archivo > Importar > Datos de tabla Insertar > Objetos de tabla > Importar datos de tabla Aparece el cuadro de dialogo para importar los datos
As mismo podemos exportar una tabla hecha en Dreamweaver a un archivo de texto delimitado. Archivo > Exportar >Tabla Seleccionar y dar formato a las tablas Hay que distinguir entre seleccionar una tabla, filas y celdas. Seleccionar una tabla Hay varios procedimientos como Modificar > Tabla > Seleccionar tabla, hacer clic en la esquina superior izquierda de la tabla. Cuando una celda est seleccionada podemos seleccionar toda la tabla en Edicin > Seleccionar todo
Curso: Diseo Web
Seleccionar filas y columnas Situar el puntero en el borde izquierdo de una fila o en el borde superior de la columna. Cuando el cursor se convierta en una flecha de seleccin arrastre para seleccionar lo que quiera. Seleccionar celdas Hay varios procedimientos como presionar la tecla Control y hacer clic en la celda deseada A la hora de dar formato a tablas en la vista Diseo, puede definir propiedades que se apliquen a toda la tabla o a filas, columnas o celdas seleccionadas de la misma. Al definir el valor de una propiedad como, por ejemplo, el color de fondo o la alineacin, para toda la tabla y otro valor para celdas individuales, el formato de celda tiene prioridad sobre el formato de fila, que a su vez tiene prioridad sobre el formato de tabla. El orden de prioridad en el formato de tabla es el siguiente: Celdas Filas Tabla Por ejemplo, si establece un color de fondo azul para una sola celda y, a continuacin, establece el color de fondo de toda la tabla como amarillo, la celda azul no cambiar a amarillo, ya que el formato de celda tiene prioridad sobre el formato de tabla. Al seleccionar lo que nos interesa (tabla, fila, columna o celda) aparece el Inspector de propiedades donde podemos ver y modificar las propiedades.
Utilizacin de un esquema de diseo para aplicar formato a tabla Seleccione la tabla que le interese Comandos > Formatear tabla Aparece el cuadro de dialogo Formatear tabla personalizando las opciones como desee.
Curso: Diseo Web
Modificar tabla Modificar > Tabla o bien utilizando el men emergente del botn derecho del ratn en Tabla Puede combinar, dividir, eliminar, insertar.
Hay que puntualizar que para combinar tendremos que tener seleccionadas dos celdas consecutivas, haciendo clic en ambas con el Control presionado. Para dividir solamente tiene que seleccionarse una celda. Anidacin de tablas Una tabla anidada es una tabla dentro de una celda o de otra tabla. Puede aplicar formato a una tabla anidada como lo hara con cualquier otra tabla; no obstante, su ancho estar limitado por el ancho de la celda en la que aparece. Seleccione la celda donde quiere insertar otra tabla Insertar > Tabla Complete el cuadro de dialogo que aparece con las caractersticas que quiera darle a la nueva tabla. La tabla aparecer en la tabla existente.
Curso: Diseo Web
Ordenacin de tablas Puede ordenar las filas de una tabla en funcin del contenido de una sola columna. Tambin puede realizar una operacin ms compleja ordenndola en funcin del contenido de dos columnas. Lo que no se pueden ordenar son tablas con celdas combinadas. Comandos > Ordenar tabla Complete el cuadro de dialogo que aparece segn le convenga.
4.7.3. Capas
Una capa es un elemento de pgina HTML que se puede colocar en cualquier lugar del documento. Las capas pueden contener texto, imgenes u otros contenidos que se pueden situar en el cuerpo de un documento HTML. Las capas se emplean para disear la pgina. Puede colocar unas capas delante o detrs de otras, ocultar algunas capas mientras muestra otras y mover capas por la pantalla. Puede colocar una imagen de fondo en una capa y, a continuacin, insertar una segunda capa, con texto y un fondo transparente, delante de la primera. Las capas proporcionan una gran flexibilidad a la hora de colocar contenido. Sin embargo, los navegadores Web anteriores a Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0 no pueden mostrar capas y los navegadores de la versin 4 no muestran las capas de una forma totalmente coherente. Insercin de una capa Insertar > Objetos de diseo > Capa o bien en la categora de Diseo de la barra Insertar haga clic en el botn . En la vista Diseo arrastre el ratn si quiere una sola capa y para dibujar varias capas consecutivamente arrastre mientras presione la tecla Control. Para ver los bordes de la capa o las marcas de cdigo de capa Ver > Ayudas visuales > Bordes de capa Ver > Ayudas visuales > Elementos visibles Pueden anidarse capas creando una dentro de otra. Para mover la capa simplemente hay que pinchar en uno de sus bordes y arrastrarla por la pantalla. Tambin podemos cambiar el tamao moviendo los puntos de control de su recuadro delimitador, alinearla. Propiedades de capa Al seleccionar la capa se abre el Inspector de propiedades
Puede seleccionar varias capas presionando la tecla Mays. mientras va seleccionando cada una de las capas. En este caso el Inspector de propiedades afectar a todas las capas seleccionadas
Curso: Diseo Web
Administracin de capas
Se hace desde el panel Capas Ventana > Capas Aparecern todas las capas, incluidas las anidadas, que aparecen relacionadas con las capas padres. Utilice el Inspector de propiedades o el panel Capas para cambiar el orden de apilamiento de las capas. La capa que figura en la parte superior de la lista del panel Capas es la primera en el orden de apilamiento y aparece delante de las otras capas. En el cdigo HTML, el orden de apilamiento o el ndice z de las capas determina el orden en que se dibujan las capas en un navegador. Puede cambiar el ndice z para cada capa mediante el panel Capas o el inspector de propiedades. Con respecto a la visibilidad, para que mientras trabaja se vea una u otra capa, en el panel de Capas aparece un icono representativo.
El ojo no aparece si no se especifica la visibilidad. Para evitar el solapamiento de unas capas con otras al moverlas o cambiar su tamao, use la opcin Evitar solapamiento. Conversin de capas en tablas En vez de utilizar tablas o el modo de diseo para crear el diseo, algunos diseadores de sitios Web prefieren trabajar con capas. Dreamweaver permite crear el diseo con capas para despus, si se desea, convertirlas en tablas. Por ejemplo, quiz necesite convertir las capas en tablas si se precisa la compatibilidad con navegadores anteriores a la versin 4.0. Puede alternar entre capas y tablas para ajustar y optimizar el diseo de la pgina. No puede convertir una tabla o capa concreta de una capa, deber convertir las capas en tablas y las tablas en capas en toda la pgina. Es conveniente evitar el solapamiento porque sino no se pueden crear las tablas. Modificar > Convertir > Capas en tablas
4.8. Plantillas
Una plantilla de Macromedia Dreamweaver MX 2004 es un tipo especial de documento que sirve para crear un diseo de pgina fijo. Al disear una plantilla, especifica qu rea s de los documentos basados en esa plantilla pueden ser editadas por los usuarios. De esta manera se agiliza mucho el proceso de creacin de un sitio web. Un documento que se crea a partir de una plantilla permanece conectado a ella y al modificarse la plantilla, automticamente cambian los documentos basados en ella. Una plantilla contiene tipos de regiones: Regin editable Es una regin no bloqueada de un documento basado en plantilla, es decir, una seccin que el usuario de la plantilla puede editar. Regin repetida Es una seccin del diseo del documento que se define para que se repita. Por ejemplo, puede definir que una fila de una tabla se repita. Normalmente, las secciones repetidas son editables para que el usuario de la plantilla pueda cambiarlo. Regin opcional Es una seccin de la plantilla que se especifica como opcional, tanto para contenido como para imagen. El usuario controla si se mostrar. Un atributo de etiqueta editable
Curso: Diseo Web
Por ejemplo, se puede bloquear qu imagen aparece en el documento, pero dejar que el usuario de la plantilla establezca la alineacin.
4.8.1. Visualizacin de la plantilla en la vista diseo

En las plantillas, las regiones editables aparecen en la vista Diseo de la ventana de documento rodeadas por contornos rectangulares del color de resaltado predefinido. En la esquina superior izquierda de cada regin aparece una pequea ficha, en la que se muestra el nombre de la regin. Puede identificar un archivo de plantilla observando la barra de ttulo de la ventana de documento. La barra de ttulo de un archivo de plantilla contiene la palabra <<Plantilla>> y la extensin del archivo es .dwt. Adems de los contornos de las regiones editables, toda la pgina aparece rodeada por un contorno de otro color, con una ficha en la parte superior derecha en la que figura el nombre de la plantilla en la que se basa el documento. Este rectngulo resaltado le recuerda que el documento est basado en una plantilla y que no se puede cambiar nada que est fuera de las regiones editables.
4.8.2. Crear una plantilla

Abra el documento que desea guardar como plantilla. En la categora Comn de la barra de herramientas Insertar, haga clic en el botn de Crear plantilla . Gurdelo como plantilla, Archivo > Guardar como plantilla. Dreamweaver guarda el archivo de plantilla en la carpeta Templates del sitio en la carpeta raz local del sitio, con la extensin de archivo .dwt. Si no existe la carpeta Templates en el sitio, Dreamweaver la crear automticamente cuando guarde una plantilla nueva.
4.8.3. Creacin de regiones en la plantilla

Regiones editables Seleccione el texto o el contenido que desea definir como regin editable Insertar > Objetos de plantilla > Regin editable o bien en la categora Comn de la barra de herramientas Insertar, haga clic en el botn En el cuadro . que aparece introduzca un nombre exclusivo a la regin editable
Curso: Diseo Web
La regin editable aparece limitada por un contorno rectangular resaltado en la plantilla con el color de resaltado definido en las preferencias. En la esquina superior izquierda de la regin ver una ficha con el nombre de la regin. Si ha marcado una regin del archivo de plantilla como editable y despus desea bloquearla de nuevo (convertirla en no editable en los documentos basados en la plantilla) vaya a Modificar > Plantillas > Quitar formato de plantilla Regiones repetidas Antes de empezar advertir que una regin repetida no es una regin editable. Hay que insertar una regin editable en una regin repetida para que el usuario pueda cambiarla. Seleccione el texto o contenido que desea definir como Regin repetida. Insertar > Objetos de plantilla > Regin repetida o bien en la categora Comn de la barra de herramientas Insertar, haga clic en el botn . En el cuadro que aparece introduzca un nombre exclusivo a la regin repetida.
Tambin puede especificar una Tabla repetida con el botn introduciendo en el cuadro que sale a continuacin los valores que quiera.
Regiones opcionales
La forma de definirlas es la misma que las anteriores, salvo que el botn en este caso es .
Atributos editables en no editables

En la ventana de documento, seleccione un elemento para el que desee definir un atributo de etiqueta editable. Modificar > Plantillas > Hacer editable el atributo Complete el cuadro que aparece
Curso: Diseo Web
4.8.4. Apertura de una plantilla para editarla

Ventana > Activos Seleccione la categora Plantillas con el botn . Se enumerarn todas las plantillas disponibles para el sitio y se muestra una vista previa de la misma. Para editarla haga clic en el botn , o doble clic en el nombre de la plantilla. Modifique la plantilla y guarde los cambios. Dreamweaver le pedir que actualice las pginas basadas en la plantilla. Si no desea actualizarlos clic en No actualizar.
4.8.5. Documentos basados en plantillas

Archivo > Nuevo Elegimos la pestaa de Plantillas en el cuadro que nos aparece y seleccionamos la plantilla a partir de la cual queremos basar nuestra nueva pgina.
Tambin es posible crear un nuevo documento y despus aplicarle una plantilla seleccionndola de la paleta Plantillas (Templates) y arrastrndola hacia el documento, o pulsando el botn Aplicar.
4.9. Marcos
Un marco es una zona de una ventana de navegador que puede mostrar un documento HTML independiente de lo que se muestra en el resto de la ventana. Un conjunto de marcos es un archivo HTML que define el diseo y las propiedades de un conjunto de marcos. Para ver un conjunto de marcos en un navegador, introduzca el URL del archivo de conjunto de marcos; el navegador abre entonces los documentos que deben mostrarse en los marcos. El archivo de conjunto de marcos de un sitio suele llamarse index.html. As, cuando el visitante no especifica ningn nombre de archivo, este archivo se muestra de forma predeterminada.
Curso: Diseo Web
El conjunto de marcos ms normal es el que se divide en tres: la cabecera con el logotipo y que no cambia, el marco de la izquierda (estrecho) con los vnculos para moverse por el sitio y el marcho de la derecha (el mayor) que va mostrando los distintos contenidos. En realidad los marcos son contenedores que albergan documentos y que se combinan para mostrar los documentos en una sola pgina.
4.9.1. Utilizar marcos: ventajas y desventajas

El uso ms comn de los marcos es la navegacin. Sin embargo, el diseo con marcos puede resultar complicado y, en ocasiones, las pginas Web que no los incluyen logran prcticamente los mismos objetivos. Por ejemplo, si desea que la barra de navegacin aparezca a la izquierda, puede reemplazar la pgina por un conjunto de marcos o, simplemente, incluir la barra de navegacin en todas las pginas del sitio. Aunque no utiliza marcos, la siguiente imagen muestra un diseo de pgina que los imita. Hay muchos diseadores Web profesionales que prefieren no utilizar marcos y muchas personas que navegan por la Web a las que no les gustan. Esto suele deberse a que encontraron sitios que utilizaban los marcos incorrecta o innecesariamente (por ejemplo, un conjunto de marcos que vuelve a cargar el contenido de los marcos de navegacin cada vez que el visitante hace clic en un botn de navegacin). Cuando se utilizan bien los marcos (por ejemplo, para incluir controles de navegacin estticos en un marco permitiendo al mismo tiempo que cambie el contenido de otro), pueden resultar muy tiles. Entre las ventajas de utilizar marcos se incluyen: El navegador de un visitante no tendr que volver a cargar los grficos de navegacin para cada pgina. Cada marco dispone de su propia barra de desplazamiento (si el contenido es demasiado grande para una ventana), permitiendo al visitante desplazarse por los marcos de forma independiente. Entre los inconvenientes de utilizar marcos se incluyen: Lograr una alineacin grfica precisa de los elementos en distintos marcos puede resultar difcil. Comprobar las opciones de navegacin puede llevar mucho tiempo. Los URL de las pginas con marcos no aparecen en el navegador, por lo que puede resultar complicado para un visitante marcar una pgina concreta.
4.9.2. Creacin de marcos

La forma ms sencilla es seleccionar entre varios conjuntos de marcos predefinidos. Solo se puede insertar un conjunto de marcos predefinido en la vista Diseo de la ventana de documento. Insertar > HTML > Marcos o bien en la categora Diseo de la barra de herramientas de Insertar haga clic en el botn Marcos y elija la distribucin que ms le interese
Curso: Diseo Web
Los iconos proporcionan una representacin visual. El rea azul de un icono de conjunto de marcos representa el documento actual y las reas blancas representan marcos que mostrarn otros documentos. Para borrar un marco slo tenemos que mover el borde fuera de nuestro entorno de trabajo. Para obtener una vista previa de un conjunto de marcos en un navegador, deber guardar antes el archivo de conjunto de marcos y todos los documentos que se mostrarn en los marcos. Puede guardar cada archivo de conjunto de marcos y documento con marcos individualmente, o guardar al mismo tiempo el archivo de conjunto de marcos y todos los documentos que aparecen en los marcos. La opcin de guardar todos los marcos est en Archivo.
4.9.3. Modificar propiedades de los marcos

El panel Marcos, Ventana > Marcos, nos ayudar a seleccionar cada uno de los marcos. Para seleccionarlos en la ventana de documento, haga clic dentro de uno presionando la tecla Alt (se rodear de una fina lnea de puntitos). Al seleccionarlos, el Inspector de propiedades nos permite modificar sus caractersticas propias.
Es recomendable darle a los marcos valores absolutos en pxeles para evitar desplazamientos de los documentos. Para seleccionar el conjunto de marcos, Ver > Ayudas visuales > Bordes de marco. En este caso el Inspector de propiedades sera.
4.9.4. Marcos con vnculos

Para incluir un vnculo en un marco que abra un documento en otro marco, deber establecer el destino del vnculo. Por ejemplo, si la barra de navegacin est en el marco de la izquierda y desea que el material vinculado aparezca en el marco de contenido principal de la derecha, deber especificar el nombre del marco de contenido principal como destino de todos los vnculos de la barra de navegacin. Seleccione el texto o la imagen que van a ser enlaces y en el Inspector de propiedades elija, haciendo clic en la carpeta, el archivo correspondiente. En el men emergente Dest. Aparecern los nombres de los marcos. Seleccione el marco para abrir el documento vinculado en el marco seleccionado.
Curso: Diseo Web
TEMARIO
1. INTRODUCCIN A MACROMEDIA FLASH 8
1.1. CONCEPTOS BSICOS 1.2. DESCRIPCIN DEL ENTORNO 1.3 DESCRIPCIN DE ENTORNO
2. ENTORNO DE TRABAJO
2.1. 2.2. 2.3. 2.4. 2.5. 2.6. 2.7. 2.8. 2.8. REA DE TRABAJO USO DE CUADRICULA USO DE REGLAS LNEAS GUAS LNEA DE TIEMPO INTRODUCCION A LAS CAPAS HERRAMIENTAS LOS PANELES BARRA DE PROPIEDADES
3. SIMBOLOS
3.1. CONCEPTO 3.2. TIPOS DE SMBOLOS GRFICO CLIP DE PELCULA BOTONES 3.3. INSTANCIAS 3.4. CREAR Y EDITAR SMBOLOS 3.5. BIBLIOTECA
4. FOTOGRAMAS Y CAPAS
4.1- Tipos de Fotograma 4.2. Uso de Capas. 4.3. Capas gua. 4.4. Capas Mscara.
5. LA ANIMACIN EN FLASH
5.1. CONCEPTO DE ANIMACIN 5.2. TIPOS DE ANIMACIN INTERPOLACIN FOTOGRAMA A FOTOGRAMA INTERPOLACIN X MOVIMIENTO INTERPOLACIN X FORMA 5.3 BOTONES
6. ACTION SCRIPT 2.0

6.1. CONCEPTO 6.2. EL PANEL ACCIONES. MODO NORMAL. MODO EXPERTO. 6.3 ASIGNACIN DE ACCIONES.
MACROMEDIA FLASH 8.0

1. 1. CONCEPTO
Flash es una herramienta de edicin con la que pueden crearse desde animaciones simples hasta complejas aplicaciones Web interactivas, como una tienda en lnea. Las aplicaciones de Flash pueden enriquecerse aadiendo imgenes, sonido y vdeo. Flash incluye muchas
Curso: Diseo Web
funciones que la convierten en una herramienta con muchas prestaciones sin perder por ello la facilidad de uso. Entre dichas funciones destacan: la posibilidad de arrastrar y soltar componentes de la interfaz de usuario, comportamientos incorporados que aaden cdigo ActionScript al documento y varios efectos especiales que pueden aadirse a los objetos.
1.2. INGRESO AL PROGRAMA

1. Men Inicio 2. Elegir Programas 3. Ingrese al grupo Macromedia 4. Haga clic en el programa Macromedia Flash 8
1.3. ENTORNO DE TRABAJO

Para comenzar a crear pelculas antes que nada tenemos que reconocer los elementos de nuestro entorno de trabajo en flash.
Curso: Diseo Web
2.-ENTORNO DE TRABAJO:
2.1- REA DE TRABAJO.
El escenario es el lugar donde se compone el contenido de cada uno de los fotogramas que constituyen una pelcula. Dicho contenido se crea ya sea al dibujar sobre l con las herramientas de dibujo o importando imgenes existentes de otras aplicaciones. El escenario posee diversas herramientas para su manipulacin, ya sean comandos para aumentar o disminuir la vista, permitiendo disear con mayor precisin los elementos que conforman los fotogramas. Tambin cuenta con la posibilidad de desplazarse ms rpido en el escenario con la herramienta Mano. Flash incluye reglas y guas que ayudan a dibujar y disear objetos de manera precisa. Existe la posibilidad de colocar guas en un documento o activar la cuadrcula del escenario para ajustar los objetos a las mismas.
2.2. USO DE LA CUADRCULA.

En el men Ver, en su apartado de cuadrcula, se encuentran las diferentes opciones para manipular esta herramienta. Cuando aparece la cuadrcula en un documento, se muestra como un conjunto de lneas situadas detrs de todas las ilustraciones en la escena. La cuadricula tiene la capacidad de ser modificada en su tamao o el color de las lneas que la componen.
2.3. USO DE REGLAS.

Las reglas se ubican en la parte superior y a la izquierda del documento. La unidad de medida predeterminada es en pxeles pero es posible modificar dicha unidad de medicin ya sea en centmetros, pulgadas, milmetros, etc. Al mover un elemento en el escenario con las reglas visibles, aparecern unas lneas en las reglas indicando las dimensiones del elemento.
2.4. USO DE LNEAS GUAS.

Las guas al igual que las reglas y la cuadrcula, se utiliza para dar una mayor exactitud al momento de manipular los objetos en el escenario. Al hacer clic sobre alguna de las dos reglas y arrastrar hacia el escenario, se aprecia como las lneas guas aparecen dentro de l.
Curso: Diseo Web
2.5. LA LNEA DE TIEMPO.

Un componente importante en la interfaz de Macromedia Flash 8 es la lnea de tiempo. La lnea de tiempo est constituida por capas y fotogramas. Las capas se encuentran situadas del lado izquierdo del panel y los fotogramas del lado derecho. Las capas y fotogramas son las partes principales de la lnea de tiempo, en ellos se organiza y visualiza la construccin de las pelculas. Otro elemento importante de la lnea de tiempo es la cabeza lectora, cuya funcin es la de indicar el fotograma actual que se muestra en el escenario. Es posible expandir o colapsar la seccin de capas y fotogramas con solo hacer clic en la lnea divisoria vertical que se encuentra entre las dos secciones y arrastrar hasta la nueva posicin. Lo mismo sucede para la divisin baja entre la lnea de tiempo y el escenario. Por defecto la lnea de tiempo est posicionada en la parte superior de la ventana de Macromedia Flash MX, justo encima del escenario. Tiene la capacidad de ser desplazada a cualquier parte dentro de la ventana de Flash como un panel flotante.
2.6. INTRODUCCIN A LAS CAPAS.

Las capas o layers son la clave para agregar profundidad a las pelculas de Flash MX. Las capas son como hileras o niveles de contenido, que se posicionan una encima de otra. Tambin son utilizadas para organizar una pelcula de Flash. Es posible nombrar, agregar, eliminar o mover capas, tambin ocultarlas y/o bloquearlas. A travs de la posicin de las capas, es posible localizar y manipular los contenidos dentro de ellas con mayor facilidad. Colocando los objetos en capas separadas, se elimina cualquier oportunidad de que estos interacten con otros objetos que se encuentren en capas superiores o inferiores. Cuando los contenidos se encuentran en la misma capa, estos se vuelven una entidad, permitiendo que los altere o manipule en cualquier forma deseada. Flash MX proporciona la opcin de administrar las capas con la nueva caracterstica de insercin de capa flder, la cual le dar lugar a todas las capas con funcionalidad y contenidos similares. Las capas flder poseen la caracterstica de poder ser nombrados para su localizacin rpida en la lnea de
Curso: Diseo Web
tiempo. Dentro de la seccin de capas, existen tres iconos que pueden ser encontrados en la parte superior: Mostrar/Ocultar todas las capas (representado con un ojo), Bloquear/Desbloquear todas las capas (representado con un candado) y Mostrar como Lneas de Contorno todas las capas (representado con un recuadro sin relleno). Para aplicar cualquiera de estos atributos a una o ms capas en particular, basta hacer clic en el punto correspondiente al atributo que se quiera aplicar.
2.7. LOS PNELES

Otra faceta importante del entorno de autora de Macromedia Flash 8, son los pneles. Los pneles permiten manipular cualquier elemento contenido en la pelcula. Macromedia Flash 8 contiene un conjunto de pneles predeterminados, dependiendo de la resolucin del monitor y tipo de usuario (diseador o desarrollador). Es posible seleccionar un conjunto de pneles que mejor se adecue a las necesidades del diseador o desarrollador, estas opciones se encuentran disponibles en el men Ventana (Windows) de la barra de mens. Cada panel incluye un ttulo de barra, un tringulo de colapse y opciones desplegables. Se cuenta con la caracterstica de agregar, remover o dejar como flotantes los pneles de un conjunto que se encuentre en uso. Al igual que la lnea de tiempo y con el fin de proporcionar al usuario el mayor aprovechamiento del espacio en pantalla.
2.8- Las Herramientas

Todas las herramientas necesarias para crear objetos, lneas y textos pueden ser encontrados en este panel. Se divide en cuatro secciones: Herramientas, Vistas, Colores y Opciones. Cuando una herramienta es seleccionada en el apartado de Herramientas, las opciones de sta, cambian respectivamente en el apartado Opciones. Puede aumentar o disminuir la vista del escenario con las herramientas contenidas dentro del apartado Vistas, incluso moverse con mayor rapidez por el escenario con ayuda de la herramienta mano, incluida en este apartado. Para cambiar los atributos de color tanto para rellenos como para lneas de contorno, se utiliza el apartado Colores. Se debe asegurar que el objeto se encuentra previamente seleccionado para poder hacer cambios a dichos atributos.
2.9 Propiedades
Este panel proporciona inmediatamente la informacin de cualquier objeto o herramienta seleccionada. Ayuda a la edicin rpida de objetos contenidos en el escenario. El panel propiedades muestra informacin y configuracin del elemento que est seleccionado, que puede ser un documento, un texto, un smbolo, una forma, un mapa de bits, un video, un grupo, un fotograma o una herramienta.
Curso: Diseo Web
3. Los smbolos.
Los smbolos son elementos reusables de una pelcula, que pueden ser desde un simple texto o figura hasta un clip de video que haya sido importado. Estos smbolos sirven para realizar un sin nmero de tareas ya que poseen distintos comportamientos, los cuales ayudan a construir pelculas ms sofisticadas y con mayor interaccin. Los smbolos son almacenados automticamente en la biblioteca de objetos de Macromedia Flash 8, de esta forma estarn siempre disponibles para posteriormente ser utilizados. El comportamiento de los smbolos se clasifica principalmente en tres grupos: grficos, botones y clips de pelcula.
3.1. Tipos de Smbolos

Grficos. Usualmente, son imgenes estticas que son incorporadas en la lnea de tiempo principal. Poseen una lnea de tiempo igual a la lnea de tiempo principal. Los controles interactivos y sonidos no funcionan en este tipo de comportamiento. Botones. Permiten la interactividad en el documento Flash, ya que en ellos recaen generalmente las instrucciones o acciones que se han de realizar cuando el usuario genera un evento. Poseen una lnea de tiempo nica, constituida por cuatro fotogramas (estados del botn). Estos fotogramas son: reposo, sobre, presionado y zona activa. Clips de pelcula. Conocidos comnmente como Movie Clips, son animaciones que tienen su propia lnea de tiempo y trabajan de forma independiente a la lnea de tiempo principal. Los controles interactivos y sonidos, funcionan en este tipo de comportamiento. Pueden contener dentro de ellos mismos a otros clips de pelculas, grficos o botones, haciendo de esta manera objetos con mayor complejidad e interaccin superior. Es posible incluir clips en botones para hacer botones animados y dar una mayor presentacin e impacto a las aplicaciones. Mediante ActionScript se puede hacer referencia y afectar las instancias de los clips de pelcula. Los clips de pelcula tienen la ventaja de proveer mltiples lneas de tiempo a una pelcula de Flash, permitiendo a cada una de ellas actuar de manera simultnea mientras se reproduce la lnea de tiempo principal, gracias a que la lnea de tiempo de los clips de pelcula son independientes. Los efectos de un clip de pelcula son slo visibles en el reproductor de Macromedia Flash Player.
3.3.-Instancias.
Las instancias son copias de smbolos que se encuentran presentes en el escenario. Todos los smbolos pueden tener instancias. Cada una de ellas posee un nombre que ayuda a referenciar o a identificar una instancia de otra, ste es el nombre de instancia. Slo las instancias de smbolos grficos no poseen nombre de instancia. Cada vez que se modifica un smbolo, automticamente todas las instancias que dependan de l cambiarn al nuevo aspecto.
3.4.- Crear y editar smbolos.

Macromedia Flash 8 proporciona varias alternativas para trabajar con los smbolos, stos pueden ser creados a partir de un objeto existente en el escenario o comenzar a disearlo desde cero, es decir trabajar con smbolos vacos. Si se desea convertir un objeto presente en el escenario en smbolo, es necesario seleccionar previamente el o los objetos que lo compondrn, despus abrir el men Insertar / Convertir a smbolo. Una vez hecho esto, aparecer un cuadro de dilogo en el cual se especifican el nombre del smbolo, su comportamiento y el punto de registro. Al finaliza la configuracin del smbolo se debe presionar el botn OK o Aceptar. En ese momento los objetos que se convirtieron a smbolo
Curso: Diseo Web
son encerrados en un cuadro azul, indicando de esta forma que ahora sus propiedades han cambiado. Cada vez que un smbolo es creado, automticamente es almacenado en la biblioteca. En ella es posible abrir el modo edicin smbolo para poder modificarlos.
3.5. La biblioteca.
Todos los smbolos, archivos de audio, mapas de bits, videos y componentes del documento Flash, se encuestan en la biblioteca. Los smbolos grficos, botones y clips de pelculas son albergados en la biblioteca automticamente cuando son creados. La biblioteca es otro de los componentes ms importantes de la interfaz de Macromedia Flash 8. Cada que se crea un documento nuevo, la biblioteca se limpia y queda lista para comenzar a trabajar. Para abrir la biblioteca hay que seleccionar el men Ventana / Biblioteca. En muchas ocasiones es necesario utilizar objetos que ya haban sido creados en otros documentos y se perdera demasiado tiempo en volver a construirlos cada vez que se genera un archivo nuevo, por lo cual Macromedia Flash 8 tiene la capacidad para compartir smbolos y objetos utilizados en otros documentos en aquellos que apenas fueron creados Si se desea usar smbolos de una biblioteca de otro documento Flash, se debe seleccionar el men Archivo / Abrir como biblioteca, seleccionar los objetos que se necesiten y arrastrarlos a la biblioteca del documento nuevo o incluso al escenario de ste. La biblioteca est formada por dos pneles, en la parte superior se encuentra el panel de vista previa donde se puede visualizar de forma rpida el smbolo seleccionado. En la parte inferior se encuentra el listado de todos los componentes contenidos en la biblioteca as como informacin relacionada con ellos. Existen cuatro iconos en esta parte de la biblioteca: Crear smbolo nuevo. Permite crear un smbolo nuevo vaco. Crear nuevo flder. Los flderes son usados para administrar y organizar los smbolos y objetos encuentran dentro de la librera. Propiedades. Permite cambiar las propiedades del smbolo seleccionado. Borrar tems de la biblioteca. Elimina el o los smbolos seleccionados que se
Curso: Diseo Web
4. Los Fotogramas.
Un fotograma en Macromedia Flash 8 es equivalente a un cuadro en un film. Los fotogramas ayudan a determinar la duracin de la pelcula, entre ms fotogramas sean agregados, mas larga ser la animacin. Es posible agregar, mover, eliminar cortar, pegar y limpiar fotogramas a la hora que se desee, la mayora de los comandos para manipular los fotogramas se encuentran en el men rpido del botn derecho del ratn.
4.1- Tipos de Fotograma

Fotogramas Clave. Son usados cuando se quiere realizar algn cambio en determinado punto de la pelcula. Con frecuencia son utilizados en animaciones fotograma por fotograma, interpolacin de movimiento e interpolacin de forma. Cuando se inserta un fotograma clave, automticamente el contenido del fotograma anterior es trado a este nuevo punto de la pelcula. Es posible insertar fotogramas en blanco, simplemente haciendo clic con el botn derecho del ratn en el lugar donde quiere insertar el fotograma y seleccionar el comando del men desplegable Insertar Fotograma clave vaco. Etiquetas de fotogramas Las etiquetas son usadas para identificar un fotograma en particular en la lnea de tiempo, ya sea en la principal o alguna perteneciente a un clip de pelcula en un documento de Macromedia Flash 8 Proporcionan una alternativa ms fiable al momento de hacer referencia a escenas y fotogramas por medio de ActionScript. Para agregar una etiqueta en un fotograma, se debe seleccionar previamente el fotograma y en el panel propiedades, ingrese la etiqueta en el cuadro de texto rotulado <Etiqueta de fotograma>. Se debe evitar nombrar fotogramas con etiquetas largas, porque dichas etiquetas son exportadas junto con la pelcula. Si se necesita proveer ms informacin referente a un fotograma, habr que indicarse como comentario, de esta manera los comentarios no son exportados a la pelcula de Flash. Los comentarios se inician con dos diagonales ( // ).
Curso: Diseo Web
4.2. Uso de Capas.

Otro de los componentes ms importantes en la lnea de tiempo son las capas. As como los fotogramas determinan la duracin de la pelcula, las capas determinan la profundidad y dimensin de sta. Las capas en sentido figurado son un conjunto de acetatos que se colocan uno encima de otro, permitiendo que los objetos contenidos en ellos no interacten con otros. Las capas definen quien esta por encima de quien, de tal forma que es posible estar cambiando su posicin y desplegar un objeto por encima de otro. Macromedia Flash 8 incorpora las Capas flder. stas se utilizan para organizar y agrupar un indeterminado nmero de capas. Tienen la capacidad de expandirse o colapsarse, permitiendo la visualizacin de las capas contenidas en ellas. Al bloquear, ocultar o eliminar una capa flder, automticamente estas acciones afectan a las capas dependientes de ella. Es posible contener otras capas flder dentro de una capa flder, formando as una estructura ms amplia y organizada en el documento. Para aadir capas normales existen varias formas para hacerlo, entre las ms comunes se encuentra la de hacer clic sobre el icono Insertar capa o bien, seleccionando el men Insertar / Capa.
4.3. Capas gua.

Las capas guas ayudan a alinear objetos dentro del documento Flash. Estas capas no se incluyen en el archivo publicado, por lo tanto no representan un incremento en el tamao del archivo final. Las capas guas proveen a los objetos de las interpolaciones de movimiento una ruta o trayectoria a seguir, toda capa sujeta a un capa gua y que contenga interpolacin de movimiento, sus contenidos seguirn la trayectoria sealada, tomando en cuenta un punto de inicio y uno de trmino. Las capas guas estn representadas con el icono de una lnea arqueada y punteada con un punto final. Una capa gua puede afectar a una o ms capas normales, estas capas aparecern por debajo de la capa gua, se pueden identificar fcilmente ya que cuentan con una pequea sangra, lo cual indican que dependen de una capa de nivel superior. Cualquier capa se puede convertir en capa gua. Para crear una capa gua basta con seleccionar la capa dependiente y hacer clic en el icono Agregar gua de movimiento de la parte inferior del panel de capas.
4.4. Capas Mscara.

Las capas mscara permite visualizar especficamente una rea determinada de las capas que dependen de ellas, metafricamente hablando, stas capas se encargan de ocultar objetos pero dentro de ellas se encuentran agujeros que permiten visualizar que hay por debajo de ellas. Las mscaras estn representadas por un rectngulo con un ovalo transparente en el interior. Estas tienen la capacidad de enmascarar a ms de una capa para realizar efectos ms complejos. Es posible arrastrar una capa normal en direccin de la capa mscara para que sta quede enmascarada automticamente. El contenido de las capas enmascaradas, solo es posible verlos por completo en el entorno de autora, en la presentacin final no podr ver ms que lo que se encuentre dentro del rea de limitada por la capa mscara. Para crear una capa mscara, hay que seleccionar la capa que desempear la funcin de mscara, hacer clic con el botn derecho del ratn y seleccionar la opcin Mscara del men rpido. Al momento de aplicar este atributo, tanto mscara
Curso: Diseo Web
como enmascarado quedaran bloqueados (Candado), permitiendo de este modo apreciar el efecto desde el entorno de autora. Si se quita el bloqueo de dichas capas, el efecto quedara anulado, permitiendo ver la figura en la capa mscara y el contenido en el enmascarado.
Animacin en Flash 5.1. Concepto de Animacin.

Macromedia Flash 8, hace uso de la animacin para poder mover objetos dentro de la presentacin, as como cambiar sus atributos y apariencia ya sea con ActionScript o definiendo un tipo de animacin dentro del entorno de autora. En Macromedia Flash 8 existen 4 tipos de animacin: interpolacin de movimiento, interpolacin de forma, fotograma por fotograma e interpolacin de movimiento guiada . El uso de los fotogramas claves tiene como resultado cualquiera de los tipos de animacin.
5.2. Tipos de Animacin

Animacin fotograma por fotograma
Este tipo de animacin se logra a travs del uso de mltiples fotogramas, uno tras otro. Cada fotograma va cambiando su contenido conforme se va avanzando en la lnea de tiempo. Una ventaja importante de este tipo de animacin, es que se tiene el control total de ella ms su principal desventaja es que consume demasiado tiempo el poder realizar los cambios en cada uno de los fotogramas. La principal diferencia entre la animacin fotograma por fotograma y el resto de las animaciones, es que en la animacin fotograma por fotograma, el diseador construye la animacin manualmente, mientras que en las interpolaciones, Flash crea la secuencia, animando los fotogramas que se encuentran dentro de un rango de fotogramas claves.
Interpolacin de movimiento
En la interpolacin de movimiento solo es necesario crear un punto de inicio y un punto de trmino en la lnea de tiempo para poder desarrollar una animacin. A diferencia de la
Curso: Diseo Web
animacin fotograma por fotograma, la interpolacin de movimiento ahorra mucho ms tiempo al crearla. Es posible cambiar de lugar, rotar, escalar objetos con este tipo de interpolacin. nicamente objetos agrupados, textos e instancias de smbolos pueden ser animados con este tipo de interpolacin. Sin intenta hacer una interpolacin de movimiento sin un objeto agrupado, texto o instancia o con ms de un smbolo en el mismo lugar, es posible que Flash 8 realice la animacin, pero creara un nuevo smbolo en su biblioteca llamado Animar(#) y lo ms probable ser que la animacin que se dise no sea como se haba planeado.
Interpolacin de forma
La interpolacin de forma puede mover, rotar, escalar y cambiar atributos a los objetos, a diferencia de la interpolacin de movimiento, este tipo de animacin puede transformar de una figura a otra totalmente diferente. Otra diferencia es que para realizar este tipo de animacin, no se necesitan smbolos u objetos agrupados, interpolacin de forma lo nico que pide es que en el inicio y fin se encuentre al menos una figura vectorial sin importar que sean diferentes. Para crear una interpolacin de forma, hay que tener dos puntos o fotogramas claves, uno de inicio y uno de trmino, asegurar que ambos fotogramas solo contengan objetos editables o figuras. Seleccionar un fotograma que se encuentre por en medio de ambos puntos y en el panel propiedades, seleccionar la opcin Forma de la lista desplegable Animar. En la lnea de tiempo podemos apreciar diferentes notaciones que nos ayudan a identificar tipos de animacin, posibles errores, etc. Las animaciones son indicadas mediante una flecha continua, si se trata de interpolacin de movimiento, los fotogramas se tornaran de color morado, mientras que si se trata de una interpolacin de forma, se tornaran de color verde. En caso de que se haya creado una interpolacin en forma incorrecta, esta se representa por medio de una lnea punteada. Para editar una animacin, simplemente modifique el fotograma de inicio o el fotograma de trmino, automticamente
5.3. Botones.
Los botones son objetos que proporcionan la interactividad a las presentaciones diseadas en Macromedia Flash 8. Los botones, textos dinmicos, textos de entrada, componentes y Clips de pelcula tienen instancias a los que se les puede aplicar un nombre para ser referenciados por ActionScript. La mayor diferencia entre los botones y el resto de los smbolos radica en la lnea de tiempo, ya que los smbolos de tipo botn poseen una lnea de tiempo nica, la cual consta de cuatro fotogramas: Reposo, sobre, presionado, zona activa. Reposo: Este estado corresponde cuando el botn se encuentra inactivo, es la apariencia que se tiene en cuanto inicia la presentacin. Sobre: Corresponde al estado cuando el puntero del ratn se encuentra por encima del botn. Presionado: Este estado es visible cuando el puntero del ratn ha hecho presin sobre el botn. Zona activa: Determina el rea donde el botn es activado, puede considerarse como el rea para hacer clic. Este fotograma se utiliza para crear botones invisibles.
Curso: Diseo Web
6. ActionScript 2.0 6.1. Concepto.En Macromedia Flash 8 el lenguaje de programacin que maneja, se llama ActionScript. ActionScript es un lenguaje robusto, orientado a objetos, cuyas sintaxis en sus instrucciones son muy parecidas a las de JavaScript. Podra decirse que ActionScript es el hermano de JavaScript. ActionScript le atribuye a las animaciones de Flash la interactividad necesaria para poder tener un alto impacto para los usuarios finales. Una presentacin Flash sin ActionScript es semejante a las animaciones convencionales, donde solamente se muestran imgenes sin control alguno, mas que el de reproducirse hasta terminar el ciclo de vida de sta. Con ActionScript, se le otorga al usuario el poder de controlar y decidir lo que quiere hacer en la pelcula.
6.2. El panel Acciones.

En este panel, se incluyen o editar las acciones que dan como resultado la interactividad en la animacin. Estas acciones pueden ser asignadas a fotogramas y otros objetos como lo son botones y clips de pelcula. El panel Acciones consta de dos partes: En la parte izquierda del panel, se encuentra la biblioteca de acciones, mientras que en la parte derecha se encuentra el editor de acciones y el panel de parmetros. El panel de acciones maneja dos modalidades para la edicin de los scripts, el modo normal y el experto. Modo normal. Este modo es recomendado para personas inexpertas en el rea de la programacin, ya que ofrece la posibilidad de usar el panel de parmetros para construir de manera fcil y precisa las acciones necesarias para dar interactividad a las pelculas. Modo Experto. Programadores avanzados hacen uso de este modo ya que elimina el panel de parmetros y la ayuda, permitindole construir libremente el cdigo que deseen. Si existen errores en las sintaxis en el modo experto, no es posible cambiar al modo normal hasta que el o los errores se hayan corregido. La biblioteca de acciones. La biblioteca de acciones la componen todas las acciones, instrucciones y sentencias de ActionScript, dichas acciones estn clasificadas en categoras especficas. Categoras de la biblioteca de acciones a) Acciones. Contiene una lista de todas las acciones que pueden ser agregadas a los scripts. Una accin es una declaracin que agrega interactividad a la pelcula mientras sta se reproduce. b) Operadores. Contiene la lista de todos los operadores que pueden usarse en las expresiones. Los operadores son elementos que se encargan de calcular nuevos valores basados en uno o ms valores.
Curso: Diseo Web
c) Funciones. Contiene la lista de las funciones que pueden ser utilizadas en las expresiones. Una funcin es un bloque de cdigo que puede ser reutilizado, pueden requerir de parmetros y devuelve un valor especfico. d) Constantes. Contiene una lista de constantes globales que pueden ser utilizadas con las expresiones. Una constante es un elemento cuyo valor no cambia. e) Propiedades. Contiene todas las propiedades que pueden ser usadas en los clips de pelcula. Una propiedad es un parmetro que define a un objeto. f) Objetos. Contiene una lista con objetos predefinidos provenientes de ActionScript. Un objeto es un conjunto de mtodos y propiedades. g) No soportado. Contiene una lista de caractersticas que pueden ser evitadas. Estas acciones pueden se codificadas de mejor manera con otras acciones. Se han conservado estas acciones para los usuarios de versiones anteriores de Flash 8. h) Componentes de interfaz de usuario. Contiene la lista con todos los componentes UI. Cada vez que se introducen nuevos componentes a Flash, automticamente se instalan las bibliotecas necesarias para manipular por medio de ActionScript los nuevos objetos. i) ndice. Contiene todas las instrucciones ordenadas alfabticamente.
6.3- Asignacin de acciones.

Una accin puede ser asignada a fotogramas, objetos, botones e instancias de clips de pelcula. Para poder asignarle una accin, primero se debe de asegurar que el objeto ha sido seleccionado previamente. A travs de las bibliotecas de acciones es posible encontrar la accin que se desea agregar. Al hacer doble clic sobre la accin automticamente aparcera en el panel derecho. Se puede asignar tambin haciendo clic en el signo ( + ) de la barra de herramientas, seleccionar la accin y enseguida pasara al cdigo. Tambin es posible hacer estos procesos manualmente, cambiando a modo experto y escribiendo directamente las instrucciones que se necesiten. Cuando una accin es asignada a un fotograma, ste es denotado con una pequea a minscula en la lnea de tiempo. Editar un conjunto de acciones es muy similar a cuando se van asignar por primera vez, hay que seleccionar el objeto que contenga las acciones, abrir el panel de acciones (F9), seleccionar la instruccin y mediante el panel de parmetros (si es que se encuentra en modo normal) hacer los cambios necesarios. Si se encuentra en modo experto, habr que localizar la accin a editar y modificar su sintaxis manualmente. Para eliminar una accin en modo normal, se debe de seleccionar primeramente la accin y despus utilizar el botn ( - ) del panel de acciones. Si se esta sobre modo experto, seleccionar la accin y presione la tecla SUPR.
Curso: Diseo Web

Manual Diseño Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Diseño Web

Cargado por

Copyright:

Formatos disponibles

Especialidad:

Carrera: Computacin e Informtica

Curso: Diseo Web

Consecuentes Todos los siguientes mdulos

Carrera: Computacin e Informtica

Curso: Diseo Web

Carrera: Computacin e Informtica

Curso: Diseo Web

Carrera: Computacin e Informtica

Curso: Diseo Web

Carrera: Computacin e Informtica

Curso: Diseo Web

Carrera: Computacin e Informtica

Curso: Diseo Web

XIX. EXAMEN FINAL

XX. EXAMEN SUSTITUTORIO

Carrera: Computacin e Informtica

Curso: Diseo Web

Secretariado Ejecutivo de Sistemas

Ensamblaje mantenimiento y Reparacin de PC.

Carrera: Computacin e Informtica

Curso: Diseo Web

1.1. Flujo de trabajo de Dreamweaver para la creacin de sitios Web

Carrera: Computacin e Informtica

Curso: Diseo Web

1.2. Gua de recursos de formacin de Dreamweaver

2.1. Elemen tos del entorn o de trabajo

Carrera: Computacin e Informtica

Curso: Diseo Web

2.2. Barras de herramientas

Barra de herramientas Documento

Barra de herramientas Insertar

Carrera: Computacin e Informtica

Curso: Diseo Web

2.3. Inspector de propiedades

Men Ventana > Propiedades

2.4. Mens contextuales

3. Definicin de un sitio local. Diferencias entre sitio local y sitio remoto.

Carrera: Computacin e Informtica

Curso: Diseo Web

3.1. Configuracin de un sitio de Dreamweaver nuevo: carpeta local

Carrera: Computacin e Informtica

Curso: Diseo Web

3.2. Carpeta remota

3.3. Diferencias entre sitio local y sitio remoto

4. Creacin de una pgina con Dreamweaver

Carrera: Computacin e Informtica

Curso: Diseo Web

Creacin de un documento en blanco

Creacin de un documento basado en una archivo de diseo Dreamweaver

Creacin de un documento basado en una plantilla existente

Carrera: Computacin e Informtica

Curso: Diseo Web

4.1. Modos de edicin en Dreamweaver

4.2. Definir las caractersticas de la pgina

Carrera: Computacin e Informtica

Curso: Diseo Web

Imagen de fondo o un color de fondo para la pgina

Modificar > Propiedades de la pgina > Aspecto

Carrera: Computacin e Informtica

Curso: Diseo Web

Definicin de colores predeterminados para el texto

Propiedades de pgina CSS frente a propiedades de pgina HTML

Carrera: Computacin e Informtica