1. DREAMWEAVER

2. • ¿Qué es Dreamweaver?
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

3. • Novedades de Dreamweaver
Compatibilidad con CMS integrada. Un
sistema de gestión de contenidos (en inglés
Content Management System, abreviado
CMS) es in interfaz o programa que nos
permite gestionar el contenido de un sitio
web. Cada vez son más usados, y ahora
Dreamweaver integra con los
principales, permitiéndos crear nuestras
páginas con la estructura adecuada.

4. Inspeccionar CSS. Ahora, con la opción
Inspeccionar, podemos ver claramente los márgenes
aplicados al elemento seleccionado, y qué
propiedades le afectan, tanto si son propias, como
heredadas de los elementos padre.

5. Integración Adobe Browserlab. Adobe Browser Lab es
un servicio en línea de Adobe, que nos permite comparar
cómo se ve una misma página web en las distintas
versiones de Internet Explorer, Firefox y Safari, bajo
los sistemas operativos de Windows o Mac OS.
Configuración sencilla de sitios. Ahora resulta más
sencillo configurar nuestro sitio local y remoto. Ya que se
han simplificado las opciones esenciales, y distinguido más
las opciones avanzadas y poco importantes.

6. • El entorno de Dreamweaver
- La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como
ésta, podemos ver sus componentes fundamentales. 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.

7. • El TEXTO: PROPIEDADES Y FORMATO
-Características del texto
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.
Las propiedades HTML

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

9. * 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.

10. * 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.

11. • MULTIMEDIA
* Películas Flash
Las películas Flash son animaciones, cuyo archivo tiene la
extensión SWF. Es frecuente verlas en las páginas iniciales
de los sitios web, a modo de presentación hacia los
usuarios, como banners publicitarios, como botones... Flash es
el elemento multimedia más empleado en las páginas web.
Estas películas pueden crearse mediante el
programa Flash también de Adobe. Para poder ser
visualizado en el navegador, y necesitan que el usuario tenga
instalado el plug-in de Flash Player. Su instalación es muy
sencilla y normalmente ya viene con el navegador.

12. Las películas Flash pueden insertarse en una página a través del
menú Insertar → Media, opción SWF, o pulsando Ctrl + Alt + F
También pueden insertarse empleando el panel Insertar en la
categoría Común, pulsando sobre la opción SWF que aparece al
desplegar el menú Media.

13. Veamos las opciones más importantes que nos ofrece
el inspector de propiedades cuando tenemos
seleccionado el archivo Flash

14. • DISEÑO DE PAGINA. MAQUETACION WEB
* Maquetar una página web
La maquetación es la distribución de los elementos en
nuestra página. Piensa en una página web cualquiera.
Seguro que distingues algunos elementos claramente
diferenciados, como un encabezado, columnas, y un pie de
página.
Hace unos años, la maquetación de las páginas web se
realizaba utilizando tablas (<table>). Una vez entendido
este proceso podía resultar sencillo, aunque si no se
dominaban las tablas, podía convertirse en algo tedioso.
El problema de las tablas es que generaban un página muy
encorsetada, y el código se volvía complejo de entender.
Además, algunos buscadores encontraban problemas al
analizar la estructura de la página.

15. • PAGINAS DINAMICAS
tenemos un servidor de pruebas donde pueda
ejecutarse el código que introduzcamos en nuestras
páginas y permita la creación de bases de datos para
almacenar información pasaremos a crear nuestras
propias páginas dinámicas de acceso a datos.
Una vez instalado WampServer empezaremos a crear
nuestras primeras páginas para mostrar información
específica y personalizada.
Para ello nos apoyaremos siempre en la
sección Datos del panel Insertar:

16. Recuerda que Dreamweaver es muy personalizable, y puede que este
panel lo estés viendo como una barra de herramientas: