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

¢

¢¦ © 

¦

¥

¦ ¦

©

¤¢

¦

¨

¡¤

¦

§  ¤¡ £¢

¦

¡ 

© ©

¨

¦

 

¦

¦ 

©

¢¦ 

©

¢¦ ©

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

Entonces se abrirá una ventana como la que aparece más abajo. Seguidamente introduce.Lo primero que tienes que hacer es abrir Dreamweaver Ya has visto en la página . Abres un documento nuevo y seleccionas la Categoría Página básica. anterior como puede hacerse. HTML. en el documento en blanco. Una vez introducido el texto. el texto que aparece en la imagen siguiente. Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. vas a modificar el título y el color de fondo del documento. .

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

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

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

maximizar/restaurar y cerrar.La pantalla inicial Al arrancar Dreamweaver aparece una pantalla inicial como ésta. En el extremo de la derecha están los botones para minimizar. su ubicación y el nombre del archivo en formato html. como veremos más adelante. 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. vamos a ver sus componentes fundamentales. 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. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La barra de menús 3 4 . ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento.

es posible mostrar u ocultar cada uno de los paneles o inspectores. 7 6 7 5 . agrupadas en menús desplegables. Vamos a ver los más importantes. etc. La diferencia entre panel e inspector es que. 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>). o zoom. de la barra de menús. Al hacer clic en Insertar. Guardar . en general.La barra de menús contiene las operaciones de Dreamweaver. pero para algunas es preferible o indispensable hacerlas desde los paneles. que se conocen como paneles o inspectores. A través de la opción Ventana. mano para arrastrar la página). 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. 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. como Abrir . la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. Estas operaciones son las de cambio de vista del documento. vista previa. 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%). Muchas de las operaciones se pueden hacer a partir de estos menús. Los paneles e inspectores Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas. etc. También nos es posible alternar entre los modos de selecci n. veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.

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. la alineación. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos como ocurre en la imagen anterior). Vistas de un documento Puedes cambiar la vista del documento a través de la barra de herramientas de documento. 8 . Este botón se encuentra en la esquina inferior-derecha. Por ejemplo. Seguramente será la herramienta de Dreamweaver que más vayas a utilizar. etc. para que se muestren los nombres de los objetos.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. si está en negrita o cursiva. Los elementos están clasificados según su categoría: tablas. etc. texto. cuando el elemento seleccionado sea texto mostrará el tipo de fuente. objetos de formulario. o para que se muestren ambos a la vez. Pulsando sobre el botón se despliega para mostrar más opciones.

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

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

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

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

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

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

Una vez instalado. Vía FTP puedes ver el contenido de tu sitio como una carpeta más igual que en el Explorador de Windows) y. 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. mucho mejor que la anterior. Sino los enlaces no funcionarán correctamente y es posible que algunas imágenes no se muestren.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. Esta forma es. A A . La alternativa es un servidor FTP. Algunos sitios gratuitos sólo permiten que subas archivos vía web. Para subir los archivos via web deberás seguir las instrucciones que te proporcionará tu servidor. nos es mucho más útil para subir los archivos. por lo que deberás ir subiendo uno a uno cada archivo y creando las carpetas tú mismo. obviamente. desde su página web podrás descargarte el programa y su traducción al español. que se utiliza en todos los sitios de pago y en algunos gratuitos. Usuario y Contraseña. de lejos. Uno de los programas gratuitos si no es con fines comerciales) más utilizados es SmartFTP. 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.

Internet Explorer. que todas las páginas de un sitio sigan un mismo formato. . Este cuadro se puede abrir de tres modos diferentes: Pulsar la combinación de teclas Ctrl J. etc. Hacer clic con el botón derecho del ratón sobre el fondo de la página. Cuando haya finalizado. 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. normalmente suelen mostrar varias carpetas al conectar con el servidor. Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. Para ello.Rellena los campos y haz clic en OK.. es decir.) y verás el sitio en Internet! Los servidores de pago . Propiedades del documento Es conveniente definir sitios homogéneos. Se conectará automáticamente y podrás ver una carpeta donde podrás copiar los archivos que hayas creado. de fuente. 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. haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos de tu disco duro.. Busca la carpeta public_html y sube tus archivos allí. 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. Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página. que tengan el mismo color de fondo.

como ves en la imagen anterior. Dicha imagen se muestra en mosaico. Los márgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer. encontramos las propiedades: Imagen de fondo: permite especificar una imagen de fondo para el documento. Márgenes: permiten establecer márgenes en el documento. 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. así como que no es conveniente tener un gif animado como fondo. 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: . mientras que el ancho y el alto de márgen solo funcionan para Netscape Navigator. Ninguno de estos márgenes aparece en la ventana de documento de Dreamweaver. Color de fondo: permite especificar un color de fondo para el documento.Las propiedades están organizadas en categorías. pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo. En la categoría Título/Codificación encontramos la propiedad: Título: es el título del documento. Tamaño: permite definir el tamaño de la letra. Color del texto: es el color de la fuente. En la categoría Aspecto. solo se mostrarán en los navegadores.

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

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

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

ê. ç. F Ejemplo de lista con viñetas (desordenada): y y y y Perro Gato Aves o o Hamster Canario Loro . 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ú. opción Lista. Introducir los libros del día siguiente Ponerme el pijama Lavarme los dientes Poner el despertador .. deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación.Es posible insertar texto a modo de lista. A través del menú Texto. ö. podemos incluir caracteres como á. Sacar los libros de ese día 2. 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. la lista puede ser numerada o con viñetas. 4. 3. simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente. Para que un texto que ya ha sido introducido en el documento se convierta en una lista. A su vez. G G F . 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. el tipo de números o viñetas que se utilizarán e n la propiedad Estilo:). es posible acceder a las propiedades de la lista seleccionada. Para establecer listas anidadas dentro de otras como en los ejemplos anteriores. ya sea a través del inspector de propiedades. Preparar la mochila 1. Caracteres Especiales A veces necesitarás introducir caracteres especiales en tus páginas. de forma rápida por si quieres poner dos espacios en blanco y los introduces por teclado. y en el caso de las listas ordenadas. Dreamweaver no los creará. mientras que la 2. o a través del menú Texto. En la ventana Propiedades de lista se puede especificar el tipo de lista con números o con viñetas). 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 opción HTML verás el desplegable de la imagen de la derecha.Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen de la derecha... Si el carácter que buscas no se encontras e allí. 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: . 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. 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. haz clic en Otro.

Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización. De este modo. 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. Crear un Estilo Personalizado Con Dreamweaver CS3. aparecen una serie de estilos predefinidos que pueden aplicarse al texto seleccionado. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página. que corresponde a los hiperenlaces. 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. Introducción En el menú Texto. H . Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo tipo. 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. etc. opción Estilo. todos los hiperenlaces de la página adquirirían la apariencia definida en ese estilo.Estilos CSS. como puede ser la etiqueta A HREF. desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos. el formato de todos los documentos que usan ese estilo se actualiza automáticamente. 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. 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. como el color de fondo para el texto. como pueden ser el color o el tamaño. cuando actualiza un estilo CSS.

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

Aplicar un Estilo Para aplicar un Estilo CSS personalizado: En el documento. 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. . selecciona el texto al que deseas aplicar el estilo CSS. 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.. o sitúa el punto de inserción del mouse en un párrafo para aplicar el estilo a todo el párrafo. 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. Si seleccionas un rango de texto dentro de un párrafo.. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier página que queramos utilizarlos. En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Estilo. Esta opción es muy útil si tienes los estilos incrustados en una página y queremos utilizarlos en otras también. el Estilo CSS sólo afectará al rango seleccionado.

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

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

es.misitio. opción Anclaje con nombre. aquí hay un enlace a www.html./secciones/seccion1.El resultado de la ruta sería el siguiente: . Para ello el vínvulo debe ser nombre_de_documento. subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1. un enlace en cualquier http://www. 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). También deberás evitar utilizar caracteres especiales como acentos o espacios.com/ .. es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces. así no tendrás problemas a la hora de referenciar tus objetos. De esta forma. Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: . ya sea dentro del actual o de otro o diferente.elpais. 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. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace./secciones/seccion1.html. Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. En el ejemplo anterior si tuviesemos definido http://www. mientras nos encontramos en la carpeta informacion. por eso contiene HTTP:// Y ` Y X X . que es de referencia absoluta. En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio. y seguidamente establecer el Vínculo en el inspector. Por ejemplo.com/pa ina/secciones/seccion1.misitio.extension#nombre_de_punto . Crear enlaces La forma más sencilla de crear un enlace es a través del inspector de propiedades. Por ello.html.. Puntos de fijación: Conduce a un punto dentro de un document .html /pa ina/secciones/seccion1. El punto se define dentro de un documento a través del menú Insertar.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).

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

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

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

Sign up to vote on this title
UsefulNot useful