Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web

Transcripción

1 Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Índice Conceptos básicos En este capítulo se enseñan los conceptos básicos de trabajo en Adobe Dreamveaver CS3. También se describen los distintos menús y paneles y se muestra cómo modificar el espacio de trabajo. Creación de sitios en Dreamweaver Para poder crear un sitio web se pueden llegar a necesitar gran cantidad de archivos. Dreamweaver se ocupa de que el trabajo con todos estos archivos sea lo más fácil posible usando los "sitios". El entorno de trabajo Es importante comprender cómo modificar el espacio de trabajo para que los distintos paneles estén siempre a mano y no estorben. Utilización de los paneles Un programa tan completo como Dreamweaver necesita de muchos paneles agrupados según funcionalidad. En este vídeo se aprende a manejar estos paneles. Ayudas visuales y de programación Gracias a las ayudas visuales y de programación el programa evita al usuario la repetición de tareas comunes. Contenido de Head Las páginas HTML necesitan etiquetas con información que permita a los navegadores su correcta visualización. Aquí se aprende a controlar el contenido de la etiqueta Head Las barras de herramientas Además de paneles, es necesario el uso de varias barras de herramientas, y es necesario saber cómo están estructuradas para poder optimizar su uso. Métodos abreviados de teclado Para poder sacarle el máximo partido a un programa, lo mejor es usar los atajos de teclado. Dreamweaver además permite su personalización. Trabajando con elementos gráficos Para crear webs es necesario el uso de gran variedad de contenidos que las harán interesantes. En este capítulo se aprende a añadir los distintos tipos de contenido a las páginas HTML. Textos Los textos son la base de casi cualquier sitio web. Por ello es necesario conocer bien las posibilidades de formateo de texto que Dreamweaver ofrece. Uso del texto en Dreamweaver Conceptos básicos del texto en Dreamweaver. Técnicas básicas de formateo de textos Técnicas de formateo de texto: uso de estilos CSS y de etiquetas. Estrategias de formateo del texto Uso de los distintos paneles para formatear textos. Codificación de las páginas web Control de la codificación de los textos en las páginas web. Vínculos Para poder navegar entre páginas web es necesario que existan Hipervínculos que las comuniquen. En este apartado se aprende a añadir y formatear enlaces. Creación de Hipervínculos Creación básica de vínculos entre páginas. Vínculos a URL relativas y absolutas. Modificación del aspecto de los enlaces El formato básico de un enlace normalmente no queda estético en las páginas web. En este vídeo se aprende a 1 / 6

2 El formato básico de un enlace normalmente no queda estético en las páginas web. En este vídeo se aprende a formatear los Hipervínculos. Enlaces de descarga de archivos Aquí se aprende a añadir enlaces a archivos pdf o a archivos descargables desde internet. Enlaces de correo electrónico En este vídeo se describe cómo añadir enlaces que envíen correos electrónicos y cómo controlar esos envíos. Navegación en una sola página Creación de navegación en una misma página web mediante el uso de anclajes con nombre. Uso de imágenes como Hipervínculos Es muy útil para mejorar el aspecto de un sitio web el uso de imágenes con la función de vínculos. Así no tendremos que depender del texto simple para crear las botoneras de enlaces. Imágenes Utilización de las imágenes para mejorar el diseño de nuestras páginas web. Formateo de imágenes. Uso de imágenes interactivas. Uso de imágenes Vinculación de imágenes a los archivos HTML usando Dreamweaver. Formateo de imágenes Modificación de las propiedades de la etiqueta img. Formateo de imágenes. Optimización de imágenes para la web Minimización del ancho de banda consumido en nuestras webs mediante la optimización del ancho de banda desde Dreamweaver. Uso de Adobe Bridge para gestionar imágenes Adobe integra en sus suites el Adobe Bridge que simplifica la tarea de ordenar y controlar los archivos de nuestros sitios. Imágenes de sustitución Integración de Dreamweaver y Photoshop CS3 Integración de los programas de la versión CS3 para añadir imágenes a Dreamweaver. Actualización de imágenes transformadas. Imágenes con zonas interactivas Creación de mapas de zonas interactivas en imágenes complejas. Multimedia Uso de archivos multimedia Descripción de los tipos de archivo incrustables desde Dreamweaver. Descripción del uso de plugins. Archivos SWF de Flash Vinculación de archivos de Flash en las páginas HTML. Control de los archivos Flash usando JavaScript. Textos en Flash Utilización de textos en flash: creación de rótulos usando tipos de letra no convencionales. Archivos de vídeo Adición de archivos de vídeo a las páginas web. Uso de archivos de vídeo y de archivos de vídeo de Flash (FLV). Archivos de sonido Vinculación simple de archivos de sonido a las páginas html. Uso de plugins. Estilos CSS Los estilos CSS van mucho más allá del simple formateo del html con etiquetas. En este capítulo se aprende a usar los estilos CSS para mejorar el diseño de las páginas web. Uso de estilos CSS Descripción de los estilos CSS. Uso básico de Dreamweaver con CSS. Formateo de texto con CSS Formateo de texto con estilos CSS. Uso de los estilos CSS. Formateo de elementos gráficos con CSS Uso de reglas CSS para formatear todo tipo de elementos en Dreamweaver. Formateo de vínculos con CSS 2 / 6

3 Reglas CSS avanzadas para la creación de vínculos. Creación de botoneras basadas en texto. Formularios El uso de formularios es fundamental para crear webs dinámicas en las que se pueda recuperar información del usuario. Uso de formularios en Dreamweaver CS3. Creación de formularios Creación de formularios para enviar información desde páginas web. Gestión de los datos enviados. Campos de texto Envío de textos desde formularios. Campos de texto, campos de contraseña, áreas de texto. Casillas de verificación Creación de listas de opciones no excluyentes. Uso de casillas de verificación (checkboxes). Botones de opción Creación de listas de opciones. Uso de botones de opción (radiobuttons). Menús desplegables y listas Uso de desplegables en formularios. Listas y menús. Subir archivos a internet desde un formulario Creación de campos de selección de archivos para subirlos al servidor. Utilización de campos ocultos Uso de campos ocultos para enviar información sin molestar al usuario. Mejora de del aspecto de los formularios Creación de botones en formularios. Embellecimiento de formularios. Maquetación de páginas HTML Para colocar los distintos elementos visuales donde queremos usar HTML, es necesario el uso de tablas y etiquetas DIV. Formateo de listas Organización de datos usando listas. Uso de CSS con las listas. Uso de tablas Utilización de tablas para organizar los datos y los contenidos visuales. Propiedades de las tablas. Descripción básica de las tablas Descripción básica de los atributos de las tablas. Modificación simple de las tablas. Formateo de las tablas Embellecimiento de las tablas. Formateo de filas, columnas y celdas. Importación de datos externos Creación de tablas complejas de manera automática mediante la importación de datos guardados en archivos externos. Ordenación de tablas Ordenación de los datos de las tablas. Criterios de ordenación. Uso de etiquetas DIV Uso de etiquetas DIV y de estilos CSS para controlar la posición de los distintos elementos de las páginas HTML. Etiquetas DIV PA Uso de etiquetas DIV con posicionamiento absoluto para crear web complejas. Plantillas basadas en DIV y CSS Uso de las plantillas basadas en DIV y CSS que suministra Dreamweaver. Uso de imágenes de rastreo Uso de imágenes de rastreo para el diseño de páginas web. Maquetación mediante IFRAMES y marcos En webs complejas es necesario minimizar tanto el tiempo de trabajo como el ancho de banda. Para ello es importante el uso correcto de los IFRAMES y de los marcos. Uso de IFRAMES Uso de IFRAMES como sustituto de los marcos. Carga de páginas HTML dentro de mis HTML. Formateo de IFRAMES. 3 / 6

4 Uso de marcos Uso de marcos. Creación de páginas complejas usando múltiples archivos HTML. Maquetación mediante marcos Maquetación web usando marcos. Control del aspecto de los marcos. Vínculos usando marcos Uso de enlaces entre distintos marcos. Creación de botoneras. Maquetación avanzada con marcos Formateo avanzado de webs usando marcos. Creación del índex del sitio de ejemplo JavaScript El lenguaje HTML simplemente sirve para mostrar visualmente elementos en el navegador. Dreamweaver en combinación con JavaScript nos ofrece múltiples herramientas que permiten el uso de JavaScript sin necesidad de tener conocimientos de él. Programación en JavaScript con Dreamweaver Herramientas de programación con JavaScript en Dreamweaver. Uso de comportamientos. Uso de JavaScript en Dreamweaver Programación con JavaScript en Dreamweaver. Herramientas de programación. Creación de popups con JavaScript Creación de una ventana emergente usando los comportamientos de Dreamweaver. Uso de comportamientos. Validación de formularios Uso de comportamientos para validar formularios. Detección de plugins y navegadores Control de la navegación dependiendo de la versión de navegador. Comprobación de plugins. Fragmentos Reutilización de código. Uso, modificación y creación de fragmentos de código reutilizables. Descripción de los fragmentos Descripción del panel de fragmentos. Uso de los fragmentos. Modificación de fragmentos Creación y modificación de fragmentos. Ejemplos de fragmentos. Creación de elementos complejos con fragmentos Creación de código complejo usando fragmentos. Control de errores de JavaScript usando el navegador. SPRY Creación de elementos interactivos basados en AJAX. Uso de los elementos suministrador por Dreamweaver. Descripción de AJAX AJAX es la suma de varias tecnologías, principalmente JavaScript, XML y CSS. En este vídeo se describen los principios básicos de AJAX y Dreamweaver. Elementos de formularios SPRY Elementos de formulario SPRY. Formularios autovalidados. Menús SPRY Menús y paneles de fichas SPRY. Creación y formateo. SPRY y XML Uso de elementos SPRY para la importación dinámica de datos mediante XML y para su presentación en páginas web. Plantillas y Biblioteca Administración del sitio local y de los archivos en el servidor remoto. Uso de plantillas y biblioteca para automatizar el diseño de múltiples páginas web. Administración de sitios Dreamweaver está formado por un editor de páginas web y un organizador de sitios para el control de los archivos del sitio web. Aquí se aprende a configurar sitios y preparar el sitio en el servidor remoto. Configuración de los sitios Configuración de sitios. Conexión del sitio local con el servidor remoto. Subida de archivos al servidor. 4 / 6

5 Trabajo en grupo Opciones de protección de archivos, sincronización y notas informativas para el trabajo en equipo. Mapa del sitio Uso del mapa de sitio para el control del árbol de navegación. Exportación del árbol de navegación. Exportación de sitios Exportación de sitios para su configuración en diferentes ordenadores. Configuración avanzada de sitios Control del aspecto del panel de archivos. Configuración del firewall en Dreamweaver. Plantillas La utilización de plantillas hace que la tarea de crear y modificar páginas HTML similares sea algo simple y automático. Creación y uso de las plantillas Creación de plantillas para la reutilización de diseños y la automatización de los cambios de maquetación. Creación de atributos editables Control sobre las etiquetas y sus atributos usando los atributos editables. Archivos vinculados a las plantillas. Regiones opcionales Plantillas anidadas Anidación entre plantillas. Plantillas anidadas en otras para crear apartados con diseños dependientes. Regiones repetidas Creación de regiones repetidas para controlar elementos de apariencia controlada mediante plantillas repetidos un número indefinido de veces. Archivos dependientes de plantillas Manipulación de los archivos dependientes de plantillas. Separación de archivos. Opciones de plantilla. Elementos de biblioteca Creación, modificación y reutilización de elementos de biblioteca en sitios de Dreamweaver. Herramientas de código Herramientas globales de control de la calidad del código generado. Codificación del HMTL Herramientas de control de la codificación en Dreamweaver CS3 Optimización del HTML de Word Mejora del código HTML generado por Microsoft Word. Optimización del HTML Optimización del HTML generado por otros programas, o de HTML "ensuciado" en el proceso de diseño. Validación del código Herramientas de búsqueda de errores en el código. Compatibilidad con navegadores Herramientas de comprobación de la compatibilidad del código en diferentes versiones de navegadores. Informes del sitio Generación de informes sobre errores y advertencias en todo el código del sitio. Accesibilidad Parámetros de accesibilidad en Dreamweaver. Configuración. Buscar y reemplazar Herramienta de buscar y reemplazar para localizar y cambiar textos, etiquetas o atributos repetidos. Sitios dinámicos Fundamentos de la creación de aplicaciones de servidor mediante Dreamweaver. Configuración del equipo Descripción básica de las aplicaciones de servidor. PHP y ASP.NET. Directivas de instalación. Configuración del sitio Descripción de la configuración de Dreamweaver para trabajar con sitios dinámicos. Configuración de la base de datos. Herramientas de código dinámico 5 / 6

6 Además de la posibilidad de programar normalmente, Dreamweaver también ofrece elementos dinámicos prediseñados como juegos de regitros o formularios de inserción. 6 / 6