Adobe Dreamweaver CS5.5

es la aplicación que lidera el

sector de la edición y

creación de contenidos web.

Proporciona funciones

visuales y de nivel de código

para crear diseños y sitios

web basados en estándares

para equipos de sobremesa,

Smartphone, tabletas y

otros dispositivos.

Dreamweaver / novedades del dreamweaver I / novedades del dreamweaver

II / novedades del dreamweaver III / novedades del dreamweaver IV

/novedades del dreamweaver V / su utilidad /el texto I / el texto II / HTML I

/ HTML II / sus imágenes I / sus imágenes II / fin de la presentación

Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web. Cada vez son más usados, y ahora Dreamweaver integra con los principales, permitiéndoscrear nuestras páginas con la estructura adecuada.

Dreamweaver / novedades del dreamweaver I / novedades del

dreamweaver II / novedades del dreamweaver III / novedades del

dreamweaver IV /novedades del dreamweaver V / su utilidad /el

texto I / el texto II / HTML I / HTML II / sus imágenes I / sus

imágenes II / fin de la presentación

Novedades del dreamweaver

Inspeccionar CSS. Ahora, con la opción Inspeccionar, podemos ver claramente los márgenes aplicados al elemento seleccionado, y qué propiedades le afectan, tanto si son propias, como heredadas de los elementos padre.

Dreamweaver / novedades del dreamweaver I / novedades del

dreamweaver II / novedades del dreamweaver III / novedades del

dreamweaver IV /novedades del dreamweaver V / su utilidad /el texto

I / el texto II / HTML I / HTML II / sus imágenes I / sus imágenes II /

fin de la presentación

Novedades del dreamweaver integración Adobe

Browserlab. Adobe Browser Lab es un servicio en línea de Adobe, que nos permite comparar cómo se ve una misma página web en las distintas versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows o Mac OS.

Dreamweaver / novedades del dreamweaver I / novedades del

dreamweaver II / novedades del dreamweaver III / novedades del

dreamweaver IV /novedades del dreamweaver V / su utilidad /el texto I /

el texto II / HTML I / HTML II / sus imágenes I / sus imágenes II / fin de la

presentación

Novedades del dreamweaverConfiguración

sencilla de sitios. Ahora resulta más sencillo configurar nuestro sitio local y remoto. Ya que se han simplificado las opciones esenciales, y distinguido más las opciones avanzadas y poco importantes.

Dreamweaver / novedades del dreamweaver I / novedades del

dreamweaver II / novedades del dreamweaver III / novedades del

dreamweaver IV /novedades del dreamweaver V / su utilidad /el texto I /

el texto II / HTML I / HTML II / sus imágenes I / sus imágenes II / fin de la

presentación

Novedades del dreamweaverSugerencias de

código. Ahora las sugerencias de código incluyen nuestras clases personalizadas, y los comandos y funciones propios de los distintos CMS soportados.

Dreamweaver / novedades del dreamweaver I / novedades del dreamweaver

II / novedades del dreamweaver III / novedades del dreamweaver IV

/novedades del dreamweaver V / su utilidad /el texto I / el texto II / HTML I

/ HTML II / sus imágenes I / sus imágenes II / fin de la presentación

está destinada a la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes

Dreamweaver / novedades del dreamweaver I / novedades del

dreamweaver II / novedades del dreamweaver III / novedades del

dreamweaver IV /novedades del dreamweaver V / su utilidad /el texto I /

el texto II / HTML I / HTML II / sus imágenes I / sus imágenes II / fin de la

presentación

Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento

Estilo: El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre<em></em>, que por defecto se ve en cursiva. Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto.

Dreamweaver / novedades del dreamweaver I / novedades del

dreamweaver II / novedades del dreamweaver III / novedades del

dreamweaver IV /novedades del dreamweaver V / su utilidad /el texto I /

el texto II / HTML I / HTML II / sus imágenes I / sus imágenes II / fin de la

presentación

Lista: Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado.

Sangría: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto. Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.

Dreamweaver / novedades del dreamweaver I / novedades del

dreamweaver II / novedades del dreamweaver III / novedades del

dreamweaver IV /novedades del dreamweaver V / su utilidad /el texto I

/ el texto II / HTML I / HTML II / sus imágenes I / sus imágenes II / fin de

la presentación

Etiquetas: Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web. En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML de una página para darle un título. Consistía simplemente en escribir el título deseado entre las etiquetas <title> y </title>. Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre. Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan, incluyendo cierto código dentro de la etiqueta.

Dreamweaver / novedades del dreamweaver I / novedades del

dreamweaver II / novedades del dreamweaver III / novedades del

dreamweaver IV /novedades del dreamweaver V / su utilidad /el texto I /

el texto II / HTML I / HTML II / sus imágenes I / sus imágenes II / fin de la

presentación

ambién hay elementos que no

precisan insertar etiqueta de cierre.

Por ejemplo, un May + INTRO dentro

del código HTML equivale a la

etiqueta <br>. Realmente estas

etiquetas si tienen cierre, y se pone

en la etiqueta de apertura para

seguir el estándar XHTML que obliga

a que todas las etiquetas se cierren.

Por tanto el salto de línea anterior

se escribiría <br />. Otras etiquetas

que se cierran sobre sí mismas son

las imágenes <img />, reglas

horizontales <hr /> o elementos de

formulario <input />. Dreamweaver

inserta automáticamente las

etiquetas necesarias para construir

la página con la apariencia y

contenido definidos en el editor

gráfico, pero también ofrece otras

posibilidades para trabajar

directamente sobre el código.

HTML desde dreamweaver

Dreamweaver / novedades del dreamweaver I / novedades del dreamweaver II /

novedades del dreamweaver III / novedades del dreamweaver IV /novedades del

dreamweaver V / su utilidad /el texto I / el texto II / HTML I / HTML II / sus

imágenes I / sus imágenes II / fin de la presentación

Insertar una imagenPara

insertar una imagen hay

que dirigirse al

menú Insertar, a la

opción Imagen. Después

de esto, ya es posible

seleccionar una imagen a

través de la nueva

ventana. Cuando te

acostumbres, te será más

cómodo acceder con la

combinación de

teclas Ctrl + Alt + I.

Dreamweaver / novedades del dreamweaver I / novedades del

dreamweaver II / novedades del dreamweaver III / novedades del

dreamweaver IV /novedades del dreamweaver V / su utilidad /el texto I /

el texto II / HTML I / HTML II / sus imágenes I / sus imágenes II / fin de la

presentación

en Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa alDocumento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes. Lo mismo ocurre cuando se selecciona un documento para crear un vínculo. La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento. Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes.

En el caso de insertar la imagen como relativa al Documento la ruta sería: imagenes/aulaclic.jpg Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería: /imagenes/aulaclic.jpg Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio. Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento. Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecerá así indicando que el enlace al archivo está roto. En ese caso, la imagen que aparecerá en el navegador será similar a ésta:. Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuación.

Imágenes de dreamweaver

Dreamweaver / novedades del dreamweaver I / novedades del

dreamweaver II / novedades del dreamweaver III / novedades del

dreamweaver IV /novedades del dreamweaver V / su utilidad /el texto I /

el texto II / HTML I / HTML II / sus imágenes I / sus imágenes II / fin de la

presentación