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.

DISEÑO DEL ESPACIO DE TRABAJO En Windows. . 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. 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 .

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

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

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

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

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

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

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

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

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

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. Si el documento ya tiene título. que aparecerá en la barra de título del navegador. . éste aparecerá en dicho campo.

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

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

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.

Las opciones del menú corresponden a la vista actual: la vista Diseño. .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. la vista Código o ambas.

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

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

. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido.El selector de etiquetas muestra la jerarquía de etiquetas que rodea a la selección actual.

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

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

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. como imágenes y otros archivos multimedia.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.

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

se abre la última categoría con la que ha trabajado.Los botones están organizados en categorías. Cuando se inicia Dreamweaver. 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. .

la siguiente vez que haga clic en el botón Imagen.Por ejemplo. . si selecciona Marcador de posición de imagen en el menú emergente del 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.

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. También puede elegir entre las tres vistas de las tablas: Estándar (valor predeterminado). capas y marcos. Tablas expandidas y Diseño. etiquetas div. .

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 Texto permite insertar diversas etiquetas de formato de texto y listas. em. . p.La categoría Formularios contiene botones que permiten crear formularios e insertar elementos de formulario. h1 y ul. 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 .

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

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

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

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.

y 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.9. y Aceptar .

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

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

Insertar Marcador de posición de imagen. 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. escoja un color y Aceptar 20. Guarde la página: Archivo > Guardar .19. En 1ª.

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

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 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. Clic sobre la 3a. Fila de la 1a. por ejemplo) 26.

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

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

seleccionar Superior 31. Creación de hipervínculos 32. Opción de su menú Oprima la barra de espacio una vez. etc. 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.Escriba la 2ª. Cree tantas páginas html como opciones tenga en el menú .

. SIN EL ESPACIO al final. Clic en la carpeta al lado del cuadro de texto Vínculo del Inspector de propiedades.(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ª. Columna de fila de 3 columnas.

En el cuadro de diálogo Seleccionar Archivo. 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. .

Sign up to vote on this title
UsefulNot useful