MACROMEDIA DREAMWEAVER

[ ] IES “Politécnico Industrial”-Macusani Quinto grado

MACROMEDIA DREAMWEAVER

INTRODUCCIÓN

Macromedia Dreamweaver 8 es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual, Dreamweaver le proporciona útiles herramientas que mejorarán su experiencia de creación Web. Las funciones de edición visual de Dreamweaver 8 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Además se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.

LO QUE PUEDE HACER CON DREAMWEAVER 8

Las funciones de edición visual de Dreamweaver permiten crear páginas Web de forma rápida, sin escribir una sola línea de código. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo mediante la creación y edición de imágenes en Macromedia Fireworks o en otra aplicación de gráficos y su posterior importación directa a Dreamweaver. Dreamweaver también contiene herramientas que facilitan la adición de activos de Flash a las páginas web.

Además, Dreamweaver le permite crear aplicaciones Web dinámicas basadas en bases de datos empleando tecnologías de servidor como CFML, ASP.NET, ASP, JSP y PHP. Si prefiere trabajar con datos en XML, Dreamweaver incorpora herramientas que le permiten crear fácilmente páginas XSLT, adjuntar archivos XML y mostrar datos XML en sus páginas.

Dreamweaver se puede personalizar totalmente. Puede crear sus propios objetos y comandos, modificar métodos abreviados de teclado e incluso escribir código JavaScript para ampliar las posibilidades que ofrece Dreamweaver con nuevos comportamientos, inspectores de propiedades e informes de sitios.

NOVEDADES EN DREAMWEAVER 8

Dreamweaver 8 incorpora muchas funciones nuevas que le ayudarán a diseñar páginas Web y aplicaciones con un mínimo de tiempo y esfuerzo. Dreamweaver simplifica las tecnologías más complejas y las hace accesibles, ayudándole a conseguir más en menos tiempo.

Éstas son algunas de las nuevas funciones de Dreamweaver 8:

Herramienta Zoom y guías Vinculación de datos visual de XML Nuevo panel de estilos CSS Visualización de diseño CSS Contracción de código Barra de herramientas de codificación Transferencia de archivos en segundo plano Inserción de comando de Flash Video

INSTALACIÓN DE DREAMWEAVER 8

Para instalar Dreamweaver:1. Introduzca el CD de Dreamweaver en la unidad de CD-ROM de su sistema. 2. Siga uno de estos procedimientos:

o En Windows, se iniciará automáticamente el programa de instalación de Dreamweaver. 3. Siga las instrucciones que aparecen en pantalla.

El programa de instalación le indicará que introduzca la información necesaria.4. Si el sistema lo solicita, reinicie el sistema.

INICIAR MACROMEDIA DREAMWEAVER

Macromedia Dreamweaver se puede iniciar de dos formas más usuales:

Área EPT. Computación e Informática (Diseño de Páginas Web) 1


1. Desde el menú Inicio, seleccione todos los programas, Macromedia, y has un clic en Macromedia Dreamweaver.

2. Desde el escritorio: hacer doble clic en el icono de acceso directo. Si es que lo tiene creada.

Después de realizar cualquiera de estas dos formas de ingreso a Dreamweave, nos mostrara la ventana con las opciones de abrir un elemento reciente, crear nuevo y crear a partir de muestra. En esta ventana seleccionaremos la opción crear nuevo HTML.

También se puede iniciar a Macromedia desde la barra de tareas haciendo clic en el botón de acceso rápido, si es que lo tenemos. O también se puede ingresar desde un archivo o documento de Dreamveaver.

VENTANA DE APLICACIÓN DE MACROMEDIA DREAMWEAVER.

En Windows, Dreamweaver proporciona un espacio de trabajo integrado que facilita el trabajo al diseñador. En este espacio de trabajo integrado, todas las ventanas y paneles están integrados en una única ventana de la aplicación de mayor tamaño. La ventana principal es como se muestra a continuación.

ELEMENTOS DEL ESPACIO DE TRABAJO DE REAMWEAVER

Además de la barra de título, barra de menús y los botones de control. El espacio de trabajo de Dreamweaver incorpora



muchos elementos entre ellas paneles, inspectores, ventanas y otros que permiten un diseño fácil y rápido.

La página de inicio, permite abrir un documento reciente o crear un documento nuevo. Desde la página de inicio también puede profundizar sus conocimientos sobre Dreamweaver mediante una visita guiada o un tutorial del producto.

La barra Insertar, contiene botones para la inserción de diversos tipos de "objeto", como imágenes, tablas y capas, en un documento. Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el botón Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar en lugar de la barra Insertar.

La barra de herramientas de documento, contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código), diversas opciones de visualización y algunas operaciones comunes como la obtención de una vista previa en un navegador.

La barra de herramientas Estándar, (que no aparece en el diseño de espacio de trabajo predeterminado) contiene botones para las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de herramientas > Estándar.

La barra de herramientas Codificación, (se muestra únicamente en la vista Código) contiene botones con los que es posible realizar muchas operaciones de codificación habituales.

La barra de herramientas Representación de estilos, (oculta de manera predeterminada) contiene botones que le permiten ver cómo aparecería el diseño en distintos tipos de soportes si utilizase hojas de estilos dependientes de los medios. También contiene un botón con el que es posible activar o desactivar los estilos CSS.

La ventana de documento, muestra el documento actual mientras lo está creando y editando.

El inspector de propiedades, le permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades. El inspector de propiedades no está ampliado de forma predeterminada en el diseño del espacio de trabajo del codificador.

El selector de etiquetas, que aparece en la barra de estado en la parte inferior de la ventana de documento, muestra la jerarquía de etiquetas que rodean a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido.

Los grupos de paneles, son conjuntos de paneles relacionados apilados bajo un encabezado común. Para ampliar un grupo de paneles, haga clic en la flecha de ampliación situada a la izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrastre el punto de sujeción situado en el borde izquierdo de la barra de título del grupo.

El panel de archivos, permite gestionar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel de archivos también proporciona una vista de todos los archivos del disco local, como ocurre en el Explorador de Windows (Windows).

Actividad: Dibuje la ventana principal de Dreamweaver y señale sus principales elementos

VENTANA DE DOCUMENTO

La ventana de documento muestra el documento actual. En esta ventana se puede elegir dos vistas diferentes, vista de diseño y vistas de código, Además es posible ver el mismo documento en las dos vistas, Código y Diseño, en una sola ventana de documento.

La vista Diseño, es un entorno o área de diseño para el diseño visual de la página, la edición visual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador.

La vista Código, es un entorno de codificación manual para escribir y editar código HTML, JavaScript, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de código.

BARRA DE HERRAMIENTAS DE DOCUMENTO

La barra de herramientas de Documento, contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: vista Código, vista Diseño y una vista dividida que muestra las vistas Código y Diseño. Esta barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto.



En la barra de herramientas de Documento, aparecen las siguientes opciones:

1. Mostrar vista de código: sólo muestra la vista Código en la ventana de documento.2. Mostrar vistas de código y diseño: muestra la vista Código en una parte de la ventana de documento y la vista Diseño en la

otra parte. Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver. Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento.

3. Mostrar vista de diseño: sólo muestra la vista Diseño en la ventana de documento.4. Depuración del servidor: muestra un informe que le ayudará a depurar la página de ColdFusion actual. El informe contiene los

errores de la página, si los hay.5. Título del documento: permite introducir un título para el documento, que aparecerá en la barra de título del navegador. Si el

documento ya tiene título, éste aparecerá en dicho campo.6. No hay errores de comprobación de navegador: permite comprobar la compatibilidad con distintos navegadores.7. Validar formato: permite validar el documento actual o una etiqueta seleccionada.8. Administración de archivos: muestra el menú emergente Administración de archivos.9. Vista previa/Depurar en explorador: permite ver una vista previa del documento o depurarlo en un navegador. Seleccione un

navegador en el menú emergente.10. Actualizar vista de diseño: actualiza la vista Diseño tras realizar cambios en la vista Código. Los cambios realizados en la

vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón.

11. Ver opciones: permite definir las opciones de las vistas Código y Diseño, y establecer qué vista va a aparecer en la parte superior de la ventana. Las opciones del menú corresponden a la vista actual: la vista Diseño, la vista Código o ambas.

12. Ayudas visuales: permite utilizar distintas ayudas visuales para el diseño de las páginas.

BARRA DE ESTADO DEL DOCUMENTO

La barra de estado del documento, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando.

1. El selector de etiquetas muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido. Haga clic en <body> para seleccionar todo el cuerpo del documento.

2. La herramienta Mano permite hacer clic en el documento y arrastrarlo hasta la ventana de documento. Haga clic en la herramienta Seleccionar para desactivar la herramienta Mano.

3. La herramienta Zoom y el menú emergente Establecer nivel de aumento permiten establecer el nivel de ampliación del documento. Para más información.

4. El menú emergente Tamaño de ventana (que sólo aparece en la vista Diseño) permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas.

5. A la derecha del menú emergente Tamaño de ventana aparecen la estimación del tamaño del documento y del tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes y otros archivos multimedia.

BARRA INSERTAR

La barra Insertar contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Al pasar el puntero sobre un botón, aparece una descripción de la herramienta con el nombre del botón.

Los botones están organizados en categorías, a las que puede cambiar en la parte izquierda de la barra Insertar. Si el documento actual contiene código de servidor, como los documentos ASP o CFML, aparecen también otras categorías. Cuando se inicia Dreamweaver, se abre la última categoría con la que ha trabajado.



Algunas categorías tienen botones con menús emergentes. Al seleccionar una opción de un menú emergente, dicha opción se convierte en la acción predeterminada del botón. Por ejemplo, si selecciona Marcador de posición de imagen en el menú emergente del botón Imagen, la siguiente vez que haga clic en el botón Imagen, Dreamweaver insertará un marcador de posición de imagen. Siempre que seleccione una nueva opción del menú emergente cambiará la acción predeterminada del botón.

La barra Insertar está organizada en las categorías siguientes:

La categoría Común permite crear e insertar los objetos que se utilizan con más frecuencia, como las imágenes y las tablas.

La categoría Diseño permite insertar tablas, etiquetas div, capas y marcos. También puede elegir entre las tres vistas de las tablas: Estándar (valor predeterminado), Tablas expandidas y Diseño. Si se selecciona el modo de diseño, se pueden utilizar las herramientas de diseño de Dreamweaver: Dibujar celda de diseño y Dibujar tabla de diseño.

La categoría Formularios contiene botones que permiten crear formularios e insertar elementos de formulario.

La categoría Texto permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul.

La categoría HTML permite insertar etiquetas HTML para las reglas horizontales, el contenido de la sección head, las tablas, los marcos y los scripts.

Las categorías de código de servidor sólo están disponibles para las páginas que emplean un lenguaje de servidor determinado, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP y PHP. Cada una de estas categorías contiene objetos de código de servidor que pueden insertarse en la vista Código.

La categoría Aplicación permite insertar elementos dinámicos como juegos de registros, regiones repetidas y grabar formularios de inserción y actualización.

La categoría Elementos Flash permite insertar elementos de Macromedia Flash. La categoría Favoritos le permite agrupar y organizar los botones de la barra Insertar que utiliza con más frecuencia en un

lugar común.

También se puede cambiar de aspecto en forma de menús, el cual es más cómodo para trabajar.



PRACTICA DE DISEÑO DE PAGINA WEB1. Inicie el programa de Macromedia Dreamveaver, en la ventana seleccione la opción crear nuevo documento HTML.2. CREACION DE FRAMES O MARCOS: Son áreas rectangulares que subdividen las ventanas de algunas páginas Web, cada una

de las cuales contiene un documento de hipertexto independiente de los demás. Podemos dividir las páginas con los frames horizontalmente (líneas) o verticalmente (columnas). También se admiten frames anidados.

Para crear un conjunto de marcos predefinido y mostrar un documento en un marco:

Sitúe el punto de inserción en un documento y siga uno de estos procedimientos: o Seleccione un conjunto de marcos superior e izquierdo anidado, en el submenú Insertar >

HTML >Marcos. o En la categoría Diseño (a) de la barra Insertar, haga clic en la flecha abajo del botón Marcos

(b) y, a continuación, seleccione el conjunto de marcos superior e izquierdo anidado(c). o en la ventana de dialogo de Atributos de accesibilidad de la etiqueta de marco, haga clic

en aceptar si establecer ninguna acción.o Ahora seleccione el marco superior (topFrame) y asigne el titulo ENCABEZADO, en la barra

de herramientas del documento, seleccione el marco izquierdo (leftFrame) y asigne el título MENU DE OPCIONES y en la área principal (mainframe) asigne el Título de PRINCIPAL.

o Guardar: en el menú Archivo haz clic en Guardar Como, seleccione la unidad D/Pagina Web, para el 1º documento (conjunto de marcos) pon el nombre index, para el 2º (documento principal) principal, para el 3º (LeftFrame) opciones y el 4º (topframe) titulo.

o Asignando propiedades a los marcos: En el grupo de paneles activa el panel marco (si es que no está active desde el menú Ventana y marcos). Seleccione los marcos uno a uno para mostrar activar el inspector de propiedades de os marcos y asigne lo siguiente:

o Para el marco TopFrame asigne: en Nombre de marco escriba: encabezado (a), en ancho de margen escriba: 800 (b) y en Alto de margen escriba: 82 (c)

o Para el marco Leftframe asigne: en Nombre de marco escriba: izquierdo, en ancho de margen escriba: 150 y en Alto de margen escriba: 800.

o Asignar fondo a la página: en el inspector de propiedades haz clic en Propiedades de página. Y se mostrara la siguiente ventana de dialogo.


b

a

c

c

b

a

o En esta ventana asigne lo siguiente: en color de fondo asigne el color gris con código #CCCCCC (a), en la opción de los márgenes asigne 0 (b) para todos los márgenes. Estas acciones aplica a todos los marcos.

o En el marco izquierdo asigne un imagen de fondo para el cual, haz clic en examinar (c), luego seleccione la unidad D/Pagina Web/fondos/fondo2.jpg y haz clic en aceptar.

o Finalmente haz clic en aceptar.

a

b

c


3. INSERCIÓN DE OBJETOS: para insertar diferentes tipos de objetos al documento es decir a la página web. Es necesario prepararlo y organizarlo en diferentes carpetas previamente.

4. INSERTAR TABLAS. Para insertar tablas al documento desde la barra insertar active la categoría Común (a) y luego siga los pasos siguientes:

A. Seleccione el marco topframe para insertar una tabla de 800 Px de ancho y 82 Px de alto. (TABLA 01)B. En la categoría común de la barra de insertar, haz clic en el botón insertar tabla (b), en seguida se visualizara una ventana de

dialogo. C. En la ventana tabla: e filas asigne 1 (a), en columnas

asigne 1 (b) y en el grosor del borde asigne 1 (c). el resto de las opciones déjalo tal como está y haz clic en aceptar.

D. En el selector de Etiquetas de la barra de estado del documento seleccione la etiqueta <table>, para activar las propiedades de la tabla insertada.

E. En el inspector de propiedades de la tabla asigne: ancho y alto de la tabla An = 800 (a) y Al = 80 (b)F. Seleccione el marco Leftframe para insertar una tabla de una columna y ocho filas. (TABLA 02)G. Repita el paso B luego en la ventana tabla asigne en Filas 8, en columnas 1, en ancho de tabla escriba 120 y el resto déjelo como

esta, luego haga clic en aceptar.H. Repita el paso D, para establecer las propiedades de la segunda tabla insertada. En Ancho asigne120 y Alto 257I. En el selector de etiquetas seleccione la etiqueta <td> y luego escriba 30 solamente la altura de la celda, repita este

procedimiento para todas las celdas de esta tabla.J. Seleccione el marco principal mainframe, y luego inserte una tabla de dos filas y dos columnas. (TABLA 03)K. Repita el paso B, y luego en la ventana tabla asigne en Filas 2, en Columnas 2, en ancho de tabla escriba 660 y el resto déjelo

como esta, seguidamente haga clic en aceptar.L. Repita el paso D, para establecer las propiedades de la tercera tabla insertada. En Ancho 660 y Alto 800M. Seleccione las dos celdas de la primera fila de la tabla, para luego combinarla. Una vez seleccionada las celdas haz clic el botón

derecho del ratón, tabla y combinar celdas.N. En el selector de etiquetas seleccione la etiqueta <td> o la celda combinada, luego en el inspector de propiedades escriba en

Ancho 660 y en Alto 30.O. Seleccione la 1º celda de la fila 2 y luego haz clic en la etiqueta <td> (a) luego escriba en Ancho 550 (b) y Alto 800 (c)

P. En esta celda inserte un fondo de imagen para el cual haz clic en el botón examinar de color amarillo (d) en la ventana seleccionar origen de imagen, seleccione la imagen fondo5 de la carpeta fondos luego haz clic en aceptar.NOTA: En todas las tablas y celdas asigne en la opción Vert (vertical) Superior (e).En esta celda insertaremos mas 2 tablas.

Q. Inserte una tabla de tres columnas y dos filas. (TABLA 04)R. Repita el paso B, y luego en la ventana tabla asigne en Filas 2, en Columnas 3, en ancho de tabla escriba 115 y el resto déjelo

como esta, seguidamente haga clic en aceptarS. Repita el paso D, para establecer las propiedades de la cuarta tabla insertada. En Ancho 515 y Alto 88 T. Seleccione la celda 1 en la primera fila de la tabla 4 o la etiqueta <td>, escriba en Ancho 15, en la segunda celda 380 en la

tercera celda 120.U. A la primera celda de la fila 2 asigne un ancho de 15, luego seleccione las dos siguientes celdas para luego combinarlas (botón

derecho del ratón, tabla y combinar celdas)NOTA: a medida que va desarrollando su diseño guarde el documento haciendo clic en la opción guardar todo del menú Archivo

V. Ahora insertaremos una taba de dos columnas y tres filas. (TABLA 05)


ab

a

b

c

a

b

a b

c

e d


W. Repita el paso B, y luego en la ventana tabla asigne en Filas 3, en Columnas 2, en ancho de tabla escriba 510y el resto déjelo como esta, seguidamente haga clic en aceptar

X. Seleccione las dos primeras celdas de la columna 1 para combinarlo, también combine las dos celdas de la fila 3 (para combinar celdas repite el paso M),

Y. Los tamaños de las celdas de esta tabla no son fijas, porque variará de acuerdo al texto u objeto que se desea insertar a las celdas.

Z. Seleccione la celda 2 de la tabla 3 y asigne la siguiente propiedad: Ancho 120 y alto 800AA.En esta misma celda insertaremos la última celda de una columna y 10 filas respectivamente. (TABLA6)BB.Seleccione las celdas uno a uno y asigne un ancho de 120 respectivamente ( en estas celdas insertaremos las imágenes de

enlace a las distintas páginas web) Guarde todos los documentos. Y ejecute la vista previa.

Luego de seguir estos pasos el documento diseñado quedara de la siguiente manera

Ahora esta nuestro diseño está listo para introducir información, objetos, imágenes, archivos flash, botones, etc.A continuación describimos que es lo que va contener en cada área de esta página web.

a) En esta área insertaremos un archivo flash, o banners,b) Aquí ingresaremos los títulos correspondientes y algunas características de una página.c) Titulo de la pagina actual mostrada d) En esta área se insertará imágenes, fotos o un archivo flashe) En esta área estará todo el contenido o la información de la página web.f) Aquí se insertarán los botones o menús que nos permitirán navegar en nuestra página web.g) Se asignaran las imágenes u objetos que a los cuales se le agregará un enlace respectivo.h) En esta celda estarán la fecha, hora y algunos datos relacionados a la página.

Comente Ud. sobre esta práctica:........................................................................................................................................................................................................................................................................................................................................................................................................................................................ ....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................


a

f

b

cd

e

g

h


5. Insertar fondo


MACROMEDIA DREAMWEAVER

Documents

Transcript of MACROMEDIA DREAMWEAVER