Dreamweaver kattttttttt
Transcript of Dreamweaver kattttttttt
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