Concepto de Dreanweaver

Dreamweaver CS4 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver CS4 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.

Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe.

Las páginas web están escritas en HTML.

Novedades de Dreamweaver

En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.

 Nueva interfaz de usuario. Dreamweaver CS4 presenta una nueva interfaz que permite cambiar fácilmente de espacio de trabajo y adaptar los paneles de forma rápida y 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 para cada ocasión (clásico, programador, diseñador, etc. ) pero también tenemos la posibilidad de crear el nuestro propio de forma muy sencilla.

 Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, tal y como veríamos la página en un navegador. Si hemos incluido elementos interactivos en nuestra página, como menús desplegables, menús tipo acordeó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 las fuentes de código que afectan a la selección que tengamos activa, pueden ser CSS (hojas de estilos en cascada), funciones JavaScript externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc.

La nueva barra de Archivos relacionados muestra todos los archivos que de una forma 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 archivo a otro cómodamente y tener una visión mucho más clara de todos los archivos con los que estamos trabajando en nuestro sitio web.

 Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, queda dividido 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 crear objetos inteligentes de imagen. Ahora podemos incluir un archivo psd en las páginas web, de forma que el archivo original de Photoshop y la imagen optimizada en Dreamweaver se mantienen vinculados. Podemos redimensionar o cambiar características de los objetos inteligentes de imagen directamente desde Dreamweaver.

 Adobe InContext Editing. Mediante Adobe InContext Editing creamos regiones editables. De esta forma los usuarios previamente habilitados podrán actualizar el contenido de estas regiones de la página web directamente desde el navegador, sin necesidad de tener un editor de páginas web instalado.

 Software Subversion. Subversion es uno de los más usados sistemas de control de versiones para equipos de desarrollo. Dreamweaver CS4 es capaz de sincronizarse con el repositorio de versiones, facilitando el trabajo a los profesionales que empleen este sistema.

 Conjuntos de datos. Dreamweaver CS4 permite la creación de páginas dinámicas de forma sencilla, pudiendo utilizar tanto bases de datos como archivos XML, sin necesidad de conocer en profundidad su funcionamiento. Resulta muy sencillo crear regiones dinámicas con la tecnología Spry.

Ediitar Pag Web

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.

Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a aprenderlo rápidamente.

Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.

Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.

 Cómo tener una página en Internet

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas.

Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo.

Cuando se va a contratar un servicio de hospedaje es necesario contratar también un 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. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar 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, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada.

A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados.

Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.

 En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.

Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás que se encuentre a disposición de todo el mundo en Internet.

Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán.

Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.

Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores (los que utilizan linux) distinguen entre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imagen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.

Arrancar y Cerrar Dreamweaver

Desde el botón Inicio (Windows Vista) situado, normalmente, en la esquina inferior izquierda de la pantalla. 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  y haz clic sobre él para arrancar el programa.

Desde el icono de Dreamweaver  del Escritorio .

Puedes arrancar Dreamweaver CS4 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver. 

 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.

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 Abrir con → 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.

 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