DREAMWEAVER

Adobe Dreamweaver es una aplicación en programa de estudio (basada en la forma de

estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios,
vídeos y aplicaciones Web basados en estándares. Creado inicialmente
por Macromedia (actualmente producido por Adobe Systems) es uno de los programas más
utilizados en el sector del diseño y la programación web por sus funcionalidades, su
integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los
estándares del World Wide Web Consortium. Sus principales competidores son Microsoft
Expression Web y BlueGriffon (que es de código abierto) y tiene soporte tanto para edición
de imágenes como para animación a través de su integración con otras.

¿Qué es Dreamweaver?
Dreamweaver es software, propiedad de Adobe Systems Incorporated (creado originalmente
por Macromedia) destinado a la edición de documentos de distintos formatos, casi todos ellos
para uso en entorno web (más abajo mencionaremos varios de ellos), permitiendo aunar en
la misma aplicaciòn, vistas de código y de diseño, cada vez que ésto es posible, en función
del tipo de documento con el que estemos trabajando. Asimismo permite (y es requerido)
"definir sitios web" para optimizar el funcionamiento y flujo de trabajo con los distintos
documentos.

ACCESIBILIDAD DREAMWEAVER
Cuando creamos contenidos para la web es importante
respetar las normas de accesibilidad. La accesibilidad consiste
en crear los contenidos de tal manera que sean accesibles a
personas que tienen limitaciones. Dentro de la Wikipedia
podemos encontrar información sobre la accesibilidad, en
concreto vemos que hay limitaciones visuales, motrices,
auditivas y cognitivas. Generalmente se suele pensar solamente en las limitaciones visuales
pero, realmente todas ellas tienen importancia. Para cada tipo de limitación va a haber
diferentes formas de navegar, diferentes sistemas de ayuda que van a dar la información que
hay en nuestra página accesible, de nuevo, a las personas que tienen diferentes limitaciones.
El consorcio W3C tiene toda una serie de normas de accesibilidad que son muy interesantes
y que es recomendable, por lo menos, tener un conocimiento aproximado sobre ellas.
Dreamweaver respeta todas estas normas de accesibilidad y, además, da opciones para
trabajar con ellas. Dentro de Edición, Preferencias hay un apartado, Accesibilidad, dentro del
cual permite elegir, por un lado, si se añade o no sobre los elementos multimedia esa
accesibilidad, las etiquetas necesarias, y luego, otras opciones acerca de cómo se debería de
trabajar. Y, la forma de trabajar con la accesibilidad va a ser muy fácil. Simplemente se trata
de que vamos a tener algunos atributos accesibles a cualquiera de los elementos que vayamos
a añadir en pantalla, por ejemplo, si yo quiero añadir una imagen, hago clic en Imagen, la
selecciono, y una vez que la he añadido, al seleccionarla, tengo un menú, en la parte de la
izquierda abajo, que me permite abrir las características de ese HTML y, dentro de ella, en
concreto en el caso de las imágenes, tengo el atributo alt, que sirve para escribir lo que debería
de decirse a una persona que no puede ver esa imagen, a un invidente, pues aquí pondría
"personas corriendo" por ejemplo. Es algo tan simple como eso, pero que, sin embargo, va a
ayudar muchísimo a cualquiera que esté viendo mi página y que tenga algún tipo de
limitaciones. Es interesante también ver cómo cualquier elemento que yo esté seleccionando
tiene siempre un pequeño elemento, si está colocado en la parte superior aparece debajo a la
izquierda, si está colocado en cualquier otra parte aparece en la parte superior izquierda de
esa etiqueta, y estos elementos van a tener la posibilidad, todos los que tengan opciones de
modificación, van a tener un pequeño menú que permite hacer modificaciones sobre esa
etiqueta en concreto; es una forma muy cómoda de trabajar dentro de la vista en vivo.

INTERFAZ DE DREAMWEAVER

1.- Las barras.

2.- Las pestañas de documentos.

3.- La barra de estado.

4.- El panel de propiedades.

5.- Área de paneles.

6.- Paneles y ventanas.

7.- Línea inferior de pestañas.

8.- Vista diseño del documento.

9.- Vista código del documento

A continuación se incluyen algunos de los tipos de archivos más comunes que se utilizan en
Dreamweaver:
CSS
Los archivos de Hojas de estilos en cascada tienen la extensión .css. Se utilizan para aplicar
formato al contenido HTML y controlar la posición de los distintos elementos de la página.
GIF
Archivos de Formato de intercambio de gráficos, que tienen la extensión .gif. El formato
GIF es un formato gráfico popular en la Web para cómics, logotipos, gráficos con zonas
transparentes y animaciones. Los archivos GIF contienen un máximo de 256 colores.
JPEG
Archivos de Grupo conjunto de expertos fotográficos (el nombre de la organización que
creó el formato) que tienen la extensión .jpg y suelen ser fotografías o imágenes de
tonalidades intensas. El formato JPEG es el más indicado para las fotografías digitales o
digitalizadas, imágenes que utilizan texturas, imágenes con transiciones de gradiente de
color y, en general, cualquier imagen que requiera más de 256 colores.
XML
Archivos de Lenguaje de formato ampliable, que tienen la extensión .xml. Contienen datos
en formato original al que se puede aplicar formato mediante el lenguaje XSL (Lenguaje de
hoja de estilos ampliable, Extensible Stylesheet Language).

COMO SE INGRESA A DREAMWEAVER

Dreamweaver ofrece un entorno flexible para trabajar con una gran variedad de documentos
web. Además de documentos HTML, puede crear y abrir una gran variedad de documentos
basados en texto, incluyendo JavaScript, PHP y hojas de estilos en cascada (CSS).
Dreamweaver proporciona varias opciones para crear un documento nuevo. Puede crear
cualquiera de los tipos de documento siguientes:
 Un nuevo documento o plantilla en blanco
 Un documento basado en uno de los diseños de página predefinidos que vienen con
Dreamweaver, incluidos más de 30 diseños de página basados en CSS
 Un documento basado en una de las plantillas existentes
 También puede definir las preferencias del documento. Por ejemplo, si suele trabajar con un
tipo de documento, puede establecerlo como tipo de documento predeterminado para las
páginas nuevas que cree.
Puede definir fácilmente las propiedades del documento, como etiquetas meta, título del
documento, colores de fondo, así como otras propiedades de la página en la Vista de diseño
o en la Vista de código.

Diseño HTML con una página en blanco

Puede crear una página que contenga un diseño CSS prediseñado o bien crear una
completamente en blanco y realizar su propio diseño.
1. Seleccione Archivo > Nuevo.
2. En la categoría Nuevo documento, seleccione el tipo de páginas que quiere crear en la
columna Tipo de documento. Por ejemplo, seleccione HTML para crear una página
HTML sencilla.
3. Seleccione un tipo de documento en el menú emergente Tipo de documento. En la
mayoría de los casos, podrá utilizar la selección predeterminada, HTML5.
4. Elija otras opciones en función del tipo de página que desee crear.
 Ninguno: seleccione esta opción si desea crear un sitio web simple sin utilizar ningún
framework.
 Bootstrap: las plantillas de Bootstrap son diseños predefinidos con el framework de
Bootstrap. Seleccione esta opción si desea crear sitios web interactivos con el
framework de Bootstrap.
Si no utiliza un framework:
 Título de documento: introduzca el título del documento en este campo y Dreamweaver lo
agregará automáticamente a la sección <head> del documento.
 Tipo de documento: seleccione un tipo de documento en este menú emergente. En la mayoría
de los casos, podrá utilizar la selección predeterminada, HTML5.
 Si selecciona una de las definiciones de tipo de documento XHTML en el menú Tipo
de documento, las páginas serán compatibles con XHTML. Por ejemplo, puede hacer
que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de
transición o XHTML 1.0 estricto del menú. El lenguaje XHTML (Lenguaje de formato
de hipertexto ampliable, Extensible Hypertext Markup Language) es un
replanteamiento del lenguaje HTML como aplicación XML. En general, la utilización
de XHTML permite aprovechar las ventajas del lenguaje XML, garantizando al mismo
tiempo la compatibilidad anterior y futura de los documentos web
 Adjuntar CSS: adjunte un diseño CSS existente a la página. Para ello, haga clic en el icono
Adjuntar hoja de estilos , junto al panel Adjuntar archivo CSS, y seleccione una hoja de
estilos CSS.

Creación de una página HTML nueva sin usar un framework

Si desea crear una página nueva basada en su composición de Photoshop, seleccione Utilice
Extract para crear una página a partir de sus composiciones de Photoshop.
Al seleccionar esta opción, se abre el panel Extract, donde podrá cargar un archivo PSD y
comenzar a crear su página HTML.
Si desea crear una página web interactiva con el framework de Bootstrap:
 CSS de Bootstrap: indique si crear un nuevo CSS de Bootstrap o utilizar un archivo CSS
existente. Si está utilizando un archivo CSS existente, indique la ruta al archivo. Asegúrese
de que el archivo CSS se encuentre dentro de la carpeta raíz del sitio.
 Adjuntar CSS: adjunte un diseño CSS existente a la página. Para ello, haga clic en el icono

Adjuntar hoja de estilos , junto al panel Adjuntar archivo CSS, y seleccione una hoja
de estilos CSS.
 Incluir un diseño ya creado: Seleccione esta opción si ya dispone de un diseño. Haga clic en
Personalizar para editar los valores de la cuadrícula y los puntos de corte.
 Creación de una nueva página HTML con el framework de Bootstrap

Si desea crear una página nueva basada en su composición de Photoshop, seleccione Utilice
Extract para crear una página a partir de sus composiciones de Photoshop.
Al seleccionar esta opción, se abre el panel Extract, donde podrá cargar un archivo PSD y
comenzar a crear su página HTML.
Haga clic en Preferencias si desea establecer las preferencias predeterminadas del
documento, como el tipo de documento, la codificación y la extensión del archivo.
Haga clic en el botón Crear.
Guarde el nuevo documento (Archivo > Guardar).
En el cuadro de diálogo que aparece a continuación, vaya hasta la carpeta en la que desea
guardar el archivo.
Nota:
Es recomendable guardar el archivo en un sitio de Dreamweaver.
En el cuadro Nombre de archivo, introduzca un nombre para el archivo.
Evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas.
Asimismo, no comience los nombres de los archivos con números. En concreto, no utilice
caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras
inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto;
muchos servidores cambian estos caracteres durante la carga, lo que provoca que se rompan
los vínculos existentes con los archivos.

FUNDAMENTACIÓN DE PÁGINAS WEB

Conceptos básicos de diseño web

Cuando hablamos de un sitio web nos estamos refiriendo en realidad a un conjunto de

archivos, pueden ser de texto, audio, gráficos, etc., que está unidos mediante un lenguaje de
marcas denominado HTML.
Este lenguaje nos permite crear las llamadas páginas web, que no son más que archivos con
la extensión htm ó html. Las mismas, se alojan en servidores web, que son computadoras
adaptadas especialmente, y que están conectadas en forma permanente a Internet.
La ventaja del HTML es que nos deja presentar varios archivos en forma simultánea (texto
junto con un video, gráficos en forma de botones, etc.) y además, cuenta con la posibilidad
de crear enlaces o hipervínculos(hyperlinks en idioma inglés), que se encargan de conectar
las páginas web entre sí. Esto significa que podemos “saltar” de una página web ubicada en
USA, a otra que está en España o japón en forma inmediata, haciendo que las distancias
geográficas desaparezcan en la red.
Para poder acceder a los sitios web utilizaremos un navegador, que es el software
encargado de presentarnos esa información en forma amigable.

 Sitio Web: conjunto de archivos

 Página Web: archivo en formato HTML o HTM
 Hipervínculo: objeto que se utiliza para enlazar archivos (páginas Web, imágenes,
audio, etc.)
 Servidor Web: computadora conectada a internet que aloja Sitios Web o archivos que
pueden ser solicitados a través de la red
Programación Web

Con el desarrollo de la web surgieron nuevos lenguajes de programación tendientes a

presentar páginas que permiten mayor interacción, son más rápidas, contienen animaciones,
etc.
Entre ellos, podemos mencionar al asp y php, que en líneas generales, permiten generar
páginas en base a los pedidos de los usuarios del sitio, es decir, buscan en una base de datos
la información solicitada, y crean una página en forma instantánea.
Las bases de datos más utilizadas son MySQL (open source), Oracle, Informix de IBM, y
Microsoft SQL.

El DHTML (HTML dinámico) y el CSS (hojas de estilo) sirven para hacer más interactivas
las páginas HTML, por ej. botones que cambian de color, texto que agranda o disminuye su
tamaño, etc.; aliados al JavaScript, pueden también poner la hora y la fecha a la página,
mostrar texto que se desplaza, y más.
Un software que se está utilizando mucho en la web para hacer animaciones con audio,
texto, imágenes, etc., es el Macromedia Flash, ya que en sus últimas versiones cuenta con
herramientas que hacen relativamente fácil crear una presentación web.
El lenguaje Java en cambio, crea archivos ejecutables que se instalan en el ordenador del
navegante y se utiliza para animaciones o para crear pequeños programas (calculadoras,
juegos, etc.). Aunque cabe aclarar que cada vez se está utilizando menos.

 ASP/PHP formatos para páginas web dinámicas

 Bases de datos: MySQL, Oracle, Informix, y Microsoft SQL
 DHTML/CSS lenguajes dinámicos de HTML
 Javascript: lenguaje de programación
 Flash: Software que sirve para hacer animaciones
 Java: lenguaje de programación
Peso de las páginas y formato de imágenes
El peso de las páginas es conveniente que no exceda de los 50 kb.; esto se debe a que
todavía las conexiones a Internet son lentas, y hay estudios hechos en los EE.UU. que
demuestran que los usuarios no suelen esperar más de 30 segundos para ver la información
de una página.

En este tema es fundamental el tratamiento de las imágenes, es decir, muchas veces se

pueden acondicionar las mismas para que bajen sustancialmente de peso, mantenimiento de
todas formas una calidad aceptable. Los software de edición de imágenes digitales vienen
ya preparados para la optimización de imágenes a montar en la web.
 Peso de las páginas
 Formato de imágenes
Consistencia

Es necesario lograr que el sitio web obtenga consistencia y una imagen distintiva, mediante
el uso de fondos, gráficos y logos, colores uniformes en el texto y los enlaces, barras de
navegación en el mismo lugar, etc.; de la misma manera que una tienda comercial mantiene
una estética única, tanto para su casa central como para sus sucursales.
 Fondo y gráficos distintivos
 Color de texto y enlaces
 Barras de navegación en el mismo lugar

BBLIOGRAFIA
 https://helpx.adobe.com/la/dreamweaver/using/creating-opening-
documents.html
 https://www.aulaclic.es/dreamweaver-cc/t_2_1.htm
 https://www.lawebera.es/diseno-web/fundamentos-diseno-web.php