Prácticas DreamCS3

Prcticas Dreamweaver CS3

Seminario de Diseo Grfico con Especialidad en Animacin Mdulo

DREAMWEAVER

15


Prctica 0 Introduccin a HTMLFecha: _______________ Duracin: Esta leccin tomar aproximadamente 90 minutos en ser completada. Objetivo: En esta leccin, se dar la introduccin a HTML por medio de la construccin de una pgina sencilla. Temas a Practicar: Adquirir un espacio en servidos gratuito Dar de alta un domino o subdominio Generar una pgina de inicio en construccin Subir archivos a el dominio Conocer diferentes espacios en los cuales encontrar informacin de HTML Desarrollo: Descubrir lo sencillo que puede ser generar archivos HTML y publicar sitios web Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada Deber obtener los siguientes resultados.

15


Prctica 1 Introduccin rpida a Dreamweaver CS3Fecha: _______________ Duracin: Esta leccin tomar aproximadamente 90 minutos en ser completada. Objetivo: En esta leccin, se dar la introduccin a Dreamweaver CS3 por medio de la construccin de un sitio Web sencillo. Temas a Practicar: Crear una nueva pgina de inicio Salvar un documento Modificar el ttulo de la pgina Cambiar encabezados de texto Insertar texto de un documento externo Aadir imgenes e imgenes de fondo. Ligas a otras pginas del sitio Seleccionar y modificar los estilos CSS. Previsualisar el sitio en un navegador. Desarrollo: Si se abre por primera vez Dreamweaver, la primera pregunta es por dnde empezar? la respuesta es sencilla por el inicio, toma ventaja de las plantillas PRE diseadas de pginas para crear rpidamente sitios colocando el contenido personalizado, ms adelante en el curso se ira viendo como modificar y trabajar con Dreamweaver para construir sitios profesionales. Se usaran los archivos lecciones/leccion01 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada Deber obtener los siguientes resultados.

15


15


Prctica 2 Personalizando el espacio de trabajoFecha: _______________ Duracin: Esta leccin tomar aproximadamente 90 minutos en ser completada. Objetivo: En esta leccin aprender a sacar el mximo provecho del rea de trabajo de Dreamweaver y como personalizarla Temas a Practicar: Entendiendo el acomodo del rea de trabajo. Arreglo y reposicionamiento de los paneles. Establecer un rea de trabajo personalizada. Trabajar con el inspector de propiedades. Mostrar u ocultar barras de herramientas. Espesificar preferencias. Desarrollo: Aunque construir pginas Web incluye un grado de conocimiento y destreza tcnica los diseadores son artistas de corazn por lo que necesitan tener un espacio en el cul sentirse cmodos. Dreamwaeaver ofrece muchas alternativas de personalizacin para enfocarse en la parte creativa del desarrollo. Se usaran los archivos lecciones/leccion02 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada. Deber obtener los siguientes resultados.

15


Prctica 3 Aplicando hojas de estilo CSSFecha: _______________ Duracin: Esta leccin tomar aproximadamente 90 minutos en ser completada. Objetivo: En esta leccin aprender a trabajar con hojas de estilo CSS (Cascading Style Sheets) Dreamweaver Temas a Practicar: Definir un sitio en Dreamweaver. Ligar una hoja de estilo externa. Generar una nueva regla en un estilo CSS. Aplicar un estilo en la pgina. Cambiar las propiedades de un estilo existente. Crear una hoja e estilo para impresin. Desarrollo: Las hojas de estilo son la tecnologa usada en los sitios por los diseadores para proveer al sitio de una imagen consistente a lo largo de todo el sitio, Dreamweaver CS3 es una herramienta poderosa de CSS con la habilidad y facilidad de mostrar, definir, aplicar y modificar estilos para una variedad de medios como son en pantalla, impresos o mviles. Se usaran los archivos lecciones/leccion03 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada. Deber obtener los siguientes resultados. en

15


15


Prctica 4 Trabajando con textoFecha: _______________ Duracin: Esta leccin tomar aproximadamente 90 minutos en ser completada. Objetivo: En esta leccin aprender a trabajar con encabezados, prrafos y otros elementos de texto en Dreamweaver Temas a Practicar: Colocar encabezados y texto de prrafos. Incluir texto de otras fuentes. Insertar listados numricos y con vietas Correccin ortogrfica del documento. Buscar y reemplazar texto. Insertar y modificar tablas Importar datos tabulares. Desarrollo: Casi todo el mundo del diseador web gira en torno al texto: capturarlo, darle estilo, y actualizar todo tipo de palabras. Las herramientas de texto de Dreamweaver son variadas y fciles de usar Se usaran los archivos lecciones/leccion03 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada. Deber obtener los siguientes resultados.

15


Prctica 5 Diseando con imgenesFecha: _______________ Duracin: Esta leccin tomar aproximadamente 90 minutos en ser completada. Objetivo: En esta leccin aprender a incluir imgenes en un sitio con Dreamweaver Temas a Practicar: Insertar una imagen. Aplicar una imagen de fondo. Optimizar una imagen incorporada. Aadir rollovers de fireworks a una pgina. Importar un archivo de photoshop. Copiar y pegar una imagen de photoshop. Trabajar con Bridge. Desarrollo: No se puede negar que la web es un medio altamente visual. Dreamweaver provee un gran nmero de maneras de trabajar con imgenes, ya sea desde el mismo programa o por medio de otros programas de retoque de imagen. Se usaran los archivos lecciones/leccion05 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada. Deber obtener los siguientes resultados.

15


Prctica 6 Insertando ligasFecha: _______________ Duracin: Esta leccin tomar aproximadamente 60 minutos en ser completada. Objetivo: En esta leccin aprender a insertar diferentes tipos de ligas a diferentes elementos de la pgina por medio de Dreamweaver Temas a Practicar: Aplicar una liga de texto a otra parte del sitio. Liga desde una imagen. Crear una lnea a una pgina de otro sitio. Establecer una liga de email. Ligar a una parte especfica de una pgina. Desarrollo: De cierta manera, en el fondo la web es una coleccin de ligas, dentro de un sitio, las ligas proveen un paso rpido a navegar de un tema a otro; una liga de un sitio a otro salva grandes distancias con un solo clic. Se usaran los archivos lecciones/leccion06 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada. Deber obtener los siguientes resultados.

15


Prctica 7 Creando plantillas de pginasFecha: _______________ Duracin: Esta leccin tomar aproximadamente 120 minutos en ser completada. Objetivo: En esta leccin aprender a crear y trabajar con plantillas de pginas en CSS con Dreamweaver Temas a Practicar: Definir las reglas CSS para las reas de boceto. Aplicar las reglas CSS a etiquetas insertadas. Aadir marcadores de posicin para texto e imagen a la pgina. Exportar las reglas CSS a una pgina de estilo externa. Usar las reglas y guas para definir la plantilla con exactitud. Desarrollo: La revolucin de las hojas de estilo CSS contina en el mundo del diseo web a paso firme. Ahora se usan plantillas de hojas de estilo para desarrollar sitios y Dreamweaver produce CSS de manera estndar y limpia. Se usaran los archivos lecciones/leccion07 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada.

15


Deber obtener los siguientes resultados.

Prctica 8 Creando pginas interactivasFecha: _______________ Duracin: Esta leccin tomar aproximadamente 90 minutos en ser completada. Objetivo: En esta leccin aprender a crear pginas interactivas con Dreamweaver Temas a Practicar: Aprender los comportamientos de Dreamweaver. Aplicar un comportamiento para reemplazar una imagen con otra. Modificar un comportamiento existente. Abrir una ventana del explorador de forma interactiva. Definir reas a mostrar u ocultar bajo el control del usuario. Cambiar el evento que controla un comportamiento. Desarrollo: Qu trae a la vida a una pgina web? La interactividad, al pasar el cursor por una imagen esta cambia, al dar clic en una liga se abre otra ventana de informacin o ver que algo parpadea por un momento para llamar la atencin son algunas de las cosas que se pueden lograr fcilmente con Dreamweaver. Se usaran los archivos lecciones/leccion08 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada. Deber obtener los siguientes resultados.

15


Prctica 9 Integrando Ajax con SpryFecha: _______________ Duracin: Esta leccin tomar aproximadamente 90 minutos en ser completada. Objetivo: En esta leccin aprender a aadir funcionalidades de web2.0 a sus pginas con Dreamweaver Temas a Practicar: Aprender sobre Ajax y Spry de Adobe. Trabajar con datos de XML. Aadir datos XML a la pgina web. Aadir una tabla de Spry. Incluir un widget Acordion Spry. Aplicar un efecto Spry.

Desarrollo: Bienvenido al mundo de la web 2.0, aqu partes de la pgina son actualizadas por medio de XML sin cargar la pgina entera de nuevo, aqu contenidos son ocultados o mostrados al dar clic, partes son resaltadas por medio de efectos, todo esto y ms se puede lograr gracias a la herramienta Spry de Dreamweaver para controlar Ajax. Se usaran los archivos lecciones/leccion09 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta:

15


Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada. Deber obtener los siguientes resultados.

15


Prctica 10 Construyendo formasFecha: _______________ Duracin: Esta leccin tomar aproximadamente120 minutos en ser completada. Objetivo: En esta leccin aprender a construir formularios con Dreamweaver Temas a Practicar: Insertar una forma. Incluir campos de texto. Trabajar con Spry widgets para formularios. Usar radiobotons. Aplicar checkboxes. Insertar listas. Aadir botones de formulario. Incorporar campos y leyendas Aplicar estilos por medio de CSS Desarrollo: Los formularios son la principal forma de comunicarnos con los usuarios del sitio, si estn mal implementados pueden ser frustrantes para ambos usuarios y administradores, Dreamweaver proporciona una solucin robusta para formularios. Se usaran los archivos lecciones/leccion10 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada. Deber obtener los siguientes resultados.

15


Prctica 11 Aadiendo MultimediaFecha: _______________ Duracin: Esta leccin tomar aproximadamente 60 aproximadamente minutos en ser completada. Objetivo: En esta leccin como incorporar diferentes tipos de multimedia al sitio con Dreamweaver Temas a Practicar: Insertar una pelcula de flash. Aadir video de flash. Crear un slide show de flash. Desarrollo: Quieres hacer que la pgina web cobre vida? Aade uno o ms elementos multimedia a la mezcla Hoy en da multimedia web es sinnimo de Flash. Se usaran los archivos lecciones/leccion11 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada. Deber obtener los siguientes resultados.

15


Prctica 12 Publicar en la webFecha: _______________ Duracin: Esta leccin tomar aproximadamente 90 minutos en ser completada. Objetivo: En esta leccin aprender a publicar el sitio web en internet con Dreamweaver Temas a Practicar: Definir un sitio remoto. Checar las pginas para compatibilidad entre navegadores. Validar pginas. Subir archivos a la red. Bajar pgina de la red. Desarrollo: Es tiempo de compartir tu diseo con el mundo, nada se compara con ver tu trabajo publicado en la red, pero antes de ver tu trabajo hay que hacer algunos ajustes para validar que el sitio ser visto de manera correcta por los diferentes usuarios. Se usaran los archivos lecciones/leccion12 para desarrollar los temas de la prctica. Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Funcionalidad de acuerdo a la prctica 5 puntos Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada. Deber obtener los siguientes resultados.

15


Prctica 13 Desarrollar un sitioFecha: _______________ Duracin: Esta leccin tomar aproximadamente 360 minutos o ms en ser completada. Objetivo: En esta leccin desarrollar un sitio web propio con Dreamweaver Temas a Practicar: TODOS los vistos en las prcticas anteriores

Desarrollo: Se desarrollar y publicar un sitio funcional propio de tema libre, siempre y cuando el tema no sea ofensivo Forma de evaluacin: se tomar en cuenta: Trabajo en clase 3 puntos Entrega a tiempo 2 puntos Diseo 5 puntos Est prctica vale el 40 % de la calificacin final Entrega: Se entregar la carpeta electrnica con los archivos de la prctica terminada.

15

Prácticas DreamCS3

Documents

Transcript of Prácticas DreamCS3