DREAMWEAVER. Objetivos - Manejamos las herramientas de

DREAMWEAVER.
Objetivos
- Manejamos las herramientas de Dreamweaver
- Realizamos diseños de sitios Web.
- Creamos y alojamos la página Web desarrollada en Dreamweaver
Actividad de inicio


Repaso de diseño en pares expertos, elaboración y disposición de contenidos.
Planificación del diseño de la página web.
Introducción
El programa DreamWeaver es una herramienta de desarrollo profesional de sitios Web, que cuenta con
características novedosas y ofrece un panorama amplio de opciones de diseño, indispensable para los diseñadores
expertos y principiantes de Web.
DreamWeaver puede utilizarse para crear sitios Web en forma visual, con una interfaz gráfica de fácil manejo que
permite visualizar los cambios efectuados al mismo tiempo se realizan.
Paginas Web
Tener una página Web propia es cada día más común. Claro que para tenerla primero hay que crearla y respecto a
este punto existen muchos programas para crear páginas Web que facilitan mucho esta tarea y como resultados de la
disponibilidad de estas herramientas se ha extendido notablemente el número de usuarios que poseen una página
Web.
Programas para crear páginas Web hay muchos, pero inicialmente y para organizarnos un poco, estos programas para
crear páginas Web pueden dividirse en dos grandes grupos: WYSIWYG y Editores de HTML

WYSIWYG: el nombre proviene de sus siglas en inglés (What You See Is What You Get), en castellano significa “Lo
que ves es lo que obtienes”. Es decir, poder ver en tiempo real el resultado de por ejemplo un bloque de código
XHTML. En sí es una vista preliminar del código, ya que no hace más que renderizarlo en algún sector de la
aplicación y que además permite la libertad de modificar la presentación de los contenidos (como los colores o el
tamaño de la fuente utilizada). Es un programa informático, fundamentalmente aplicable a los editores de texto y
que presenta la característica de poder crear un documento mientras se ve el resultado de la acción. Esta
aplicaron es apta para aquellos editores que son programas para crear páginas Web, pero prácticamente sin
intervenir sobre las acciones en el código HTML, ya que la herramienta WYSIWYG genera las etiquetas
automáticamente.
Algunos ejemplos de editores Web WYSIWYG son:

FrontPage: Este editor Web es tipo WYSIWYG. Es una aplicación creada por Microsoft, forma parte del
paquete Microsoft Office. Es de muy sencillo uso y su principal competencia es Dreamweaver, que es más
poderosa y es usada por profesionales del diseño.
Ventajas: Fácil de usar, casi como usar Word; no se necesita saber de HTML
Desventajas: Es muy básico, no ofrece demasiadas opciones; como programa para crear paginas Web, no es
el más completo; al realizar acciones complejas se complica todo.

Dreamweaver ((Macromedia Dreamweaver): Este editor, programa para crear páginas Web, es tipo
WYSIWYG creado por Macromedia (actualmente de Adobe Systems). Es la aplicación de este tipo más usada
en el sector de diseño y programación Web. Posee, como toda la línea Macromedia/Adobe, excelentes
funcionalidades e integración con otras herramientas. Su éxito data desde 1990 y en la actualidad capta el
90% del mercado de editores HTML.
Ventajas: Permite muchas cosas, es muy flexible, sobretodo para le diseño. Tiene muchas opciones como
botones flash, botones normales y formularios. Todas las herramientas se encuentras rápidamente.
Desventajas: Las nuevas versiones no facilitan nada respecto a las anteriores; se necesita de alta resolución
para manejar todas las barras, le falta implementación de DHTML; su precio es considerable y carga muy
lentamente.


Editores de HTML: La otra opción es el aprendizaje del código HTML y su aplicación manual, es decir, el
etiquetado directo. Escribir HTML tiende a ser más complicado, aun cuando es un lenguaje simple. HTML es un
lenguaje de marcas o etiquetado, y la razón que lo hace más neto que otros lenguajes es que la página Web
resultante es interpretada por un código, sin ciclos, funciones, o variables que cambien su valor. Aprender HTML
puede producir ventajas a largo plazo una vez que se ha atravesado la experiencia de aprendizaje. HTML es
simplemente HTML, pero con postura visionaria, es la puerta de entrada a una mayor instrucción que tendrá un
beneficio a largo plazo. Lo mejor de aprender HTML, así como cualquier otro lenguaje, es que no se esta limitado
al número de funciones que el editor tiene para ofrecer
Creadores de páginas Web en línea:
Ventajas: Son muy fáciles de usar y hay ofertas de Creadores de páginas Web en línea gratuitos aunque la
mayoría son pagos. Sin embargo siempre serán más económico que el resto de los software.
Desventajas: En su mayoría ofrecen templates o plantillas que solo requieren del rellenado por parte del usuario
y como consecuencia suelen ser muy rígidos y poco originales.
9.4.1. Dreamweaver.
Adobe Dreamweaver CS5 es la aplicación que lidera el sector de la edición y creación de contenidos
web. Proporciona funciones visuales y de nivel de código para crear diseños y sitios web basados en
estándares para equipos de sobremesa, teléfonos inteligentes, tabletas y otros dispositivos.
Es un programa tipo WYSIWYG (What You See Is What You Get – Lo que ves lo que obtienes, es decir
que no es necesario algún tipo de código, simplemente trabajar como si estuviera en Microsoft Word.
9.4.1.1 Entorno de Trabajo.
Grupo de
Paneles
Barra de la
Aplicación
Barra de
Herramientas
Documento
Conmutador de
Espacios de Trabajo
CS Live
Ventana de Documento
Selector de Etiquetas
Inspector de Propiedades
Panel
Archivos
9.4.1.2. Uso del Dreamweaver.
Mediante un ejemplo sencillo elaboraremos una Página Web relacionada a una Institución
Educativa.
1. InicioTodos los programas
Adobe Dreamweaver CS5.
2. HTML.
Abrimos el Dreamweaver CS5 y elegimos HTML para realizar la Página Web.
3. SitioNuevo Sitio.
Necesitamos dar nombre al sitio web.
4. Llenar:
Nombre del sitio:
ESFM CARACOLLO
Carpeta del sitio local:
F:\WEB ESFM CARACOLLO\
5. Guardar.
Damos una ubicación donde se guardará la Web en nuestra computadora.
Organización de las carpetas y archivos de la Página Web en nuestra PC.
Cambiar de vista (diseño).
6. Diseño.
Insertar Marcos Superior,
Izquierdo, Principal en la
Página.
7. InsertarHTMLMarcos 
Superior  Anidado 
Izquierda.
Dando nombres a cada marco:
mainFrame, topFrame,
leftFrame.
8. Aceptar.
9. Llenar títulos de los marcos.
11. Archivo 
Guardar
todo.
Guardar todas las Páginas:
10. Escribir
Index.html
Guardar la Página donde se insertarán los marcos superior, marco izquierdo y principal; con el
nombre de index.html.
12. Escribir
Principal.html
13. Guardar.
Guardar la Página Principa.html.
De manera similar guardar cada marco con su
respectivo nombre (hacer clic dentro del
marco a guardar):
14. ArchivoGuardar marco.
Marco
Superior
Izquierdo
Nombre del Archivo (html)
Superior.html
Izquierdo.html
Ahora insertamos en los diferentes marcos los contenidos
15. Clic derechoAlinearCentro.
16. Escribir :
ESCUELA SUPERIOR DE FORMACIÓN DE MAESTROS
CARACOLLO.
Insertamos el título en el marco superior.
18. Escoger la imagen Aceptar.
17. InsertarImagen.
Insertando una imagen (Logo) en el lado izquierdo del marco superior
Nombre alternativo de la
imagen Logo.
20.
Aceptar.
19. Nombre de la imagen Logo.
21. VerReglasMostrar.
Activamos para ver las Reglas
en vista de Diseño.
27. Seleccionar texto  Clic derecho 
Propiedades de la página Color de
texto: NaranjaAceptar.
23. Seleccionar texto
Clic Derecho
Propiedades de la
página.
26. Aceptar.
25. ExaminarEscoger imagen
de fondo.
22. InsertarImagen Escoger imagen (poner
nombre de Pluma Tintero)Aceptar.
24. Color de texto: Verde.
De la misma manera para colocar el fondo en el marco superior y el marco principal proceder
28. Clic DerechoPropiedades de página Color de fondo: Escoger el color adecuado  Aceptar.
29. En el Marco Principal Escribir los contenidos de Presentación Clic DerechoPropiedades de
página Color de Texto: Escoger el color adecuado  Aceptar.
30. ArchivoNuevoNinguno.
31. Crear.
Crear una nueva Página.
32. InsertarImagenEscoger imagenAceptar.
Realizar este paso varias veces, insertando 2 logos.
33. ArchivoGuardar.
32. Escribir Logos.htmlGuardar.
Guardamos la página con el nombre de Logos.html.
34. ArchivoNuevo
HTMLNingunoCrear.
36. InsertarTablaTamaño de la Tabla,
Filas: 4, Columnas: 2 Aceptar.
33. InsertarImagenEscoger
ImagenAceptar.
35. Escribir texto Clic
DerechoAlinearCentro.
37. De manera similar repetir los pasos 35 y 36 38. ArchivoGuardarEscribir
para insertar las demás imágenes y textos.
Fotos.html  Guardar.
En una tabla de 4x2 insertar 4 imágenes y sus respectivos comentarios y guardar la página.
39. Seleccionar el texto Presentación 
GuardarVinculo Seleccionamos
Logos.html AceptarDestino:
mainFrame.
40. Seleccionar el texto Presentación 
GuardarVinculo Seleccionamos
Principal.html AceptarDestino:
mainFrame.
41. Seleccionar el texto Presentación 
GuardarVinculo Seleccionamos
Otros.html AceptarDestino:
mainFrame.
Enlazamos los textos del marco izquierdo para que aparezcan los respectivos contenidos en el marco
principal.
Finalmente tendremos una Página Web acabada.
Para ver como resulto, entrar a la carpeta WEB ESFM CARACOLLO y ejecutar index.html
Realizando este ejemplo sencillo, nos da la idea como trabajar con Dreamweaver para el Diseño de
Páginas Web
Para mayor detalle de otras opciones del Dreamweaver, podemos consultar el Manual de
Dreamweaver que viene adjunto al programa.
También existen recursos de tutoriales, video-tutoriales, tutoriales interactivos y otros que
contribuirán para el desarrollo de nuestra Página Web.
ACTIVIDADES
Realizar una Página Web más implementado que la actual sobre la institución a la que pertenece.
Con Dreamweaver elaborar una Página Web Temática de su gusto.
BIBLIOGRAFIA
Alcantara H. Mildred EL MUNDO DE INTERNET 2001, Librería Editorial 2001, Lima Perú
Cherre A. Rafael BIBLIOTECA DEL PROGRAMADOR Editorial Macro 2002 Lima Perú
Ramirez Luis E. APLICANDO DREAMWEAVER 4.0. Editorial Macro 2001, Lima Perú.
De La Cruz Villar Joel, DISEÑO WEB, , Editorial Megabyte 2003, Lima Perú.