¿Qué es Adobe Dreamweaver?

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

la forma de estudio de Adobe Flash) enfocada a la construcción y edición
de sitios y aplicaciones Web basados en estándares. Creado inicialmente
por Macromedia (actualmente producido por Adobe Systems). Es el
programa de este tipo más utilizado 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. Su principal competidor es
Microsoft Expression Web y tiene soporte tanto para edición de
imágenes como para animación a través de su integración con otras.
Hasta la versión MX, fue duramente criticado por su escaso soporte de
los estándares de la web, ya que el código que generaba era con
frecuencia sólo válido para Internet Explorer, y no validaba como HTML
estándar. Esto se ha ido corrigiendo en las versiones recientes.
Adobe Dreamweaver permite crear sitios de forma totalmente gráfica, y
dispone de funciones para acceder al código HTML generado. Permite la
conexión a un servidor, a base de datos, soporte para programación en
ASP, PHP, Javascript, cliente FTP integrado, etc.
COMO USAR DREAMEWEAVER

Paso 1 : Planeación de la página

Definir el número y el diseño de paginas que incluiremos en nuestro sitio web

Paso 2: Crear un sito en DW

Crear un sitio nuevo en DW, sirve para mantener nuestros archivos organizados y nos facilita el trabajo

Primero descargar los archivos del proyecto y descomprimirlo. Guarde los archivos publicados en esta
carpeta.

En DW , damos click en sitio web -> nuevo . En el cuadro de Configuración del sitio, cambiar el nombre del
sitio a Galería de Fotos y colocar la carpeta dwcs6_project. Damos clic en guardar para finalizar con la
creación del sitio.

Antes de empezar tome su tiempo para conocer DW y sus herramientas. Una ves hecho esto, cierre el archivo
HTML en blanco.

Paso 3: Colocar la plantilla de página web

1. Seleccionar Archivo -> Clic en nuevo diseño de cuadrícula fluido para abrir el cuadro de diálogo de
Nuevo documento.
2. Se puede cambiar el número de columnas, espacios y márgenes para cada diseño.Cambiar el ancho
de columna de 25% a 15% y cambiar la configuración del margen de 90% para los tres tamaños.
3. Después damos clic en Crear y guardar el archivo en CSS en la carpeta GalleryTemplate.css. Guardar
el archivo en la carpeta principal con el nombre de layout.html. cuando DW le solicite copiar los
archivos CSS y JavaScript no haga nada con estos , pero inclúyalos dentro de la carpeta Assets y clic
en copiar.
 Paso 4: Añadir etiquetas div y el contenido de marcador de posición
Las etiquetas div nos sirven para organizar y/o agrupar elementos del contenido de la página. Los estilos CSS
se pueden asignar a cada etiqueta div para dar formato a texto y agregar estilos de diseño tales como la
posición, el fondo y las fronteras.
Este paso es para crear tres etiquetas div como filas en la cuadrícula y añadir contenido marcador de
posición:
Eliminar el texto de la etiqueta div existente

Coloque el cursor en la etiqueta div y la imagen. Clic en el botón Dividir en la parte superior izquierda del área
de trabajo para mostrar tanto la vista Código y la vista Diseño.
Añadir otra etiqueta div seleccionando la etiqueta LayoutDiv1 en el código o por el selector de etiquetas y elija
Insertar> Objeto> Disposición diseño fluido Rejilla etiqueta div. Haga clic en Aceptar para aceptar la
configuración predeterminada. Selección de la etiqueta div anterior antes de insertar la etiqueta div.

Elimine el texto en la etiqueta div nueva y escriba el texto Añadir

Añadir otro diseño fluido rejilla etiqueta div para añadir otra fila debajo de la fila de texto. Esta etiqueta div
llevará a cabo una serie de imágenes en miniatura.

Haga clic dentro de la etiqueta div nueva y seleccione Imagen->image1.jpg de la carpeta de imágenes.

Introduzca el texto alt de imagen 1 cuando se le solicite y haga clic en Aceptar. Repita este proceso para los
restantes nueve imágenes en miniatura.

Ahora la plantilla cuenta con todos los elementos necesarios para producir las páginas.

Paso 5: Formato de presentación

Dar formato a el color de fondo, estilos de fuente, estilos de diseño de etiquetas div y estilos de imágenes en
miniatura para dar formato a la plantilla:

Modificar> Propiedades de la página , cambiar las siguientes propiedades en CSS

Fuente de la página: Trebuchet MS, Arial, Helvetica, u otro tipo de letra sans-serif
Tamaño: 16

Color de texto: # FFF

Color de fondo: # 333

Agregar  las siguientes propiedades:

texto-align: center
padding-top: 20px

Para agregar una propiedad, haga clic en el botón Agregar propiedad, seleccione la propiedad en el menú e
introduzca un valor en el campo resultante.
Agregue los siguientes estilos:
padding-top: 12
padding-bottom: 12
Agregue espacio a las imágenes mediante el ajuste de su estilo de margen.

Clic en una de las imágenes en miniatura para seleccionarla y haga clic en el botón Nueva regla CSS. Haga
clic en Aceptar en el cuadro de diálogo Nueva regla CSS. Agregue los siguientes estilos en la categoría de
Box de la caja de diálogo de definición de reglas CSS y haga clic en Aceptar para aplicar el estilo:
border: solid 1px # 000
opacidad: .75
Guardar el archivo.

Paso 7: Añadir imágenes y textos

Seleccione Archivo> Nuevo> Página De Plantilla> GalleryTemplate y haga clic en Crear.

Crear una página de inicio guardando el archivo con el nombre index.html.

Elimine el texto de la plantilla en el área de imagen
Seleccione Insertar> Imagen y busque el archivo en la carpeta HomePageImage.psd _Source y aceptar.
Paso 8: Crear una barra de navegación  
Volver a la página GalleryTemplate.dwt
Haga clic en la primera miniatura a la izquierda (image1.jpg) para seleccionarlo. Luego clic en el icono Señalar
archivo y arrastre el cursor hasta el archivo que desea establecer el vínculo en el panel Archivos
Repitir el paso 2 para cada imagen en miniatura y un archivo HTML.
Guardar el archivo y elejir vínculos de actualización cuando se le solicite.

QUE ES UNA PAGINA WEB

un documento disponible en Internet, o World Wide Web (www), codificado

según sus estándares y con un lenguaje espcífico conocido como HTML. Es
algo a lo que estamos acostumbrados a acceder si leemos este artículo pero no
todos conocen realmente su funcionamiento.

A estos sitios se puede llegar a través de los navegadores de Internet, que

reciben la información del documento interpretando su código y entregando
al usuario la información de manera visual.

Estos suelen ofrecer textos, imágenes y enlaces a otros sitios, así como
animaciones, sonidos u otros.

Una página web necesita un lugar donde alojarse para que cuando el usuario
solicite la información desde su navegador, la información que esta contiene
se cargue y aparezca en el ordenador. Es por ello que los sitios web se
encuentran en un servidor web o host, que podría definirse a grandes rasgos
como un gran ordenador que entrega el contenido cuando se solicita por la
red. Este mismo servicio de almacenamiento se conoce como hosting.

Tipos de página web

Básicamente existen dos tipos de páginas web: estáticas y dinámicas. Las

estáticas forman parte de épocas anteriores, puesto que son de contenido fijo y
no son aptas a actualizaciones constantes. En el caso de las dinámicas, pueden
ser construidas en HTML o en otra extensión, como por ejemplo PHP. En este
último caso se permite la interacción en tiempo real, apto para algunas
páginas web con estas necesidades específicas, como pueden ser los foros.

Elementos principales de una página web

Los elementos principales en una página web son:

 Texto: a veces redactado por un único autor y otras veces por los
usuarios de la misma en el caso de algunas páginas dinámicas con
lenguaje como php.
 Imágenes: gif, jpg y png son los tres formantos que suelen utilizarse
normalmente.
 Audio y vídeo: suele utilizar las extensiones midi, wav o mp3. También
se utilizan las incrustaciones de archivos almacenados en otros sitios,
como por ejemplo se hace al añadir vídeos de Youtube.
 Otros: existen además otros elementos que han ido aumentando y
evolucionando también con el paso de los años y las nuevas tecnologías.
Estos son Adobe Flash, Adobe Shockwave, Java o enlaces (también
llamados hipervínculos), por ejemplo.