1. Conceptos básicos de Dreamweaver CS3

Transcripción

1 1. Conceptos básicos de Dreamweaver CS3 Qué es Dreamweaver CS3? Dreamweaver CS3 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS3 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 animas a comprar la versión de pago de este estupendo 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. Si no conoces las características básicas de HTML puedes verlas aquí. Novedades de Dreamweaver CS3 En este punto comentaremos las características que aporta esta nueva versión sobre la anterior. Mejoras en Spry. El "Framework" o estructura Spry ha recibido un fuerte impulso en esta versión de Dreamweaver. Spry es un conjunto de archivos JavaScript que permiten la inclusión de elementos dinámicos en las páginas HTML. Por ejemplo se pueden incluir acordeones, barras de menus, validación de formularios, acceso a datos XML, etc.

2 También se han incluido efectos spry que se aplican a elementos ya existentes en la página HTML para hacer que se desvanezcan, reduzcan su tamaño, se resalten, etc. Mayor integración con Photoshop y Fireworks. Ahora es posible pegar directamente imágenes desde Photoshop en una página HTML de Dreamweaver. Luego con un doble clic podremos ir a editar la imagen en Photoshop. Se pueden importar imágenes con capas. Mejoras en la comprobación de la compatiblidad con diferentes navegadores. Dreamweaver CS3 puede generar informes con los problemas de visualización de elementos CSS en los navegadores más utilizados. Adobe CSS Advisor es un sitio web accesible desde Dreamweaver que contiene información útil para resolver los problemas de compatibilidad entre navegadores. Mejoras en CSS. La administración de CSS es más fácil, ahora se pueden trasladar elementos CSS entre diferentes hojas de estilo. También ha aumentado la cantidad de plantillas CSS disponibles para aplicar a nuestras páginas web. Adobe Device Central, incluido en la Adobe Creative Suite, facilita la publicación en dispositivos móviles, PDAs, etc.. Editar páginas 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 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. Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por

3 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 Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, 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. 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.

4 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. 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 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 CS3 Veamos las dos formas básicas de arrancar Dreamweaver CS3. Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio,

5 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, seguidamente Dreamweaver CS3, hacer clic sobre él, y se arrancará el programa. Desde el icono de Dreamweaver CS3 del escritorio. Puedes arrancar Dreamweaver CS3 ahora para ir probando todo lo que te explicamos. Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botón cerrar. 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. 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. Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botón abrir de la barra de herramientas estándar. Pulsar la combinación de teclas Ctrl+N. Hacer clic sobre el menú Archivo y elegir la opción Nuevo. Hacer doble clic sobre el archivo en la ventana del sitio. Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco, HTML. 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.

6 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 todos 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. Para 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. Mi primera página Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abres un documento nuevo y seleccionas la Categoría Página básica, HTML. Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.

7 Una vez introducido el texto, vas a modificar el título y el color de fondo del documento. Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. Entonces se abrirá una ventana como la que aparece más abajo. Cambia el Título por Mi primera página. En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul. Seguidamente pulsa sobre el botón Aceptar. Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en el disco duro. Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción similar a Guardar imagen

8 como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. En los navegadores más modernos al colocar el cursor sobre una imagen aparecen estos iconos en una esquina de la imagen, si haces clic en el icono del disquete aparecerá el mismo menú Guardar imagen como... a que hacíamos referencia anteriormente. Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que estamos creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos. Ahora tienes que insertar la imagen debajo de la segunda línea de texto. En primer lugar debes situar el cursor al final de la segunda línea y pulsar un intro (Enter) para ir a una nueva línea. Después debes dirigirte al menú Insertar, a la opción Imagen. En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, y después seleccionarla. Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto: Si no te aparece, puedes mostrarlo a través del menú Ventana, con la opción Propiedades.

9 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 pulsar sobre el botón que aparece junto al nombre. Selecciona la primera línea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen. Después de esto, la apariencia de la primera línea habrá cambiado. Selecciona la imagen y las dos últimas líneas de texto. Pulsa sobre el botón para centrarlos. Una vez hayas centrado la imagen y las otras dos líneas siguientes, selecciona la segunda línea de texto, que aún no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el botón. y pulsa tres veces sobre el botón Selecciona de nuevo la última línea, y en Vínculo introduce para crear un enlace a esa otra página: Después de todos estos pasos, puedes ver cómo ha quedado el documento pulsando la tecla F12.

10 Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar. Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensión ha de ser htm o html. Por ejemplo, puedes llamarlo prueba1.htm. Ahora podrás ver cómo debería haber quedado la página después de haber seguido todos los pasos anteriores. Compara esta página con la tuya, para ver si lo has hecho todo bien. Referencia Bibliográfica