QUÉ ES?

Es un editor visual profesional para la creación de sitios y páginas web. Con Dreamweaver resulta fácil crear y editar páginas compatibles con cualquier explorador y plataforma.

En el espacio de trabajo integrado. todas las ventanas y paneles están integrados en una única ventana de la aplicación de mayor tamaño. .DISEÑO DEL ESPACIO DE TRABAJO En Windows. Dreamweaver proporciona un diseño integrado en una única ventana.

Barra Insertar Barra de herramientas de documento Grupos de paneles Vistas Ventana de documento Panel de archivos Inspector de propiedades Selector de etiquetas .

Ventana de documento La ventana de documento muestra el documento actual. Se puede elegir entre una de las siguientes vistas: .

. la edición visual y el desarrollo rápido de aplicaciones.La vista Diseño: es un entorno de diseño para el diseño visual de la página.

. similar a la que aparecería en un navegador. Dreamweaver muestra una representación visual del documento completamente editable.En esta vista.

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

Código y Diseño.Es posible ver el mismo documento en las dos vistas. . en una sola ventana de documento.

.Cuando la ventana de documento tiene una barra de título. el nombre y la ruta del archivo. entre paréntesis. ésta muestra el título de la página y.

. después del nombre del archivo Dreamweaver incluye un asterisco.Si se han realizado cambios que aún no se han guardado.

clic en su ficha. Para cambiar a alguno. aparecen fichas en la parte superior de la misma con los nombres de todos los documentos abiertos.Cuando una ventana de documento está maximizada. .

BARRA DE HERRAMIENTAS DE DOCUMENTO Contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: vista Código. . vista Diseño y vista Código y Diseño.

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

.

Título del documento permite introducir un título para el documento. que aparecerá en la barra de título del navegador. . éste aparecerá en dicho campo. Si el documento ya tiene título.

No hay errores de comprobación de navegador permite comprobar la compatibilidad con distintos navegadores. .

.Validar formato permite validar el documento actual o una etiqueta seleccionada.

Administración de archivos muestra el menú emergente Administración de archivos. .

Vista previa/Depurar en explorador permite ver una vista previa del documento o depurarlo en un navegador. Seleccione un navegador en el menú emergente. .

.Actualizar vista de diseño actualiza la vista Diseño tras realizar cambios en la vista Código.

como guardar el archivo o hacer clic en este botón.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. .

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

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

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

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 con el botón derecho del ratón en la etiqueta y elija una clase o un ID del menú contextual.Haga clic en <body> para seleccionar todo el cuerpo del documento. . Para definir los atributos class o ID para una etiqueta en el selector de etiquetas.

.El selector de etiquetas es el método más adecuado para seleccionar etiquetas. porque le garantiza que siempre se está seleccionado la etiqueta de manera precisa.

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

La herramienta Zoom y el menú emergente Establecer nivel de aumento permiten establecer el nivel de ampliación del documento. .

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 .

incluidos todos los archivos dependientes.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. 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. . aparece una descripción de la herramienta con el nombre del botón. como tablas. Al pasar el mouse sobre un botón. capas e imágenes.

Cuando se inicia Dreamweaver. .Los botones están organizados en categorías. se abre la última categoría con la que ha trabajado. a las que puede cambiar en la parte izquierda de la barra Insertar.

Al seleccionar una opción de un menú emergente. dicha opción se convierte en la acción predeterminada del botón. .Algunas categorías tienen botones con menús emergentes.

Por ejemplo. Dreamweaver insertará un marcador de posición de imagen. 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. . Siempre que seleccione una nueva opción del menú emergente cambiará la acción predeterminada del botón.

como las imágenes y las tablas. .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.

.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. em. h1 y ul. p. La categoría Texto permite insertar diversas etiquetas de formato de texto y listas. como b.

.

.Qué es Dreamweaver? Un editor HTML profesional para crear sitios Web. Espacio de trabajo? El pantallazo que Ud. puede visualizar cuando abre DW.

Consta de: • Barra de Herramientas (Arriba) • Barra de Estado (Debajo del espacio de trabajo) .Ventana del documento? Espacio para diseñar el sitio Web.

Para ver y administrar los archivos asociados al sitio Web) .• Inspector (Abajo) de Propiedades • Panel de archivos (derecha.

Barra Insertar Barra de Herramientas Grupos de paneles Vistas Ventana de documento Panel de archivos Inspector de propiedades Selector de etiquetas Barra de Estado .

Hacer Clic en HTML bajo la columna CREAR NUEVO .Crear en su USB una carpeta con nombre: Página web <nombre apellido> 2. a trabajar… 1.Ahora.Abrir DREAMWEAVER 3.

Crear un archivo nuevo: Archivo > Nuevo (Se abre un cuadro de diálogo) Seleccionar Página Básica (en la lista de la izquierda) y HTML (en la lista del centro) > Crear .4.

misitio. Crear un sitio: Sitio > Administrar sitios > Nuevo > Sitio (Póngale nombre: Primera_pagina_<nombre>) (Póngale dirección de internet: http://www.5.com/<nomb re> Siguiente: No .

Siguiente: En qué lugar > USB y carpeta creada Siguiente: En qué carpeta > USB y carpeta creada Siguiente: No Siguiente: Completado y Listo

6. Guarde el archivo: Archivo > Guardar como > index.html > Guardar 7.Insertar tablas Hacer Clic en el espacio de trabajo

Seleccione Insertar > Tabla En el cuadro de diálogo escriba: Filas (3) Columnas (1) Ancho de tabla (entre 700 y 1000) Todo lo demás en ceros y Aceptar

Hacer Clic a la derecha afuera de la tabla y Enter Seleccione Insertar > Tabla En el cuadro de diálogo escriba: Filas (1) Columnas (3) Ancho de tabla (entre 700 y 1000 pero igual que la anterior) Todo lo demás en ceros y Aceptar .8.

Hacer Clic a la derecha afuera de la tabla y Enter Seleccione Insertar > Tabla En el cuadro de diálogo escriba: Filas (1) Columnas (1) Lo demás como en numeral 7. y 8.9. y Aceptar .

Hacer Clic una vez dentro de la segunda fila de la tabla 14.10. Definir Propiedades de las tablas Seleccionar: Ver > Modo de tabla > Modo de tablas expandidas 11. En el Inspector de propiedades Digite (90) en AI y Enter 13. Hacer Clic una vez dentro de la primera fila de la tabla 12. En el Inspector de propiedades Digite (166) en AI y Enter .

15.. En el Inspector de propiedades Digite (24) en AI y Enter 17. Hacer Clic una vez dentro de la tercera fila de la tabla 16. Hacer Clic una vez dentro de la primera columna de la 2ª. Col. Col. (230) en 2ª. (Deben sumar el ancho de la fila) . tabla 18. En el Inspector de propiedades Digite (240) en An y Enter. y (230) en 3ª. siempre en An y Enter.

En 1ª. Guarde la página: Archivo > Guardar . Fila de la tabla hacer Clic: Insertar > Objetos de imagen > marcador Escriba Banner_graphic Escriba 700 en ancho (o el número entre 700 y 1000) Escriba 90 en Alto Clic en Selector de color.19. escoja un color y Aceptar 20. Insertar Marcador de posición de imagen.

Hacer lo mismo con las otras celdas de esa tabla de 3 columnas 24. Haga Enter por fuera de la tabla . Adicionar color Clic en 1ª. escoja color y Enter 23. Columna de la tabla de tres columnas Clic en etiqueta <td> en la Barra de Estado 22.21. En el Inspector de propiedades Clic en el cuadro de texto: Color de fondo o clic en casilla: Fnd.

Clic sobre la 3a. Inserción de imágenes Buscar en Google 3 imágenes e incluirlas en la carpeta del proyecto a) Un banner con las puntas inferiores redondeadas b) Dos imagenes asociadas a su proyecto (unos zapatos.25. Fila de la 1a. por ejemplo) 26. Tabla (2 abajo del espacio para el banner) Seleccione: Insertar > Imagen (buscar en la carpeta una de las dos que bajó) > Aceptar .

Inserción de imagen grande Clic sobre la Columna del centro en la fila de 3 columnas. . Inserción de imágenes arrastrando Clic en la última fila de la última tabla En el panel de archivos (a la derecha) buscar la imagen (el banner de las esquinas inferiores redondeadas) Arrastrar ese archivo hasta la última fila de la última tabla y soltar (Se abre cuadro de diálogo) > Aceptar 28.27.

Fila 1ª. Clic en 2ª. Buscar video Flash y guardarlo en la carpeta. deberán convertirlo a Flash con un convertidor especial. seleccionar Superior Insertar > Imagen (buscar en la carpeta la otra imagen de las dos que bajó) > Aceptar 29. Si el video no es flash.En el Inspector de propiedades: En Horizontal. Tabla debajo del banner . seleccionar Centro En vertical.

seleccionar Centro En vertical. Insertar texto de una barra de navegación (Menú de opciones) Clic en 1ª.En Horizontal.swf) > Aceptar > Aceptar 30. Columna de la fila de 3 columnas Escriba la 1ª. Opción de su menú Oprima la barra de espacio una vez . seleccionar Medio Insertar > Media > Flash video Buscar en la carpeta el archivo flash a insertar (Extensión .

Cree tantas páginas html como opciones tenga en el menú .Escriba la 2ª. seleccionar Superior 31. Opción de su menú Oprima la barra de espacio una vez. Creación de hipervínculos 32. Hasta terminar con las opciones Clic en <td> del selector de etiquetas (abajo izquierda y arriba del inspector de propiedades) En el Inspector de propiedades o dando Ventana > Propiedades en el menú: En vertical. etc.

Clic en la carpeta al lado del cuadro de texto Vínculo del Inspector de propiedades. Columna de fila de 3 columnas. SIN EL ESPACIO al final. .(Archivo > Nuevo > Html y Crear Archivo > Guardar como > Buscar la carpeta y escribir <nombre de la opción> y Guardar Resalte la 1ª. Opción que escribió en la 1ª.

busque el archivo con nombre de opción asociado a la opción que está configurando (La que quiere que aparezca cuando de clic en esa opción) y Aceptar Repita la operación con cada opción del menú y tendrá configurado el menú de opciones de su página para hacer el link al sitio indicado.En el cuadro de diálogo Seleccionar Archivo. .

Sign up to vote on this title
UsefulNot useful