P. 1
Dreamweaver8 portable - ejercicio de aplicación básica

Dreamweaver8 portable - ejercicio de aplicación básica

|Views: 44|Likes:
Publicado porJaime Echeverri

More info:

Categories:Types, School Work
Published by: Jaime Echeverri on Aug 08, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PPTX, PDF, TXT or read online from Scribd
See more
See less

11/12/2012

pdf

text

original

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. Dreamweaver proporciona un diseño integrado en una única ventana. 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. .

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

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

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

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

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

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.

.

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

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

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

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

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.

Para definir los atributos class o ID para una etiqueta en el selector de etiquetas. . 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.

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

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 .

como imágenes y otros archivos multimedia. 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 tablas.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. capas e imágenes. . Al pasar el mouse sobre un botón.

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

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. 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. si selecciona Marcador de posición de imagen en el menú emergente del botón Imagen.

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.

capas y marcos.La categoría Diseño permite insertar tablas. También puede elegir entre las tres vistas de las tablas: Estándar (valor predeterminado). 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. .

em. h1 y ul. La categoría Texto permite insertar diversas etiquetas de formato de texto y listas.La categoría Formularios contiene botones que permiten crear formularios e insertar elementos de formulario. como b. . p.

.

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

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

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

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

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

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 .

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

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

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

En el Inspector de propiedades Digite (240) en An y Enter.15. (Deben sumar el ancho de la fila) . Col. (230) en 2ª.. tabla 18. Hacer Clic una vez dentro de la primera columna de la 2ª. y (230) en 3ª. Col. siempre en An y Enter. 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.

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

En el Inspector de propiedades Clic en el cuadro de texto: Color de fondo o clic en casilla: Fnd. escoja color y Enter 23. Haga Enter por fuera de la tabla . 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ª.21.

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. por ejemplo) 26. Fila de la 1a.25. Clic sobre la 3a. Tabla (2 abajo del espacio para el banner) Seleccione: Insertar > Imagen (buscar en la carpeta una de las dos que bajó) > Aceptar .

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

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

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

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

Clic en la carpeta al lado del cuadro de texto Vínculo del Inspector de propiedades. Columna de fila de 3 columnas. Opción que escribió en la 1ª. 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ª.

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

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->