Apuntes Dreamweaver

Unidad 1. Conceptos bsicos de Dreamweaver 8 Qu es Dreamweaver 8 Dreamweaver 8 es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver 8 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML.
Caractersticas bsicas de HTML Las pginas que vemos en Internet estn escritas utilizando el lenguaje HTML (Hyper Text Markup Language). Este lenguaje est basado en etiquetas que marcan el inicio y fin de cada elemento de la pgina Web. Por ejemplo, el ttulo de la pgina Web se escribe entre las etiquetas <TITLE> y </TITLE>. Como ves, ambas etiquetas consisten en poner un mismo comando entre los smbolos "<" y ">". La primera etiqueta indica inicio, y la segunda, que incluye el smbolo "/", indica final. Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan. Por ejemplo, <TABLE Border="1"> indica que la tabla tendr un borde de tipo 1. Una pgina HTML bsica tendra el siguiente aspecto: <HTML> <HEAD> <TITLE> Mi primera pgina web </TITLE> <BODY> <A href:"http://www.aulaclic.es"> </BODY> <HTML> Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se muestra en un navegador (I Explorer, Netscape, etc). Cuando un usuario desde Internet solicita ver una pgina, el servidor Web enva la pgina al navegador y este interpreta las etiquetas para dar el formato a la pgina. Cuando utilizamos Dreamweaver para crear una pgina Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la
apariencia y contenido definidos en el editor grfico.
Unidad 2. El entorno de trabajo (I)
Vamos a ver cules son los elementos bsicos de Dreamweaver 8, la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear pginas web.
La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes fundamentales. As conoceremos los nombres de los diferentes elementos. La pantalla que se muestra a continuacin (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada momento, como veremos ms adelante.
Las barras
La barra de ttulo
La barra de ttulo contiene el nombre del programa (Marcromedia Dreamweaver 8) y seguidamente el nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar. La barra de mens
La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o indispensable hacerlas desde los paneles.
La barra de herramientas estndar
La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms habituales, como Abrir , Guardar , etc.
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 estndar. Estas operaciones son las de cambio de vista del documento, vista previa, etc. La barra de estado
La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen al encontramos en un documento en blanco estamos directamente sobre la etiqueta <body>). Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), o zoom. 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%).
Los paneles e inspectores

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms importantes. El inspector de Propiedades
El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc. Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se encuentra en la esquina inferior-derecha.
Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar.
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. Los elementos estn clasificados segn su categora: tablas, texto, objetos de formulario, etc. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.
Editar pginas web

Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo. Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromeda Dreamweaver.
Cmo tener una pgina en Internet Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. 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. Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra pgina. 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 ningn dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la empresa contratada. Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com En cualquier caso, una vez que tengas tu espacio en Internet, darle contenido es muy sencillo.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que se encuentre a disposicin de todo el mundo en Internet. Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no lo haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn. Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en blanco. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l. Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los nombres en minscula. Algunos servidores distinguen entre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.
Unidad 3. Configuracin de un sitio local
(I)
En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos y cmo modificar las propiedades de los documentos, como puede ser el color de fondo. Introduccin Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que va a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.
Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podr verlo en Internet. La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc. Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL genrica. Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.com en el navegador, ste intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el caso de que no existiera ninguna pgina con el nombre index.htm.
Crear o editar un sitio web sin conexin a Internet
Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el sitio en Dreamweaver. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios.... Recuerda que a travs del panel Archivos, pestaa Archivos, se puede acceder a cada uno de los sitios creados y a la opcin Administrar sitio.
En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad. Por supuesto, pueden existir varios sitios locales en un mismo ordenador. Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana en la que definir las caractersticas del sitio.
Las caractersticas del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda. Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella. Vamos a ver los datos que hay que editar para la categora Datos locales. Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se encuentra el sitio dentro del disco duro local. Despus, si se desea, a travs de la categora Mapa de diseo del sitio puede definirse la pgina principal del sitio, de la que colgarn el resto de documentos HTML dentro del sitio, si en la carpeta raz del sitio existe una pgina con el nombre index.htm, Dreamweaver la escoger por defecto. Estas tres caractersticas son las imprescindibles para definir un sitio local. Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estar el sitio remoto. Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio. Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa Bsicas, en vez de la pestaa Avanzadas.
Abrir un sitio Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo. Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men desplegable de la pestaa Archivos.
Para practicar puedes realizar el Ejercicio paso a paso Crear un sitio web local. 1 Si es la primera vez que realizas este ejercicio, copia en la carpeta Mis documentos de tu disco duro, la carpeta ejerciciosdream, que se encuentra dentro de la carpeta ejercicios del curso. 2 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 3 Haz clic sobre el men Sitio. 4 Elige la opcin Administrar sitios. Se abrir una nueva ventana. 5. Selecciona el botn Nuevo..., y selecciona la opcin Sitio. Se abrir una nueva ventana. 5 Selecciona la pestaa Avanzadas de la nueva ventana. 6 Selecciona Datos locales en Categora. 7 En Nombre del sitio escribe Cocina. 8 En Carpeta raz local busca la carpeta cocina , que se encuentra dentro de la carpeta ejerciciosdream, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 9 En Carpeta predeterminada de imgenes busca la carpeta imagenes, que se encuentra dentro de la carpeta cocina, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 10 Haz clic sobre el botn Aceptar y sobre el botn Listo.
Unidad 3. Configuracin de un sitio local (II) Vistas del sitio Es posible visualizar un sitio en el panel Archivos o en una ventana. El panel Archivos se puede abrir a travs del men Ventana, opcin Archivos. Tambin pulsando F8. Para cambiar de una vista a otra hay que pulsar sobre el botn del panel y de la ventana. que aparece en la parte superior
Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio. En esta imagen se visualizan el mapa del sitio y el sitio local. En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm, ya que ste ha sido definido como pgina principal del sitio y contiene vnculos hacia los otros dos.
Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc.
En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a travs del sitio, es posible actualizar automticamente las pginas para que si hacen referencia a un objeto que ha cambiado, despus no se produzcan problemas al visualizarlas. Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar a esta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados. Simplemente hay que pulsar sobre el botn Actualizar.
Subir Archivos al servidor Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers subir los archivos al sitio que hayas contratado o conseguido gratuitamente. Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers 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. Si no los enlaces no funcionarn correctamente y es posible que algunas imgenes no se muestren. Para subir los archivos via web debers seguir las instrucciones que te proporcionar tu servidor.
La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior. Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el Explorador de Windows) y, obviamente, nos es mucho ms til para subir los archivos. Uno de los programas gratuitos (si no es con fines comerciales) ms utilizados es SmartFTP, desde su pgina web podrs descargarte el programa y su traduccin al espaol.
Una vez instalado, abre el programa y haz clic en Archivo y luego en Nuevo Navegador Remoto para crear una nueva cuenta FTP.
Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus pginas: Host, Usuario y Contrasea. Rellena los campos y haz clic en OK. Se conectar automticamente y podrs ver una carpeta donde podrs copiar los archivos que hayas creado. Para ello, haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos de tu disco duro. Busca la carpeta que definiste como Sitio local y copia todos los archivos que quieras subir seleccionndolos a la vez y arrastrndolos a la carpeta (remota) del servidor.
Vers como el programa empieza a copiar la informacin de tu disco a Internet. Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer...) y vers el sitio en Internet!
Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta public_html y sube tus archivos all.
Propiedades del documento Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades de la pgina. Este cuadro se puede abrir de tres modos diferentes: Pulsar la combinacin de teclas Ctrl+J. Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men contextual la opcin Propiedades de la pgina. Se abrir el cuadro de dilogo siguiente:
Las propiedades estn organizadas en categoras. En la categora Aspecto, como vez en la imagen anterior, encontramos las propiedades: Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que segn 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. Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso de no haber establecido ninguna imagen de fondo. Tamao: permite definir el tamao de la letra. Color del texto: es el color de la fuente. Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de margen solo funcionan para Netscape Navigator. Ninguno de estos mrgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarn en los navegadores. En la categora Ttulo/Codificacin encontramos la propiedad: Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de documento de Dreamweaver. En la categora Vnculos encontramos las propiedades:
Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas. Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido visitados o no.
Vnculos activos: es el color de los vnculos activos. Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado. En la categora Imagen de rastreo encontramos las propiedades: Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se mostrar en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla grfica sobre la que crear el documento. Transparencia: permite establecer la opacidad de la imagen de rastreo. Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador. Para ver cmo comprobar el tamao de los documentos, pulsa aqu .
Los colores
Para asignar colores es posible desplegar una paleta de colores como sta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior. Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. Tambin es posible personalizar los colores a travs del botn de la parte superior de la paleta. Los colores pueden asignarse a travs de los botones: .
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la pgina, que tienes ms arriba. El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor #3399FF, el botn quedara del siguiente modo: .
Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo documento y modificar sus propiedades. Ejercicios del Tema 3. Prueba evaluativa del Tema 3.
Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin. A partir de este momento vamos a realizar todos los ejercicios en la vista Diseo, a no ser que se indique lo contrario. Haz clic sobre el botn Mostrar vista de diseo .
Ejercicio 1: Deportes. 1 Crear un sitio local con el nombre Deportes, cuya carpeta raz sea la carpeta deportes, que se encuentra dentro de la carpeta ejerciciosdream. 2 Abrir el documento menu.htm. 3 Modificar sus propiedades para que el color de los vnculos, sea cual sea su estado, sea #000000 y nunca se encuentren subrayados. 4 Asgnale el color de fondo #738099 y la imagen fondo5.gif que se encuentra en la carpeta imagenes del sitio aparezca como fondo sin repeticin. 5 Haz que la fuente del documento sea Verdana 18px Negrita. 6 Abre los archivos donde.htm, instalaciones.htm, quienes.htm y reservas.htm. 7 Establece el color de fondo como #999999, selecciona la imagen fondo.gif de la carpeta imagenes del sitio como fondo y que se repita sobre el eje de las x. 8 Haz que la fuente de estos documentos sea Arial. 9 Abrir el documento marcos.htm y darle el ttulo Tu Tienda de Deportes. 10 Guardar todos los cambios y cerrar los documentos.
Ejercicio 2: Animales. 1 Crear un sitio local con el nombre Animales, cuya carpeta raz sea la carpeta animales, que se encuentra dentro de la carpeta ejerciciosdream. 2 Abrir el documento consultas.htm y modificar sus propiedades, para que su ttulo sea Consultas. 3 Abrir el documento gatos.htm y modificar sus propiedades, para que su ttulo sea Gatos. 4 Abrir el documento perros.htm y modificar sus propiedades, para que su ttulo sea Perros. 5 Abrir el documento inicio.htm y modificar sus propiedades, para que su ttulo sea Inicio. 6 Guardar los cambios y cerrar los documentos.
Unidad 4. El texto (I)
Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, aunque sean menos que las que se nos ofrecen a travs del men Texto.
Formato: Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o preformateado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetar que hayan varios espacios en lugar de solo uno. Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una nica fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se ver con la fuente Arial, pero si esta no existe se ver en Helvetica. Tamao: Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, centmetros, etc... Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la pgina. Si no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto por defecto ser el negro.
Estilo: Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs del men Texto tambin se puede, entre otras cosas, subrayar el texto. Esta opcin no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un vnculo. Alinear: A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Lista: Estos botones permiten crear listas con vietas o listas numeradas. Sangra: Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangra a la izquierda del texto.
Listas. Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas. Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opcin de lista correspondiente, ya sea a travs del inspector de propiedades, o a travs del men Texto.
A travs del men Texto, opcin Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algn lugar de la lista para que se active este submen. En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipo de nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el que comenzar el recuento.
Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.
Unidad 4. El texto (II)

Caracteres Especiales A veces necesitars introducir caracteres especiales en tus pginas. Debido al modo editor de Diseo de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como , , , , .. de forma rpida por si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los crear, debers introducirlo dos veces utilizando la opcin que vamos a ver a continuacin.
Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable de la imagen de la derecha. Slo coloca el puntero del ratn sobre Caracteres especiales y vers una lista rpida de los caracteres ms utilizados que no pueden ser introducidos mediante teclado.
Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la lista y aparecer en la vista de Diseo. Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir una ventana desde donde podrs seleccionar caracteres entre una lista bastante ms amplia:
Estilos CSS. Introduccin En el men Texto, opcin Estilo, aparecen una serie de estilos predefinidos que pueden aplicarse al texto seleccionado. Los estilos CSS estn en hojas de estilo de actualizacin automtica (tambin denominadas Hojas de Estilo en Cascada) se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamao, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignacin de esos mismos valores a otras partes del texto. Tambin algunas de sus opciones pueden utilizarse para definir atributos de imgenes y otras caractersticas que no permitan definir los estilos HTML en versiones anteriores, como el color de fondo para el texto, etc. Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo tipo, como puede ser la etiqueta A HREF, que corresponde a los hiperenlaces. De este modo, todos los hiperenlaces de la pgina adquiriran la apariencia definida en ese estilo. Un estilo CSS no es ms que un conjunto de reglas de formato que controlan el aspecto del contenido de una pgina Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una pgina, desde la posicin precisa de elementos hasta el diseo de fuentes y estilos concretos. Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualizacin; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automticamente.
Unidad 4. El texto (III)

Crear un Estilo Personalizado Con Dreamweaver 8, las caractersticas que apliquemos a un texto crearn automticamente estilos CSS que se incrustarn en el documento actual y se aplicarn nicamente sobre l. Vemoslo: Para crear un Estilo CSS personalizado: 1. En el documento, se selecciona el texto al que se desea aplicar caractersticas concretas. 2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los atributos de la fuente y del prrafo que queramos.
Automticamente Dreamweaver crear un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... segn los nombres de los estilos ya creados. Aparecer el nombre Estilo1 en el cuadro Estilo del panel Propiedades.
Tambin se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qu tipo de texto se va a aplicar. Para ello desplegamos la lista de estilos y seleccionamos la opcin Cambiar nombre... Aparecer un cuadro de dilogo para que introduzcamos el nuevo nombre como la imagen inferior.
Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este caso: miestilo. Al aceptar, aparecer un panel con el nombre Resultados. Cerrar esta ventana. De esta manera se puede crear un estilo para aadirlo a un documento. Cada nuevo estilo que se crea, se aade a la lista de estilos, y los podemos acceder tambin de una manera rpida a travs del men Texto, opcin Estilos CSS. En el Panel CSS se puede verificar que se ha aadido automticamente el nuevo estilo.
Aplicar un Estilo Para aplicar un Estilo CSS personalizado: En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sita el punto de insercin del mouse en un prrafo para aplicar el estilo a todo el prrafo. Si seleccionas un rango de texto dentro de un prrafo, el Estilo CSS slo afectar al rango seleccionado. En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Estilo. Para practicar puedes realizar el Ejercicio paso a paso Crear estilo de clase.
Hojas de Estilos Podemos exportar estilos que se encuentren incrustados en la pgina HTML a una nueva hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar. Se abrir el cuadro de dilogo Exportar estilos como archivo CSS que te permitir guardar todos los estilos incrustados en un nuevo archivo CSS. Esta opcin es muy til si tienes los estilos incrustados en una pgina y queremos utilizarlos en otras tambin. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier pgina que queramos utilizarlos.
Para asignar una hoja de estilos a una pgina despliega el cuadro Estilo que se encuentra en el Inspector de Propiedades y selecciona Adjuntar hoja de estilos...
En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos. Elegimos si queremos Vincular o importar la hoja de estilos.
Si elegimos Vincular la hoja no se incrusta en la pgina sino que se aade a la pgina una referencia a la hoja, esto permite que cualquier cambio realizado en la hoja quede reflejado de manera automtica en todas las pginas que utilizan la hoja. Esta es la opcin ms aconsejable si vamos a utilizar el estilo en ms de una pgina, de esta forma slo ser necesario vincular cada una de los archivos que quieras que se vean afectados a la hoja de estilos que hayas creado. Si elegimos Importar la hoja se incrusta en la pgina. La opcin Media te permitir seleccionar el tipo de medio al que se asociar la hoja de estilos, por ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirn crear hojas de estilos para soportes diferentes. Puedes crear una para screen, 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. Despus de Aceptar, la hoja con sus estilos aparecer en el panel CSS.
Ejercicios del Tema 4. (ver hipervnculo)
Prueba evaluativa del Tema 4.
Unidad 5. Hiperenlaces (I)

Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial para cualquier pgina web.
Introduccin Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra pgina o archivo. Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.
Tipos de enlaces Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo. La ubicacin es en Internet, por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/pagina/pagina1.html.
Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual. Si queremos referirnos a carpetas que estn por encima del nivel donde nos encontramos deberemos utilizar ../ Por ejemplo, imagina que estamos en la siguiente direccin http://www.misitio.com/pagina/informacion/index.html. En esta pgina queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, cmo podemos hacerlo? Fcil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones. El resultado de la ruta sera el siguiente: ../secciones/seccion1.html. De esta forma, mientras nos encontramos en la carpeta informacin, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html. Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. En este mtodo los enlaces se crean indicando la ruta a partir de la raz del sitio. En el ejemplo anterior si tuvisemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier pgina del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se creara como /pagina/secciones/seccion1.html. Como puedes ver ahora el vnculo a un archivo en todas las pginas es igual porque se define dependiendo del sitio raz y no de la ubicacin donde se encuentra. Puntos de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnculo debe ser nombre_de_documento.extension#nombre_de_punto. El punto se define dentro de un documento a travs del men Insertar, opcin Anclaje con nombre. Podramos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2 Estos tipos de enlace que hemos visto son vlidos tanto para referenciar pginas (para crear hiperenlaces) o incluso imgenes u otro tipo de objetos (como veremos en temas posteriores). Debers 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 minsculas para evitar fallos en los enlaces. Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as no tendrs problemas a la hora de referenciar tus
objetos.
Crear enlaces La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el inspector. Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://
Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vnculo nicamente una almohadilla #.
Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.
Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a continuacin y el enlace se colocar en el lugar en el que estaba situado el cursor. Texto: es el texto que mostrar el enlace Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers
escribirla empezando siempre por HTTP://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto dreamweaver te crear un enlace relativo al documento. Si quieres que los enlaces sean relativos al sitio visita este avanzado . Destino: la pgina donde se abrir la pgina, este campo se explica en el siguiente apartado. Ttulo: se trata de la ayuda contextual del vnculo, es equivalente al atributo ALT de las imgenes. Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace mediante la pulsacin de la tecla Alt ms la tecla de acceso indicada. ndice de tabulador : Como habrs podido observar puedes saltar a travs de los enlaces pulsando la tecla Tabulador. En este campo podrs establecer un ndice indicando la prioridad del enlace y as configurar el modo en el que actuar el Tabulador es sus diferentes saltos.
Destino del enlace El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que aparece a travs del men Insertar, opcin Hipervnculo. _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. _self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador. No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se volvern a ver en el tema de Marcos.
Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace. 1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3 Selecciona el sitio Cocina en el panel Archivos. 4 Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 6 Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn para desplegar sus propiedades ms avanzadas. 7 Selecciona la imagen del logotipo de aulaclic. Para ello hay que hacer clic sobre ella.
8 En Vnculo, del inspector de propiedades, escribe http://www.aulaclic.com. 9 En Dest selecciona la opcin _blank. 10 Pulsa fuera del texto para que deje de estar seleccionado y se le apliquen todos los cambios. 11 Pulsa F12 para ver el resultado en tu navegador, observa que si posicionas el ratn encima de la imagen, el puntero del ratn cambia de aspecto (normalmente toma forma de mano con el dedo ndice sealando) esto te indica que asociado a la imagen hay un hiperenlace y en la barra de estado puedes ver la pgina a la que enlaza. 12 Cierra la ventana del navegador. 13 Haz clic sobre el botn Guardar de la barra de herramientas.
Unidad 5. Hiperenlaces (II)

Formato del enlace En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo tiempo, puede adquirir tres colores diferentes que pueden especificarse a travs de las propiedades de la pgina. Estos tres colores diferentes son los que se asignan como color de vnculo, de vnculo activo, y de vnculo visitado. Aqu tienes un vnculo de ejemplo: www.aulaclic.com Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Aqu tienes dos vnculos similares de ejemplo:
Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto ocurre debido a que el campo Borde del inspector de propiedades de la imagen vale uno (1), mientras que para la primera imagen vale cero (0). El campo Borde sirve para ponerle un borde a la imagen, independientemente de si sta va a contener un vnculo o no. Si se pone a cero (0), no aparece ningn borde, ya que esto indica que el tamao de las lneas que forman el recuadro es cero (0). Puede hacerse un recuadro ms gordo incrementando el valor del campo Borde.
Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vnculo. Suele adquirir la apariencia de una mano sealando. Enlace a correo electrnico Es posible especificar vnculos a direcciones de correo electrnico. Esto resulta til cuando se desea que los visitantes de la web puedan contactar con nosotros. La sintaxis del vnculo en este caso es mailto:direccindecorreo. Puede definirse el vnculo a travs de Vnculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados. Tambin es posible a travs del men Insertar, opcin Vnculo de correo electrnico. En este caso no es posible asignar el vnculo a una imagen, solo permite introducir el texto que contendr el vnculo de correo. Para practicar puedes realizar el Ejercicio paso a paso Crear vnculo de correo electrnico. En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vnculos rotos. Si no sabes lo qu son o cmo solucionarlos, consltalo aqu . Practicar cmo crear un vnculo de correo electrnico. 1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3 Selecciona el sitio Cocina en el panel Archivos 4 Haz doble clic sobre el documento quienes.htm, que aparece en el panel desplegable de Archivos.
Se abrir el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 6 Al final del todo escribe el texto Buscamos cocineros. 7 Selecciona el botn Alinear a la derecha del inspector de propiedades. 8 Selecciona el texto cocineros que acabas de escribir. 9 En Vnculo, del inspector de propiedades, escribe mailto:trabajo@aulaclic.com. 10 Pulsa fuera del texto para que deje de estar seleccionado y se le aplique el ltimo cambio. 11 Pulsa F12 para ver el resultado en tu navegador, observa que si haces clic sobre el texto se abre tu aplicacin de correo (si la tienes instalada en tu ordenador) preparada para que escribas el texto del mensaje que quieres enviar, en la direccin de destino habr puesto trabajo@aulaclic.com. 12 Cierra tu aplicacin de correo. 13 Cierra la ventana del navegador. 14 Haz clic sobre el botn Guardar de la barra de herramientas.
Ejercicios del Tema 5. Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.
Prueba evaluativa del Tema 5.
Ejercicio Deportes.
1:
1 Abrir el sito Deportes. 2 Abrir el documento menu.htm. 3 Crear un hiperenlace a quienes.htm en el texto Quines, escribiendo abajo como destino. 4 Crear un hiperenlace a donde.htm en el texto Dnde, escribiendo abajo como destino. 5 Crear un hiperenlace a instalaciones.htm en el texto Instalaciones, escribiendo abajo como destino. 6 Crear un hiperenlace a reservas.htm en el texto Reservas, escribiendo abajo como destino. 7 Guardar los cambios y cerrar el documento. Ejercicio Animales. 2:
1 Abrir el sito Animales. 2 Abrir el documento inicio.htm. 3 Crear un hiperenlace a www.aulaclic.com en la imagen de aulaClic.
4 Hacer que el enlace se abra en una ventana nueva del navegador. 5 Guardar los cambios y cerrar el documento. Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.
Unidad 6. Imgenes (I)

En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear algunas imgenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras pginas.
Introduccin Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor informacin visual. Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web. Esta informacin puedes consultarla aqu .
Insertar una imagen Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es posible seleccionar una imagen a travs de la nueva ventana.
Si por algn motivo se desea insertar un BMP, este no aparecer a no ser que en Tipo se seleccione Todos los archivos. En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicacin diferente, la imagen puede no verse al estar siendo buscada en la ubicacin anterior. Lo mismo ocurre cuando se selecciona un documento para crear un vnculo. La ruta en la que se encuentra la imagen aparecer representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raz del sitio o relativa al documento. Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se encuentran la carpeta imgenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imgenes. En el caso de insertar la imagen como relativa al Documento la ruta sera: imagenes/aulaclic.jpg Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera: /imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a la carpeta raz del sitio. Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque s en el navegador. En Dreamweaver aparecer de la siguiente forma: Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que haba sido insertada. Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera de Dreamweaver. En ese caso, la imagen que aparecer en el navegador ser similar a esta: Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuacin. Para practicar puedes realizar el Ejercicio paso a paso Insertar una imagen.
Propiedades de una imagen Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:
Desde aqu podrs acceder a distintas propiedades: Desde el campo Alt podrs asignarle una ayuda contextual a la imagen, esta se mostrar cuando coloques el ratn sobre ella, y es muy til de cara a hacer pginas accesibles ya que el texto que se escribe ser ledo por los programas lectores para invidentes. Tambin es muy til, como ya hemos visto, si la imagen por alguna razn no puede mostrarse. En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bordes e incluso tamao con slo un clic. Si le damos un valor al campo Vnculo convertiremos al imagen en un link a otra pgina. Para enlaces externos recuerda que debe empezar siempre por HTTP:// y si deseas crear un vnculo a un enlace electrnico deber empezar por mailto: En caso de que le hayas asignado un vnculo podrs decidir en qu ventana quieres que se abra seleccionando un valor en el campo Destino.
Puedes asignarle un tamao de borde desde el campo Borde. Y puedes seleccionar su alineacin con respecto al texto desde el campo Alinear. Por ltimo las opciones Espacio V y Espacio H te sern muy tiles para separar la imagen del texto y as no queden demasiado pegadas a l. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto.
Cambiar el tamao de una imagen Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen dentro de la pgina. Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola desde un editor externo, como Fireworks. Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamao de varias formas diferentes: Imagen original Imagen con tamao modificado
Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar til modificar el tamao de algunas imgenes aunque esto implique perder calidad. Existen dos formas de modificar el tamao. Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen. La otra es a travs de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos aparecern en el inspector cuando est seleccionada alguna imagen. Si estos campos no contienen el tamao original de la imagen, el valor aparecer resaltado en negrita y aparecer a la derecha una flecha circular que permite volver al tamao original haciendo clic sobre ella.
Pueden crearse vnculos y comportamientos sobre partes de una imagen, sin la necesidad de que sea sobre toda ella. A esto se le conoce como mapa de imagen. Esta informacin puedes consultarla aqu .
Enviar
Unidad 6. Imgenes (II)
Imagen de sustitucin. Rollover Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella. Este tipo de imagen suele utilizarse en los mens o en los botones para desplazarnos a travs de distintas pginas. Aqu tienes un ejemplo de rollover. Sita el puntero sobre l para ver qu es lo que ocurre.
Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen, a la opcin Imagen de sustitucin. En la nueva ventana hay que especificar la imagen original y la de sustitucin.
Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se activa, la imagen de sustitucin se carga cuando se carga la pgina, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca. El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecer en lugar de la imagen en el caso de que por algn motivo sta no pueda ser mostrada en el navegador. El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede hacerse a travs del campo Alt del inspector de propiedades de la imagen seleccionada. Para practicar puedes realizar el Ejercicio paso a paso Crear Rollover.
Botones Flash Existen otra serie de imgenes especiales, similares a los rollovers, que suelen utilizarse para crear mens, como pueden ser los botones Flash. Aqu tienes un ejemplo de botn Flash. Sita el puntero sobre l para ver qu es lo que ocurre.
Para insertar un botn Flash hay que dirigirse al men Insertar, Media, a la opcin Botn Flash, aparecer el siguiente cuadro de dilogo:
A travs de Estilo: puede seleccionarse uno de los distintos formatos de botn que se ofrecen. En esta misma ventana hay que especificar tambin el Texto que mostrar el botn (Texto del botn:), as como el nombre con el que ser guardado (Guardar como:) y el vnculo asociado (Vinculo: y Destino:). Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML, en lugar de la carpeta destinada a almacenar imgenes, ya que de no ser as es posible que al intentar asignar un vnculo dentro del propio sitio, Dreamweaver no permita guardar el botn con ese vnculo en una ubicacin diferente de la de dicho documento. Recuerda que los botones deben guardarse con la extensin SWF.
A travs del inspector de propiedades del botn Flash es posible editar de nuevo sus atributos:
Puede volver a abrirse el cuadro de dilogo anterior pulsando sobre el botn Editar, y a travs del botn Reproducir es posible probar el funcionamiento del botn Flash desde Dreamweaver, sin la necesidad de tener que abrir la pgina con algn navegador. Despus de haber probado el funcionamiento del botn Flash, debe pulsarse de nuevo sobre el botn Reproducir (que habr cambiado por el botn Detener) .
Para practicar puedes realizar el Ejercicio paso a paso Crear botones Flash.
Unidad 6. Imgenes (III)

Abrir un sitio Texto Flash El texto Flash es similar a un rollover, pero en lugar de intercambiar imgenes intercambia el color del texto. Para insertar texto Flash hay que dirigirse al men Insertar, Media, a la opcin Texto Flash. En la nueva ventana, adems del texto, el vnculo y el nombre con el que ser guardado el texto, hay que especificar el color original y el de sustitucin. Aqu tienes un ejemplo de texto Flash. Sita el puntero sobre l para ver qu es lo que ocurre.
El inspector de propiedades del texto Flash es igual que el de un botn Flash.
Barra de navegacin Una barra de navegacin es un conjunto de imgenes que se utilizan como opciones de men para navegar dentro de una web. Una pgina web solo puede contener una nica barra de navegacin. Para insertar una barra de navegacin hay que dirigirse al men Insertar, Objetos de imagen, a la opcin Barra de navegacin.
En la nueva ventana pueden especificarse cuatro imgenes diferentes para cada uno de los botones, el vnculo para cada uno de ellos, etc.
A travs de los botones superiores de la ventana es posible crear y eliminar botones de la barra de navegacin, as como reordenarlos. Con se crea un botn nuevo, con se elimina el botn seleccionado, y con se puede modificar la posicin del botn seleccionado. En Imagen Arriba pones la imagen que quieres mostrar inicialmente (cuando todava no se ha hecho clic). En Sobre imagen, pones la imagen que quieres mostrar cuando el usuario mueva el puntero sobre el botn y ste estaba mostrando la imagen asignada en Imagen Arriba. En Imagen abajo, pones la imagen que quieres mostrar despus de que el usuario haya hecho clic en la imagen. En Sobre mientras imagen abajo, pones la imagen que quieres mostrar cuando el usuario mueva el puntero sobre el botn y ste estaba mostrando la imagen asignada en Imagen Abajo.
De esta forma, si asignas imgenes distintas puedes saber cul es el ltimo botn que ha sido pulsado (el que tiene Imagen Abajo). Aqu tienes un ejemplo de barra de navegacin. Para su creacin se han utilizado las mismas imgenes para todos los botones, pero como puedes ver, en el botn del medio aparece inicialmente una imagen diferente de la de los otros dos. Esto se debe a que la opcin Mostrar "Imagen abajo" inicialmente estaba activa para este botn. Sita el puntero sobre los distintos botones, y pulsa sobre alguno, para ver qu es lo que ocurre.
El que existan cuatro imgenes diferentes sirve para identificar cual de los vnculos est activo, cosa que con un simple rollover no puede hacerse. A travs de la opcin Insertar es posible especificar si los botones de la barra de navegacin van a aparecer de forma horizontal o vertical dentro de la pgina. Ejercicios del Tema 6. Prueba evaluativa del Tema 6.
Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin. Ejercicio 1: Deportes. 1 Abrir el sito Deportes. 2 Abrir el documento instalaciones.htm. 3 Insertar la imagen logodeportes.gif, que se encuentra dentro de la carpeta imgenes del sitio, a la derecha del texto Nuestras instalaciones. 4 Hacer que la alineacin de la imagen sea Medio absoluta. 5 Guardar los cambios y cerrar el documento. Ejercicio 2: Animales. 1 Abrir el sito Animales. 2 Abrir el documento inicio.htm. 3 Insertar un rollover al lado del ttulo Inicio, cuya imagen original sea esta: (pata1.gif), y la
imagen de sustitucin esta: (pata2.gif). Guardar previamente estas imgenes en la carpeta imgenes del sitio. 4 La imagen de sustitucin no debe tener ninguna direccin web vinculada. 5 Guardar los cambios y cerrar el documento. Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.

Apuntes Dreamweaver

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apuntes Dreamweaver

Enviado por

Direitos autorais:

Formatos disponíveis

Unidad 1. Conceptos bsicos de Dreamweaver 8 Qu es Dreamweaver 8 Dreamweaver 8 es un software fcil de usar que permite crear pginas web profesionales.

apariencia y contenido definidos en el editor grfico.

Unidad 2. El entorno de trabajo (I)

La barra de herramientas estndar

La barra de herramientas de documento

Los paneles e inspectores

Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar.

La barra de herramientas Insertar o panel de objetos

Editar pginas web

Unidad 3. Configuracin de un sitio local

Crear o editar un sitio web sin conexin a Internet

Unidad 4. El texto (I)

Unidad 4. El texto (II)

Unidad 4. El texto (III)

Ejercicios del Tema 4. (ver hipervnculo)

Prueba evaluativa del Tema 4.

Unidad 5. Hiperenlaces (I)

Unidad 5. Hiperenlaces (II)

Prueba evaluativa del Tema 5.

Unidad 6. Imgenes (I)

Unidad 6. Imgenes (II)

Unidad 6. Imgenes (III)

El inspector de propiedades del texto Flash es igual que el de un botn Flash.

Você também pode gostar