martes, 15 de mayo de 2012

Aqui les dejo un pequeño video de como iniciar una pagina web basica con Dreamwever 8



Barra de herramientas Representación de estilos

       La barra de herramientas Representación de estilos (oculta de manera predeterminada) contiene botones que le permiten ver cómo aparecería el diseño en distintos tipos de soportes si utilizase hojas de estilos dependientes de los medios. También contiene un botón con el que es posible activar o desactivar los estilos CSS. Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de herramientas > Representación de estilos.

       Esta barra de herramientas sólo funciona si los documentos utilizan hojas de estilos dependientes de los medios. Por ejemplo, su hoja de estilos puede especificar una regla para imprimir y otra regla distinta para los dispositivos de mano.       De manera predeterminada, Dreamweaver muestra el diseño para una pantalla (que muestra cómo se representa una página en la pantalla del equipo). Puede ver las representaciones para los diferentes soportes haciendo clic en los correspondientes botones de la barra de herramientas Representación de estilos.

  • Representar tipo de medio Screen muestra cómo aparece la página en la pantalla de un equipo.
  • Representar tipo de medio Print muestra cómo aparece la página en una hoja de papel impresa.
  • Representar tipo de medio Handheld muestra cómo aparece la página en un dispositivo de mano, como un teléfono móvil o un dispositivo BlackBerry.
  • Representar tipo de medio Projection muestra cómo aparece la página en la pantalla de un dispositivo de proyección.
  • Representar tipo de medio TTY muestra cómo aparece la página en la pantalla de una máquina de teletipos.
  • Representar tipo de medio TV muestra cómo aparece la página en la pantalla de una pantalla de televisión.
  • Alternar visualización de estilos CSS permite activar o desactivar los estilos CSS. Este botón funciona de manera independiente a los demás botones de medios.


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

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.

Asi se vera cuando haga clic en codigo
Asi se vera cuando haga clic en diseño





Conocer el espacio de trabajo de
Dreamweaver 8
          El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos.       
          Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rápidamente.
          Este blog le proporciona una visión general del espacio de trabajo de Dreamweaver 8.

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

Introduccion a Macromedia Dreamweaver 8

           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.
Esta blog es una introducción para utilizar Macromedia Dreamweaver 8 dirigida a los usuarios que no están familiarizados con algún aspecto fundamental de esta aplicación.

Lo que puede hacer con Dreamweaver 8

           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.