Presentación alanis
Descargar como PPTX, PDF0 recomendaciones334 vistas
Este documento presenta una introducción al software Dreamweaver CS5, incluyendo su definición como un programa para crear páginas web de forma visual sin necesidad de codificar manualmente, una descripción de su entorno de trabajo, y instrucciones sobre cómo formatar texto, insertar HTML, crear una primera página web simple, y abrir y cerrar el programa.
Presentación alanis
- 1. Alanís Paola Galindo Viloria 11ºE
- 2. MENÚ 1. Definición de Dreamweaver CS5 2. El entorno de Dreamweaver CS5 3. El texto: propiedades y formato 4. HTML desde Dreamweaver 5. Mi primera pagina 6. Arrancar y cerrar Dreamweaver CS5
- 3. DEFINICIÓN DE DREAMWEAVER CS5 Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS5 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. Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.
- 4. EL ENTORNO DE DREAMWEAVER CS5 Vamos a ver cuáles son los elementos básicos de Dreamweaver CS5, la pantalla, las barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web. La pantalla inicial Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.
- 6. EL TEXTO: PROPIEDADES Y FORMATO Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS. Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.
- 7. Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado 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 predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas. Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.
- 8. HTML DESDE DREAMWEAVER Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web. Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre. También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May + INTRO dentro del código HTML equivale a la etiqueta <br>. Realmente estas etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estándar XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de línea anterior se escribiría <br />. Otras etiquetas que se cierran sobre sí mismas son las imágenes <img />, reglas horizontales <hr /> o elementos de formulario <input />. Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras posibilidades para trabajar directamente sobre el código.
- 9. MI PRIMERA PAGINA Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la columna Diseño dejamos la opción por defecto: <ninguno>. Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:
- 10. Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento. Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. Entonces se abrirá una ventana como la que aparece a continuación:
- 11. ARRANCAR Y CERRAR DREAMWEAVER CS5 Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Puedes comenzar a escribir el nombre del programa, y aparecerá directamente. O puedes pulsar en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS5 y haz clic sobre él para arrancar el programa. Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes . Puedes arrancar Dreamweaver CS5 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aquí.
- 12. Para cerrar Dreamweaver CS5, podemos utilizar cualquiera de las siguientes operaciones: Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana de Windows. Pulsar la combinación de teclas Alt + F4. Hacer clic sobre el menú Archivo y elegir la opción Salir. Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos.