0
Flujo de trabajo de desarrollo Web       Conceptos básicos de Dreamweaver CS4       Características de Dreamweaver CS4    ...
* Introducción* Flujo de trabajo de desarrollo Web* Planificación* Conceptos básicos de Dreamweaver CS4* Características d...
Flujo de trabajo de desarrollo WebEl flujo de trabajo de desarrollo Web comienza con el proceso de definiciónde una estrateg...
PLANIFICACIÓN                           Planificar sitiosPlanificar y organizar cuidadosamente el sitio desde el primer mom...
Unidad 1.              Conceptos básicos de Dreamweaver CS4Dreamweaver CS4, es un software fácil de usar que permite crear...
CaracterísticasEn este punto comentaremos las características que aporta esta nueva versión sobre laanterior. Nueva interf...
Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, taly como veríamos la página en un navegador. Si ...
La nueva barra de Archivos relacionados muestra todos los archivos que de unaforma u otra contribuyen al diseño final de n...
Adobe InContext Editing. Mediante Adobe InContext Editing creamos regioneseditables. De esta forma los usuarios previament...
Editar páginas webCualquier editor de texto permite crear páginas web. Para ello sólo es necesario crearlos documentos con...
Cómo tener una página en InternetPara poder poner una página web en Internet, es necesario contratar a alguna empresacon s...
 Arrancar y cerrar Dreamweaver CS4 Veamos las dos formas básicas de arrancar Dreamweaver CS4. Colocar el cursor y hacer cl...
Abrir y guardar documentos Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:Hacer clic en...
Abrir y guardar documentos Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:Hacer clic en...
Guardar un Documento Para guardar un  documento,  puedes  utilizar  cualquiera  de  las  siguientes operaciones.Hacer clic...
Mi primera páginaPara  que  te  vayas  haciendo  una  idea  de  cómo  funciona  Dreamweaver,  vamos a crear una página web...
Una vez introducido el texto, vamos a modificar el título y el color de fondo deldocumento.Para ello podemos hacer clic so...
Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en lacarpeta donde estamos creando nuestras p...
En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la quela habías guardado, seleccionarla y pulsa...
Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al textomediante hojas de estilos en cascada. L...
Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambiael panel de Propiedades a las propieda...
Video tutorial de Dreamwever Cs4
Dreamweaver
Dreamweaver
Upcoming SlideShare
Loading in...5
×

Dreamweaver

303

Published on

diapositiva de dreamweaver

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
303
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Dreamweaver"

  1. 1. Flujo de trabajo de desarrollo Web Conceptos básicos de Dreamweaver CS4 Características de Dreamweaver CS4 Editar páginas we Cómo tener una página en Internet Arrancar y cerrar Dreamweaver CS4 Abrir y guardar documentos Guardar un Documento Mi primera páginaLcda. Mónica González R.
  2. 2. * Introducción* Flujo de trabajo de desarrollo Web* Planificación* Conceptos básicos de Dreamweaver CS4* Características de Dreamweaver CS4* Editar páginas web* Cómo tener una página en Internet* Arrancar y cerrar Dreamweaver CS4* Abrir y guardar documentos* Guardar un Documento* Mi primera página* videos
  3. 3. Flujo de trabajo de desarrollo WebEl flujo de trabajo de desarrollo Web comienza con el proceso de definiciónde una estrategia y unos objetivos del sitio, continúa con el diseño (duranteel cual se define el aspecto y el funcionamiento de un sitio propuesto) yavanza hasta la fase de producción y desarrollo (durante la cual se crea elsitio y se codifican las páginas); la funcionalidad del sitio se compruebapara ver si se cumplen los objetivos establecidos y, seguidamente, sepublica el sitio. Muchos ingenieros de desarrollo también programanoperaciones de mantenimiento periódico para asegurarse de que el sitiocontinúa estando actualizado y operativo.Para facilitar la localización de información necesaria para el desarrollo desitios Web, este curso de Dreamweaver se divide en amplias secciones quesiguen este modelo estándar de aproximación al desarrollo Web:planificación del sitio, diseño, desarrollo, comprobación y publicación y mantenimiento.
  4. 4. PLANIFICACIÓN Planificar sitiosPlanificar y organizar cuidadosamente el sitio desde el primer momento puedeayudar a ahorrar tiempo más adelante. La organización del sitio implica muchomás que determinar el lugar en el que irá cada archivo: la planificación del sitioimplica con frecuencia investigar los requisitos que debe cumplir el sitio, el perfilde la audiencia y los objetivos del sitio. Además, debe tener en cuenta requisitostécnicos tales como el acceso de los usuarios, los navegadores, los plug-ins o lasrestricciones a la descarga de archivos.
  5. 5. Unidad 1. Conceptos básicos de Dreamweaver CS4Dreamweaver CS4, es un software fácil de usar que permite crear páginasWeb profesionales.Las funciones de edición visual de Dreamweaver CS4 permiten agregar rápidamentediseño y funcionalidad a las páginas, sin la necesidad de programar manualmente elcódigo HTML.Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientosJavaScript, etc.., de una forma muy sencilla y visual.Además incluye un software de cliente FTP completo, permitiendo entre otras cosastrabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidorsin salir del programa.Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde lapágina de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempoa entenderlo y decidir si quieres adquirir la versión completa de este fantásticoprograma.Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcasregistradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe.Las páginas web están escritas en HTML. Si no conoces las características básicas deHTML puedes verlas aquí.
  6. 6. CaracterísticasEn este punto comentaremos las características que aporta esta nueva versión sobre laanterior. Nueva interfaz de usuario. Dreamweaver CS4 presenta una nueva interfaz quepermite cambiar fácilmente de espacio de trabajo y adaptar los paneles de forma rápiday cómoda. Esta nueva interfaz es muy parecida a los demás programas de Adobe,como Photoshop, Illustrator, etc. Existen distintos espacios de trabajo adecuados paracada ocasión (clásico, programador, diseñador, etc. ) pero también tenemos laposibilidad de crear el nuestro propio de forma muy sencilla.
  7. 7. Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, taly como veríamos la página en un navegador. Si hemos incluido elementosinteractivos en nuestra página, como menús desplegables, menús tipoacordeón, widgets, etc, podremos interactuar con ellos en la vista en vivo,de la misma forma que lo haríamos en un navegador. Navegador de código. La función de Navegador de código muestra lasfuentes de código que afectan a la selección que tengamos activa, puedenser CSS (hojas de estilos en cascada), funciones JavaScript externas,plantillas de Dreamweaver, archivos de origen de iFrame, etc.
  8. 8. La nueva barra de Archivos relacionados muestra todos los archivos que de unaforma u otra contribuyen al diseño final de nuestra página, como hojas de estilo css,archivos javascript, etc. Mediante esta nueva utilidad podemos pasar de un archivoa otro cómodamente y tener una visión mucho más clara de todos los archivos conlos que estamos trabajando en nuestro sitio web. Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, quedadividido en propiedades HTML (el que conocíamos de otras versiones) y CSS. Ésteúltimo nos permite crear y editar nuestros estilos de forma cómoda y sencilla. Objetos inteligentes de imagen. Dreamweaver CS4 incluye la posibilidad de crearobjetos inteligentes de imagen. Ahora podemos incluir un archivo psd en laspáginas web, de forma que el archivo original de Photoshop y la imagen optimizadaen Dreamweaver se mantienen vinculados. Podemos redimensionar o cambiarcaracterísticas de los objetos inteligentes de imagen directamente desdeDreamweaver.
  9. 9. Adobe InContext Editing. Mediante Adobe InContext Editing creamos regioneseditables. De esta forma los usuarios previamente habilitados podrán actualizar elcontenido de estas regiones de la página web directamente desde el navegador, sinnecesidad de tener un editor de páginas web instalado. Software Subversion. Subversion es uno de los más usados sistemas de control deversiones para equipos de desarrollo. Dreamweaver CS4 es capaz de sincronizarse con elrepositorio de versiones, facilitando el trabajo a los profesionales que empleen estesistema. Conjuntos de datos. Dreamweaver CS4 permite la creación de páginas dinámicas deforma sencilla, pudiendo utilizar tanto bases de datos como archivos XML, sin necesidadde conocer en profundidad su funcionamiento. Resulta muy sencillo crear regionesdinámicas con la tecnología Spry.
  10. 10. Editar páginas webCualquier editor de texto permite crear páginas web. Para ello sólo es necesario crearlos documentos con la extensiónHTML o HTM, e incluir como contenido deldocumento el código HTML deseado. Puede utilizarse incluso el Bloc denotas incluido en Windows para hacerlo.Pero crear páginas web mediante el código HTML es más costoso que hacerloutilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho másinsertar cada uno de los elementos de la página, al mismo tiempo que es máscomplicado crear una apariencia profesional para la página, sobre todo si no estamosdemasiado familiarizados con el HTML. Aunque también es cierto que escribir elcódigo nos da más control sobre él, y sobre todo al principio, nos ayudará aaprenderlo rápidamente.Hoy en día existe una amplia gama de editores de páginas web.Además de Dreamweaver, existen otra serie de buenos editores de páginas web,como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer oQuanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.
  11. 11. Cómo tener una página en InternetPara poder poner una página web en Internet, es necesario contratar a alguna empresacon servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas deldía. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertaslimitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedidopor el de la suya.Cuando se va a contratar un servicio de hospedaje es necesario contratar tambiénun dominio, tarea de la que se suele encargar la propia empresa de hospedaje.Registrar un dominio consiste en registrar un nombre para nuestra página.. Es posibleregistrar un mismo nombre con distintas terminaciones, como por ejemplo, .net,.org, .es o .com.En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, yaque nuestra página no será más que un archivo dentro de la de la empresa contratada.Por tanto, una vez hayas terminado de diseñarla en modo local sólo deberás subirtodos los archivos tal y como aparecen en tu disco duro, respetando el nombrede los archivos y la organización de las carpetas. Si no lo haces de este modo, tusitio experimentará fallos y enlaces que no funcionarán.
  12. 12.  Arrancar y cerrar Dreamweaver CS4 Veamos las dos formas básicas de arrancar Dreamweaver CS4. Colocar el cursor y hacer clic sobre el botón Inicio,               se despliega un menú. Al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Adobe Dreamweaver CS4            y haz clic sobre él para arrancar el programa.Desde el icono de Dreamweaver CS4 del  Escritorio .  Puedes  arrancar  Dreamweaver CS4.   Para cerrar Dreamweaver  CS4,  podemos  utilizar  cualquiera  de  las  siguientes operaciones:Hacer  clic  en  el  botón  cerrar ,  en  la  esquina  superior  derecha,  como  en  cualquier ventana de Windows.Pulsar la combinación de teclas Alt + F4. Hacer clic sobre el menú Archivo y elegir la opción Salir. Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos.
  13. 13. Abrir y guardar documentos Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:Hacer clic en el botón abrir  de la barra de herramientas estándar (si está visible). Pulsar la combinación de teclas Ctrl + O.Hacer clic sobre el menú Archivo y elegir la opción Abrir.Hacer doble clic sobre el archivo en la ventana del sitio.Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrircon → Adobe Dreamweaver CS4.  Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:Hacer clic en el botón nuevo  de la barra de herramientas estándar (si está visible). Pulsar la combinación de teclas Ctrl + N.Hacer clic sobre el menú Archivo y elegir la opción Nuevo.Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.
  14. 14. Abrir y guardar documentos Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:Hacer clic en el botón abrir  de la barra de herramientas estándar (si está visible). Pulsar la combinación de teclas Ctrl + O.Hacer clic sobre el menú Archivo y elegir la opción Abrir.Hacer doble clic sobre el archivo en la ventana del sitio.Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrircon → Adobe Dreamweaver CS4.  Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:Hacer clic en el botón nuevo  de la barra de herramientas estándar (si está visible). Pulsar la combinación de teclas Ctrl + N.Hacer clic sobre el menú Archivo y elegir la opción Nuevo.Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.
  15. 15. Guardar un Documento Para guardar un  documento,  puedes  utilizar  cualquiera  de  las  siguientes operaciones.Hacer clic en el botón Guardar  de la barra de herramientas estándar. Pulsar la combinación de teclas Ctrl + S.Hacer clic sobre el menú Archivo y elegir la opción Guardar.Dreamweaver  incluye  la  posibilidad  de,  en  el  caso  de  estar  trabajando simultáneamente  con  varios  documentos,  poder  guardar  todos  de  golpe,  sin  la necesidad de hacerlo uno por uno.  Para guardar todo puedes realizar cualquiera de las siguientes operaciones.Hacer clic en el botón Guardar todo  de la barra de herramientas estándar. Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.Al  tener  varios  documentos  abiertos  es  fácil  olvidarse  de  todas  las  modificaciones hechas  en  cada  uno  de  ellos.  Debes  tener  mucho  cuidado  al  utilizar  la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en  todos  los  documentos  modificados.  Por  ello  es  conveniente  que  al  principio  no utilices esta opción, al menos hasta que te hayas habituado a manejar el programa. De todas  formas,  observa  que  cuando  hay  cambios  sin  guardar  aparece  un  *  tras  el nombre del documento .
  16. 16. Mi primera páginaPara  que  te  vayas  haciendo  una  idea  de  cómo  funciona  Dreamweaver,  vamos a crear una página web sencilla,  con  varios  estilos  de  texto,  una  imagen  y  un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas  web.  Si  nunca  has  hecho  una  página  web,  este  es  el  momento  para descubrir lo fácil que es. Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior  como  puede  hacerse.  Abre  un  documento  nuevo  y  selecciona la Categoría Página básica, HTML, en la columna Diseño dejamos la opción por defecto: <ninguno>.Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:
  17. 17. Una vez introducido el texto, vamos a modificar el título y el color de fondo deldocumento.Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedadesde la página.Entonces se abrirá una ventana como la que aparece a continuación:En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasaráa ser de color azul.Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primerapágina.Para aplicar los cambios, pulsa sobre el botón Aceptar.Pág. 1.4
  18. 18. Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en lacarpeta donde estamos creando nuestras páginas, habitualmente en una subcarpetadedicada a las imágenes.Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacerclic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abreuna ventana con una opción similar a Guardar imagen como... (dependiendo delnavegador que utilices) que permite grabar dicha imagen en un fichero de nuestro discoduro. Ten en cuenta que si piensas publicar la página en Internet, hay que respetar losderechos de autor de la imagen.Copia la imagen que aparece a continuación, para luego poder insertarla en la página webque estamos creando. Guárdala en la carpeta donde vas a guardar la página que acabas decrear.Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer lugar,situamos el cursor al final de la segunda línea y creamos un salto de línea (tecla Enter).Después nos dirigimos al menú Insertar, opción Imagen.
  19. 19. En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la quela habías guardado, seleccionarla y pulsar Aceptar.Ahora vas a pasar a cambiar el formato del texto.Si no te aparece, puedes mostrarlo a través del menú Ventana,opción Propiedades.Si lo que te ocurre es que únicamente te aparece el título del panel, es porque estácontraído. Para que te aparezca desplegado debes hacer doble clic en Propiedades.Selecciona la primera línea de texto. En el inspector de propiedadespulsa HTML y aplica el formato Encabezado 1 (h1) seleccionando elvalor Encabezado1 del cuadro Formato.Para cambiar el color del texto cambiamos el panel a las opciones de estilo,pulsando el icono CSS a la izquierda.Mediante el inspector de propiedades en Dreamweaver CS4 accedemos tanto a laspropiedades de CSS como a las propiedades de HTML.Podemos decir que en una página web, HTML se encarga de estructurar elcontenido, la información, mientras que CSS se encarga de mostrar ese contenidocon el formato adecuado.
  20. 20. Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al textomediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor controlsobre el diseño de la página Web y reducen el tamaño del archivo.Selecciona la primera línea. En Regla de destino selecciona Estilo en línea, paraaplicar el formato solo al texto seleccionado. También aplica el estilode Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y comomuestra la imagen siguiente:Observa que hemos centrado el texto pulsando en el botón .Selecciona la segunda línea de texto, y seleccionando como antes < estilo en línea >,marca los botones para ponerlo en negrita y cursiva respectivamente.Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrares el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado,encima de las propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p.Ahora, centra el párrafo como hemos visto hasta ahora, pulsando en .
  21. 21. Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambiael panel de Propiedades a las propiedades de HTML.En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en laimagen:Por último guarda el documento. Ya sabes que puedes hacerlo a través delmenú Archivo, desde la opción Guardar.Puedes llamar al documento como lo desees, pero la extensión ha de ser htm o html.Por ejemplo, lo hemos llamadomiprimerapagina.htm, y la hemos guardado en lamisma carpeta que la imagen descargada.Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.
  22. 22. Video tutorial de Dreamwever Cs4
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×