1. Lina María Ali Pallares
11ºA
2.013

2. Que es Dreamsweaver CS5
El entorno de Dreamweaver
Arrancar y cerrar Dreamweaver
Abrir un documento en Dreamweaver
Guardar un documento en Dreamweaver
Barras en Dreamweaver
Inspectores y paneles
Los colores
Características del texto
HTML desde Dreamweaver
Modificación de elementos
Estructura de datos

3. 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 Java Script, 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.

4. 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.

5. Arrancar y cerrar Dreamweaver CS5
Veamos las dos formas básicas de arrancar 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í.
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.

6. Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).
Pulsar la combinación de teclas Ctrl + O.
Hacer clic sobre el menú Archivo y elegir la opción Abrir....
Hacer doble clic sobre el archivo en la ventana del sitio.
Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la
opción Abrir con → Adobe Dreamweaver CS5.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes
operaciones.:
Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible).
Pulsar la combinación de teclas Ctrl + N.
Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
Después de esto aparecerá una nueva ventana, en la que deberás elegir
la Categoría Página en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseños
ya creados que podemos elegir, para nuestro primer ejemplo elegimos
en Diseño ninguno. A continuación pulsamos el botón Crear.

7. Para guardar un documento, puedes utilizar cualquiera de las siguientes
operaciones.
Hacer clic en el botón Guardar de la barra de herramientas estándar.
Pulsar la combinación de teclas Ctrl + S.
Hacer clic sobre el menú Archivo y elegir la opción Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando
simultáneamente con varios documentos, poder guardar todos de golpe, sin
la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar
cualquiera de las siguientes operaciones.
Hacer clic en el botón Guardar todo de la Barra de herramientas estándar.
Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
Al tener varios documentos abiertos es fácil olvidarse de todas las
modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al
utilizar la opción guardar todo, ya que en ocasiones es posible no desear
guardar los cambios en todos los documentos modificados. Por ello es
conveniente que al principio no utilices esta opción, al menos hasta que te
hayas habituado a manejar el programa. De todas formas, observa que
cuando hay cambios sin guardar aparece un * tras el nombre del
documento

8. La barra de la aplicación.
La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos
la ventana maximizada veremos todos los elementos de la barra ocupando una sola
línea, si no, ocuparán dos líneas, como en la imagen superior.
Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte
inferior), varios botones propios de la aplicación, el conmutador de espacio de
trabajo y una caja de búsquedas para obtener ayuda on line.
Las pestañas de documento.
Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos
permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica
que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en
el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho,
como Cerrar otros archivos.

9. La barra de estado.
Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el
mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas
completas. Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (para
desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su
codificación.
La barra de herramientas estándar.
La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del
menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe
Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y
Rehacer. Esta barra puede ser muy útil, pero en realidad casi todo el mundo usa esos comandos
directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.)
La barra de herramientas de documento.
La contiene iconos que nos permiten cambiar entre las distintas vistas de edición y
la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas
opciones de validación que nos ofrece el programa.

10. La barra de representación de estilos.
Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web
en distintos dispositivos, si estamos utilizando hojas distintas que
dependan del eso. En esta nueva versión se han añadido más opciones,
como las de ver los estilos que dependen de seudo clases activas, como
cuando el cursor está sobre un elemento.
La barra de navegación con navegador.
Esta barra nos permite usar Dreamweaver como un navegador web y
navegar por las páginas de nuestro sitio, aunque sólo tiene sentido con
la Vista en vivo, como ya veremos.
Como también veremos al personalizar el entorno, algunos paneles,
como Insertar nos permiten colocarlo como otra barra de herramientas.

11. El inspector de Propiedades
El inspector de Propiedades muestra las opciones propias del objeto o texto
seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos
más utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una
imagen, mostrará su ubicación, dimensiones, peso, clase, etc...
Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a
los diferentes elementos de la página Web que estemos diseñando.
El panel Insertar.
El panel Insertar.
En el panel Insertar, encontramos todos los elementos que podemos encontrar en el
menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes,
enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web
necesite. Como vemos en las imágenes, es posible configurar este panel para verlo como
menú, como panel flotante o como una barra de herramientas integrada en la ventana
de trabajo.

12. Para asignar colores es posible desplegar una paleta de colores como ésta.
Al seleccionar un color de estas paletas, se muestra el valor hexadecimal
del color en la parte superior.
Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores
seguros para web. Éstos son los colores que se muestran de la misma forma
en cualquier navegador bajo cualquier sistema operativo.
Esto no quiere decir que sólo podamos utilizar estos colores. Podemos
personalizarlos a través del botón de la parte superior de la
paleta.
Los colores pueden asignarse a través de los botones:
Estos botones suelen aparecer en el inspector de propiedades de muchos
objetos, y también en algunas ventanas que permiten especificar
propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el
caso de la ventana de Propiedades de la página, que vimos en este tema.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el
recuadro gris
lo que hace que se despliegue la paleta de colores. El otro modo es
introduciendo directamente el número hexadecimal del color en el
recuadro blanco.

13. 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. Comenzamos viendo las propiedades HTML
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.
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.

14. Estilo:
El botón B encierra el texto en una etiqueta <strong></strong>, que por
defecto se muestra en negrita. El botón I, lo encierra entre <em></em>,
que por defecto se ve en cursiva.
Estas son las etiquetas de resaltado más habituales, pero existen otras
que encontramos a través del menú Texto. Por ejemplo, subrayar el
texto. Esta opción no aparece en el panel de Propiedades ya que de
normal no suele utilizarse, debido a que los vínculos aparecen
subrayados y el subrayar texto normal podría hacer que el usuario
pensara que se trata de un vínculo. Además, emplea etiquetas que están
en desuso.
Lista:
Estos botones permiten crear listas con viñetas o listas numeradas.
Veremos qué son las listas en el siguiente apartado.
Sangría:
Estos dos botones permiten sangrar el texto y anular la sangría. La
sangría es una especie de margen que se establece a ambos lados del
texto. En este caso los botones se refieren a sangría a la izquierda del
texto.
Si lo aplicamos sobre texto normal, lo encerrará en una
etiqueta <blockquote></blockquote>, que por defecto se muestra
indentada hacia la derecha. En cambio, al aplicarlo sobre una lista,
creará una sublista dentro de ésta.

15. En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver
para trabajar sobre el propio código HTML, y no únicamente sobre el editor gráfico de
la vista diseño.
En este tema no se pretende enseñaros el lenguaje HTML sino cómo poder realizar
algunos reajustes directamente en el código estando dentro de Dreamweaver.
En muchas ocasiones veremos que para hacer pequeñas correcciones, nos resultará
más cómodo y rápido si lo hacemos directamente desde el código que recurriendo a
asistentes.
Etiquetas:
En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código
HTML de una página para darle un título. Consistía simplemente en escribir el título
deseado entre las etiquetas <title> y </title>.
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.
Las etiquetas disponen de atributos que permiten definir características del elemento
sobre el que actúan, incluyendo cierto código dentro de la etiqueta.

16. Modificación de elementos
Las páginas de modificación de elementos deberán recoger el parámetro que
envíe el listado.
De este modo, filtraremos el recordset y podremos mostrar la información de
la entrada, categoría o comentario que queramos modificar.
Es aconsejable que muestres el contenido del elemento para que antes de
modificarlo tengas una vista total de él y veas mejor qué quieres hacer en él.
El resto es sencillo, utiliza el asistente Actualizar registro y seguro que no
encontrarás muchas más complicaciones.
De nuevo en el caso de la página de modificación de entrada deberemos tener
especial cuidado en enviar la fecha como tal y de mostrar los nombres
de categoría en un desplegable:

17. Nuestro primer paso para la creación de un blog será crear la estructura de
datos que contendrá la información de las entradas y otros elementos del
sitio.
En un sitio simple deberemos crear como mínimo 4
tablas: categorías, entradas, comentarios y usuarios.
En la tabla categorías deberemos listar el nombre de las categorías en las
que se dividen las entradas.
En la tabla entradas deberemos almacenar el texto de la entrada con
su título y fecha. Obviamente aquí deberemos hacer referencia a
qué categoría pertenece la entrada. En un blog más complejo podríamos
incluso almacenar qué integrante de la tabla de usuarios creó la entrada...
En la tabla comentarios deberemos almacenar el texto del comentario
junto con la información del autor, como su nombre y correo electrónico,
por ejemplo. Con conocimientos más profundos de PHP podríamos guardar
hasta su dirección IP.
Finalmente en la tabla usuarios guardaremos el nombre y contraseña de los
usuarios que tendrán acceso a la edición del blog. Más adelante verás que
incluso se podrían establecer niveles de privilegios entre ellos.