Dreamweaver8 Portable - Ejercicio de Aplicación Básica

QU ES?
Es un editor visual profesional para la creacin de sitios y pginas web. Con Dreamweaver resulta fcil crear y editar pginas compatibles con cualquier explorador y plataforma.
DISEO DEL ESPACIO DE TRABAJO En Windows, Dreamweaver proporciona un diseo integrado en una nica ventana. En el espacio de trabajo integrado, todas las ventanas y paneles estn integrados en una nica ventana de la aplicacin de mayor tamao.
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 vista Diseo: es un entorno de diseo para el diseo visual de la pgina, la edicin visual y el desarrollo rpido de aplicaciones.
En esta vista, Dreamweaver muestra una representacin visual del documento completamente editable, similar a la que aparecera en un navegador.
La vista Cdigo: es un entorno de codificacin manual para escribir y editar cdigo HTML, JavaScript, cdigo de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de cdigo.
Es posible ver el mismo documento en las dos vistas, Cdigo y Diseo, en una sola ventana de documento.
Cuando la ventana de documento tiene una barra de ttulo, sta muestra el ttulo de la pgina y, entre parntesis, el nombre y la ruta del archivo.
Si se han realizado cambios que an no se han guardado, despus del nombre del archivo Dreamweaver incluye un asterisco.
Cuando una ventana de documento est maximizada, aparecen fichas en la parte superior de la misma con los nombres de todos los documentos abiertos. Para cambiar a alguno, clic en su ficha.
BARRA DE HERRAMIENTAS DE DOCUMENTO Contiene botones que permiten alternar entre diferentes vistas del documento rpidamente: vista Cdigo, vista Diseo y vista Cdigo y Diseo.
La barra de herramientas contiene tambin algunos comandos y opciones relativos a la visualizacin del documento y a su transferencia entre los sitios local y remoto.
Ttulo del documento permite introducir un ttulo para el documento, que aparecer en la barra de ttulo del navegador. Si el documento ya tiene ttulo, ste aparecer en dicho campo.
No hay errores de comprobacin de navegador permite comprobar la compatibilidad con distintos navegadores.
Validar formato permite validar el documento actual o una etiqueta seleccionada.
Administracin de archivos muestra el men emergente Administracin 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 diseo actualiza la vista Diseo tras realizar cambios en la vista Cdigo.
Los cambios realizados en la vista Cdigo no aparecern de forma automtica en la vista Diseo hasta que se efecten determinadas acciones, como guardar el archivo o hacer clic en este botn.
Ver opciones permite definir las opciones de las vistas Cdigo y Diseo, 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 Diseo, la vista Cdigo o ambas.
Ayudas visuales permite utilizar distintas ayudas visuales para el diseo de las pginas.
BARRA DE ESTADO
La barra de estado, situada en la parte inferior de la ventana de documento, proporciona informacin adicional sobre el documento que est creando.
El selector de etiquetas muestra la jerarqua de etiquetas que rodea a la seleccin actual. Haga clic en cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido.
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, haga clic con el botn derecho del ratn en la etiqueta y elija una clase o un ID del men contextual.
El selector de etiquetas es el mtodo ms 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 ampliacin del documento.
El men emergente Tamao de ventana (que slo aparece en la vista Diseo) permite cambiar el tamao de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas
A la derecha del men emergente Tamao de ventana aparecen la estimacin del tamao del documento y del tiempo de descarga de la pgina, incluidos todos los archivos dependientes, como imgenes y otros archivos multimedia.
BARRA INSERTAR
La barra Insertar contiene botones para la creacin e insercin de diversos tipos de objetos, como tablas, capas e imgenes. Al pasar el mouse sobre un botn, aparece una descripcin de la herramienta con el nombre del botn.
Los botones estn organizados en categoras, a las que puede cambiar en la parte izquierda de la barra Insertar. Cuando se inicia Dreamweaver, se abre la ltima categora con la que ha trabajado.
Algunas categoras tienen botones con mens emergentes. Al seleccionar una opcin de un men emergente, dicha opcin se convierte en la accin predeterminada del botn.
Por ejemplo, si selecciona Marcador de posicin de imagen en el men emergente del botn Imagen, la siguiente vez que haga clic en el botn Imagen, Dreamweaver insertar un marcador de posicin de imagen. Siempre que seleccione una nueva opcin del men emergente cambiar la accin predeterminada del botn.
La barra Insertar est organizada en las categoras siguientes: La categora Comn permite crear e insertar los objetos que se utilizan con ms frecuencia, como las imgenes y las tablas.
La categora Diseo permite insertar tablas, etiquetas div, capas y marcos. Tambin puede elegir entre las tres vistas de las tablas: Estndar (valor predeterminado), Tablas expandidas y Diseo.
Si se selecciona el modo de diseo, se pueden utilizar las herramientas de diseo de Dreamweaver: Dibujar celda de diseo y Dibujar tabla de diseo.
La categora Formularios contiene botones que permiten crear formularios e insertar elementos de formulario. La categora Texto permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul.
Qu es Dreamweaver? Un editor HTML profesional para crear sitios Web.
Espacio de trabajo? El pantallazo que Ud. puede visualizar cuando abre DW.
Ventana del documento? Espacio para disear el sitio Web.

Consta de: Barra de Herramientas (Arriba) Barra de Estado (Debajo del espacio de trabajo)
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, a trabajar
1.Crear en su USB una carpeta con nombre: Pgina web <nombre apellido> 2.Abrir DREAMWEAVER 3.Hacer Clic en HTML bajo la columna CREAR NUEVO
4. Crear un archivo nuevo: Archivo > Nuevo (Se abre un cuadro de dilogo) Seleccionar Pgina Bsica (en la lista de la izquierda) y HTML (en la lista del centro) > Crear
5.
Crear un sitio: Sitio > Administrar sitios > Nuevo > Sitio (Pngale nombre: Primera_pagina_<nombre>) (Pngale direccin de internet: http://www.misitio.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 dilogo escriba: Filas (3) Columnas (1) Ancho de tabla (entre 700 y 1000) Todo lo dems en ceros y Aceptar
8.Hacer Clic a la derecha afuera de la tabla y Enter Seleccione Insertar > Tabla En el cuadro de dilogo escriba: Filas (1) Columnas (3) Ancho de tabla (entre 700 y 1000 pero igual que la anterior) Todo lo dems en ceros y Aceptar
9. Hacer Clic a la derecha afuera de la tabla y Enter Seleccione Insertar > Tabla En el cuadro de dilogo escriba: Filas (1) Columnas (1) Lo dems como en numeral 7. y 8. y Aceptar
10. 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. Hacer Clic una vez dentro de la segunda fila de la tabla 14. En el Inspector de propiedades Digite (166) en AI y Enter
15. Hacer Clic una vez dentro de la tercera fila de la tabla 16. En el Inspector de propiedades Digite (24) en AI y Enter 17. Hacer Clic una vez dentro de la primera columna de la 2. tabla 18. En el Inspector de propiedades Digite (240) en An y Enter, (230) en 2. Col. y (230) en 3. Col., siempre en An y Enter. (Deben sumar el ancho de la fila)
19. Insertar Marcador de posicin de imagen. En 1. Fila de la tabla hacer Clic: Insertar > Objetos de imagen > marcador Escriba Banner_graphic Escriba 700 en ancho (o el nmero entre 700 y 1000) Escriba 90 en Alto Clic en Selector de color, escoja un color y Aceptar 20. Guarde la pgina: Archivo > Guardar
21. Adicionar color Clic en 1. Columna de la tabla de tres columnas Clic en etiqueta <td> en la Barra de Estado 22. En el Inspector de propiedades Clic en el cuadro de texto: Color de fondo o clic en casilla: Fnd, escoja color y Enter 23. Hacer lo mismo con las otras celdas de esa tabla de 3 columnas 24. Haga Enter por fuera de la tabla
25. Insercin de imgenes Buscar en Google 3 imgenes 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. Clic sobre la 3a. Fila de la 1a. Tabla (2 abajo del espacio para el banner) Seleccione: Insertar > Imagen (buscar en la carpeta una de las dos que baj) > Aceptar
27. Insercin de imgenes 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 dilogo) > Aceptar 28. Insercin de imagen grande Clic sobre la Columna del centro en la fila de 3 columnas.
En el Inspector de propiedades: En Horizontal, seleccionar Centro En vertical, seleccionar Superior Insertar > Imagen (buscar en la carpeta la otra imagen de las dos que baj) > Aceptar 29. Buscar video Flash y guardarlo en la carpeta. Si el video no es flash, debern convertirlo a Flash con un convertidor especial. Clic en 2. Fila 1. Tabla debajo del banner
En Horizontal, seleccionar Centro En vertical, seleccionar Medio Insertar > Media > Flash video Buscar en la carpeta el archivo flash a insertar (Extensin .swf) > Aceptar > Aceptar 30. Insertar texto de una barra de navegacin (Men de opciones) Clic en 1. Columna de la fila de 3 columnas Escriba la 1. Opcin de su men Oprima la barra de espacio una vez
Escriba la 2. Opcin 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, seleccionar Superior 31. Creacin de hipervnculos 32. Cree tantas pginas html como opciones tenga en el men
(Archivo > Nuevo > Html y Crear Archivo > Guardar como > Buscar la carpeta y escribir <nombre de la opcin> y Guardar Resalte la 1. Opcin que escribi en la 1. Columna de fila de 3 columnas, SIN EL ESPACIO al final. Clic en la carpeta al lado del cuadro de texto Vnculo del Inspector de propiedades.
En el cuadro de dilogo Seleccionar Archivo, busque el archivo con nombre de opcin asociado a la opcin que est configurando (La que quiere que aparezca cuando de clic en esa opcin) y Aceptar Repita la operacin con cada opcin del men y tendr configurado el men de opciones de su pgina para hacer el link al sitio indicado.

Dreamweaver8 Portable - Ejercicio de Aplicación Básica

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Dreamweaver8 Portable - Ejercicio de Aplicación Básica

Cargado por

Copyright:

Formatos disponibles

QU ES?

Barra de herramientas de documento

Vistas Ventana de documento

Panel de archivos Inspector de propiedades Selector de etiquetas

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

Administracin de archivos muestra el men emergente Administracin de archivos.

Qu es Dreamweaver? Un editor HTML profesional para crear sitios Web.

Ventana del documento? Espacio para disear el sitio Web.

Vistas Ventana de documento

Panel de archivos Inspector de propiedades

También podría gustarte