Translate

miércoles, 16 de mayo de 2012

Aspectos básicos de Dreamweaver


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.



¿Que hacer con dreamweaver?


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 de las funciones de arrastrar y soltar que le ayudan a crear páginas web, Dreamweaver le ofrece un entorno de codificación con todas las funciones, que incluye herramientas para la edición de código (tales como coloreado de código, terminación automática de etiquetas, barra de herramientas para codificación y contracción de código) y material de referencia para lenguajes sobre hojas de estilos en cascada (CSS), JavaScript y ColdFusion Markup Language (CFML) entre otros. La tecnología Roundtrip HTML de Macromedia importa los documentos con código manual HTML sin modificar el formato del código. Posteriormente, si lo desea, puede formatear el código con el estilo que prefiera.
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.


Aspectos básicos de dreamweaver

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.



En Macintosh, Dreamweaver puede mostrar varios documentos en una sola ventana con fichas que identifican a cada uno de ellos. Dreamweaver también puede aparecer como parte de un espacio de trabajo flotante en el que cada documento aparece en su propia ventana individual. Los grupos de paneles aparecen apilados en principio, pero pueden separarse en sus propias ventanas. Las ventanas se ajustan automáticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o cambiar su tamaño.




Ventana de documento

La ventana de documento muestra el documento actual. Puede elegir entre una de las vistas siguientes:
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.
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.



Es posible ver el mismo documento en las dos vistas, Código y Diseño, en una sola ventana de documento.
Cuando la ventana de documento tiene una barra de título, ésta muestra el título de la página y, entre paréntesis, el nombre y la ruta del archivo. Si se han realizado cambios que aún no se han guardado, después del nombre del archivo Dreamweaver incluye un asterisco.
Cuando se maximiza la ventana de documento en el diseño integrado de espacio de trabajo (sólo Windows), no aparece la barra de título; en este caso, el título de la página y el nombre y la ruta del archivo aparecen en la barra de título de la ventana principal del espacio de trabajo.
Además, cuando una ventana de documento está maximizada, aparecen fichas en la parte superior de la misma con los nombres de archivo de todos los documentos abiertos. Para cambiar a un documento, haga clic en su ficha.



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







En la barra de herramientas de Documento, aparecen las siguientes opciones:
Mostrar vista de código: sólo muestra la vista Código en la ventana de documento.


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.


Mostrar vista de diseño: sólo muestra la vista Diseño en la ventana de documento.


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.


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.


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.


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.


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


Barra de estado

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


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. Para definir los atributos class o id para una etiqueta en el selector de etiquetas, haga clic con el botón de derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la etiqueta y elija una clase o un ID del menú contextual. 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.


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.







Barra de herramientas de Codificación

La barra de herramientas de Codificación contiene botones que le permiten realizar numerosas operaciones de codificación estándar, como ampliar y contraer las selecciones de código, resaltar código no válido, insertar o eliminar comentarios, aplicar sangría al código e insertar fragmentos de código utilizados recientemente. La barra de herramientas de Codificación sólo está visible en la vista Código y aparece verticalmente en el lado izquierdo de la ventana de documento.


No puede desacoplar ni mover la barra de herramientas de Codificación, pero sí puede ocultarla.



El Inspector de propiedades

El inspector de propiedades permite examinar y editar las propiedades más comunes del elemento de página seleccionado actualmente, como texto o un objeto insertado. El contenido del inspector de propiedades es distinto en función del elemento seleccionado. Por ejemplo, si selecciona una imagen en la página, el inspector de propiedades cambiará para mostrar las propiedades de la imagen (como la ruta del archivo de imagen, el ancho y alto de la imagen, el borde que la rodea, etc.).


El inspector de propiedades se encuentra en la parte inferior del espacio de trabajo de forma predeterminada, pero puede colocarlo en la parte superior si lo desea. También puede convertirlo en un panel flotante en el espacio de trabajo. 





El panel Archivos


El panel Archivos se utiliza para ver y administrar los archivos del sitio de Dreamweaver. 

Al visualizar sitios, archivos o carpetas en el panel Archivos, puede cambiar el tamaño del área de visualización y expandir o contraer el panel Archivos. Cuando el panel Archivos se contrae, muestra el contenido del sitio local, el sitio remoto o el servidor de prueba como una lista de archivos. Cuando se expande, muestra el sitio local, además del sitio remoto o el servidor de prueba. El panel Archivos también puede mostrar un mapa visual del sitio local.
Para sitios de Dreamweaver, también puede personalizar el panel Archivos cambiando la vista (sitio local o sitio remoto) que aparece de forma predeterminada en el panel contraído.



El panel Estilos CSS

El panel Estilos CSS le permite supervisar las reglas y propiedades CSS que afectan a un elemento de página actualmente seleccionado el modo Actual o las reglas y propiedades que afectan a todo un documento, con el modo Todo. Un botón situado en la parte superior del panel Estilos CSS le permite cambiar entre estos dos modos. El panel Estilos CSS también le permite modificar propiedades CSS tanto en modo Todo como en modo Actual.



Puede cambiar el tamaño de cualquiera de los paneles arrastrando los bordes que separan un panel de otro.
En modo Actual, el panel Estilos CSS muestra tres secciones: un resumen del panel Selección que muestra las propiedades de CSS de la selección actual del documento, un panel Reglas que muestra la ubicación de las propiedades seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en función de la selección) y un panel Propiedades que le permite editar las propiedades CSS al definir reglas para la selección.
En modo Todo, el panel Estilos CSS muestra tres secciones: un panel Todas las reglas arriba y un panel Propiedades abajo. El panel Todas las reglas muestra una lista de reglas definidas en el documento actual, así como las reglas definidas en las hojas de estilo adjuntas al documento actual. El panel Propiedades le permite editar propiedades CSS para cualquier regla seleccionada en el panel Todas las reglas.
Todos los cambios que realice en el panel Propiedades se aplican de forma inmediata; de este modo, puede previsualizar el trabajo a medida que lo vaya llevando a cabo.






Tutorial de dreamweaver 8





martes, 15 de mayo de 2012

Realizar tareas básicas en Dreamweaver 8


Archivos de Dreamweaver

En Dreamweaver, puede trabajar con distintos tipos de archivo. El principal tipo de archivo de trabajo es el archivo HTML. Los archivos HTML  (archivos en Lenguaje de formato de hipertexto) incluyen un lenguaje basado en etiquetas que es el responsable de mostrar la página Web a través del navegador. Puede guardar archivos HTML con las extensiones .html o .htm. Dreamweaver guarda los archivos utilizando por defecto la extension HTML.

En Dreamweaver también se trabaja con los siguientes tipos de archivo:

CSS: o archivos de hojas de estilos en cascada, que tienen la extensión .css. Se utilizan para dar formato al contenido HTML y para definir la situación de diversos elementos de la página.

GIF: o archivos de Formato de intercambio de gráficos, que tienen la extensión .gif. El formato GIF es un formato gráfico popular en la Web para cómics, logotipos, gráficos con zonas transparentes y animaciones. Los GIFs tienen un máximo de 256.

JPEG: o archivos de Grupo conjunto de expertos fotográficos (bautizado con el nombre de la organización que creó el formato), que tienen la extensión .jpg y suelen ser fotografías o imágenes ricas en color. El formato JPEG es más adecuado para fotografías digitales o escaneadas, imágenes con texturas, imágenes con gradaciones de color y cualquier imagen que necesite más de 256 colores.

XML: o archivos en lenguaje de formato ampliable, que tienen la extensión .xml. Estos archivos contienen datos en su forma original que se pueden formatear utilizando XSL (Lenguaje de hojas de estilo ampliable).

XML, o archivos de lenguaje de hojas de estilo ampliable, que tienen la extensión .xslt. Se utilizan para dar estilo a los datos en formato XML que se quieran visualizar en una página Web.

CFML: o archivos en lenguaje de formato ColdFusion, que tienen la extensión .cfm. Se utilizan para procesar páginas dinámicas.

ASPX: o archivos ASP.NET, que tienen la extensión .aspx. Se utilizan para procesar páginas dinámicas.

PHP: o PHP: archivos de procesador de hipertexto, que tienen la extensión .php. Se utilizan para procesar páginas dinámicas.



Archivos CSS


Archivos GIF


Archivos JPEG

Archivos XML con extensión .xml.

Archivos CFML


Crear nuevos archivos con Dreamweaver

También puede crear nuevos documentos con Dreamweaver basándose en un archivo de diseño de Dreamweaver o en una plantilla ya existente.

Para crear un documento nuevo en blanco:

  1. Seleccione Archivo> Nuevo. Aparecerá el cuadro de diálogo Nuevo documento. La ficha General ya aparece seleccionada.
  2. En la lista Categoría, seleccione Página básica, Página dinámica, Página de plantilla, Otro o Conjuntos de marcos. A continuación, en la lista de la derecha, seleccione el tipo de documento que desea crear. Por ejemplo, seleccione Página básica para crear un documento HTML o elija Página dinámica para crear un documento ColdFusion o ASP, etc.
  3. Haga clic en el botón Crear. El documento nuevo se abrirá en la ventana del documento.
  4. Guarde el documento.

Guardar archivos con Dreamweaver

Al crear un documento nuevo, es necesario guardarlo.

Para guardar un documento nuevo:

  1. Seleccione Archivo > Guardar. 
  2. En el cuadro de diálogo que aparece a continuación, vaya hasta la carpeta en la que desea guardar el archivo.
  3. En el cuadro de texto Nombre de archivo, introduzca un nombre para el archivo. Evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas. Asimismo, no comience los nombres de los archivos con números. En concreto, no utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo que provoca que se rompan los vínculos existentes con los archivos.
  4. Haga clic en Guardar. 

Apertura de archivos en Dreamweaver

En Dreamweaver, se puede abrir y editar documentos con gran facilidad.

Para abrir un archivo:

  1. Seleccione Archivo > Abrir.
  2. En el cuadro de diálogo Abrir, seleccione el archivo y haga clic en Abrir.  



Diseño de paginas


Utilice las herramientas de diseño visual de Macromedia Dreamweaver 8 para crear sofisticados diseños de página.



Diseño de páginas con CSS

En Macromedia Dreamweaver 8, es posible utilizar estilos CSS para diseñar la página. Puede insertar manualmente etiquetas div y aplicarles estilos de posición CSS, o puede utilizar capas de Dreamweaver para crear su diseño. Una capa en Dreamweaver es un elemento de página HTML (en concreto, una etiqueta div o cualquier otra etiqueta) que tiene una posición absoluta asignada.
Independientemente de si usa CSS, tablas o marcos para diseñar las páginas, Dreamweaver tiene reglas y cuadrículas para ayudarle a crear sus diseños. Dreamweaver también tiene una opción de imagen de rastreo, que puede utilizar para volver a crear un diseño de página creado en una aplicación gráfica.

lunes, 14 de mayo de 2012

personalización del espacio de trabajo de dreamweaver 8


Existen algunas técnicas básicas que permiten personalizar Dreamweaver para que se ajuste a sus necesidades sin necesidad de conocer código complejo o editar archivos de texto.


Selección del diseño del espacio de trabajo (sólo en Windows)

En Windows, puede escoger el diseño del espacio de trabajo del codificador o el del diseñador. La primera vez que se inicia Dreamweaver, un cuadro de diálogo le permite elegir un diseño para el espacio de trabajo. Puede pasar de un espacio de trabajo a otro en cualquier momento.

Para elegir un diseño del espacio de trabajo la primera vez que se inicia Dreamweaver:

  1. Seleccione uno de los siguientes diseños: Diseñador es un espacio de trabajo integrado que utiliza MDI (Interfaz para Múltiples Documentos, Multiple Document Interface) en el que todas las ventanas de documentos y todos los paneles están integrados en una ventana de aplicación más grande, con los grupos de paneles apilados a la derecha.
    Codificador es el mismo espacio de trabajo integrado, pero con los grupos de paneles apilados a la izquierda; es un diseño similar al que utiliza Macromedia HomeSite y Macromedia ColdFusion Studio, en el que las ventanas de documentos muestran de forma predeterminada la vista de código.
  2. Haga clic en Aceptar.

Para cambiar a un espacio de trabajo distinto del que ha elegido:

  • Seleccione Ventana > Diseño del espacio de trabajo y seleccione el diseño del espacio de trabajo que prefiera.
Además de seleccionar Codificador y Diseñador, puede seleccionar Pantalla doble. Si dispone de un monitor secundario, la opción Pantalla doble coloca todos los paneles en el monitor y conserva la ventana de documento en el monitor principal.


Visualización de documentos en fichas (Macintosh)

En Macintosh, Dreamweaver puede mostrar varios documentos en una sola ventana de documento mediante las fichas que identifican a cada uno de ellos. Dreamweaver también puede mostrarlos como parte de un espacio de trabajo flotante en el que cada documento aparece en su propia ventana.

Para abrir un documento que se encuentra en una ficha en una ventana independiente:

  • Haga clic en la ficha con el botón derecho del ratón o haga clic mientras presiona la tecla Control y seleccione Mover a nueva ventana en el menú contextual.

Para combinar documentos independientes en ventanas con fichas:

  • Seleccione Ventana > Combinar como fichas.

Para cambiar la configuración predeterminada de documento en ficha:

  1. Seleccione Dreamweaver > Preferencias y, posteriormente, seleccione la categoría General.
  2. Seleccione o anule la selección de Abrir documentos en fichas y haga clic en Aceptar.

Cómo ocultar y mostrar la página de inicio

La página de inicio de Dreamweaver aparece al iniciar Dreamweaver y siempre que no se tiene abierto ningún documento. Puede optar por ocultar la página de inicio y volver a mostrarla posteriormente. Cuando la página de inicio está oculta y no se tienen documentos abiertos, la ventana de documento está en blanco.

Para ocultar la página de inicio:

  • Seleccione en la página de inicio la casilla de verificación No volver a mostrar. La página de inicio no aparecerá al iniciar Dreamweaver ni después de abrir y cerrar un documento.

Para mostrar la página de inicio:

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh). El cuadro de diálogo Preferencias aparece y muestra la categoría de preferencias General.
  2. Seleccione la casilla de verificación Mostrar página de inicio. La página de inicio aparece al iniciar Dreamweaver o después de abrir y cerrar un documento.


    Macromedia Dreamweaver ofrece diversas formas de crear un documento.




    Formato de trabajo de Dreamweaver CS3 el cual se baso en versiones anteriores del programa. Combina el uso de paneles para conseguir que el proceso sea mas fluido.
    Aspecto de la ventana de Dreamweaver MX 2004.



sábado, 12 de mayo de 2012

Algunos tutoriales de Dreamweaver

Tutoriales

Poner videos en Dreamweaver 8 y html code views.




Como crear botones en Dreamweaver 8




How to center a webpage in Dreamweaver CS5



Dreamweaver tutorial: how to insert a flash or shockwave movie into a webpage with dreamweaver


Dreamweaver tutorial: how to create a clickable image map with dreamweaver



Dreamweaver tutorial: how to create a mouse-over effect with dreamweaver

How to add text over an image in dreamweaver



Como hacer un menú desplegable en dremaweaver 8



Como insertar imágenes a dreamweaver



Dreamweaver CS3: como crear botones animados con Photoshop CS5


Galería de fotos con capas -Dreamweaver 8-



Tutorial: como hacer pagina web con dreamweaver y PHP cap. 8



Como insertar imágenes de fondo a Dreamweaver