Adobe dreamweaver Cs3
Descargar como PPTX, PDF0 recomendaciones1,090 vistas
El documento describe las funciones de Dreamweaver CS3, un software para crear páginas web. Dreamweaver CS3 permite diseñar páginas de forma visual sin necesidad de codificar HTML a mano. Ofrece herramientas para trabajar con tablas, marcos, capas, comportamientos JavaScript y FTP.
Adobe dreamweaver Cs3
- 1. ALUMNO: David Mamani Mamani. PROFESOR:. Emilio Félix Alberto 4 º « H» 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 1
- 2. DEFINICIÓN • Dreamweaver CS3 es un software fácil de usar que permite crear páginas web profesionales. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 2
- 3. FUNCIONES • Las funciones de edición visual de Dreamweaver CS3 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. • Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. • Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 3
- 4. ENTORNO DE TRABAJO • El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rápidamente. • A. Barra Insertar • B. Barra de herramientas Documento • C. Ventana de documento • D. Grupos de paneles • E. Selector de etiquetas • F. Inspector de propiedades • G. panel Archivos 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 4
- 5. NOVEDADES…. • Mejoras en Spry. El "Framework" o estructura Spry ha recibido un fuerte impulso en esta versión de Dreamweaver. Spry es un conjunto de archivos JavaScript que permiten la inclusión de elementos dinámicos en las páginas HTML. Por ejemplo se pueden incluir acordeones, barras de menus, validación de formularios, acceso a datos XML, etc. • Mayor integración con Photoshop y Fireworks. Ahora es posible pegar directamente imágenes desde Photoshop en una página HTML de Dreamweaver. Luego con un doble clic podremos ir a editar la imagen en Photoshop. Se pueden importar imágenes con capas. • Mejoras en la comprobación de la compatiblidad con diferentes navegadores. Dreamweaver CS3 puede generar informes con los problemas de visualización de elementos CSS en los navegadores más utilizados. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 5
- 6. Adobe CSS Advisor es un sitio web accesible desde Dreamweaver que contiene información útil para resolver los problemas de compatibilidad entre navegadores. • Mejoras en CSS. La administración de CSS es más fácil, ahora se pueden trasladar elementos CSS entre diferentes hojas de estilo. También ha aumentado la cantidad de plantillas CSS disponibles para aplicar a nuestras páginas web. • Adobe Device Central, incluido en la Adobe Creative Suite, facilita la publicación en dispositivos móviles, PDAs, etc.. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 6
- 7. EL TEXTO • Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, aunque sean menos que las que se nos ofrecen a través del menú Texto. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 7
- 8. PROPIEDADES DEL TEXTO: • FORMATO: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o preformateado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetará que hayan varios espacios en lugar de solo uno. Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 8
- 9. • Tamaño: Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, centímetros, etc... • Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 9
- 10. • Estilo: Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A través del menú Texto también se puede, entre otras cosas, subrayar el texto. • Alinear: A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 10
- 11. • Lista: Estos botones permiten crear listas con viñetas o listas numeradas. • Sangria: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de márgen que se establece a ambos lados del texto. En este caso caso los botones se refieren a sangría a la izquierda del texto. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 11
- 12. HIPERENLACE • Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. • Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 12
- 13. IMÁGENES • Vamos a ver un poco más sobre estos formatos: • Formato GIF: Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animación. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 13
- 14. • Formato JPG: Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse. Puedes incluir imágenes en otros formatos a través de Dreamweaver, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG. Si introduces una imagen BMP en Dreamweaver, te aparecerá un cuadrado gris en su lugar. La imagen solo se mostrará correctamente en el navegador. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 14
- 15. OPTIMIZACIÓN DE UNA IMAGEN • Es posible optimizar una imagen insertada en un documento abierto en Dreamweaver, a través de Fireworks. De este modo puede modificarse el formato de la imagen, la transparencia, la paleta de colores que utiliza, etc. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 15
- 16. TRANSPARENCIAS 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 16 Por ejemplo, en la imagen de la derecha el fondo puede desentonar con el fondo de la página, o hacer que su apariencia sea más pobre. Lo primero que hay que hacer es establecer un color de fondo para la imagen, de modo que éste no coincida con el color de ningún otro elemento del dibujo, para que éste último pueda seguir mostrándose correctamente después de aplicar la transparencia. Después podrá aplicarse la transparencia sobre el color deseado, desde algún programa de tratamiento de imágenes, como puede ser Fireworks. Una forma de aplicar transparencia mediante Fireworks es a través de los botones que puedes ver en la pantalla anterior (en optimizar imagen).
- 17. MULTIMEDIA • Las películas Flash pueden insertarse en una página a través del menú Insertar, Media, opción Flash, o pulsando Ctrl+Alt+F. También pueden insertarse pulsando sobre la opción Flash que aparece en la pestaña Común del panel Insertar, botón Media. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 17
- 18. • Sonido: • Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. • Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug-in. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 18
- 19. PLANTILLAS • Las plantillas son una especie de copia de la página en la que van a estar basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que serán fijas, que no podrán ser modificadas. • No es posible modificar las propiedades de una página que está basada en una plantilla, a excepción del título. Cuando se desea que existan páginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las páginas en una u otra plantilla, según el color de fondo que se desee para cada una. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 19
- 20. CAPAS Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página (es decir, que tienen una posición absoluta en la página), en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 20
- 21. OTROS ELEMENTOS Marquesinas 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 21 Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de línea. A continuación tienes un ejemplo de marquesina.
- 22. EJERCICIOS: 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 22 Barra de Herramientas Barra de Estado Barra de propiedades
- 23. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 23 Barra Insertar Color de borde de imágenes y líneas horizontales
- 24. • Diseña la siguiente página con el apoyo de las herramientas de arriba y las pautas que se indican a continuación: • Elige un texto para tu página e imágenes a elección sobre un tema en particular. Cuida de pegar el texto en Dreamweaver con la opción EdiciónPegado Especialsolo texto, para evitar traer el formato Web. • Luego deberás diseñar una página libre que contenga: • Formatos de texto diversos (Tipo de fuente, tamaño, color, etc.) • Debe tener un título. • Como mínimo 3 imágenes a las que se le deberán modificar sus propiedades (imágenes recortadas, con modificaciones de color o brillo, borde de diferente grosor y color, alineaciones diferentes.). • Formatos de página (Fondos de color o imagen de fondo). • Como mínimo 2 líneas horizontales de diferente color, ancho, grosor, alineación y tipo de línea sólido. ( ). • Al menos 4 hipervínculos (también llamados vínculos) en texto e imágenes hacia: • direcciones Web externas (http://www.......), • direcciones de correo (mailto:nombre@direccion.com), • paginas Web que tengas en tu carpeta (nombre.html) • archivos de tu carpeta (imágenes, documentos de texto, etc) • Guarda el archivo en tu carpeta personal con el nombre Eje02_DWlibre. • Abre el archivo con el Navegador Internet Explorer (Vista previa o F12) para ver los resultados. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 24
- 27. • Instrucciones • • Ingresa a la cuenta de Google: formulario.proyecto@gmail.com • Accede a la opción Docs y dentro de ella seleccionar Crear nuevoFormulario • Ingresa las preguntas como se ve en la imagen sabiendo que: • • La primera y segunda es tipo texto • La tercera es tipo test • La cuarta es elegir de una lista • La quinta es casillas de verificación • • Luego haz clic en el botón Mas acciones-->Insertar • Copia el código proporcionado y pégalo en una nueva página Web creada en Dreamweaver entre las etiquetas <body> y </body> • Guarda la página Web con el nombre formdocs.html • Abre el navegador y observa el resultado 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 27
- 28. EJERCICIO 3: 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 28 Barra de Estado Barra Insertar Barra herramientas
- 29. • Diseña la página con el apoyo de las herramientas de arriba y pautas que se indican a continuación: • Elige un texto para tu página e imágenes a elección sobre un tema en particular. Cuida de pegar el texto en Dreamweaver con la opción EdiciónPegado Especialsolo texto, para evitar traer el formato web. Luego deberás diseñar una página libre que contenga: • Formatos de texto diversos (Tipo de fuente, tamaño, color, etc.) • Como mínimo 2 imágenes a las que se le deberán modificar sus propiedades (con modificaciones de color o brillo, con borde, etc.). • Formatos de página (Fondos de color o imagen de fondo) • Debe tener título 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 29
- 30. 26/09/2013 DERECHOSRESERVADOSDE:David MamaniMamani 30 •Guarda el archivo en tu carpeta personal con el nombre Eje01_DWlibre •Abre el archivo con el Navegador Internet Explorer (Vista previa o F12) para ver los resultados.