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.

Novedades de Dreamweaver CS3.
En este punto comentaremos las características que aporta esta nueva versión sobre a l 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 pue den incluir acordeones, barras de menus, validación de formularios, acceso a datos XML, etc. 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 Dreamwe aver 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 c antidad 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 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 hos pedaje. 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 ermite rear a ia l al (en t rdenador) del i tio web errás e se encuentre a disposici n de todo el mundo en Internet.

e l ego

Por tanto, una vez a yas terminado de diseñarla en modo local sólo tendrás u e subirla a tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los rchivos t l y como recen en tu disco duro, respet ndo el nombre de los rchivos y l organización de las carpetas. Si no lo aces de este modo, tu sitio experimentará fallos y enlaces ue no funcionarán.

ecuerda ue será mejor ue no utilices caracteres especiales como acentos o eñes, ni espacios en blanco De esta forma te asegurarás de ue el servidor puede . reconocer sin ningún tipo de problemas los nombres de los archivos ue alojes en l . Para evitar errores de enlaces rotos o imágenes u e no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores distinguen entrre mayúsculas y minúsculas, por lo ue si en tu página uieres mostrar la imágen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.

Arrancar y cerrar Dreamweaver
Veamos las dos formas

S 

básicas de arrancar Dreamweaver S .

Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. olocar 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, seguidamente Dreamweaver CS3, hacer clic sobre l, y se arrancará el programa.

Desde el icono de Dreamweaver CS3 del escritorio

.

acer clic en el botón cerrar Pulsar la combinación de teclas ALT+F4. acer 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. acer clic en el botón abrir de la barra de herramientas estándar.

Pulsar la combinación de teclas Ctrl+O. 

 

Para cerrar Dreamweaver operaciones:

X

, puedes utilizar cualquiera de las siguientes

¢

¢¦ © 

¦

¥

¦ ¦

©

¤¢

¦

¨

¡¤

¦

§  ¤¡ £¢

¦

¡ 

© ©

¨

¦

 

¦

¦ 

©

¢¦ 

©

¢¦ ©

Después de esto aparecerá una nueva ventana. Hacer clic sobre el menú Archi o y elegir la opción Guardar todo. Para que te vayas haciendo una idea de cómo funciona Dreamweaver. ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Pulsar la combinación de teclas Ctrl S. Debes tener mucho cuidado al utilizar la opción guardar todo. en el caso de estar trabajando simultáneamente con varios documentos. vamos a crear una página web sencilla .Hacer clic sobre el menú Archi o y elegir la opción Abrir. Dreamweaver incluye la posibilidad de. Para guardar un documento. este es el momento para descubrir lo fácil que es. con varios estilos de texto. Para abrir un documento nue o. puedes utilizar cualquiera de las siguientes operaciones. Hacer doble clic sobre el archivo en la ventana del sitio. Hacer clic en el botón abrir de la barra de herramientas estándar. Pulsar la combinación de teclas Ctrl N. Hacer clic en el botón guardar todo de la barra de herramientas estándar. puedes utilizar cualquiera de las siguientes operaciones. Crear esta página solo te llevará unos pocos minutos. Hacer clic sobre el menú Archi o y elegir la opción Guardar. una imagen y un enlace a otra página. al menos hasta que te hayas habituado a manejar el programa. Si nunca has hecho una página web. Para guardar todo puedes realizar cualquiera de las siguientes operaciones. Hacer doble clic sobre el archivo en la ventana del sitio. Mi primera página ! " " ! ! ! ! ! . Al tener varios documentos abiertos es fácil olvidarse de todos las modificaciones hechas en cada uno de ellos. poder guardar todos de golpe. sin la necesidad de hacerlo uno por uno. 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. HTML. Por ello es conveniente que al principio no utilices esta opción. Hacer clic sobre el menú Archi o y elegir la opción Nue o. Hacer clic en el botón guardar de la barra de herramientas estándar. en la que deberás elegir laCategoría Página en blanco.

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. . en el documento en blanco. vas a modificar el título y el color de fondo del documento. el texto que aparece en la imagen siguiente. Abres un documento nuevo y seleccionas la Categoría Página básica. Seguidamente introduce.Lo primero que tienes que hacer es abrir Dreamweaver Ya has visto en la página . Una vez introducido el texto. HTML. anterior como puede hacerse.

dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro.. para luego poder insertarla en la página web que estamos creando.. Seguidamente pulsa sobre el botón Aceptar.Cambia el Título por Mi rimera á ina. pero preferiblemente en el disco duro. Copia la imagen que aparece a continuación. ha de estar accesible para nosotros. 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. por ejemplo. Para ello debe encontrarse en nuestro disco duro. si haces clic en el icono del disquete aparecerá el mismo menú Guardar imagen como. Ahora vas a insertar una imagen. En los navegadores más modernos al colocar el cursor sobre una imagen aparecen estos iconos en una esquina de la imagen. Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Ahora tienes que insertar la imagen debajo de la segunda línea de texto. en un cd -rom o en un disquete. a que hacíamos referencia anteriormente. & ( $ # # % ' . de este modo el fondo del documento pasará a ser de color azul. en la carpeta Mis D cumentos. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet... En Color de ondo escribe #CCCCFF. Después debes dirigirte al menú Insertar. Para insertar la imagen. Puedes guardarla. a la opción Imagen. se abre una ventana con una opción similar a Guardar imagen como.

Cambia el Formato por Encabezado 3. selecciona la segunda línea de texto. que aún no ha sido modificada. Selecciona la primera línea de texto y cambia el ormato por Encabezado por #000066. 0 ) . Selecciona la imagen y las dos útimas líneas de texto. con la opción Propiedades. es porque está contraido. y el color Después de esto. tal y como se muestra en la siguiente imagen. Pulsa sobre el botón para centrarlos.En la nueva ventana que aparece. y que tiene el siguiente aspecto: Si no te aparece. Ahora vas a pasar a cambiar el formato del texto. Si lo que te ocurre es que únicamente te aparece el título del panel. que aparece junto al nombre. pulsa una vez sobre el botón y pulsa tres veces sobre el botón . Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana. Para que te aparezca desplegado debes pulsar sobre el botón . deberás buscar la imagen en la carpeta en la que la habías guardado. y después seleccionarla. la apariencia de la primera línea habrá cambiado. Una vez hayas centrado la imagen y las otras dos líneas siguientes. puedes mostrarlo a través del menú Ventana.

htm. Ya sabes que puedes hacerlo a través del menú Archi o. Por ejemplo. El entorno de trabajo I) Vamos a ver cuáles son los elementos básicos de Dreamweaver CS . por si en algún momento no sabemos cómo seguir trabajando. pero siempre teniendo en cuenta que la extensión ha de ser htm o html. puedes llamarlo prueba . Aprenderemos cómo se llaman. etc. dónde están y para qué sirven. la pantalla.elpais.es. Unidad 2.Selecciona de nuevo la última línea. los paneles. Puedes llamar al documento como lo desees. puedes ver cómo ha quedado el documento pulsando la tecla F12. para saber diferenciar entre cada uno de ellos. las barras. y en Vínculo introduce http://www. Por último guarda el documento. 2 1 . También veremos cómo obtener ayuda. para crear un enlace a esa otra página: Después de todos estos pasos. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web. desde la opción Guardar.

La pantalla que se muestra a continuación y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador.La pantalla inicial Al arrancar Dreamweaver aparece una pantalla inicial como ésta. ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento. su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar. maximizar/restaurar y cerrar. vamos a ver sus componentes fundamentales. La barra de menús 3 4 . Las barras La barra de título La barra de título contiene el nombre del programa Marcromedia Dreamweaver CS3) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. como veremos más adelante.

Muchas de las operaciones se pueden hacer a partir de estos menús. La barra de herramientas estándar La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales. La diferencia entre panel e inspector es que. mano para arrastrar la página). de la barra de menús. etc. es posible mostrar u ocultar cada uno de los paneles o inspectores. la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. o zoom. agrupadas en menús desplegables. La barra de herramientas de documento La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. etc. como Abrir . Vamos a ver los más importantes. por ejemplo. La barra de estado La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>). A través de la opción Ventana. que se conocen como paneles o inspectores. veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Guardar . También nos es posible alternar entre los modos de selecci n. en general. pero para algunas es preferible o indispensable hacerlas desde los paneles. Estas operaciones son las de cambio de vista del documento. 7 6 7 5 .La barra de menús contiene las operaciones de Dreamweaver. Los paneles e inspectores Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas. vista previa. Al hacer clic en Insertar. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido por defecto siempre viene al 100%).

si está en negrita o cursiva. La barra de herramientas Insertar o panel de objetos La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Por ejemplo. para que se muestren los nombres de los objetos. etc. etc. Este botón se encuentra en la esquina inferior-derecha. o para que se muestren ambos a la vez.El inspector de Propiedades El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. texto. Vistas de un documento Puedes cambiar la vista del documento a través de la barra de herramientas de documento. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos como ocurre en la imagen anterior). Los elementos están clasificados según su categoría: tablas. Pulsando sobre el botón se despliega para mostrar más opciones. objetos de formulario. cuando el elemento seleccionado sea texto mostrará el tipo de fuente. la alineación. Seguramente será la herramienta de Dreamweaver que más vayas a utilizar. 8 .

de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente.La vista Diseño La vista Diseño permite trabajar con el editor visual. . La vista Código La vista Código se utiliza para poder trabajar en un entorno totalmente de programación.

Cuando se realiza un cambio en alguna de las zonas. por índice o por contenido. este cambio se aplica directamente sobre la otra. La ayuda A través del menú Ayuda puedes ir a varias opciones. La vista Código Diseño permite dividir la ventana en dos zonas. @ 9 9 . Cuando se realiza un cambio en alguna de las zonas. La zona superior muestra el código fuente. Acceder al Centro de servicio técnico de Dreamweaver en la web. y la inferior el editor visual.La vista Código Diseño La vista Código Diseño permite dividir la ventana en dos zonas. Acceder a tutoriales en internet en la opción Recursos de ayusa en línea). Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML. y la inferior el editor visual. Acceder al Foros en línea de Adobe. si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1. este cambio se aplica directamente sobre la otra. La zona superior muestra el código fuente. veamos algunas de ellas: Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por temas.

. aparece una ventana que contiene la lista de sitios locales definidos con anterioridad.. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local.. se mostrará la misma ventana en la que definir las características del sitio. Recuerda que a través del panel Archivos. por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index. las animaciones. como puede ser el color de fondo. pestaña Archivos. etc.. las hojas de estilo. pueden existir varios sitios locales en un mismo ordenador. Por supuesto. Para ello hay que dirigirse al menú Sitio. mientras que para contener las imágenes.Unidad 3... La organización de los archivos en un sitio permite administrar y compartir archivos. Esto es lo que se conoce como sitio local.com en el navegador.com/index. de modo que la gente podrá verlo en Internet. y cómo modificar las propiedades de los documentos. Configuración de un sitio local I) En este tema vamos a ver qué es un sitio web.htm o index. Después se podrán copiar los archivos en un servidor web. como si se elige la opción Editar. si escribiéramos la dirección genérica http://www. cómo crearlos y gestionarlos. Introducción Un sitio web es un conjunto de archivos y carpetas. Tanto si se elige la opción Nuevo. en el denominado sitio remoto. Es conveniente que la página inicial del sitio tenga el nombre index. mantener los vínculos de forma automática. a la opción Administrar sitios.html. con el objetivo de tener una mejor organización de los archivos a la hora de trabajar.htm. ya es posible definir el sitio en Dreamweaver. con un diseño similar o un objetivo común.htm. relacionados entre sí.aulaclic.aulaclic. Crear o editar un sitio web sin conexión a Internet Una vez creadas las carpetas que formarán un sitio local. ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica. etc. utilizar FTP para cargar el sitio local en el servidor.. En el caso de haber seleccionado la opción Administrar sitios. Los documentos HTML normalmente se crean dentro de dicha carpeta. se puede acceder a cada uno de los sitios creados y a la opción Administrar sitio. éste intentaría cargar la página http://www.. . se deben crear nuevas carpetas dentro de ésta. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.. Por ejemplo. lo que equivale a publicar el sitio..

htm. de la que colgarán el resto de documentos HTML dentro del sitio. Debe definirse el Nombre del sitio y la Carpeta raíz local. a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio. Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella. Dreamweaver la cogerá por defecto. Vamos a ver los datos que hay que editar para la categoría Datos locales. que es en la que se encuentra el sitio dentro del disco duro local. . Después. si en la carpeta raíz del sitio existe una página con el nombre index. Estas tres características son las imprescindibles para definir un sitio local. si se desea.Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.

.. opción Archivos. El panel Archivos se puede abrir a través del menú Ventana.Las demás opciones en este momento no nos interesan.htm cuelgan del documento indice. También podemos utilizar el panel Archivos. es posible visualizar el sitio local. el servidor remoto de prueba o el mapa del sitio. el sitio remoto. Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio. Vistas del sitio Es posible visualizar un sitio en el panel Archivos o en una ventana. En este caso los documentos prueba1. y no es necesario establecer los datos del servidor en el que estará el sitio remoto. que aparece en la Al mismo tiempo. buscar y seleccionar el sitio a abrir en el menú desplegable de la pestaña Archivos.. en vez de la pestaña Avanzadas. También pulsando F8. Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas.htm. En esta imagen se visualizan el mapa del sitio y el sitio local. a la opción Administrar sitios. Para cambiar de una vista a otra hay que pulsar sobre el botón parte superior del panel y de la ventana. seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.. Abrir un sitio Para abrir un sitio ya definido hay que dirigirse al menú Sitio.htm y prueba2. ya que estamos definiendo el sitio local. ya que éste ha sido definido como página principal del sitio y contiene vínculos hacia los otros dos.

se muestra una ventana similar a esta. si estas modificaciones se hacen desde dentro d Dreamweaver. no funcionarán enlaces. y que pueden ser actualizados para que no se produzcan los problemas antes mencionados. Al modificar algún objeto que es referenciado por algún otro documento. o se cambian de nombre. las páginas no se mostrarán correctamente: no aparecerán imágenes. que indica los documentos que hacen referencia a dicho objeto. etc. . Simplemente hay que pulsar sobre el botón Actualizar. después no se produzcan problemas al visualizarlas. es posible actualizar automáticamente las páginas para que si hacen referencia a un objeto que ha cambiado. desde fuera de Dreamweaver.Si los archivos se mueven de una carpeta a otra. a través e del sitio. En cambio.

por lo que deberás ir subiendo uno a uno cada archivo y creando las carpetas tú mismo. Este proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Vía FTP puedes ver el contenido de tu sitio como una carpeta más igual que en el Explorador de Windows) y. obviamente. abre el programa y haz clic en Archivo y luego en Nuevo Navegador Remoto para crear una nueva cuenta FTP Aquí deberás introducir los datos que te facilitó el servidor donde vas a alojar tus páginas: Host. desde su página web podrás descargarte el programa y su traducción al español. Una vez instalado.Subir Archivos al servidor Cuando quieras visualizar el sitio en Internet al terminar el curso o para hacer pruebas) deberás subir los archivos al sitio que hayas contratado o conseguido gratuitamente. Sino los enlaces no funcionarán correctamente y es posible que algunas imágenes no se muestren. Uno de los programas gratuitos si no es con fines comerciales) más utilizados es SmartFTP. La alternativa es un servidor FTP. Para subir los archivos via web deberás seguir las instrucciones que te proporcionará tu servidor. Usuario y Contraseña. A A . nos es mucho más útil para subir los archivos. Esta forma es. Algunos sitios gratuitos sólo permiten que subas archivos vía web. que se utiliza en todos los sitios de pago y en algunos gratuitos. mucho mejor que la anterior. de lejos.

Cuando haya finalizado. Busca la carpeta que definiste como Sitio local y copia todos los archivos que quieras subir seleccionándolos a la vez y a rrastrándolos a la carpeta remota) del servidor. es decir. normalmente suelen mostrar varias carpetas al conectar con el servidor.Rellena los campos y haz clic en OK. haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos de tu disco duro. que todas las páginas de un sitio sigan un mismo formato. Hacer clic con el botón derecho del ratón sobre el fondo de la página. .. Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página. de fuente. etc. Propiedades del documento Es conveniente definir sitios homogéneos. que tengan el mismo color de fondo. Se abrirá el cuadro de diálogo siguiente: D C B Verás como el programa empieza a copiar la información de tu disco a Internet.. Aparecer al á final del menú contextual la opción Propiedades de la página. sólo tendrás que introducir tu dirección de Internet en la barra de direcciones de tu navegador Firefox.) y verás el sitio en Internet! Los servidores de pago . Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. Internet Explorer. Se conectará automáticamente y podrás ver una carpeta donde podrás copiar los archivos que hayas creado. Busca la carpeta public_html y sube tus archivos allí. Este cuadro se puede abrir de tres modos diferentes: Pulsar la combinación de teclas Ctrl J. Para ello.

como ves en la imagen anterior. así como que no es conveniente tener un gif animado como fondo. Ninguno de estos márgenes aparece en la ventana de documento de Dreamweaver. pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo. En la categoría Aspecto.Las propiedades están organizadas en categorías. Márgenes: permiten establecer márgenes en el documento. En la categoría Título/Codificación encontramos la propiedad: Título: es el título del documento. Color del texto: es el color de la fuente. Tamaño: permite definir el tamaño de la letra. Los márgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto. mientras que el ancho y el alto de márgen solo funcionan para Netscape Navigator. Color de fondo: permite especificar un color de fondo para el documento. solo se mostrarán en los navegadores. Dicha imagen se muestra en mosaico. encontramos las propiedades: Imagen de fondo: permite especificar una imagen de fondo para el documento. que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver En la categoría Vínculos encontramos las propiedades: .

y nunca en un navegador. que permite distinguir al usuario si unos vínculos ya han sido visitados o no.Color de vínculo: es el color de los vínculos. Vínculos activos: es el color de los vínculos activos. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator. Los colores Para asignar colores es posible desplegar una paleta de colores como ésta. cuando tenemos un texto con un vínculo asociado. Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Estilo subrayado: por defecto. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento. el texto aparece subrayado. tanto en Windows como en Macintosh. En la categoría Imagen de rastreo encontramos las propiedades: Imagen de rastreo: permite establecer una imagen como fondo del documento. pero que sólo se mostrará en la ventana de documento de Dreamweaver. con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado. También es posible personalizar los colores a través del botón de la paleta. de la parte superior . que ayuda al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas. Transparencia: permite establecer la opacidad de la imagen de rastreo. Vínculos visitados: es el color de los vínculos visitados. se muestra el valor hexadecimal del color en la parte superior. Al seleccionar un color de estas paletas.

El color puede insertarse de dos modos. E . si entre dos palabras se introducen varios espacios solo se considera uno. y a través del inspector de propiedades. si en la paleta de colores que aparece más arriba se seleccionara el color azul con valor #3399FF. Los encabezados se utilizan para establecer títulos dentro de un documento.Los colores pueden asignarse a través de los botones: Estos botones suelen aparecer en el inspector de propiedades de muchos objetos. como es el caso de la ventana de Propiedades de la página. que puede ser encabezado. el botón quedaría del siguiente modo: . o tablas). lo que hace que se despliegue la paleta de colores. El texto I) A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS. que tienes más arriba. El otro modo es introduciendo directamente el número hexadecimal del color en el recuadro blanco. por ejemplo. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito. Características del texto Las características del texto seleccionado pueden ser definidas a través del menú Texto. no predefinidos. Formato: Permite seleccionar un formato de párrafo ya definido para HTML. párrafo o preformateado. fondo. aunque sean menos que las que se nos ofrecen a través del menú Texto. pero al establecer el formato preformateado se respetará que hayan varios espacios en lugar de solo uno. y también en algunas ventanas que permiten especificar propiedades sobre todo propiedades de texto. Uno de ellos es pulsando sobre el recuadro gris . Unidad 4. que permiten asignar al texto estilos creados por nosotros mismos. Por ejemplo. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades.

entre otras cosas. Aparecen conjuntos de fuentes en lugar de una sola. si seleccionamos Arial. En este caso caso los botones se refieren a sangría a la izquierda del texto. el texto se verá con la fuente Arial. Sangria: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de márgen que se establece a ambos lados del texto. centrada. debido a que los vínculos aparecen subrayados y el subrayar texto nor al podría hacer que el usuario m pensara que se trata de un vínculo. Estilo: Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. etc. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse. Tamaño: Permite cambiar el tamaño del texto. subrayar el texto.. Lista: Estos botones permiten crear listas con viñetas o listas numeradas. pero si esta no existe se verá en Helvetica . Por ejemplo. el color del texto por defecto será el negro. ignorando el color que se haya definido en las propiedades de la página.. Helvetica. A través del menú Texto también se puede. Alinear: A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda. Listas . ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador.Fuente: Permite seleccionar un conjunto de fuentes. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Sans-serif. en píxeles. El tamaño lo podemos indicar en diversas unidades. Color: Permite seleccionar el color de la fuente. centímetros. Si no se ha establecido ningún color en las propiedades de la página ni aquí. derecha y justificada.

ç. 4. F Ejemplo de lista con viñetas (desordenada): y y y y Perro Gato Aves o o Hamster Canario Loro . es posible acceder a las propiedades de la lista seleccionada. Sacar los libros de ese día 2. Para que un texto que ya ha sido introducido en el documento se convierta en una lista. o a través del menú Texto. Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado. el número por el que comenzará el recuento. de forma rápida por si quieres poner dos espacios en blanco y los introduces por teclado. Dreamweaver no los creará. y en el caso de las listas ordenadas. Preparar la mochila 1. Introducir los libros del día siguiente Ponerme el pijama Lavarme los dientes Poner el despertador . Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active este submenú. G G F .. simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente. es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. la lista puede ser numerada o con viñetas. opción Lista. ê. Para establecer listas anidadas dentro de otras como en los ejemplos anteriores. podemos incluir caracteres como á. En la ventana Propiedades de lista se puede especificar el tipo de lista con números o con viñetas). el tipo de números o viñetas que se utilizarán e n la propiedad Estilo:). ì. ya sea a través del inspector de propiedades.Es posible insertar texto a modo de lista. mientras que la 2. La lista con viñetas desordenada) se selecciona a través del botón lista numerada ordenada) se selecciona a través del botón Ejemplo de lista numerada (ordenada): 1. Caracteres Especiales A veces necesitarás introducir caracteres especiales en tus páginas. ö. A través del menú Texto. 3. deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación. A su vez.

Sólo coloca el puntero del ratón sobr«e Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado.. Si el carácter que buscas no se encontras e allí. haz clic en Otro.Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen de la derecha.. Para introducir alguno de estos caracteres en tus textos sólo seleccióna lo en la lista y aparecerá en la vista de Diseño. la opción HTML verás el desplegable de la imagen de la derecha. Sólo coloca el puntero del ratón sobr«e Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado. y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia: .

etc. de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación d esos mismos e valores a otras partes del texto. como pueden ser el color o el tamaño. H . todos los hiperenlaces de la página adquirirían la apariencia definida en ese estilo. como puede ser la etiqueta A HREF. Crear un Estilo Personalizado Con Dreamweaver CS3. cuando actualiza un estilo CSS. Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo tipo. De este modo.Estilos CSS. opción Estilo. Los estilos CSS están en hojas de estilo de actualización automática también denominadas Hojas de Estilo en Cascada) se utilizan para combinar una serie de atributos del texto. aparecen una serie de estilos predefinidos que pueden aplicarse al texto seleccionado. las características que apliquemos a un texto crearán automáticamente estilos CSS que se incrustarán en el documento actual y se aplicarán únicamente sobre él. que corresponde a los hiperenlaces. desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página. Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web. como el color de fondo para el texto. el formato de todos los documentos que usan ese estilo se actualiza automáticamente. Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización. Introducción En el menú Texto. También algunas de sus opciones pueden utilizarse para definir atributos de imágenes y otras características que no permitían definir los estilos HTML en versiones anteriores.

. según los nombres de los estilos ya creados. De esta manera se puede crear un estilo para añadirlo a un documento. y los podemos acceder también de una manera rápida a través del menú Texto. se añade a la lista de estilos. En el Panel CSS se puede verificar que se ha añadido automáticamente el nuevo estilo.. Para ello desplegamos la lista de estilos y seleccionamos la opción Cambiar nombre... se establecen los atributos de la fuente y del párrafo que queramos. Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades. opción Estilos CSS. En este caso: miestilo. En el documento.. . aparecerá un panel con el nombre Resultados. Seguidamente se coloca el nuevo nombre sin espacios en blanco. Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior. También se puede cambiar el nombre del estilo. Al aceptar. Cada nuevo estilo que se crea. En el inspector de propiedades se modifican todas las propiedades de formato de texto. 2. es mejor que el estilo tenga un nombre que indique a qué tipo de texto se va a aplicar.Veámoslo: Para crear un Estilo CSS personalizado: 1. Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3. se selecciona el texto al que se desea aplicar características concretas. Cerrar esta ventana.

Se abrirá el cuadro de diálogo Exportar estilos como archivo CSS que te permitirá guardar todos los estilos incrustados en un nuevo archivo CSS. Esta opción es muy útil si tienes los estilos incrustados en una página y queremos utilizarlos en otras también. Si seleccionas un rango de texto dentro de un párrafo. En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Estilo.. selecciona el texto al que deseas aplicar el estilo CSS. o sitúa el punto de inserción del mouse en un párrafo para aplicar el estilo a todo el párrafo.Aplicar un Estilo Para aplicar un Estilo CSS personalizado: En el documento. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier página que queramos utilizarlos.. el Estilo CSS sólo afectará al rango seleccionado. Para asignar una hoja de estilos a una página despliega el cuadro Estilo que se encuentra en el Inspector de Propiedades y selecciona Adjuntar hoja de estilos. . Hojas de Estilos Podemos exportar estilos que se encuentren incrustados en la página HTML a una nueva hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar.

Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual. Elegimos si queremos Vincular o importar la hoja de estilos. http://www.com/pa ina/informacion/index.com. Después de Aceptar. screen pantalla).misitio.misitio. imagina que estamos en la siguiente dirección http://www./URL debe especificarse la ruta y el nombre de la hoja de estilos. esto permite que cualquier cambio realizado en la hoja quede reflejado de manera automática en todas las páginas que utilizan la hoja. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www. que al ser pulsado lleva de una página o archivo a otra página o archivo. ya que son un elemento esencial para cualquier página web. Hiperenlaces I) Vamos a ver qué son los hiperenlaces. La opción Media te permitirá seleccionar el tipo de medio al que se asociará la hoja de estilos. Introducción Un hiperenlace.. Si elegimos Importar la hoja se incrusta en la página. Estas opciones te permitirán crear hojas de estilos para soportes diferentes. Es posible asignar un vínculo a un texto.misitio. hipervínculo.html . o vínculo. Si elegimos Vincular la hoja no se incrusta en la página sino que se añade a la página una referencia a la hoja. Si queremos referinos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar .com/pa ina/pa ina1. Puedes crear una para screen.html . Esta es la opción más aconsejable si vamos a utilizar el estilo en más de una página. Tipos de enlaces Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. ¿cómo podemos hacerlo? http://www. por ejemplo. no es más que un enlace. print impresora) o tv webtv). Unidad 5. de esta forma sólo será necesario vincular cada una de los archivos que quieras qeu se vean afectados a la hoja de estilos que hayas creado.com/pa ina/secciones/seccion1. y otra para print que será la que se utilice cuando se imprima el contenido del archivo. o I I P I P Q Q . para qué sirven y cómo crearlos. la hoja con sus estilos aparecerá en el panel CSS. La ubicación es en Internet.En Arch.aulaclic.html . pero partiendo del directorio en el que se encuentra el documento actual. por ejemplo./ Por ejemplo. o a parte de una imagen. que será la que se muestre cuando navegues por Internet. a una imagen.

misitio.html. Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actu pero al.com/pa ina/secciones/seccion1. imagina que estamos en la siguiente dirección http://www. por ejemplo. El punto se define dentro de un documento a través del menú Insertar. ¿cómo podemos hacerlo? Fácil.. Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: .extension#nombre_de_punto . diferente.misitio. Si queremos referinos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar . Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo.html /pa ina/secciones/seccion1. Para ello el vínvulo debe ser nombre_de_documento. Puntos de fijación: Conduce a un punto dentro de un documen ya sea dentro del actual o de otro to.html.misitio. La ubicación es en Internet. Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. o U S V V T U V T R W .html#parte2 Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. En el ejemplo anterior si tuviesemos definido http://www.html ./secciones/seccion1. partiendo del directorio en el que se encuentra el documento actual.com..aulaclic. Deberemos llamarla haciendo referencia al nivel superior http://www. superior De esta forma. mientras nos encontramos en la carpeta informacion.misitio.com/pa ina/secciones/seccion1.html .misito. subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.com/pa ina/pa ina1.com/pa ina/ ) para poder ir luego a la carpeta secciones.html.com/pa ina/informacion/index./secciones/seccion1.Fácil..misito. El resultado de la ruta sería el siguiente: . un enlace en cualquier http://www. http://www. opción Anclaje con nombre. En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio.com/pa ina/ ) para poder ir luego a la carpeta secciones.com/ .misitio./ Por ejemplo. http://www.html . como sitio la carpeta página del sitio a se crearía como Como puedes ver ahora el vínculo a un archivo en todas las páginas es igual porque se define dependiendo del sitio raíz y no de la ubicación donde se encuentra. Deberemos llamarla haciendo referencia al nivel http://www.

. En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio. Para ello el vínvulo debe ser nombre_de_documento.html#parte2 Estos tipos de enlace que hemos visto son válidos tanto para referenciar páginas para crear hiperenlaces) o incluso imágenes u otro tipo de objetos como veremos en temas posteriores). aquí hay un enlace a www./secciones/seccion1. un enlace en cualquier http://www. Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: . por eso contiene HTTP:// Y ` Y X X .html. así no tendrás problemas a la hora de referenciar tus objetos. En el ejemplo anterior si tuviesemos definido http://www.misitio.El resultado de la ruta sería el siguiente: . Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. Puntos de fijación: Conduce a un punto dentro de un document ..elpais. Por ejemplo. que es de referencia absoluta.es. De esta forma. mientras nos encontramos en la carpeta informacion.html. También deberás evitar utilizar caracteres especiales como acentos o espacios. opción Anclaje con nombre. Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor local o remoto). Por ello. es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces.misitio.html /pa ina/secciones/seccion1.com/ . Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace. ya sea dentro del actual o de otro o diferente.com/pa ina/secciones/seccion1. subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1. como sitio la carpeta página del sitio a se crearía como Como puedes ver ahora el vínculo a un archivo en todas las páginas es igual porque se define dependiendo del sitio raíz y no de la ubicación donde se encuentra.extension#nombre_de_punto .html./secciones/seccion1. y seguidamente establecer el Vínculo en el inspector. El punto se define dentro de un documento a través del menú Insertar. Crear enlaces La forma más sencilla de crear un enlace es a través del inspector de propiedades.

si se trata de un enlace externo deberás escribirla empezando siempre por HTTP://.Es posible crear también vínculos vacíos. habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada. Crear vínculos de esta forma es muy sencillo. este campo se explica en el siguiente apartado. Para ello es necesario escribir en Vínculo únicamente una almohadilla #. Índice de tabulador : Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. Título: se trata de la ayuda contextual del vínculo. puede variar dependiendo de los marcos de que disponga el documento actual. Otra forma de crear un enlace es a través del menú Insertar. etc. Destino: la página donde se abrirá la página. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos. opción Hipervínculo. . es equivalente al atributo ALT de las imágenes. Tecla de acceso: atributo que facilita la accesibilidad a las páginas. que pueden ser útiles cuando se utilizan comportamientos. sólo deberás rellenar los campos que explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el cursor. Destino del enlace El destino del enlace determina en qué ventana va a ser abierta la página vinculada. Texto: es el texto que mostrará el enlace Vínculo: es la página a la que irá redirigida el enlace.

Abre el documento vinculado en el mismo marco o ventana que el vínculo. o en la ventana que aparece a través del menú Insertar. de vínculo activo. _blank: Abre el documento vinculado en una ventana nueva del navegador.Puede especificarse en el inspector de propiedades a través de Dest. opción Hipervínculo. Al mismo tiempo. puede adquirir tres colores diferentes que pueden especificarse a través de las propiedades de la página. Formato del enlace En general. Cuando el vínculo está definido sobre una imagen. ya que se volverán a ver en el tema de Marcos. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. un texto que tiene asociado un vínculo suele aparecer subrayado. y de vínculo visitado. Cuando el vínculo está definido sobre una zona de una imagen un mapa). aparece el contorno de esa zona. Estos tres colores diferentes son los que se asignan como color de vínculo. _top: Abre el documento vinculado en la ventana completa del navegador. en el borde aparecen una serie de puntitos al pulsar sobre ella. Aqui tienes dos vínculos similares de ejemplo: a . No te preocupes si no te queda del todo claro para qué sirve cada un de estas a opciones de destino. _self: Es la opción predeterminada.

La sintaxis del vínculo en este caso es mailto:direccióndecorreo. Tanto si el vínculo se asigna a un texto como a una imagen. En este caso no es posible asignar el vínculo a una imagen. solo permite introducir el texto que contendrá el vínculo de correo. independientemente de si ésta va a contener un vínculo o no. El campo Borde sirve para ponerle un borde a la imagen. seleccionando previamente el texto o la imagen deseados. ya que esto indica que el tamaño de las líneas que forman el recuadro es cero 0). Puede definirse el vínculo a través de Vínculo. del inspector de propiedades. Enlace a correo electrónico También es posible a través del menú Insertar. Suele adquirir la apariencia de una mano señalando. opción Vínculo de correo electrónico. Puede hacerse un recuadro más gordo incrementando el valor del campo Borde. Si se pone a cero 0). no aparece ningún borde. solo permite introducir el texto que contendrá el vínculo de correo b b b b . En este caso no es posible asignar el vínculo a una imagen. el cursor cambia de forma al situarse encima del vínculo. También es posible a través del menú Insertar. Esto ocurre debido a que que el campo Borde del inspector de propiedades de la imagen vale uno 1). la segunda imagen que hace de vínculo contiene un recuadro alrededor.Como puedes ver. mientras que para la primera imagen vale cero 0). opción Vínculo de correo electrónico .

Sign up to vote on this title
UsefulNot useful