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.

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.