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

3.  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éndos
crear 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

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

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

6. Novedades del dreamweaver
 Configuració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

7. Novedades del dreamweaver
 Sugerencias 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

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

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

10.  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></blockqu
ote>, 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

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

12. HTML desde dreamweaver
 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.
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

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

14. Imágenes de dreamweaver
 en Relativa a es posible especificar si  En el caso de insertar la imagen como
la imagen será relativa al documento relativa al Documento la ruta sería:
o a la carpeta raíz del sitio. Es imagenes/aulaclic.jpg Mientras que
preferible que sea relativa en el caso de ser insertada como
alDocumento, ya que si cambiamos la relativa a la Raíz del sitio la ruta
página de carpeta, lo habitual es sería: /imagenes/aulaclic.jpg Ocurre
cambiar también sus imágenes. Lo lo mismo que cuando se crea un
mismo ocurre cuando se selecciona un hipervínculo a un documento relativo
documento para crear un vínculo. La al documento o a la carpeta raíz del
ruta en la que se encuentra la imagen sitio. Otra forma de insertar una
aparecerá representada de una u otra imagen, es arrastrarla directamente
forma en el campo URL de la ventana desde el panel Archivos sobre el
y en campo Origen del inspector de documento. Si insertamos una imagen
propiedades, dependiendo de si ha y luego la borramos, la movemos, o
sido insertada como relativa a la escribimos mal su nombre, en
carpeta raíz del sitio o relativa al Dreamweaver aparecerá así indicando
documento. Por ejemplo, imagina que que el enlace al archivo está roto. En
dentro de la carpeta raíz del sitio (la ese caso, la imagen que aparecerá en
carpeta del sitio) se encuentran la el navegador será similar a ésta:.
carpeta imagenes y el documento en Aparece un recuadro blanco con
el que deseamos insertar la imagen. una X roja, junto con el nombre de la
Dicha imagen, llamada aulaclic.jpg, imagen o el contenido del
se encuentra dentro de la campo Alt del inspector de
carpeta imagenes. propiedades, que explicaremos a
continuación.
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