Captulo 1. ASPECTOS BSICOS 1.1. Presentacin Este curso est pensado para todos los usuarios que desean crear contenidos para Internet diseando su propia pgina Web. Principalmente est dirigido a aquellas personas que desean dar sus primeros pasos en el uso de Dreamweaver CS4. No es necesario haber tenido contacto previo con el programa ni haber realizado una pgina Web. A travs de los captulos de este manual podremos aprender de forma sencilla, pero prctica y profunda, como disear nuestra pgina Web y como hacerla visible en Internet. El desarrollo de los contenidos es secuencial, reforzado con unos ejercicios prcticos para la consecucin de los objetivos. No hay que olvidar que es necesario tener conocimientos de Informtica a nivel de usuario. Tambin es recomendable tener conocimientos bsicos de HTML, aunque esto no es necesario para realizar el curso con posibilidades de xito. Este curso, como todos los correspondientes al Proyecto Mentor, disponen de una soporte telemtico, la mesa de trabajo, que facilita el acceso a los materiales, a las evaluaciones y a ms ejercicios prcticos. Este entorno de trabajo complementa y actualiza los contenidos del curso, adems de contar con el seguimiento de un tutor en el proceso de aprendizaje del alumno. 1.2. Objetivos Al finalizar este curso, podremos ser capaces de: Crear, editar y mantener sitios Web de una forma sencilla y eficaz. Conocer las herramientas de Dreamweaver CS4 para la maquetacin y diseo de pginas Web. Alojar nuestro sitio Web en un servidor remoto para que pueda ser visto en Internet. 1.3. Introduccin El nacimiento de Internet se debe a la necesidad de comunicacin de la comunidad cientfica para, de forma rpida y efectiva, compartir informacin y conocimientos. Bajo esta demanda nace ARPAnet, una red del Departamento de Defensa de los Estados Unidos con objetivos estrictamente militares. Esta red puso a disposicin de la comunidad cientfica una red anloga, NSFnet, que desarroll un sistema de comunicacin en el que los datos eran transmitidos en diferentes paquetes, cada uno de ellos con informacin suficiente como para rehacerse completamente al llegar a su destino. A partir de esto, en la dcada de los 70, aparece el protocolo de transmisin TCP/IP que controla y lleva a cabo la transferencia de datos y en l se basan los servicios de Internet y mensajera de correo electrnico. Como consecuencia de la normalizacin de este protocolo, el nmero de usuarios crece notablemente y se hacen los primeros planteamientos de conectar todas las redes existentes en el mundo. El problema radicaba en la necesidad de crear una forma estndar de almacenar datos que pudiera ser visualizada desde cualquier plataforma informtica. A finales de los 80 se presenta un lenguaje basado en etiquetas que permita visualizar cualquier informacin, Dreamweaver CS4. Captulo 1. Aspectos bsicos
4
adems de poder insertar imgenes, vdeos. El uso de hipervnculos permita acceder de forma sencilla a documentos del ordenador local y de ordenadores remotos. Naci el lenguaje de etiquetas de Hipertexto, conocido por HTML. Desde entonces el crecimiento de Internet ha sido imparable, entre otras razones, debido a la aparicin de los mdems de alta velocidad (a ms de 14.400 bps) que facilitaban el acceso y la interconexin entre ordenadores a travs de la lnea telefnica y al crecimiento de uno de sus servicios ms populares: la World Wide Web. 1.4. World Wide Web Una red es un conjunto de dispositivos, principalmente ordenadores, interconectados entre s para cumplir con una tarea especfica de manera coordinada. Una de las principales caractersticas de la red es la de compartir e intercambiar informacin entre sus dispositivos. Internet, considerada como la red de redes, posibilita la comunicacin y el intercambio de informacin entre ordenadores gracias a la interconexin de redes distribuidas por todo el mundo. Su trabajo se basa en el sistema cliente-servidor, donde el ordenador local (cliente) solicita la informacin al ordenador remoto (servidor). Para que la comunicacin entre los ordenadores sea correcta existen unas determinadas reglas, llamadas protocolos, que son unos estndares que controlan el trfico de la informacin a travs de la red, garantizando el intercambio de datos entre los ordenadores. La World Wide Web, ms conocida como Web, est formada por un conjunto de documentos interconectados, que se encuentran almacenados en ordenadores dispersos en todo el mundo y es la encargada de localizar y difundir esta informacin. Ha pasado a ser el medio de comunicacin mayor y ms libre que existe, abierto a todas las ideas y criterios, es una autntica fuente de creatividad humana. Para acceder a la informacin que hay en la red es necesario ejecutar un programa navegador, tambin conocido como explorador (Internet Explorer, Netscape, Firefox, etc. son algunos ejemplos de navegadores). El navegador es un programa que interpreta las pginas Web y las presenta al usuario. Su denominacin de navegador o explorador se debe a que facilita la localizacin de la informacin navegando o explorando Internet de forma fcil e intuitiva. Cuando el navegador encuentra una pgina Web, la puede mostrar al usuario porque ha sido escrita en cdigo HTML (HyperText Markup Lenguaje). El lenguaje HTML es un lenguaje de marcas de hipertexto que describe la estructura y contenidos de las pginas Web. Los navegadores interpretan este cdigo y acceden a estos contenidos en hipertexto utilizando el protocolo http (HyperText Transfer Protocol) o protocolo de transferencia de hipertexto. Adems, los navegadores, te permiten acceder a otros tipos de servidores, dependiendo del protocolo utilizado. Por ejemplo, el protocolo FTP (File Transfer Protocol) que permite la transferencia de archivos entre ordenadores. Vamos a aclarar algunos conceptos que se usan en Internet. Dreamweaver CS4. Captulo 1. Aspectos bsicos
5
TCP/IP Es un protocolo que realmente est formado por dos protocolos de comunicacin distintos. El protocolo IP (Internet Protocol) se ocupa de la transmisin unidireccional de paquetes de datos entre dos dispositivos con direcciones adecuadas al protocolo (llamadas direcciones IP). El protocolo TCP (Transmission Control Protocol) se ocupa de ordenar estos paquetes de datos para que lleguen a su destino libres de errores. En otras palabras, cuando un ordenador local (cliente) solicita una informacin, en el ordenador remoto (servidor) hay un programa TCP que recibe la informacin antes de enviarla, la divide en paquetes y los enva a la direccin IP del cliente, siguiendo el protocolo IP. Otro programa TCP en el ordenador cliente recibe los paquetes de datos, verifica que estn libres de errores y que no falte ninguno. Este proceso se repite hasta que todos los datos hayan llegado correctamente. Direcciones IP Las direcciones IP es la identificacin que se asigna a todo dispositivo conectado a Internet. Esta identificacin en Internet es nica y tiene una secuencia de cuatro nmeros entre 0 y 255 separados por puntos, por ejemplo, una direccin IP puede ser 62.81.0.1. Al conectarse un ordenador a Internet est identificado por su IP. Actualmente, para el usuario domstico la IP no es fija, por lo que al conectarse a Internet, el protocolo de comunicacin le asigna una direccin IP dinmica, es decir una identificacin de nmeros que permanece mientras dura la conexin, pero que puede ser distinta con la prxima vez que se conecta a Internet. DNS Los DNS (Domain Name Servers) o Servidores de Nombre de dominios son ordenadores que contienen la base de datos de identificacin de los ordenadores que se conectan a Internet y asocian la direccin IP a un nombre. Este sistema est basado en la dificultad de asociar una direccin IP numrica a un servidor de informacin, por lo que se asigna un nombre nico a cada direccin IP. Adems, los nombres de dominio pueden ofrecer informacin del ordenador que ofrece la informacin por la letras que se encuentran al final. Por ejemplo, .es indica que el dominio pertenece a Espaa, .it a italia, .com a entidades comerciales, .edu a educacin, etc. Un nombre de dominio lo podemos obtener fcilmente desde un proveedor de Internet. Este proveedor comprueba si el nombre que deseamos utilizar no est asignado con anterioridad. Una vez que localizamos un nombre de dominio que est libre, nos podemos registrar y mientras paguemos una cuota, nuestro nombre de dominio permanecer registrado en la base de datos de nombres de dominios y reservado de forma preferencial, de tal forma que ningn otro usuario de Internet podr utilizarlo. La ventaja principal de obtener y mantener un nombre de dominio es que si decidimos cambiar de servidor y alojamos nuestro sitio Web en otro, nos podr cambiar la direccin IP asignada a nuestro nombre de dominio, pero el nombre se mantiene, consiguiendo una identidad en Internet. Dreamweaver CS4. Captulo 1. Aspectos bsicos
6
URL Los URL (Uniform Resource Locators) o Localizadores de Recursos son direcciones nicas que sirven para localizar un sitio de Internet. El funcionamiento es sencillo. Estas direcciones (URL) las escribimos en la barra de direcciones del navegador. El navegador enva la solicitud por Internet. En la red, unos servidores (root servers) se encargan de direccionar estas peticiones, los servidores DNS establecen la correspondencia entre los nombres y las direcciones IP. Una vez llega la peticin al ordenador remoto (servidor), localiza en su directorio la informacin solicitada y la devuelve al ordenador local (cliente). La Web utiliza los URL para especificar las direcciones de diversos servidores en Internet y los documentos ubicados en cada uno de ellos. Por ejemplo, el URL del Aula Mentor es http://www.mentor.mec.es. Veamos que significa: http: es el protocolo utilizado para el intercambio de informacin. www: es el acrnimo de World Wide Web. mentor. mec. es: se corresponde con el dominio donde se encuentran los datos solicitados. o es: nos indica que este dominio es de Espaa. o mec: pertenece al Mec (Ministerio de Educacin). o mentor: pertenece al servidor del Aula Mentor. A veces el URL puede indicar una ruta ms detallada, dependiendo de donde se encuentre la informacin que solicitemos. Por ejemplo, la direccin URL https://centrovirtual.educacion.es/mentor/cursos/curso_iniciacion_proces_text.html nos indica que dentro del servidor del Aula Mentor, en la direccin /cursos, podemos localizar el documento curso_iniciacion_proces_text.html. 1.5. HTML El elemento bsico de la Web es la pgina Web. La pgina Web no es ms que un archivo de texto en lenguaje HTML. La caracterstica ms importante es que la informacin desarrollada en HTML puede verse desde cualquier navegador y desde cualquier plataforma, adems, de que la elaboracin de un documento HTML se puede hacer desde un sencillo editor de textos. La principal dificultad a la hora de elaborar un documento HTML ser conocer la estructura que deben tener las pginas Web as como las etiquetas que definen el diseo de la pgina, adems, cada vez que incorporemos un elemento a nuestra pgina, deberemos comprobar los resultados en un navegador para encontrar posibles errores y depurar el diseo. A pesar de las ventajas descritas anteriormente, HTML tiene sus limitaciones, la estructuracin de los documentos, la insercin de imgenes y la interactividad estn limitadas. Las pginas Web tenan un aspecto muy esttico, slo las imgenes con formato GIF animado daban algo de dinamismo, pero con el inconveniente de su gran tamao, lo que limitaba su utilizacin para no demorar en exceso el tiempo de descarga de las pginas. Para resolver este Dreamweaver CS4. Captulo 1. Aspectos bsicos
7
problema, aparecen nuevos recursos que proporcionan otras posibilidades de diseo desconocidas hasta entonces. CSS (Cascading Style Sheets) u hojas de estilo en cascada es un lenguaje que nos permite definir estilos de formato a los elementos de un documento, como por ejemplo tipografas, mrgenes, espacios, etc. Se utiliza en las ltimas versiones de los navegadores de Netscape y Microsoft. JavaScript es un lenguaje orientado a mejorar pginas Web creando acciones como la revisin de formularios, efectos en la barra de estado, efectos de men, etc. JavaScript es un lenguaje de comandos para mltiples navegadores y plataformas que es interpretado en el ordenador local (cliente). Desarrollado por Netscape, el cdigo de JavaScript se inserta directamente en una pgina HTML. En captulos posteriores profundizamos en estos lenguajes. La combinacin de HTML con CSS y JavaScript da origen a DHTML (Dynamic HTML). 1.6. Dreamweaver Para crear pginas Web de forma cmoda y sencilla existen unos programas de edicin visual que, en un entorno grfico, muy intuitivo, nos permiten disearla fcilmente, con la posibilidad de poder editar el cdigo HTML que se est generando. Dreamweaver es un programa para la edicin de HTML de tipo WYSIWYG (What You See Is What You Get). Esto significa que si cambiamos algo en pantalla dentro de Dreamweaver, los resultados se muestran de inmediato. Si lo hiciramos manualmente con el cdigo HTML, tendramos que lanzar el navegador para ver los resultados. No obstante Dreamweaver nos permite controlar manualmente el cdigo HTML mediante la vista cdigo del documento que estemos elaborando. Dreamweaver es una herramienta excelente para el desarrollo de aplicaciones para la Web y la creacin rpida de formularios, marcos, tablas y otros objetos, pero donde realmente destaca es en el HTML Dinmico (DHTML). Dreamweaver CS4, en el momento de elaborar este curso, es la ltima versin del programa cuyas novedades principales son: Vista en vivo: Dreamweaver CS4 permite disear pginas Web en condiciones reales de navegador con la nueva Vista en vivo, al tiempo que mantiene el acceso directo al cdigo. Los cambios realizados en el cdigo se reflejan de inmediato en la pantalla mostrada. Sugerencias para el cdigo de los frameworks Ajax y JavaScript: Ahora podemos escribir cdigo JavaScript con mayor rapidez y precisin y con compatibilidad mejorada para objetos centrales y tipos de datos simples de JavaScript. Tambin cuenta con una funcionalidad ampliada de mediante la incorporacin de frameworks JavaScript muy utilizados, como jQuery, Prototype y Adobe Spry. Archivos relacionados y navegador de cdigo: permite administrar de manera eficiente los distintos archivos que conforman las pginas Web de hoy en da. Se puede pulsar Dreamweaver CS4. Captulo 1. Aspectos bsicos
8
sobre cualquier archivo relacionado para ver su cdigo fuente en la vista Cdigo y la pgina padre en la vista Diseo. La nueva funcin de Navegador de cdigo muestra todas las fuentes de cdigo que afectan a la seleccin, como reglas CSS (hojas de estilos en cascada), server-side includes, funciones JavaScript externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc. Edicin en Contexto: se puede permitir a los usuarios finales realizar modificaciones sencillas en nuestras pginas Web sin necesidad de recurrir al webmaster ni utilizar software adicional. El diseador puede limitar los cambios a pginas especficas, regiones determinadas e incluso opciones de formato personalizadas de manera rpida y sencilla. Prcticas recomendadas en relacin con CSS: El inspector de propiedades CS4 permite crear nuevas reglas CSS y ofrece explicaciones claras y sencillas del lugar que ocupa cada propiedad en la cascada de estilos. Conjuntos de datos HTML: se puede incorporar la potencia de los datos dinmicos a las pginas Web sin necesidad de invertir tiempo en el aprendizaje de bases de datos o de la codificacin XML (Extensible Markup Language: lenguaje de marcado extensible). Los conjuntos de datos de Spry reconocen el contenido de una tabla HTML sencilla como una fuente de datos interactiva. Nueva interfaz de usuario: podemos usar los diferentes componentes de Adobe Creative Suite 4 de forma ms rpida y racional con un diseo comn de interfaz de usuario y cambiar rpidamente entre entornos de trabajo con el conmutador de espacios de trabajo. Esta nueva versin CS4, adems de incorporar las novedades citadas anteriormente, ha dejado de usar funciones que s existan en versiones ms antiguas, concretamente las que se citan a continuacin: Lneas de tiempo Servicios Web Modo de diseo Vista Mapa del sitio Compatibilidad con Java Bean Elementos de Adobe Flash (Visor de imgenes) Texto de Adobe Flash y botones de Adobe Flash Comportamientos de servidor y juegos de registros ASP.NET y JSP Requisitos del sistema Hay una versin de Dreamweaver CS4 2004 para Windows y otra para Macintosh. Las caractersticas son: Para Windows o Procesador a 1 GHz o ms rpido o Microsoft Windows XP con Service Pack 2 (se recomienda Service Pack 3) o Windows Vista Home Premium, Business, Ultimate o Enterprise con Service Pack 1 (certificado para ediciones de Windows XP y Windows Vista de 32 bits) Dreamweaver CS4. Captulo 1. Aspectos bsicos
9
o 512 MB de RAM o 1 GB de espacio disponible en el disco duro para la instalacin; se necesita espacio libre adicional durante la instalacin (no se puede instalar en dispositivos de almacenamiento basados en Flash) o Pantalla de 1.280 x 800 con tarjeta de vdeo de 16 bits o Unidad de DVD-ROM o Conexin a Internet de banda ancha necesaria para los servicios en lnea Para Mac OS o Procesador PowerPC G5 o Intel multincleo o Mac OS X v10.4.1110.5.4 o 512 MB de RAM o 1,8 GB de espacio disponible en el disco duro para la instalacin; se necesita espacio libre adicional durante la instalacin (no se puede instalar en un volumen que utilice un sistema de distincin entre maysculas y minsculas en archivos o en dispositivos de almacenamiento basados en Flash) o Pantalla de 1.280 x 800 con tarjeta de vdeo de 16 bits o Unidad de DVD-ROM o Conexin a Internet de banda ancha necesaria para los servicios en lnea Instalacin Este programa lo podemos conseguir desde la propia pgina de Adobe, http://www.adobe.com/es/products/dreamweaver/?promoid=BPBIO, bien comprando el paquete o descargando una versin de prueba. La instalacin de este programa es muy sencilla, en el caso de que contemos con un CD fsico, pues la mayora de los sistemas detectan el CD ROM de forma automtica y se lanza el instalador de la aplicacin. Si tenemos desactivada esta opcin, hacemos doble clic en Mi PC (icono que se suele encontrar en el escritorio de nuestro sistema).
Figura 1.1. Icono de Mi PC en el escritorio Si no tuviramos el icono de Mi PC en el escritorio, tambin lo podemos localizar desde el men Inicio. Una vez abierta la ventana localizamos la unidad lectora de CD/DVD, hacemos doble clic para abrirla y seguidamente localizamos y ejecutamos con doble clic el fichero Instalador de Dreamweaver CS4.
Figura 1.2 Seleccionando el instalador de Dreamweaver CS4. Dreamweaver CS4. Captulo 1. Aspectos bsicos
10
Tambin lo podemos realizar desde la opcin Ejecutar, del men Inicio de Windows. Con el botn Examinar localizamos el fichero Instalador de Dreamweaver CS4, lo seleccionamos y hacemos clic en Aceptar para que comience el proceso de instalacin. Si nos descargamos la versin de prueba de la web de Adobe, una vez que accedemos a Descargas e iniciamos sesin como usuarios registrados en la misma, simplemente desplegamos Seleccionar para elegir idioma y Sistema Operativo y despus pulsamos en Descargar y seguimos los pasos que van apareciendo en pantalla referentes al proceso de descarga, seleccionando la ubicacin en nuestro equipo donde deseamos guardar los archivos de dicha descarga. A modo de ejemplo, en nuestro curso hemos seleccionado el Escritorio.
Figura 1.3. Descarga de la versin de prueba de la web de Adobe En cualquier caso, cuando lanzamos el instalador de Dreamweaver, el programa extrae los archivos que contiene y aparece la pantalla de bienvenida del instalador.
Figura 1.4. Bienvenida a la instalacin de CS4. Dreamweaver CS4. Captulo 1. Aspectos bsicos
11
Si tenemos un nmero de serie porque hemos comprado el producto podemos introducirlo en los campos pertinentes y una vez tecleado, automticamente aparecer el icono que indica que el nmero es vlido. En caso contrario, activaremos la casilla Deseo Instalar y usar Adobe Dreamweaver CS4 en evaluacin. Al hacer clic en el botn Siguiente, nos aparece el Contrato de licencia, que nos pide leer cuidadosamente y si estamos de acuerdo en sus trminos, hacemos clic en el botn Aceptar, para continuar el proceso de instalacin. Lgicamente si no estamos de acuerdo con el Contrato de licencia, el proceso de instalacin se detiene y se cierra el programa.
Figura 1.5. Trminos del contrato de licencia. Siguiendo con el proceso de instalacin, la siguiente ventana nos muestra las opciones de instalacin, la ubicacin donde se alojar la aplicacin y los idiomas de instalacin disponibles. Si queremos cambiar el destino de la ubicacin de instalacin, desde el botn Cambiar podemos modificar su ubicacin. Dreamweaver CS4. Captulo 1. Aspectos bsicos
12
Figura 1.6. Eligiendo las opciones de instalacin. Si estamos conformes con el destino que nos propone la instalacin del programa o si hemos modificado la ubicacin, con el idioma de la instalacin, as como con todas las opciones de instalacin marcadas, slo nos quedar pulsar en el botn Instalar y comenzar el progreso de instalacin, que podemos observar en pantalla. Dreamweaver CS4. Captulo 1. Aspectos bsicos
13
Figura 1.7. Progreso de instalacin. Cuando haya finalizado este proceso de instalacin, nos aparece una ltima ventana indicando que dicho proceso ha finalizado. Hacemos clic en Finalizar.
Figura 1.8. Finalizacin de la instalacin de Dreamweaver.
Dreamweaver CS4. Captulo 1. Aspectos bsicos
14
1.7. Consideraciones previas Una vez instalado Dreamweaver y antes de comenzar a trabajar vamos a reflexionar sobre unas recomendaciones previas. Puede que algunas de las siguientes consideraciones y reflexiones parezcan extraas, conforme vayamos avanzando en el curso iremos descubriendo el autntico sentido y la razn de ellas. La finalidad principal al disear una pgina Web es hacer que nuestra informacin llegue al usuario final. La forma como queremos presentar nuestra informacin es el principal objetivo del diseo. Una vez que tenemos clara la idea que deseamos hacer una pgina Web, lo primero que deberemos realizar es un boceto sobre el trabajo que vayamos a desarrollar. En el boceto debemos contemplar aspectos como el contenido, la distribucin, colores, etc. Seguidamente veremos unas recomendaciones para desarrollar este contenido con mayores garantas de xito. Adems del boceto, tambin deberemos crear en nuestro ordenador una carpeta donde ir almacenando todos los ficheros que se generen, con las carpetas y subcarpetas necesarias para los distintos tipos de ficheros que componen la Web: imgenes, sonidos, textos, etc. La creacin de esta carpeta no significa que todo lo que almacenemos en ella, necesariamente lo debamos alojar en Internet. Los contenidos definitivos que alojaremos en Internet y que se podrn ver con un navegador desde cualquier lugar del mundo sern los que constituyan nuestro Sitio local. La creacin del Sitio local la veremos en un captulo posterior. Una vez que tenemos clara estas ideas principales, debemos tener presente algunas consideraciones: Los contenidos Es la parte ms importante de la Web. Debemos tener presente el tipo de contenidos que vamos a presentar y a quien va dirigido. No es lo mismo presentar contenidos para publicitar una empresa de venta de productos para la oficina o similar que presentar contenidos para un estudiante de una carrera universitaria. Estructurar la informacin Teniendo en cuenta el punto anterior, debemos recordar que para realizar la pgina Web utilizamos hipertexto y esto nos va a permitir desplazarnos con un simple clic del ratn. Necesitaremos tener una estructura de nuestra Web de forma que el usuario est perfectamente orientado en todo momento y encuentre una relacin lgica entre el conjunto de pginas de nuestro sitio con la que se encuentra visitando. La inclusin de ndices y la creacin de botones de navegacin facilitarn esta tarea. Configuracin del documento El documento que hemos generado, se ver por el usuario en la pantalla de su ordenador, pero no todos los monitores soportan la misma resolucin. Deberemos tener la precaucin de Dreamweaver CS4. Captulo 1. Aspectos bsicos
15
comprobar nuestro documento en distintas pantallas, con distintas resoluciones, pues no es lo mismo una pantalla de un monitor de 14 con una resolucin 800 x 600 pxeles que un monitor de 19 y resolucin 1280 x 1024 pxeles. Deberemos conseguir encontrar el equilibrio para que la informacin ms relevante aparezca nada ms acceder a nuestra Web. Longitud de las pginas Las pginas deben ser lo ms claras y cortas posibles. Deberemos tener la precaucin de no sobrepasar la longitud de una pgina ms all de 4 pantallas, pues corremos el riesgo de que el usuario se canse y llegue a aburrirse de ver pasar mucha informacin delante de sus ojos. Para conseguir esto, podemos dividir su contenido en varias pginas, adems de ayudarnos de un ndice de contenidos al principio del documento con enlaces a cada una de sus partes. Los enlaces Los enlaces que vamos a insertar en nuestra Web deben tener un nombre significativo y a ser posible con la misma informacin que el ttulo del documento al que accede. Debemos considerar que a veces una sola palabra enlazada puede perder significado, lo mismo puede ocurrir si creamos un enlace de una frase completa. Los enlaces externos a nuestra Web, deberemos revisarlos peridicamente por si cambian de direccin URL y pierden su operatividad. Es muy recomendable no cambiar los colores estndar de los enlaces, as como evitar el uso de estos colores en partes del texto que no estn enlazadas. Evitaremos confusin entre los visitantes a nuestra Web. La tipografa No debemos perder la idea que al escribir nuestro documento, ste ser visualizado en la pantalla de un ordenador, para ello el tipo de letra no deber ser muy grande para evitar que las pginas sean excesivamente largas, pero a la vez que no sea muy pequea que genere problemas de lectura. Podemos facilitar la lectura de nuestro documento con una buena estructuracin del mismo, utilizando ttulos en cada seccin, creando pequeos prrafos con lneas no muy extensas y procurando que las fuentes sean soportadas por los distintos navegadores y plataformas existentes. Si queremos insertar alguna fuente especial para algn logotipo o similar, deberemos convertirlo en imagen para asegurar su correcta visualizacin. Adems de lo anterior, tambin deberemos cuidar no usar excesivamente las maysculas, las negritas, cursivas, ni mucho menos el subrayado, pues este elemento es utilizado para indicar un enlace. Para resaltar alguna parte del texto, podemos cambiar el color de la fuente o bien realizar un sangrado sobre el prrafo que deseamos destacar, adems de poder utilizar un color de fondo de prrafo. El uso de efectos especiales en los prrafos, como puede ser el texto parpadeante, no es aconsejable utilizarlo pues puede llegar a ser molesto, adems que no facilita su lectura. Dreamweaver CS4. Captulo 1. Aspectos bsicos
16
Si es interesante combinar el texto con imgenes para hacer ms amena su lectura, pero teniendo la precaucin que las imgenes sean pequeas y acordes al texto. Las imgenes Al crear nuestra Web deberemos valorar la insercin de imgenes en nuestra pgina, pues pueden llegar a tardar bastante tiempo en cargarse en un navegador, sobre todo dependiendo del tipo de conexin utilizado por el usuario. Para que la pgina se considere rpida en su carga, no debemos sobrepasar un tamao superior a los 50 Kb. Teniendo en cuenta esto y sabiendo que cuanto mayor calidad tiene una imagen, mayor tamao ocupa, deberemos encontrar un equilibrio entre la calidad y el tamao. Para modificar el tamao de una imagen, deberemos hacerlo desde un programa especfico y lo conseguiremos cambiando el tamao de la misma o bien reduciendo su calidad. Un procedimiento muy utilizado, cuando es importante la calidad de la imagen, es utilizar una pequea imagen, tipo icono, informando de las caractersticas de la imagen real y con un enlace a la misma, de forma que el usuario que est interesado en verla con detalles, puedan acceder voluntariamente a ello. Los colores Debemos procurar utilizar con armona los colores de nuestra pgina, de tal forma que sobre un fondo claro pongamos texto oscuro, que sera la opcin ms recomendada. Tambin se debe utilizar sobre fondos oscuros el texto de color claro, pero esto no es muy recomendable para aquellas pginas que el texto sea dominante. Si debemos procurar no utilizar colores estridentes ni combinaciones que dificulten la legibilidad del texto. Si utilizamos una imagen como fondo de nuestra pgina Web, deberemos tener los mismos criterios anteriores. Los marcos La divisin de la pgina en marcos, nos ayuda a distribuir mejor los contenidos de la misma, pero debemos utilizarlos con cautela ya que no todos los navegadores soportan marcos, adems reducen considerablemente el espacio til de visualizacin de la informacin. De todas formas, si decidimos su uso, deberemos tener la precaucin de evitar la rigidez de los marcos, as como el abuso de los mismos. Si hacemos algn enlace externo a nuestra Web, deberemos procurar que se carguen en una pgina nueva, de esta forma se respeta su estilo as como aspectos ms negativos si adems la pgina enlazada tiene a su vez otros marcos. Los navegadores Es importante saber que en el mercado existen diferentes navegadores con diferencias notables entre ellos. Aunque bsicamente los estndares del formato HTML son respetados por todos, la inclusin de nuevos elementos puede que sean soportados por unos y no por otros. Por esto, cuanto ms simple sea nuestra pgina, ms posibilidades tendremos que sea visualizada por mayor nmero de navegadores.
Dreamweaver CS4. Captulo 1. Aspectos bsicos
17
Los nombres Deberemos tener especial cuidado a la hora de poner nombre a nuestros ficheros. Existen en el mercado distintos sistemas operativos que distinguen las maysculas y las minsculas, as como las extensiones de los ficheros. Puede que, si estamos trabajando en Windows, no tengamos mucha dificultad en ver las pginas y acceder a los enlaces de la misma, pero para otros sistemas operativos no es lo mismo los siguientes nombres: fichero, Fichero, FICHERO. Tampoco es lo mismo si ponemos la extensin htm que html. Deberemos evitar poner en los nombres de los ficheros caracteres especiales como , , /, , etc., tampoco dejaremos espacios en blanco y no utilizaremos las tildes. Como norma general sera poner el nombre en minsculas y seguir un criterio uniforme para la extensin de los ficheros, por ejemplo foto0001.jpg, inicio.html, pagina_primera.html. Otros ficheros A veces tenemos la necesidad de alojar en nuestro servidor ficheros distintos a los utilizados de forma genrica en el diseo Web, como por ejemplo ficheros doc, pdf, zip, etc. En este caso, los enlaces funcionan exactamente igual, lanzando la aplicacin asociada a cada tipo de archivo. No obstante, tambin puede dar la opcin de poder guardar este fichero en modo local en nuestro ordenador. Este tipo de ficheros es interesante utilizarlos siempre que tengamos la certeza que nuestros usuarios disponen de forma genrica el programa asociado a los mismos, en caso contrario, lo mejor sera transformarlos a formato HTML y alojarlos como una pgina ms de la Web. La difusin Poner nuestra Web en un servidor no significa que llegue a todos los usuarios potenciales. Necesitamos difundir nuestra pgina de forma que los usuarios al utilizar los motores de bsqueda, la encuentren fcilmente. Para ello deberemos poner claramente el ttulo del documento, introducir algunas palabras claves en la etiqueta <meta>, describir lo ms significativamente el contenido de la Web en las primeras lneas de la pgina y darnos de alta en los motores de bsqueda que podamos. La actualizacin Una de las principales caractersticas de las Web es la posibilidad de actualizar la informacin en un instante. Generalmente un pgina web tiene un trabajo de actualizacin que no termina nunca, se debe evitar a toda costa que la informacin caduque y de esta forma nuestra pgina pierda inters por obsoleta. Es muy recomendable indicar en la pgina la fecha de la ltima modificacin para que el usuario est informado de la puesta al da de la misma. Los accesos Por ltimo, no debemos olvidar nunca que nuestra pgina Web va a llegar al usuario a travs de una red de comunicaciones, que no siempre es tan rpida como deseramos. Debemos cuidar que el tamao de las pginas no sea excesivamente grande (50 Kb) as como facilitar el acceso a la informacin, para que no se convierta en un tarea llena de esperas a que se cargue una pgina tras otra hasta llegar donde realmente queremos.
18
Captulo 2
Entorno de Trabajo
Dreamweaver CS4. Captulo 2. Entorno de Trabajo
19
Captulo 2. ENTORNO DE TRABAJO 2.1. Inicio Al iniciar Dreamweaver aparece la siguiente ventana:
Figura 2.1. Pgina de inicio al abrir Dreamweaver. En ella puedes llevar a cabo varias acciones. Abrir un elemento reciente que hayas guardado en tu equipo previamente Crear nuevos documentos de diversos tipos: html, ColdFusion, PHP, ASP VbScript, XSLT, CSS, JavaScript, XML Crear un sitio web nuevo Obtener ms tipos de documentos a crear si pulsas en el icono Ms para abrir el siguiente cuadro de dilogo: Dreamweaver CS4. Captulo 2. Entorno de trabajo
20
Figura 2.2. Cuadro de dilogo Nuevo Documento o Navegar por Elementos Destacados, que te llevarn a vdeos explicativos en ingls disponibles desde la web de Adobe TV. o Visitar vnculos en los que se explica cmo empezar a trabajar, las novedades y recursos de la versin as como acceder al Exchange de Dreamweaver en el que se pueden intercambiar diversos extras para el programa o Desactivar la pgina de inicio para que no vuelva a aparecer cuando abramos el programa de nuevo. Si ms adelante deseas que se vuelva a mostrar debes hacer lo siguiente: o En el men Edicin, ejecuta el comando Preferencias. Tambin lo puedes hacer con Ctrl+U. Dreamweaver CS4. Captulo 2. Entorno de trabajo
21
Figura 2.3. Seleccionando preferencias. o Selecciona General en el cuadro Categora. o Activa la casilla Mostrar pantalla de bienvenida. o Haz clic en Aceptar.
Dreamweaver CS4. Captulo 2. Entorno de trabajo
22
Figura 2.4. Activando mostrar pantalla de bienvenida. 2.2. Espacio de trabajo El espacio de trabajo en Dreamweaver CS4 es un espacio integrado en una nica ventana.
Figura 2.5. Espacio de trabajo. Todos los elementos se pueden cerrar, abrir y cambiar de posicin para facilitar el trabajo. Veamos la utilidad de los mismos. Dreamweaver CS4. Captulo 2. Entorno de trabajo
23
Ventana de Documento Muestra el documento actual mientras se est creando y editando. 2.3. Barras Barra de Aplicacin A lo largo de su parte superior, la ventana de la aplicacin contiene un conmutador de espacios de trabajo, mens (slo Windows) y otros controles de aplicacin
Figura 2.6. Barra de aplicacin. Barra de Mens Nos permiten acceder a todos los comandos que se utilizan en la aplicacin, agrupados en mens desplegables. Algunas de las operaciones que podemos hacer desde estos mens es preferible hacerlas desde los paneles.
Figura 2.7. Mens El men Archivo contiene comandos para abrir, cerrar, guardar, importar y exportar archivos, compartir la pantalla, imprimir cdigo, entre otros. Tambin contiene otros comandos para la visualizacin, comprobacin o manipulacin del documento actual. El men Edicin incluye los comandos Deshacer, Rehacer, Cortar, Copiar, Pegar, Seleccionar, Buscar, Reemplazar, comandos de manipulacin del Cdigo, Editar con un editor externo, Bibliotecas de etiquetas, adems del comando Preferencias. El men Ver selecciona las vistas de trabajo del documento (vistas diseo y/o cdigo). Muestra y oculta diversos tipos de elementos de pgina y herramientas de Dreamweaver. El men Insertar se corresponde con la Barra Insertar. Desde este men tambin puedes insertar objetos en el documento. El men Modificar te permite cambiar las propiedades de los objetos seleccionados. Puedes editar los atributos de etiquetas, cambiar las tablas y realizar diversas operaciones relacionadas con elementos de bibliotecas y plantillas. El men Formato da acceso a las propiedades del tratamiento de texto. Tambin se puede acceder a ellas a travs del Inspector de Propiedades de un texto previamente seleccionado. El men Comandos te ofrece tiles comandos, como limpiar cdigos HTML y XHTML, ordenar una tabla, extraer javascript, crear un albm de fotos web, etc. Dreamweaver CS4. Captulo 2. Entorno de trabajo
24
El men Sitio ofrece elementos para administrar un sitio Web, colocar, localizar, proteger y desproteger archivos. El men Ventana proporciona acceso a todos los paneles, inspectores y ventanas de Dreamweaver. El men Ayuda contiene accesos a la documentacin, foros y asistencia en lnea de Dreamweaver as como la posibilidad de registrar el software, acceder al Exchange, administrar extensiones, etc. Adems de los mens, Dreamweaver proporciona mens contextuales, de acceso sencillo a tiles comandos relacionados con la seleccin o el rea que se est trabajando. A medida que avancemos en el aprendizaje de Dreamweaver, iremos explicando cmo utilizarlos. Barra Insertar Esta barra contiene botones para la insercin de diversos tipos de elementos comunes de pginas Web. Como esta Barra contiene numerosos elementos se ha dividido en varias categoras. Por defecto se visualizan como fichas
Figura 2.8. Barra Insertar en modo fichas. Categora Comn. y la primera pertenece a la categora Comn; si deseamos ver las categoras como un men, simplemente tendramos que seleccionar una ficha, y con el botn derecho del ratn, pulsar en Mostrar como men para cambiar el modo de vista.
Figura 2.9. Barra Insertar en modo men. Categora Comn. Las categoras que te puedes encontrar en la Barra Insertar son: La categora Comn permite crear e insertar los objetos que se utilizan con ms frecuencia, como vnculos, vnculo a correo electrnico, anclajes, regla horizontal, tablas, imgenes y diversos medios, plantillas, etiquetas, scripts. o La categora Diseo permite insertar tablas, etiquetas div, Div Pas (capas) y marcos. Tambin puede elegir entre dos vistas de las tablas: Estndar (valor predeterminado), y Ampliada.
Figura 2.10. Barra Insertar en modo men. Categora Diseo. Dreamweaver CS4. Captulo 2. Entorno de trabajo
25
o La categora Formularios contiene botones que permiten crear formularios e insertar elementos de formulario.
Figura 2.11. Barra Insertar en modo men. Categora Formularios. o La categora Datos permite importar datos de tabla, insertar y manipular registros, y la autenticacin de usuarios entre otras funciones.
Figura 2.12. Barra Insertar en modo men. Categora Datos. o La categora Spry permite insertar y manipular datos de Spry. Spry es un nuevo framework de Ajax, unas libreras Javascript para diseadores, que no requiere ms que conocimientos bsicos de HTML, CSS y Javascript.
Figura 2.13. Barra Insertar en modo men. Categora Spry.
o La categora InContext Editing permite la edicin en contexto, por ejemplo administrando clases CSS.
Figura 2.14. Barra Insertar en modo men. Categora InContext Editing.
o La categora Texto permite insertar diversas etiquetas de formato de texto.
Figura 2.15. Barra Insertar en modo men. Categora Texto. o La categora Favoritos permite agrupar y organizar los botones de la Barra Insertar que utilizamos con ms frecuencia en un lugar comn.
Figura 2.16. Barra Insertar en modo men. Categora Favoritos. Sobre esta barra podemos hacer clic con el botn derecho y nos aparece un cuadro de dilogo . Dreamweaver CS4. Captulo 2. Entorno de trabajo
26
Al seleccionar Personalizar favoritos.., nos aparece un nuevo cuadro de dilogo con todas las categoras y objetos disponibles de la Barra Insertar. Desde aqu podemos aadir aquellos objetos que ms utilicemos al disear nuestra Web y as crear nuestra barra personalizada.
Figura 2.17. Personalizar objetos favoritos. o La categora Iconos de Colores nos permite ver los iconos en color si est actividad, o en blanco y negro si la desactivamos.
o La categora Mostrar como fichas nos presentar todas las categoras de la Barra Insertar como fichas, tal y como veamos en la Figura 2.8.
Para insertar cualquiera de los objetos de las categoras de la Barra Insertar podemos hacerlo de varias formas:
Arrastrando directamente el objeto desde la categora correspondiente de la Barra Insertar hasta la ventana del documento.
Haciendo clic sobre el botn del objeto y ste se insertar en el lugar donde se encuentre el cursor.
Desde el men Insertar.
Barra de Herramientas Documento
Contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento (como la vista Diseo y la vista Cdigo), diversas opciones de visualizacin y algunas operaciones comunes como la obtencin de una vista previa en un navegador. Dreamweaver CS4. Captulo 2. Entorno de trabajo
27
Figura 2.18. Barra de herramientas Documento.
Nombre del fichero: ttulo del fichero con que hemos guardado nuestro documento en el disco duro.
Mostrar vista de cdigo: presenta nuestro documento en cdigo fuente de HTML.
Mostrar vistas de cdigo y diseo: divide la ventana del documento presentando el cdigo fuente en la parte superior y el diseo en la parte inferior.
Mostrar vista de diseo: presenta el documento con los objetos en modo grfico, tal como lo vamos diseando.
Cambiar de la vista de diseo a la vista en vivo: La vista en vivo, similar a la vista diseo, muestra una representacin ms realista de la apariencia que tendr el documento en un navegador y permite interactuar con el documento de la misma forma que lo haramos en un navegador. La vista en vivo no es editable. No obstante, se pueden realizar modificaciones en la vista cdigo y actualizar la vista en vivo para ver los cambios.
Cdigo en vivo: Slo est disponible al visualizar un documento en la vista en vivo. La vista cdigo en vivo muestra el cdigo que un navegador utiliza para ejecutar la pgina y cambia dinmicamente conforme se interacta con la pgina en la vista en vivo. La vista cdigo en vivo no es editable.
Ttulo de la pgina: ttulo que le hemos puesto a nuestro documento y est contenido dentro del cdigo HTML de la misma.
Administracin de archivos: a travs de diversos comandos podremos obtener, proteger, colocar, etc. el archivo activo en la ventana.
Vista previa: podemos visualizar el documento en diversos navegadores.
Actualizar vista diseo: actualiza el documento en vista diseo despus de haber efectuado cambios en la vista de cdigos.
Ver opciones: podemos definir las opciones de las vistas de cdigo y diseo. Estas opciones estn en funcin de la vista activa.
Ayudas visuales: permite utilizar distintas ayudas visuales para el diseo de las pginas.
Validar formato: permite validar el documento actual o una etiqueta seleccionada.
Dreamweaver CS4. Captulo 2. Entorno de trabajo
28
Comprobar compatibilidad con navegadores: permite comprobar si el CSS es compatible con diferentes navegadores.
Barra de Herramientas Estndar
(No se muestra en el diseo de espacio de trabajo predeterminado.) Contiene botones para las operaciones ms habituales de los mens Archivo y Edicin: Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar todo, Imprimir cdigo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estndar, seleccionamos Ver > Barras de herramientas > Estndar.
Figura 2.19. Seleccionar barra de herramientas Estndar desde men Ver.
Una vez seleccionada, sta nos aparece debajo de la Barra de herramientas Documento con sus correspondientes botones, que se utilizan igual que los comandos de men equivalentes.
Figura 2.20. Barra de Herramientas Estndar.
Barra de Estado La barra de estado, situada en la parte inferior de la ventana del documento, proporciona informacin adicional sobre el documento que est creando.
Figura 2.21. Barra de Estado.
o El selector de etiquetas permite un fcil acceso a las etiquetas HTML de cualquier objeto del Documento.
o La herramienta seleccionar activa y desactiva la herramienta Mano.
Dreamweaver CS4. Captulo 2. Entorno de trabajo
29
o La herramienta mano permite hacer clic en el documento y arrastrarlo por la ventana de documento.
o La herramienta zoom y el men emergente establecer nivel de aumento permiten establecer un nivel de aumento para el documento.
El men emergente tamao de ventana (no disponible en la vista cdigo) permite cambiar el tamao de la ventana de documento a dimensiones predeterminadas o personalizadas.
Figura 2.22. Men emergente Tamao de ventana.
Una vez que editemos los tamaos, se nos abrir el cuadro de dilogo Preferencias con la Categora Barra de estado seleccionada, con los distintos Tamaos de ventana y la posibilidad de modificar la velocidad de conexin.
Figura 2.23. Preferencias Barra de estado. Dreamweaver CS4. Captulo 2. Entorno de trabajo
30
Los tamaos disponibles en el men, indican la dimensin estndar de los navegadores ms conocidos y su resolucin entre parntesis.
Tamao del documento y tiempo de descarga: muestra la estimacin del tamao del documento y del tiempo de descarga de la pgina, incluidos todos los archivos dependientes, como imgenes y otros archivos multimedia. Depende de la velocidad de conexin que hayamos configurado en la ventana anterior.
El indicador de codificacin muestra la codificacin del texto del documento actual. Barra de Herramientas Codificacin La barra de herramientas Codificacin contiene botones que permiten realizar numerosas operaciones de codificacin estndar, como ampliar y contraer las selecciones de cdigo, resaltar cdigo no vlido, insertar o eliminar comentarios, aplicar sangra al cdigo e insertar fragmentos de cdigo utilizados recientemente. La barra de herramientas Codificacin aparece verticalmente en la parte izquierda de la ventana de documento y slo est visible cuando se muestra la vista Cdigo.
Figura 2.24. Barra de herramientas Codificacin. Dreamweaver CS4. Captulo 2. Entorno de trabajo
31
No se puede mover la barra de herramientas Codificacin, pero s se puede ocultar desde el men Ver > Barras de herramientas > Programacin.
Figura 2.25. Ocultar o mostrar barra de herramientas Codificacin desde el men Ver. Tambin se puede modificar la barra de herramientas Codificacin para que muestre ms botones, como Ajustar texto, Caracteres ocultos y Sangra automtica, u ocultar botones que no deseamos utilizar. Para ello, no obstante, deberemos editar el archivo XML que genera la barra de herramientas. Barra de Herramientas Representacin de Estilos La barra de herramientas Representacin de estilos (oculta de manera predeterminada) contiene botones que permiten ver cmo aparecera el diseo en distintos tipos de medios si se utilizasen hojas de estilos dependientes de los medios. Tambin contiene un botn con el que es posible activar o desactivar los estilos CSS. Para mostrar esta barra de herramientas, seleccionamos Ver > Barras de herramientas > Representacin de estilos.
Figura 2.26. Seleccionar barra de herramientas Representacin de estilos desde el men Ver.
Figura 2.27. Barra de herramientas Representacin de estilos. Esta barra de herramientas slo funciona si los documentos utilizan hojas de estilos dependientes de los medios. Por ejemplo, una hoja de estilos puede especificar una regla para imprimir y otra regla distinta para los dispositivos de mano. De manera predeterminada, Dreamweaver muestra el diseo para una pantalla (que muestra cmo se representa una pgina en la pantalla del equipo). Podemos ver las representaciones para los diferentes soportes haciendo clic en los correspondientes botones de la barra de herramientas Representacin de estilos. Representar tipo de medio Screen muestra cmo aparece la pgina en la pantalla de un equipo.
Representar tipo de medio Print muestra cmo aparece la pgina en una hoja de papel impresa. Dreamweaver CS4. Captulo 2. Entorno de trabajo
32
Representar tipo de medio Handheld muestra cmo aparece la pgina en un dispositivo de mano, como un telfono mvil o un dispositivo BlackBerry.
Representar tipo de medio Projection muestra cmo aparece la pgina en un dispositivo de proyeccin.
Representar tipo de medio TTY muestra cmo aparece la pgina en un teletipo.
Representar tipo de medio TV muestra cmo aparece la pgina en la pantalla de televisin.
Alternar visualizacin de estilos CSS permite activar o desactivar estilos CSS. Este botn funciona de manera independiente a los dems botones de medios.
Hojas de estilos de tiempo de diseo permite especificar una hoja de estilos de tiempo de diseo.
2.4. El inspector de propiedades El inspector de propiedades nos permite examinar y editar las propiedades ms comunes del elemento de pgina seleccionado, como texto o un objeto insertado. El contenido del inspector de propiedades es distinto en funcin del elemento seleccionado. Por ejemplo, si selecciona una imagen de la pgina, el inspector de propiedades cambiar para mostrar las propiedades de la imagen como por ejemplo, la ruta de archivo de la imagen, las dimensiones de la imagen, o el borde que rodea la imagen en caso de que lo haya. El inspector de propiedades se encuentra, de manera predeterminada, en el borde inferior del espacio de trabajo, aunque se puede desacoplar y convertir en un panel flotante en el espacio de trabajo.
Figura 2.28. Inspector de propiedades.
2.5. Paneles Grupos de Paneles
Los Paneles son ventanas flotantes parecidas a las Barras de Herramientas. Los Grupos de Paneles son conjuntos de paneles relacionados, apilados bajo un encabezado comn. Dreamweaver CS4. Captulo 2. Entorno de trabajo
33
Figura 2.29. Ejemplo de Grupo de Paneles expandido.
Estos grupos se pueden expandir en paneles o contraer en iconos haciendo clic en el Botn Expandir en paneles/Contraer en iconos . Cuando un Grupo de Paneles est expandido, los Paneles que lo componen aparecen en forma de ficha con su nombre indicado en la solapa, tal y como vemos en la Figura 2.29. Si los contraemos en iconos, su aspecto ser similar al ejemplo de la Figura 2.30.
Dreamweaver CS4. Captulo 2. Entorno de trabajo
34
Figura 2.30. Ejemplo de Grupo de Paneles contrado.
Desde el Botn Opciones o haciendo clic con el botn derecho sobre la ficha de un panel, podemos cerrarlo, cerrar el grupo al que pertenece, contraerlo, mostrar las preferencias de paneles, y llevar a cabo otras acciones relacionadas especficamente con cada panel. Los Paneles, generalmente se presentan acoplados en Grupos, pero se pueden desacoplar e incluso convertirlos en paneles flotantes, simplemente pulsando sobre la ficha del panel y arrastrndolo hasta la posicin en la que deseemos tenerlo, ya sea en la ventana de documento o en un grupo de paneles distinto al que pertenezca por defecto, o dentro de su grupo pero en un orden diferente. Los Grupos de Paneles se pueden cerrar desde Opciones seleccionando Cerrar grupo de fichas. Para volver a abrirlos hay que hacerlo desde el men Ventana. Si queremos ocultar todos los Grupos de Paneles basta con pulsar la tecla F4. Para volver a mostrar todos los paneles pulsamos de nuevo la tecla F4. Panel Archivos Nos detenemos en este panel, ya que es el que permite ver y administrar los archivos de un sitio web en Dreamweaver, tema del que nos ocuparemos en el prximo captulo. Dreamweaver CS4. Captulo 2. Entorno de trabajo
35
Figura 2.31. Panel Archivos contrado. Al visualizar sitios, archivos o carpetas en el panel Archivos, se puede cambiar el tamao del rea de visualizacin y expandir o contraer el panel Archivos. Cuando el panel Archivos se contrae, muestra el contenido del sitio local, el sitio remoto, el servidor de prueba o el depsito SVN como una lista de archivos. Cuando est ampliado, adems del sitio local, muestra el sitio remoto o el servidor de prueba o el depsito SVN. Dreamweaver CS4. Captulo 2. Entorno de trabajo
36
Figura 2.32. Panel Archivos ampliado. Para sitios de Dreamweaver, tambin puede personalizar el panel Archivos cambiando la vista (sitio local o sitio remoto) que aparece de forma predeterminada en el panel contrado. Panel Estilos CSS El panel Estilos CSS permite supervisar las reglas y propiedades CSS que afectan a un elemento de pgina actualmente seleccionado (modo Actual) o las reglas y propiedades que afectan a todo un documento (modo Todo). Un botn situado en la parte superior del panel Estilos CSS permite cambiar entre estos dos modos. El panel Estilos CSS tambin permite modificar propiedades CSS tanto en modo Todo como en modo Actual. Dreamweaver CS4. Captulo 2. Entorno de trabajo
37
Figura 2.33. Panel Estilos CSS. Podemos cambiar el tamao de cualquiera de los paneles arrastrando los bordes que los separan. En modo Actual, el panel Estilos CSS muestra tres secciones: un resumen del panel Seleccin que muestra las propiedades de CSS de la seleccin actual del documento, un panel Reglas que muestra la ubicacin de Dreamweaver CS4. Captulo 2. Entorno de trabajo
38
las propiedades seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en funcin de la seleccin) y un panel Propiedades que permite editar las propiedades CSS al definir reglas para la seleccin. En modo Todo, el panel Estilos CSS muestra tres secciones: un panel Todas las reglas arriba y un panel Propiedades abajo. El panel Todas las reglas muestra una lista de reglas definidas en el documento actual, as como las reglas definidas en las hojas de estilo adjuntas al documento actual. El panel Propiedades permite editar propiedades CSS para cualquier regla seleccionada en el panel Todas las reglas. Todos los cambios que realicemos en el panel Propiedades se aplican de forma inmediata; de este modo, se puede previsualizar el trabajo a medida que lo vayamos llevando a cabo. 2.6. Vistas Para un mismo documento, Dreamweaver presenta cuatro vistas distintas. Podemos pasar de una vista a otra utilizando los botones de la barra de herramientas o utilizando el comando correspondiente del men Ver. Vista Diseo Esta vista permite trabajar con el documento de forma grfica, similar a la que aparece en el navegador.
Figura 2.34. Trabajar en vista diseo. Dreamweaver CS4. Captulo 2. Entorno de trabajo
39
Como ayuda visual para dibujar, ubicar o cambiar el tamao de los elementos en la vista de diseo de la ventana de documento podemos utilizar las ayudas visuales, reglas, guas y cuadrculas que nos ofrece Dreamweaver desde el men Ver. En el caso de las reglas, para activarlas y desactivarlas seleccionamos Ver > Reglas > Mostrar. Tambin podemos activar o desactivar las reglas con Ctrl+Alt+R.
Figura 2.35. Mostrar reglas desde el men Ver. En este men tambin podemos cambiar la unidad de medida de las reglas: en Pxeles, Pulgadas o Centmetros, seleccionando la opcin que nos interese. Si nos interesa podemos cambiar el origen de la regla arrastrando a cualquier parte de la ventana de Documento el icono de origen de la regla. Para restablecer su origen seleccionamos Ver > Reglas > Restablecer origen.
Figura 2.36. Cambiar origen de la regla. En lo referente a la cuadrcula, para activarla y desactivarla seleccionamos Ver > Cuadrcula > Mostrar cuadrcula. Tambin la podemos activar o desactivar con Ctrl+Alt+G.
Dreamweaver CS4. Captulo 2. Entorno de trabajo
40
Figura 2.37. Seleccionar mostrar cuadrcula desde el men Ver. Si queremos activar o desactivar que los elementos de la pgina se ajusten automticamente a la cuadrcula cuando se muevan, seleccionamos Ver > Cuadrcula > Ajustar a cuadrcula. Tambin podemos activar o desactivar el ajuste automtico a la cuadrcula con Ctrl+Alt+Mays+G. El ajuste funciona independientemente de si la cuadrcula se encuentra o no visible. Para cambiar la configuracin de la cuadrcula deberemos seleccionar Ver > Cuadrcula > Configuracin de cuadrcula.
Figura 2.38. Configuracin de la cuadrcula. En la Configuracin de la cuadrcula podemos seleccionar, adems de Mostrar cuadrcula o Ajustar a cuadrcula, el Color que deseamos que tenga, as como el Espaciado y si se muestra como Lneas o Puntos. Vista Cdigo Esta vista presenta el documento con el cdigo HTML y se utiliza para trabajar en un entorno de programacin. No permite tener una referencia de cmo va quedando el Documento segn se va modificando. Dreamweaver CS4. Captulo 2. Entorno de trabajo
41
Figura 2.39. Vista Cdigo. Dividir Vista Cdigo y Diseo Es una vista donde la pantalla aparece dividida. En la parte superior de la ventana del documento presenta el cdigo HTML y en la inferior presenta el modo grfico. En la ventana del Documento del modo grfico se puede mostrar las Reglas y Cuadrculas al igual que en la Vista Diseo. Dreamweaver CS4. Captulo 2. Entorno de trabajo
42
Figura 2.40. Vista dividida de Cdigo y Diseo. Vista en vivo Nos muestra una presentacin preliminar del aspecto que tendra la pgina en la que estamos trabajando en un navegador.
Figura 2.41. Vista en vivo. Dreamweaver CS4. Captulo 2. Entorno de trabajo
43
Vista Cdigo en vivo Slo est disponible con la vista en vivo activada. Muestra en la parte superior de la pantalla el origen de la vista en vivo en la vista cdigo, y en la parte inferior, la propia vista en vivo.
Figura 2.42. Vista cdigo en vivo. 2.7. Gestionar el espacio de trabajo Puedes crear un espacio de trabajo personalizado moviendo y manipulando paneles y ventanas Documento. Tambin puedes guardar espacios de trabajo y pasar de uno a otro. Desde la barra de aplicaciones, podemos desplegar las diferentes vistas del espacio de trabajo y seleccionar la que ms nos convenga, dependiendo de si tenemos un papel de diseador, programador, etc., o de si queremos administrar nuestro propio espacio y personalizarlo.
Figura 2.43. Desplegando tipos de espacio de trabajo. Dreamweaver CS4. Captulo 2. Entorno de trabajo
44
El espacio de trabajo de Diseador es un espacio de trabajo en el que todas las ventanas de documentos y todos los paneles estn integrados en una ventana de aplicacin de mayor tamao. Este diseo es el recomendado para la mayora de usuarios y el que vamos a utilizar en este curso.
45
Captulo 3. Definicin de un sitio web
Dreamweaver CS4. Captulo 3. Definicin de un sitio web
46
Captulo 3. DEFINICIN DE UN SITIO WEB 3.1. Conceptos Las pginas Web estn formadas por elementos como imgenes, sonidos, animaciones, etc. La organizacin de estas pginas con sus elementos, en conjunto, forman un Sitio Web. Un sitio local es un sitio Web creado en nuestro ordenador. Generalmente, el sitio local est formado por una carpeta con distintas subcarpetas que contienen los elementos de las pginas Web. As tendramos una carpeta para las imgenes, otra para los sonidos, otra para las animaciones, etc., creando tantas carpetas como sean necesarias con el fin de organizar lo mejor posible los archivos.
RECOMENDACIN. Cuando crees tu sitio Web, puedes crear tantas carpetas y subcarpetas como consideres oportuno para tener los archivos perfectamente clasificados.
Este sitio local sirve como lugar de trabajo, de prueba, hasta lograr que las pginas muestren lo que deseamos, antes de colocarlas en el sitio remoto. Un sitio remoto es un sitio en el servidor Web y tiene la misma estructura que el sitio local. La forma ms sencilla de trabajar consiste en elaborar las pginas Web en el sitio local y despus alojarlas en el sitio remoto. A este alojo se le denomina publicar el sitio y con esto conseguimos que pueda ser visto desde Internet. Una vez publicado un sitio podemos hacer actualizaciones de forma automtica con Dreamweaver. 3.2. Definir un sitio Web Definir un sitio En Dreamweaver podemos crear y definir un sitio local de varias formas. Desde el men Sitio, podemos seleccionar la opcin Nuevo sitio para crear uno nuevo, o Administrar sitios para manipular alguno ya creado previamente.
Figura 3.1. Men Sitio. Dreamweaver CS4. Captulo 3. Definicin de un sitio web
47
o Desde la pgina de inicio, seleccionando Crear nuevo> Sitio de Dreamweaver.
Figura 3.2. Crear nuevo Sitio de Dreamweaver desde pgina de inicio.
o Desde la barra de aplicacin, desplegando el icono Sitio.
Figura 3.3. Crear o administrar sitio desde la barra de aplicacin. o Desde el panel Archivos, en la pestaa Archivos, seleccionamos Administrar sitios.
Dreamweaver CS4. Captulo 3. Definicin de un sitio web
48
Figura 3.4. Administrar sitios desde el panel Archivos.
Al pulsar en esta ltima opcin, se abre el cuadro de dilogo Administrar sitios, desde donde podemos crear, editar, duplicar, quitar, exportar e importar sitios en Dreamweaver.
Figura 3.5. Cuadro de dilogo Administrar sitios
El asistente para la definicin del sitio Para trabajar en nuestro proyecto es necesaria la creacin de un sitio Web local donde definiremos la ubicacin de los elementos que lo van a formar. En primer lugar definiremos el nombre que vamos a utilizar para nuestro sitio Web. El nombre puede ser cualquiera que nos ayude a identificarlo y diferenciarlo del resto. Por ejemplo, los nombres de mis sitios: Mentor, Atenea, Aficiones, etc. hacen referencia a distintos proyectos Web, cada uno con su estructura de carpetas y subcarpetas, pero independientes entre s. Veamos un ejercicio prctico, donde vamos a crear un sitio al que vamos a poner por nombre MiWeb. Puedes utilizar otro nombre para tu sitio, dependiendo de tu gusto y siguiendo los pasos que se detallan. ste ser el sitio local que utilizaremos para realizar los ejercicios.
RECOMENDACIN. Al crear tu sitio Web es interesante poner un nombre significativo que lo identifique y a la vez lo diferencie de otros sitios.
Dreamweaver CS4. Captulo 3. Definicin de un sitio web
49
EJERCICIO El objetivo en este ejercicio ser crear un sitio Web en nuestro ordenador, es decir el sitio local, utilizando el asistente. Vamos a crear un nuevo sitio al que llamaremos MiWeb: 1. Desde una de las opciones anteriores seleccionamos Nuevo sitio.
Figura 3.6. Seleccionar Nuevo sitio desde la barra de aplicaciones.
2. En el cuadro de dilogo Definicin del Sitio, en la pestaa Bsicas, tecleamos MiWeb en el campo Qu nombre desea asignar al sitio? y en el campo Cul es la direccin HTTP (URL) de su sitio? tecleamos la nuestra propia, que ser similar a la de este ejemplo: http://fresno.pntic.mec.es/mgas0012, que como ves, es muy parecida a la cuenta de correo Mentor que te han proporcionado al matricularte en el curso, de forma que cambiars fresno.pntic.mec.es por lo que va detrs de la @ en tu propia cuenta y mgas0012, por lo que va justo antes de la @ en dicha cuenta de correo. Despus, hacemos clic en Siguiente.
Figura 3.7. Definicin del sitio. Pestaa Bsicas.
3. En la siguiente ventana seleccionamos la opcin No para indicar que no deseamos trabajar con una tecnologa de servidor y hacemos clic en Siguiente. Dreamweaver CS4. Captulo 3. Definicin de un sitio web
50
Figura 3.8. Definicin del sitio. Pestaa Bsicas.
4. A continuacin, a la pregunta Cmo desea trabajar con los archivos durante la etapa de desarrollo?, dejamos activada la respuesta que viene recomendada por defecto: Editar copias locales en mi equipo y luego cargarlas al servidor cuando estn listas. En cuanto a la pregunta En qu lugar del equipo desea almacenar los archivos?, nos propone por defecto una carpeta donde el programa guardar los archivos del sitio local.
Dreamweaver CS4. Captulo 3. Definicin de un sitio web
51
Figura 3.9. Definicin del sitio. Pestaa Bsicas.
Si no queremos crear el sitio donde nos propone el programa, haciendo clic en el icono situado a la derecha del cuadro de texto , activamos el cuadro de dilogo Elegir la carpeta raz local para el sitio. Buscamos la ubicacin de nuestro equipo donde queramos guardar el sitio local, es decir, localizamos la ruta, y creamos la carpeta MiWeb desde el icono Crear nueva carpeta , que contendr dicho sitio. Una vez creada la carpeta, la abrimos y comprobamos que estamos en ella. Hacemos clic en Seleccionar.
Dreamweaver CS4. Captulo 3. Definicin de un sitio web
52
Figura 3.10. Seleccionar la carpeta MiWeb.
Nos aparece la nueva ruta en la ventana del asistente de creacin del sitio y tecleamos Siguiente.
Dreamweaver CS4. Captulo 3. Definicin de un sitio web
53
Figura 3.11. Almacenar los archivos en nuestro equipo.
5. En la nueva ventana, a la pregunta Cmo conecta con su servidor remoto?, desplegamos las posibles respuestas y elegimos Ninguno. Hacemos clic en Siguiente. Ms adelante configuraremos la conexin con el Servidor remoto.
Figura 3.12. Definicin del sitio. Compartiendo archivos.
6. Por ltimo, aparece una pantalla del asistente mostrando un resumen con las opciones que hemos configurado. Hacemos clic en Completado para finalizar.
Dreamweaver CS4. Captulo 3. Definicin de un sitio web
54
Figura 3.13. Definicin del sitio. Resumen.
7. Si observas ahora el panel Archivos, vers la nueva carpeta raz local correspondiente al sitio actual, MiWeb.
Figura 3.14. Panel Archivos de MiWeb.
Dreamweaver CS4. Captulo 3. Definicin de un sitio web
55
3.3. Ms sobre el panel archivos
Desde el panel Archivos podemos acceder a todos los sitios que tengamos definidos as como a todos los archivos.
Al expandir el panel de archivos, con ayuda del botn Expandir/Contraer de la barra de herramientas del propio panel, se muestra una ventana dividida en dos partes. En la parte de la derecha, aparecen los archivos del sitio local, mientras que la parte izquierda, inicialmente, contiene los archivos del sitio remoto, que al no tener definido an, obviamente estar vaca; Dreamweaver presenta en esta parte un mensaje indicando que debemos definir un sitio remoto.
Figura 3.15. Panel Archivos expandido.
El panel posee una barra de mens y una barra de herramientas con los comandos ms usados del men.
Figura 3.16. Barra de herramientas Panel Archivos.
Las funciones de cada botn son:
Mostrar: es un men que facilita el acceso a los discos de nuestro ordenador, a los sitios definidos y al administrador de sitios.
Conectar al servidor remoto: conecta al sitio remoto y permite la actualizacin de archivos.
Actualizar: actualiza los cambios del sitio.
o Registro ftp del sitio: contrae el panel y abre el registro del protocolo de transferencia de archivos del sitio remoto, , como en esta imagen de ejemplo:
Dreamweaver CS4. Captulo 3. Definicin de un sitio web
56
Figura 3.17. Registro FTP del sitio remoto.
Archivos del sitio: muestra las carpetas y archivos del sitio local y remoto.
Servidor de prueba: presenta una lista del servidor de prueba, si se ha definido, en la parte izquierda de la ventana.
Archivos de base de datos: muestra una base de datos SVN si hemos definido una configuracin de control de versin en la pestaa Avanzadas de la definicin del sitio. Si se utiliza un servidor de control de versiones, se desactiva la informacin de desproteccin/proteccin especificada en Datos remotos.
Obtener archivo(s): descarga desde el sitio remoto los archivos seleccionados.
Colocar archivo(s): coloca los archivos seleccionados de nuestro sitio local en el sitio remoto.
Proteger archivo(s): descarga los archivos seleccionados desde el sitio remoto, pero los marca como protegidos para evitar modificaciones.
Desproteger: sube una copia de un archivo del sitio local al sitio remoto y convierte el archivo local en archivo de solo lectura.
o Sincronizar: sincroniza los archivos de ambos sitios, local y remoto.
Expandir/Contraer: expande o contrae el panel de archivos.
Crear archivos y carpetas
El panel Archivos de Dreamweaver tiene un funcionamiento similar al Explorador de Windows. Permite copiar, mover, eliminar, renombrar, etc. los archivos del sitio y fuera de l. Podemos crear tantas carpetas como necesitemos para construir la estructura de nuestro sitio. Todo esto lo podemos realizar de varias formas, que veremos a continuacin.
Dreamweaver CS4. Captulo 3. Definicin de un sitio web
57
Ejercicio El objetivo en este ejercicio ser la creacin de carpetas y archivos en nuestro sitio local.
Para crear una carpeta:
o Seleccionamos el sitio MiWeb en el panel Archivos y lo expandimos desde el botn Expandir/Contraer . o En Archivos locales, seleccionamos el sitio MiWeb y luego desplegamos Archivo>Nueva Carpeta; por defecto tendr el nombre untitled, as que lo cambiamos a Elementos.
Figura 3.18. Crear y cambiar el nombre a una carpeta nueva.
o Ahora seleccionamos la carpeta Elementos y con el botn derecho del ratn, seleccionamos otra vez Nueva carpeta para crear una carpeta nueva a la que llamaremos imagenes (sin tilde) dentro de Elementos (comprueba que esta carpeta imagenes queda dentro de la carpeta Elementos).
Figura 3.19. Crear nueva carpeta desde el men contextual.
Para crear archivos:
o En Archivos locales, seleccionamos el sitio MiWeb y con el botn derecho del ratn seleccionamos Nuevo Archivo Dreamweaver CS4. Captulo 3. Definicin de un sitio web
58
Figura 3.20. Crear nuevo archivo desde el men contextual. o y lo nombramos index.htm
Figura 3.21. Renombrar archivo. o Seguimos los mismos pasos para crear un nuevo archivo llamado ahora monumentos.htm y un tercer archivo nuevo al que llamaremos rutas.htm. Comprueba que estos tres archivos dependen directamente de la carpeta raz del sitio MiWeb y observa la diferencia entre carpetas y archivos.
Figura 3.22. Archivos y carpetas del sitio MiWeb.
Dreamweaver CS4. Captulo 3. Definicin de un sitio web
59
RECOMENDACIN. Procuraremos no utilizar tildes ni caracteres especiales en los nombres de ficheros y carpetas para que pueda ser correctamente ledo por todas las plataformas y navegadores. Tampoco dejaremos espacios en blanco.
3.4. Vnculos de un sitio
Aunque estos conceptos se estudiarn en otro captulo con ms profundidad, podemos distinguir bsicamente tres tipos de rutas que vinculan las pginas de un sitio.
Rutas absolutas: se utilizan principalmente para vincular con un archivo situado en sitio distinto al nuestro y deben indicar el protocolo que deben usar as como el URL (Localizador Uniforme de Recursos) completo, por ejemplo http://www.mentor.mec.es.
Rutas relativas al sitio: se utilizan en sitios Web muy extensos e indican la ruta desde la raz del sitio hasta un archivo concreto.
Rutas relativas al archivo: son las ms utilizadas, se omite la parte de la ruta que es comn a los archivos vinculados.
60
Captulo 4. Documentos
Dreamweaver CS4. Captulo 4. Documentos 61
Captulo 4. DOCUMENTOS
La unidad bsica de cualquier sitio Web es la pgina Web, y a la primera pgina de cualquier sitio web, solemos llamarla index. En el captulo anterior hemos creado varias pginas Web en blanco, ahora vamos a conocer cmo crear, abrir, guardar estos documentos. Tambin aprenderemos a configurar las propiedades ms importantes y a insertar texto.
4.1. Estructura de una pgina Web
Antes de comenzar a crear nuestros primeros documentos vamos a conocer la estructura de una pgina Web y a identificar cada una de sus partes. Como ya sabemos, los documentos HTML son documentos de texto con unas palabras claves, denominadas etiquetas, que sirven al navegador para interpretar sus instrucciones y poder representar en la pantalla los elementos que contenga el documento.
Las etiquetas HTML se escriben entre ngulos, <nombre de la etiqueta> y generalmente se utilizan una etiqueta de inicio y otra de final para indicar que ha terminado la instruccin correspondiente. La diferencia entre ambas etiquetas es que la de cierre lleva una barra inclinada / antes del nombre de la etiqueta. Tambin existen etiquetas slo de inicio.
Por ejemplo, para poner Dreamweaver CS4 en negrita, deberamos escribir en la vista Cdigo del programa, en el cuerpo del documento, <b>Dreamweaver CS4</b> y el resultado sera Dreamweaver CS4 en la vista Diseo.
Figura 4.1. Etiqueta html negrita vista cdigo.
Figura 4.2. Resultado texto negrita vista diseo.
La estructura de una pgina Web, consta bsicamente de las siguientes etiquetas:
<html> (Etiqueta de inicio de un documento HTML)
<head> (Etiqueta de inicio de la cabecera) ... <title> (Etiqueta de inicio del ttulo del documento) ... </title> (Etiqueta de fin del ttulo del documento)
</head> (Etiqueta de fin de la cabecera)
<body> (Etiqueta de inicio del cuerpo del documento) ... Dreamweaver CS4. Captulo 4. Documentos
62
</body> (Etiqueta de fin del cuerpo del documento)
</html> (Etiqueta de fin de un documento HTML)
Toda la informacin de la pgina Web se encuentra entre las etiquetas <html> y </html> y sirve para identificar el documento como HTML (Hyper Text Mark-up Language)
Entre las etiquetas de la cabecera <head> y </head> se aade la informacin del autor, palabras claves, etc. En esta parte de la cabecera entre las etiquetas <title> y </title> se encuentra el ttulo del documento y es la nica informacin de toda la existente en la cabecera que se presenta en la barra de ttulo del navegador.
El contenido de la pgina se coloca en el cuerpo del documento, entre las etiquetas <body> y </body> y esta parte ser visible en la ventana del navegador. El contenido que insertamos en el documento (texto, tablas, imgenes, etc.) tambin lleva asociadas etiquetas con las instrucciones correspondientes a los efectos que deseamos conseguir.
RECOMENDACIN. Como existen multitud de etiquetas, es conveniente que pases de vez en cuando a la vista Dividir para que te muestre simultneamente las vistas cdigo y diseo del documento que ests elaborando y puedas identificar cada una de sus partes as como las etiquetas asociadas a cada instruccin.
4.2. Operaciones bsicas con documentos
Crear, guardar, abrir y cerrar documentos
Desde el comando Nuevo del men Archivo podemos crear nuevos documentos en Dreamweaver. Este comando nos abre el cuadro de dilogo Nuevo documento que nos va a permitir el acceso a distintos tipos de pgina y diseos en cada una de sus Categoras, adems de poder crear diseos y plantillas por nosotros mismos.
Si hacemos clic en cualquier Categora, podemos, en el cuadro de dilogo, ver los distintos tipos de pgina, su diseo y su vista previa, si la posee, as como una descripcin del tipo de documento.
Desde este mismo men Archivo, podremos tambin Guardar, Abrir y Cerrar un documento creado en Dreamweaver.
Dreamweaver CS4. Captulo 4. Documentos
63
Figura 4.3. Cuadro de dilogo Nuevo documento.
Dreamweaver CS4. Captulo 4. Documentos
64
Ejercicio
El objetivo de este ejercicio ser crear y guardar un nuevo documento en blanco, as como cerrar y abrir documentos existentes. Para crear un documento nuevo, seguiremos los siguientes pasos:
o Despliega el men Archivo y selecciona Nuevo.
Figura 4.4. Archivo>Nuevo.
o Se abre el cuadro de dilogo Nuevo documento; seleccionamos la categora Pgina en blanco, HTML en Tipo de Pgina, y dejamos <ninguno> en Diseo, tal y como viene por defecto. A continuacin hacemos clic en Crear. Dreamweaver crear en la vista diseo un nuevo documento en blanco, listo para insertar contenido. Si quieres ver la estructura de la pgina puedes pulsar en el icono Dividir para observar cada una de sus partes. Cuando termines, vuelve a la Vista Diseo. Dreamweaver CS4. Captulo 4. Documentos
65
Figura 4.5. Crear un nuevo documento HTML.
Figura 4.6. Vista Dividir de un nuevo documento en blanco.
o Una vez creado el documento nuevo, es necesario guardar esta pgina web para no perder nuestro trabajo. Al guardar el documento, deberemos nombrar el archivo que lo contiene, recordando, que como norma general, en el nombre de dicho fichero no deberemos utilizar espacios en blanco, ni caracteres especiales como tildes, , maysculas, etc.; tampoco debers usar signos de puntuacin como puntos, comas o barras inclinadas, aunque s podemos utilizar guiones bajos si el nombre del fichero tuviese dos palabras, por ejemplo. Estas normas bsicas tambin son vlidas para las carpetas que vayamos a alojar en el sitio Dreamweaver CS4. Captulo 4. Documentos
66
remoto, pues muchos servidores cambian estos caracteres durante la carga de la pgina y esto provoca que se rompan los vnculos existentes entre los archivos.
Para guardar el documento nuevo que acabamos de crear en nuestro sitio local seguiremos los siguientes pasos: o Desplegamos el men Archivo y seleccionamos Guardar.
Figura 4.7. Guardar documento desde el men Archivo.
o Se abre el cuadro de dilogo Guardar como. Por defecto, Dreamweaver muestra el sitio local en el que estamos trabajando para guardar el documento. En el campo Nombre, aparecer Untitled-1.htm, nombre por defecto que Dreamweaver da a los ficheros sin ttulo; vamos a eliminarlo y en su lugar, teclearemos enlaces. En el campo Tipo, deberemos comprobar que est seleccionado Todos los documentos (*.htm;*.html;*.shtm;*.shtml;*.hta;*). Por ltimo, hacemos clic en Guardar.
Dreamweaver CS4. Captulo 4. Documentos
67
Figura 4.8. Guardar un documento .htm.
Lgicamente, si en la estructura de nuestro sitio local hemos creado distintas carpetas, desde este cuadro de dilogo Guardar como, deberemos localizar y abrir la carpeta correcta para guardar nuestro documento en el lugar adecuado. Es interesante saber que la mayora de los documentos web contienen cdigo HTML (HyperText Markup Language), por lo que son vlidas las extensiones .htm o .html.
Cuando guardamos un documento, almacenamos los ltimos cambios realizados, pero permanece abierto para seguir trabajando con l. Si deseamos cerrarlo, entonces podemos hacerlo de varias formas: o desde el men Archivo, seleccionando Cerrar, o con la combinacin de teclas Ctrl+W.
Dreamweaver CS4. Captulo 4. Documentos
68
Figura 4.9. Cerrar un documento desde el men Archivo.
o Desde la ventana del documento, haciendo clic en el icono de la pestaa del propio documento abierto, o simplemente haciendo clic en el botn Cerrar , que adems cerrar Dreamweaver.
Cierra el documento enlaces.htm de cualquiera de estas formas. Si no habas guardado los cambios como te proponamos anteriormente en este ejercicio, entonces al intentar cerrarlo, te aparecer un cuadro de dilogo preguntando si quieres guardar los cambios en el documento que estamos intentando cerrar.
Figura 4.10. Cuadro de dilogo Guardar cambios.
Si contestamos afirmativamente, entonces se guardarn todas las modificaciones realizadas; si Dreamweaver CS4. Captulo 4. Documentos
69
contestamos que no, guardar el documento con las modificaciones que habamos guardado antes. Si el documento no ha sido guardado ninguna vez y pulsamos No, entonces perderemos todos los cambios que hayamos efectuado en el mismo. Si tenemos ms de un documento abierto en una sesin, Dreamweaver tambin nos permite cerrar de una sola vez todos los documentos abiertos, pulsando en Cerrar todos, desde el men Archivo.
Figura 4.11. Cerrar todos desde el men Archivo.
Si deseamos abrir documentos en Dreamweaver, ya sean existentes o no creados en Dreamweaver, que luego podamos editar en las vistas Diseo y Cdigo, podemos hacerlo de varias formas:
o Para abrir un documento existente podemos desplegar el men Archivo y seleccionar Abrir.
Dreamweaver CS4. Captulo 4. Documentos
70
Figura 4.12. Abrir un documento desde el men Archivo.
o Se abre el cuadro de dilogo Abrir, que por defecto abre el sitio local en el que hemos estado trabajando, en nuestro caso MiWeb. Localizamos el archivo rutas.htm, lo seleccionamos y hacemos clic en Abrir. Dreamweaver CS4. Captulo 4. Documentos
71
Figura 4.13. Cuadro de dilogo Abrir.
o Desde el panel Archivos, localiza el archivo monumentos.htm en la Vista local del sitio MiWeb y haciendo clic con el botn derecho del ratn, selecciona Abrir, en el men contextual que aparece. Tambin lo puedes abrir haciendo doble clic en el icono del archivo.
Dreamweaver CS4. Captulo 4. Documentos
72
Figura 4.14. Abrir un documento desde el panel Archivos.
o Si has estado trabajando recientemente con uno o varios archivos, tambin tienes la posibilidad de abrirlos desplegando el men Archivo y seleccionando Abrir reciente, que desplegar una lista de los documentos ms recientes con los que hayas estado trabajando.
Figura 4.15. Abrir archivos recientes desde el men Archivo.
o Al abrir Dreamweaver, desde la pgina de inicio, puedes tambin seleccionar un documento con el que hayas estado trabajando recientemente, en la seccin Abrir un elemento reciente, por ejemplo MiWeb/enlaces.html.
Dreamweaver CS4. Captulo 4. Documentos
73
Figura 4.16. Abrir un elemento reciente desde la pgina de inicio.
Dreamweaver CS4. Captulo 4. Documentos
74
4.3. Propiedades del documento
Cuando estamos definiendo nuestro sitio, es conveniente mantener una identidad, es decir que las pginas que lo forman tengan un mismo formato, procurando que el fondo, las fuentes, etc. guarden una uniformidad.
La configuracin del formato de las pginas se establece en las Propiedades de la pgina. Para abrir el cuadro de dilogo Propiedades de la pgina lo podemos hacer de tres modos diferentes.
Ejecutando la opcin Propiedades de la pgina desde el men Modificar.
Figura 4.17. Propiedades de la pgina desde el men Modificar.
Haciendo clic con el botn derecho del ratn sobre el fondo de la pgina y seleccionando la opcin Propiedades de la pgina desde el men contextual que nos aparece.
Dreamweaver CS4. Captulo 4. Documentos
75
Figura 4.18. Men contextual Propiedades de la pgina. Pulsando las teclas Ctrl+J.
Con cualquiera de las tres formas descritas anteriormente, se nos abrir el cuadro de dilogo de las Propiedades de la pgina, organizadas en Categoras.
En la categora Apariencia (CSS), podemos especificar varias opciones bsicas de diseo de pgina:
Figura 4.19. Categora Apariencia de las Propiedades de la pgina. Dreamweaver CS4. Captulo 4. Documentos
76
Fuente de pgina: nos permite seleccionar una combinacin o familia de fuentes. Las combinaciones de fuentes determinan cmo se muestra el texto de la pgina Web en un navegador. El navegador utiliza la primera de las fuentes de la combinacin, si no est instalada, utilizar la siguiente fuente de la combinacin y si no est instalada ninguna de las fuentes de la combinacin, el navegador mostrar el texto de acuerdo a sus preferencias.
Si desplegamos este cuadro de seleccin, y seleccionamos Editar lista de fuentes, podemos agregar, quitar o modificar las combinaciones de fuentes. Se abrir el cuadro de dilogo Editar lista de fuentes y podremos llevar a cabo las siguientes acciones:
Figura 4.20. Desplegar Fuente de pgina y editar lista de fuentes.
Figura 4.21. Cuadro de dilogo Editar lista de fuentes.
o Aadir o quitar fuentes de una combinacin: debemos seleccionar previamente, en la parte superior, del cuadro de texto Lista de fuentes, la combinacin de fuentes que vamos a modificar. Las fuentes que forman esta combinacin aparecen en el cuadro de texto Fuentes elegidas. Si queremos quitar una fuente de la combinacin, seleccionamos la fuente del cuadro de texto Fuentes elegidas y hacemos clic en el botn de flecha . Si queremos aadir una fuente a la combinacin, seleccionamos la fuente del cuadro de texto Fuentes disponibles y hacemos clic en el botn de flecha .
Figura 4.22. Agregar o quitar fuentes. Dreamweaver CS4. Captulo 4. Documentos
77
o Aadir o quitar una combinacin de fuentes: para aadir una combinacin de fuentes, hacemos clic en el botn o seleccionamos una familia de fuentes concreta, como por ejemplo, , seleccionamos la fuente que vayamos a aadir a nuestra combinacin desde el cuadro de texto Fuentes disponibles y hacemos clic en el botn de flecha . Este procedimiento lo emplearemos para aadir todas las fuentes que deseemos a nuestra combinacin, pero debemos tener presente que no estaremos seguros de la forma que se visualizarn nuevas fuentes en otros sistemas. Para evitar esto, en la medida de lo posible, sera interesante aadir combinaciones genricas de fuentes desde el men Fuentes disponibles a nuestra combinacin de fuentes especficas.
Las familias genricas de fuentes son: cursiva, fantasa, monoespacio, san-serif y serif. Si ninguna de las fuentes de la lista Fuentes elegidas est disponible en el sistema del usuario, el texto aparecer en la fuente predeterminada asociada con la familia genrica de fuentes.
Para quitar una familia de fuentes, seleccionamos la combinacin de fuentes del cuadro de texto Lista de fuentes y hacemos clic en el botn .
Desde esta categora Apariencia, tambin podemos seleccionar el formato Negrita , Cursiva , o ambos. Tamao: nos permite definir el tamao de la fuente. Si seleccionamos un valor numrico, tambin nos permite elegir la unidad de medida.
Figura 4.23. Tamao de la fuente desde la categora Apariencia. Dreamweaver CS4. Captulo 4. Documentos
78
Color del texto: nos permite definir el color de texto. De forma predeterminada, el color de texto de los documentos es el negro.
Figura 4.24. Color del texto.
Color de fondo: nos permite definir un color de fondo para el documento. Por defecto, el color de fondo de los documentos es el blanco. El color de fondo se mostrar siempre que no seleccionemos ninguna imagen de fondo.
Figura 4.25. Color de fondo. Imagen de fondo: nos permite definir una imagen de fondo para el documento. La imagen se muestra en mosaico ocupando todo el fondo del documento. Para insertar una imagen de fondo deberemos pulsar en Examinar, que abrir el cuadro de dilogo Seleccionar origen de imagen y que nos permitir localizar una imagen en nuestro equipo; una vez localizada la imagen que queremos como fondo, la seleccionamos y pulsamos Aceptar. Dreamweaver CS4. Captulo 4. Documentos
79
Figura 4.25. Seleccionar imagen de fondo.
Si la imagen que vamos a establecer como fondo estaba ubicada fuera de la carpeta raz del sitio local con el que estamos trabajando, en nuestro ejemplo MiWeb, Dreamweaver nos dar la posibilidad de copiarla al mismo en ese momento, evitando as problemas de rutas posteriores. Slo tenemos que contestar afirmativamente a la pregunta de si deseamos copiar el archivo de imagen a la raz del sitio en ese momento.
Figura 4.26. Copiar imagen de fondo a la raz del sitio local.
Entonces se abrir el cuadro de dilogo Copiar archivo como y localizaremos la ubicacin dentro de MiWeb donde queremos copiar el fichero de imagen, que en nuestro ejemplo ser al interior de la subcarpeta imagenes que habamos creado dentro de la carpeta Elementos cuando creamos nuestro sitio web. Cuando nos encontremos en el interior de dicha carpeta, slo nos quedar pulsar el botn Guardar.
Dreamweaver CS4. Captulo 4. Documentos
80
Figura 4.27. Guardar fichero de imagen en la raz de nuestro sitio MiWeb.
Adems, podemos decidir cmo va a aparecer en nuestro documento la imagen de fondo insertada, si se repite y de qu forma lo hace. As, si desplegamos Repetir, podemos seleccionar: o No-repeat muestra la imagen de fondo una sola vez. o Repeat forma un mosaico con la imagen en sentido horizontal y vertical. o Repeat-x y repeat-y muestran, respectivamente, una banda horizontal y vertical de imgenes. Las imgenes se recortan para que quepan dentro de los lmites.
Figura 4.28. Repetir.
RECOMENDACIN. Es importante hacer una buena combinacin de colores entre la fuente y los colores de fondo del documento.
Margen izquierdo, derecho, superior e inferior: nos permite establecer los mrgenes en el documento y su unidad de medida. Dreamweaver no muestra los mrgenes de pgina en la ventana del Documento, deberemos ver su efecto desde los navegadores correspondientes.
La configuracin de propiedades en la categora Apariencia (HTML), del cuadro de dilogo Propiedades de la pgina da como resultado una pgina con formato HTML en lugar de CSS. Dreamweaver CS4. Captulo 4. Documentos
81
Figura 4.29. Categora Apariencia (HTML). Desde esta categora podemos tambin establecer una imagen de fondo del mismo modo en el que hemos aprendido para la categora Apariencia (CSS), un color de fondo y un color del texto del documento, as como establecer los mrgenes izquierdo y superior con su ancho y alto respectivamente. Pero esta categora, adems, nos permite establecer un color para los vnculos del documento, as como para los vnculos visitados y activos del mismo.
En la categora Vnculos (CSS) podemos definir la fuente predeterminada del vnculo, el tamao de la fuente del vnculo, as como los colores de los vnculos visitados, activos y de sustitucin; por ltimo, tambin podemos seleccionar el estilo subrayado del vnculo desplegando Estilo subrayado.
Dreamweaver CS4. Captulo 4. Documentos
82
Figura 4.30. Categora Vnculos (CSS).
Fuente de vnculo: nos permite especificar el tipo de fuente que se debe utilizar para el texto de un vnculo. Dreamweaver utiliza, de forma predeterminada, la misma combinacin de fuentes especificada para todo el documento, a menos que aqu especifiquemos otra fuente.
Tamao: nos permite definir el tamao de la fuente. Si seleccionamos un valor numrico, tambin nos permite elegir la unidad de medida.
Color de vnculo: nos permite especificar el color de los vnculos. Este color ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas.
Vnculos de sustitucin: nos permite especificar el color que tendr el vnculo cuando se coloque encima el ratn.
Vnculos visitados: nos permite especificar el color de los vnculos visitados y ayuda al usuario a distinguirlos de los que an no han sido visitados.
Vnculos activos: nos permite especificar el color de un vnculo al hacer clic con el ratn.
Estilo subrayado: nos permite definir el estilo subrayado que se debe aplicar a los vnculos. Por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado.
Los vnculos los estudiaremos ms detenidamente en un tema especfico.
RECOMENDACIN. No es conveniente modificar los colores estndar de los enlaces as como tampoco es recomendable utilizar estos colores para el resto del texto del documento pues Dreamweaver CS4. Captulo 4. Documentos
83
podemos confundir a los usuarios y pueden no llegar a localizar nuestros vnculos.
La categora Encabezados (CSS), nos permite especificar la combinacin y tamao de las fuentes para los encabezados de las pginas:
Fuente de encabezado: nos permite especificar la familia de fuentes predeterminada que se va a utilizar en las pginas Web. Dreamweaver utilizar las fuentes que especifiquemos, a menos que definamos de forma concreta otro tipo de fuente para un elemento de texto. Tambin podemos seleccionar el formato Negrita , Cursiva , o ambos.
Encabezado 1 a encabezado 6: nos permite especificar el color y tamao de la fuente que se debe utilizar, hasta un mximo de 6 niveles de etiquetas de encabezado. Si seleccionamos un valor numrico, tambin nos permite elegir la unidad de medida.
Figura 4.31. Categora Encabezado (CSS).
La categora Ttulo/Codificacin, permite especificar el tipo de codificacin del documento especfico para el idioma utilizado al crear las pginas Web, as como especificar el Formulario de normas Unicode que debe utilizarse con dicho tipo de codificacin:
Ttulo: nos permite especificar el ttulo de la pgina. Este ttulo aparecer en la barra de ttulo de la ventana de documento y la ventana de la mayora de los navegadores.
Tipo de Documento (DTD): Especifica la definicin de un tipo de documento. Por ejemplo, puede hacer que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transicin o XHTML 1.0 estricto del men emergente. Dreamweaver CS4. Captulo 4. Documentos
84
Codificacin: nos permite especificar la codificacin empleada para los caracteres del documento. Para nuestro caso, espaol y otros idiomas de Europa Occidental, seleccionaremos Europeo occidental. Existen otras opciones que podemos apreciar desplegando la lista. Si la pgina que vamos a crear utiliza otro alfabeto, deberemos configurar este atributo. Si seleccionamos Unicode (UTF-8) como codificacin del documento, no ser necesaria la codificacin de entidades, ya que la codificacin UTF-8 puede representar todos los caracteres.
Volver a cargar permite convertir el documento existente o volver a abrirlo con la nueva codificacin.
Formulario de normas Unicode: slo est activado si seleccionamos UTF-8 como codificacin del documento. Existen cuatro formularios de normas Unicode. El ms importante es el formulario de normalizacin C porque es el formulario ms utilizado en el modelo de caracteres para la Web.
Incluir firma Unicode (BOM): permite incluir en el documento una marca de orden de bytes (BOM, en sus siglas en ingls). Una BOM est formada por entre 2 y 4 bytes situados al comienzo de un archivo de texto que identifican a un archivo como Unicode y, en este caso, el orden de los bytes siguientes. Dado que UTF-8 carece de orden de bytes, la adicin de una BOM UTF-8 es opcional. Es obligatoria en el caso de UTF-16 y UTF-32.
Figura 4.32. Categora Ttulo/Codificacin.
La categora Imagen de rastreo, nos permite insertar un archivo de imagen para utilizarlo como gua al disear la pgina Web:
Imagen de rastreo: especifica una imagen que se va a emplear como gua para copiar un diseo. Esta imagen slo sirve como referencia, ya que no aparece cuando el documento se muestra en un navegador. Dreamweaver CS4. Captulo 4. Documentos
85
Transparencia: nos permite determinar la opacidad de la imagen de rastreo, desde completamente transparente hasta completamente opaca.
Figura 4.33. Categora Imagen de rastreo.
4.4. Vista previa en el navegador
Cuando trabajamos en un documento, lo que estamos elaborando en la vista Diseo, es muy parecido a lo que realmente aparecer en el navegador. No obstante es conveniente ir visualizando frecuentemente las pginas, obteniendo una vista previa en navegadores para detectar los errores y evitar repetirlos. Tambin podemos utilizar la Vista en vivo que nos ofrece Dreamweaver.
Para visualizar la pgina Web en un navegador, lo primero que debemos hacer es aadir dicho navegador a la lista de navegadores. Esto lo realizaremos desde el cuadro de dilogo Preferencias, y tenemos dos formas diferentes de hacerlo:
1. Ejecutando el comando Preferencias desde el men Edicin, o usando la combinacin de teclas Ctrl+U Dreamweaver CS4. Captulo 4. Documentos
86
Figura 4.34. Comando Preferencias del men Edicin. 2. Activando el cuadro de dilogo Preferencias desde Archivo>Vista previa en el navegador>Editar lista de navegadores.
Figura 4.35. Comando Editar lista de navegadores.
En el cuadro de dilogo Preferencias que nos aparece, en la seccin de la izquierda seleccionamos la Categora Vista previa en el navegador. Dreamweaver CS4. Captulo 4. Documentos
87
Figura 4.36. Vista previa en el navegador del cuadro Preferencias. Si queremos aadir un navegador a la lista, hacemos clic en el botn y se abre un nuevo cuadro de dilogo, Aadir navegador.
Figura 4.37. Cuadro de dilogo Aadir navegador.
Para indicar en el cuadro de texto Aplicacin, la ruta donde se encuentra el navegador en el disco duro, hacemos clic en Examinar y localizamos su ubicacin. Una vez localizado en el cuadro de dilogo Seleccionar Navegador, pulsamos Abrir. Dreamweaver CS4. Captulo 4. Documentos
88
Figura 4.38. Seleccionar navegador.
Dreamweaver escribir el nombre del navegador en el cuadro de texto Nombre del cuadro de dilogo Aadir navegador.
Figura 4.39. Aadir navegador.
Activamos la casilla Navegador principal o Navegador secundario para establecer la categora del navegador. Esta opcin tambin la podremos modificar, si as lo queremos, desde el cuadro de dilogo Preferencias. Podemos aadir tantos navegadores como creamos necesario. Para eliminar un navegador de la lista, lo seleccionamos y hacemos clic en el botn . El nombre del navegador desaparecer de la lista.
Dreamweaver CS4. Captulo 4. Documentos
89
Desde el cuadro de dilogo Aadir navegador, tambin se nos permite activar la opcin Vista previa utilizando el archivo temporal, para crear una copia temporal del documento para su vista previa y su depuracin del servidor o bien, si no activamos la opcin, podemos actualizar el documento directamente.
Una vez configurados todos los parmetros que consideremos oportunos, hacemos clic en Aceptar para validar los cambios. Ahora, podemos obtener una vista previa del documento en el que estamos trabajando pulsando F12 para abrir el navegador principal y Ctrl+F12 para abrir el navegador secundario.
Tambin podemos hacer clic en el botn Vista previa de la barra de herramientas del documento y a continuacin seleccionar el navegador que deseamos abrir.
Figura 4.40. Desplegar Vista previa/Depurar en el explorador.
4.5. Paletas de colores
Antes de decidir los colores que vamos a usar en nuestra Web debemos tener presente que una misma pgina se ver diferente dependiendo del monitor, del navegador y del sistema operativo.
Actualmente existen en el mercado multitud de monitores que soportan distintas configuraciones de color. Esto es fcil comprobarlo si accedemos a las propiedades de la pantalla de nuestro ordenador y vemos las posibilidades de Resolucin de pantalla y Calidad del color que nos ofrece la ficha Configuracin.
Figura 4.41. Configuracin de pantalla.
Dreamweaver CS4. Captulo 4. Documentos
90
Asimismo, los navegadores y los sistemas operativos difieren en los colores que utilizan cada uno. Estos colores, consta generalmente de una gama de 256 colores, que se denomina paleta de color.
En los navegadores ms utilizados, la paleta est formada por 216 colores comunes y 40 adicionales, que de alguna forma garantizan la velocidad de descarga de las pginas Web. De todas formas, si el navegador que visualiza nuestra pgina Web no dispone de nuestros colores, har una conversin de los colores de nuestra imagen a sus colores por defecto.
El modelo de color de un monitor se corresponde con el modelo RGB. Si asignamos a cada una de las luces 8 de los 24 bits disponibles, podemos obtener 28 = 256 intensidades diferentes de rojos, 28 = 256 intensidades diferentes de verdes y otras 28 = 256 intensidades diferentes de azules, que puede crear 16.777.216 colores distintos.
En los sistemas de Windows y Macintosh la paleta de color est formada por 256 colores, elegidos entre los 16.777.216 posibles. El problema es que difieren en la eleccin de los 256 colores para la formacin de sus paletas de color, por defecto.
En Dreamweaver la paleta de colores est formada por 216 colores seguros para la Web, es decir, que se muestran de la misma forma en los dos sistemas, adems de estar orientada a dispositivos Web alternativos como las PDA y las pantallas de telfonos mviles. Esta paleta se nos presenta en Cubos de color, de forma predeterminada, y en Tono continuo.
Figura 4.42. Cubo de color.
Figura 4.43. Tono continuo.
En Dreamweaver, en el Inspector de Propiedades o en los cuadros de dilogo de los elementos que forman la pgina, existe un cuadro de color que, si lo pulsamos, nos abre el Selector de color. Dreamweaver CS4. Captulo 4. Documentos
91
Figura 4.44. Selector de color. Desde el selector de color podemos:
Utilizar el cuentagotas para seleccionar un color de la paleta activa. El cuentagotas tambin nos permite seleccionar un color incluso fuera de las ventanas de Dreamweaver. Basta con hacer clic en el color que deseemos.
Quitar el color actual y establecer el color predeterminado del navegador. Hacemos clic en el botn Color predeterminado.
Abrir el selector de colores del sistema, para seleccionar uno de los colores bsicos del sistema operativo. Hacemos clic en el botn Colores del Sistema y se abre la ventana Color.
Figura 4.45. Ventana Color. Dreamweaver CS4. Captulo 4. Documentos
92
Desde este cuadro de dilogo podemos seleccionar uno de los Colores bsicos. Tambin podemos seleccionar un color del espectro de colores o bien definir su valor en los cuadros de texto correspondientes. Una vez seleccionado lo podemos Agregar a los colores personalizados y aceptamos los cambios para utilizar el color seleccionado.
Cambiar de paleta de colores. Las paletas de colores Sistema Windows, Sistema Mac y Escala de grises no son seguras para la Web. Si utilizamos una de estas paletas y a continuacin elegimos Ajustar a Web Safe, Dreamweaver sustituir el color seleccionado por el color seguro para la Web que ms se le parezca.
En HTML, los colores se expresan en forma de valor hexadecimal. El sistema hexadecimal es un sistema de numeracin de base 16, es decir, utiliza 16 dgitos en su numeracin (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F).
El valor hexadecimal que representa al color est formado por el smbolo # y seis dgitos (hexadecimales), de los cuales, los dos primeros corresponden al color rojo, los dos siguientes al color verde y los dos ltimos al color azul. Con estos dos dgitos podemos obtener las 256 intensidades diferentes de cada color.
Por ejemplo, el color amarillo tiene valor hexadecimal #FFFF00, es decir el valor del color Rojo es FF, el del color Verde es FF y el del color Azul es 00, (que se corresponden con el valor en decimal Rojo:255, Verde:255, Azul:0).
4.6. Texto en un documento Web
Para insertar texto en nuestra pgina, lo haremos desde la vista diseo. Aunque es posible hacerlo directamente en cdigo HTML, desde la vista Cdigo, podremos comprobar que Dreamweaver genera automticamente dicho cdigo sobre el texto y formato introducido desde la vista diseo.
Tambin podemos utilizar el texto creado con otras aplicaciones. Abrimos el fichero con el texto, lo seleccionamos y lo copiamos con el comando Edicin>Copiar o Ctrl+C.
Abrimos nuestro documento en la vista Diseo, colocamos el cursor donde vayamos a insertar el texto y lo pegamos con el comando Edicin>Pegar o Ctrl+V.
Dreamweaver conserva el formato de texto original. Este formato lo podremos modificar si lo seleccionamos previamente.
Propiedades del texto
Como hemos visto, al crear un nuevo documento, podemos definir las caractersticas que tendr en lo referente a formato del texto, es decir, el tipo de fuente, el tamao, el color, etc.
No obstante, todos estos atributos los podemos modificar de forma puntual para el texto que estamos editando en ese momento. Las modificaciones las podemos realizar desde el men Formato. Sin embargo, desde el Inspector de Propiedades tenemos tambin la posibilidad de aplicar el formato HTML o de Hojas de estilos en cascada (CSS). Al aplicar formato HTML, Dreamweaver aade propiedades al cdigo HTML Dreamweaver CS4. Captulo 4. Documentos
93
en el cuerpo de la pgina. Al aplicar formato CSS, Dreamweaver escribe propiedades en la seccin head del documento o en una hoja de estilos independiente. Aunque veremos CSS ms adelante, vamos a observar ahora el aspecto del inspector de propiedades con el botn CSS pulsado:
Figura 4.46. Inspector de propiedades. Formato de texto. Botn CSS pulsado.
o Regla de destino: es la regla que est editando en el inspector de propiedades de CSS. Si hay una regla ya existente aplicada al texto, se mostrar el formato de la regla que afecta al texto al hacer clic en el texto de la pgina. Tambin se puede utilizar el men emergente Regla de destino para crear nuevas reglas CSS y nuevos estilos en lnea o aplicar clases existentes al texto seleccionado. Si deseas crear una regla nueva, debers rellenar el cuadro de dilogo Nueva regla CSS.
o Editar regla: abre el cuadro de dilogo Definicin de regla CSS para la regla de destino. Si seleccionas Nueva regla CSS del men emergente Regla de destino y haces clic en el botn Editar regla, Dreamweaver abrir el cuadro de dilogo de definicin de nueva regla CSS.
o Panel CSS: abre el panel Estilos CSS y muestra propiedades para la regla de destino en la vista actual.
o Fuente: cambia la fuente de la regla de destino.
o Tamao: establece el tamao de la fuente para la regla de destino.
o Color del texto: establece el color seleccionado como color de fuente en la regla de destino.
o Negrita: aade la propiedad de negrita a la regla de destino.
o Cursiva: aade la propiedad de cursiva a la regla de destino.
o Alinear a la izquierda, al centro o a la derecha y justificar: aade las correspondientes propiedades de alineacin a la regla de destino.
Es importante observar que las propiedades de Fuente, Tamao, Color del texto, Negrita, Cursiva y Alineamiento siempre muestran las propiedades correspondientes a la regla que afecta a la seleccin actual de la ventana de documento. Al cambiar alguna de estas propiedades, los cambios que realice afectarn a la regla de destino.
Vamos a ver ahora el inspector de propiedades con el botn HTML pulsado : Dreamweaver CS4. Captulo 4. Documentos
94
Figura 4.47. Inspector de propiedades. Formato de texto. Botn HTML pulsado.
De todas las opciones que podemos modificar desde el Inspector de Propiedades cuando pulsamos el botn HTML, las correspondientes al formato de un texto seleccionado son:
Formato: establece el estilo de prrafo del texto seleccionado. Prrafo aplica el formato predeterminado para una etiqueta <p>, Encabezado 1 aade una etiqueta H1, etc.
ID: asigna una ID a la seleccin. El men desplegable ID (en caso de ser aplicable) enumera todos los ID declarados pero no utilizados en el documento.
Clase: muestra el estilo de clase que se aplica actualmente al texto seleccionado. Si no se ha aplicado ningn estilo a la seleccin, el men emergente muestra Sin estilo CSS. Si se han aplicado varios estilos a la seleccin, el men aparece en blanco. Puedes utilizar el men Estilo para seguir uno de estos procedimientos: o Seleccione el estilo que desea aplicar a la seleccin. o Seleccione Ninguno para quitar el estilo seleccionado actualmente. o Seleccione Cambiar nombre para cambiar el nombre del estilo. o Seleccione Adjuntar hoja de estilos para abrir un cuadro de dilogo en el que poder adjuntar una hoja de estilos externa a la pgina. Negrita: aplica <b> o <strong> al texto seleccionado, en funcin de la preferencia de estilo definida en la categora General del cuadro de dilogo Preferencias.
Cursiva: aplica <i> o <em> al texto seleccionado, en funcin de la preferencia de estilo definida en la categora General del cuadro de dilogo Preferencias.
Lista sin ordenar: crea una lista con vietas del texto seleccionado. Si no hay texto seleccionado, comienza una nueva lista con vietas.
Lista ordenada: crea una lista numerada del texto seleccionado. Si no hay texto seleccionado, comienza una nueva lista numerada.
Sangra y Anular sangra: inserta y anula sangra en el texto seleccionado aplicando o quitando la etiqueta blockquote. En una lista, la aplicacin de sangra crea una lista anidada y su anulacin elimina la anidacin de la lista.
Vnculo: crea un vnculo de hipertexto del texto seleccionado. Haz clic en el icono de carpeta para localizar un archivo del sitio, escribe el URL, arrastra el icono de sealizacin Dreamweaver CS4. Captulo 4. Documentos
95
hasta un archivo del panel Archivos o arrastra un archivo desde el panel Archivos hasta el cuadro.
Ttulo: especifica el texto de informacin sobre una herramienta para un vnculo de hipertexto. Destino: permite especificar el marco o la ventana donde se cargar el documento vinculado. o _blank carga el archivo vinculado en una nueva ventana sin nombre del navegador. o _parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana del marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el archivo vinculado se cargar en la ventana completa del navegador. o _self carga el archivo vinculado en el mismo marco o ventana que el vnculo. Este destino est implcito, por lo que normalmente no es preciso especificarlo. o _top carga el archivo vinculado en la ventana completa del navegador, quitando as todos los marcos.
Ms adelante, en el captulo dedicado a vnculos, veremos los destinos con detenimiento.
RECOMENDACIN. Selecciona tipos de letras que sean universales para que se puedan leer perfectamente desde cualquier plataforma y navegador. Cuida que el tamao no sea muy grande que alargue innecesariamente la pgina, pero tampoco demasiado pequeo que dificulte su lectura.
Es importante observar que, aunque CSS es el mtodo preferido para aplicar formato al texto, Dreamweaver todava permite aplicar formato al texto con HTML.
Propiedades del prrafo
Podemos modificar el formato de un prrafo ejecutando el comando Formato de prrafo desde el men Formato.
Figura 4.48. Comando Formato de prrafo. Men Formato. Dreamweaver CS4. Captulo 4. Documentos
96
Al igual que podemos modificar de forma concreta un texto, desde el Inspector de propiedades HTML tambin podemos modificar prrafos enteros. Para dar formato a un prrafo, no hace falta seleccionarlo previamente, basta con colocar el cursor en el prrafo y hacer clic sobre el botn correspondiente para aplicar los cambios.
En el inspector de propiedades HTML, despliega Formato y selecciona un formato de prrafo (por ejemplo, Encabezado 1, Encabezado 2, Texto con formato predeterminado, etc.)
Figura 4.49. Seleccionar formato de prrafo.
La etiqueta HTML asociada con el estilo seleccionado (por ejemplo, h1 para Encabezado 1, h2 para Encabezado 2, pre para Formato predeterminado, etc.) se aplicar a todo el prrafo. La etiqueta HTML asociada es <p>, etiqueta de inicio de prrafo y </p>, etiqueta de fin de prrafo. La etiqueta HTML asociada a cada uno de los encabezados es <h1> y </h1> para indicar el inicio y el final del Encabezado 1, <h2> y </h2> para el Encabezado 2, <h3> y </h3> para el Encabezado 3 y as sucesivamente. El formato predeterminado utiliza la fuente Courier y asocia las etiquetas <pre> y </pre> para indicar el inicio y el final.
Para quitar un formato de prrafo, selecciona Ninguno.
Cuando aplicas una etiqueta de encabezado a un prrafo, Dreamweaver aade automticamente la siguiente lnea de texto como un prrafo sencillo. Para cambiar esta configuracin, selecciona Edicin > Preferencias, y a continuacin, en la categora General, en la seccin Opciones de edicin, comprueba que la casilla Cambiar a prrafo sencillo tras el encabezado no est activada.
Dreamweaver CS4. Captulo 4. Documentos
97
Figura 4.50. Cambiar a prrafo sencillo tras el encabezado.
Otras opciones del formato de prrafo que podemos modificar desde el Inspector de propiedades HTML son: Lista sin ordenar: nos permite crear una lista con vietas de los prrafos seleccionados. Si no hay texto seleccionado, aplica el formato lista sin ordenar al prrafo donde se encuentre el cursor y comienza una nueva lista con vietas. Las etiquetas HTML asociadas a las listas sin ordenar son: <ul> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> </ul> Lista ordenada: nos permite crear una lista numerada de los prrafos seleccionados. Si no hay texto seleccionado, aplica el formato lista ordenada al prrafo donde se encuentre el cursor y comienza una nueva lista numerada. Las etiquetas HTML asociadas a las listas ordenada son: <ol> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> Dreamweaver CS4. Captulo 4. Documentos
98
</ol> Desde el cuadro de dilogo Propiedades de lista podemos configurar el aspecto de toda una lista o de sus elementos por separado. Desde aqu podemos establecer el estilo de nmero, restablecer el recuento o configurar las opciones de las vietas de los distintos elementos o de toda la lista. Si queremos establecer las propiedades de toda una lista debemos crear, en la ventana de documento, al menos un elemento de la lista. Colocamos el cursor sobre el texto del elemento de lista y seleccionamos Formato > Lista > Propiedades para abrir el cuadro de dilogo Propiedades de lista.
Figura 4.51. Men Formato. Comando Lista. Propiedades de la lista. En el cuadro de dilogo que aparece, podemos definir las opciones para la lista.
Figura 4.52. Cuadro de dilogo Propiedades de lista. Tipo de lista: especifica las propiedades de la lista. Desde el men emergente podemos seleccionar Lista con vietas, Lista con nmeros, Lista de directorio o Lista de men. Dreamweaver CS4. Captulo 4. Documentos
99
Figura 4.53. Tipo de lista. Estilo: determina el estilo de las vietas o los nmeros empleados para una lista con vietas o numerada. Todos los elementos de la lista tendrn este estilo a menos que especifiquemos un estilo nuevo para determinados elementos.
Figura 4.54. Estilo lista con nmeros. Iniciar recuento: nos permite establecer el valor del primer elemento en una lista numerada. Si queremos aplicar un estilo concreto a un elemento de la lista, entonces colocaremos el cursor sobre el texto del elemento de la lista modificar, accedemos al cuadro de dilogo Propiedades de lista del modo que ya hemos descrito, desplegamos Nuevo estilo en la seccin Elemento de lista y seleccionamos un estilo nuevo. El campo Rest. Recuento a:, permite establecer un nmero concreto desde el que comienza la numeracin de los elementos de lista.
Figura 4.55. Aplicar formato a un elemento de una lista.
Dreamweaver CS4. Captulo 4. Documentos
100
Hacemos clic en Aceptar para guardar la configuracin y cerrar el cuadro de dilogo. De esta forma el nuevo estilo se aplicar automticamente a todos los elementos que vayamos aadiendo a la lista y/o al elemento concreto de la lista. Las propiedades de un Elemento de la lista, tambin podemos establecerlas desde el botn en el Panel del Inspector de Propiedades. Sangra y Anular sangra: inserta y anula sangra en el texto seleccionado. Las etiquetas HTML asociadas a la sangra son: <blockquote> para iniciar la sangra y </blockquote> para cerrar la sangra. Si aplicamos sangra en una lista, nos creara una lista anidada. Si seleccionamos Anular sangra, quitara la sangra del prrafo seleccionado o la anidacin de la lista. Esta accin eliminara el cdigo HTML asociado. 4.7. Estilos CSS Como ya hemos mencionado, el panel del Inspector de Propiedades cuenta con un botn . Al aplicar formato CSS, Dreamweaver escribe propiedades en la seccin head del documento o en una hoja de estilos independiente. No se debe olvidar que al crear estilos en lnea CSS, Dreamweaver aade cdigo de atributos de estilo directamente al cuerpo de la pgina. Podemos tambin acceder a los distintos estilos CSS que podemos crear y aplicar a nuestro documento desde el men Formato > Estilo CSS.
Figura 4.56. Comando Estilos CSS. Men Formato. Los estilos CSS (Cascading Style Sheets), llamadas tambin Hojas de Estilo en Cascada, son un conjunto de reglas que nos permiten configurar el aspecto de las pginas de nuestro Sitio. La utilizacin de estilos CSS para aplicar formato a una pgina permite separar el contenido de la presentacin. El contenido de la pgina (el cdigo HTML) reside en el archivo HTML, mientras que las reglas CSS que definen la presentacin del cdigo residen en otro archivo (una hoja de estilos externa) o en otra parte del documento HTML (normalmente, en la Dreamweaver CS4. Captulo 4. Documentos
101
seccin head). La separacin del contenido y la presentacin hace que resulte mucho ms fcil mantener el aspecto del sitio desde una ubicacin central, ya que no es necesario actualizar las propiedades de las distintas pginas cuando se desea realizar algn cambio. La separacin del contenido y la presentacin tambin depura y simplifica el cdigo HTML, lo que disminuye el tiempo de carga en los navegadores y agiliza la navegacin para personas con problemas de accesibilidad. Con CSS, se pueden controlar numerosas propiedades del texto, entre ellas las fuentes y los tamaos de fuente especficos; negrita, cursiva, subrayado y sombras de texto; color de texto y de fondo; color y subrayado de vnculos; etc. Si utilizas CSS para controlar las fuentes, tambin el diseo y el aspecto de la pgina sern ms coherentes en mltiples navegadores. Adems de para dar formato al texto, se puede utilizar CSS para definir el formato y la posicin de elementos de nivel de bloque (block-level) de una pgina Web. Un elemento de nivel de bloque es un elemento de contenido independiente que normalmente est separado por una nueva lnea en el cdigo HTML y que tiene visualmente el formato de un bloque. Por ejemplo, las etiquetas h1, p y div generan elementos de nivel de bloque en una pgina Web. Puedes ajustar mrgenes y bordes para elementos de nivel de bloque, situarlos en una ubicacin concreta, aadirles color de fondo, colocar texto flotante alrededor de ellos, etc. La manipulacin de elementos de nivel de bloque es la forma en que se establece el diseo de las pginas con CSS. Crear un estilo CSS Para crear un estilo CSS, seleccionamos el texto cuyas propiedades vamos a modificar.
Ejercicio El objetivo en este ejercicio ser crear un nuevo estilo CSS a partir de un texto previamente escrito.
Crea un nuevo documento HTML segn hemos visto anteriormente: Archivo>Nuevo... Pgina en blanco>HTML>Crear.
En vista Diseo, escribe en la ventana del Documento el texto: Creacin de un nuevo estilo CSS.
Figura 4.57. Escribir texto en la ventana del documento.
Selecciona la palabra nuevo haciendo doble clic sobre ella con el ratn.
En el Inspector de Propiedades CSS elige: o Regla de destino <Nueva regla CSS> y pulsa cualquier opcin del inspector de propiedades, por ejemplo el botn negrita .
Dreamweaver CS4. Captulo 4. Documentos
102
o En el cuadro de dilogo Nueva reglas CSS despliega Tipo de Selector y selecciona Clase (puede ser aplicado a cualquier elemento HTML). En Nombre del selector introduce un nombre que sea identificativo del nuevo estilo CSS, por ejemplo .normal (Los nombres de clase deben comenzar por un punto y pueden contener cualquier combinacin alfanumrica. Si te olvidas de poner el punto inicial, Dreamweaver lo har automticamente). Despliega Definicin de regla y selecciona (Slo este documento) para que el nuevo estilo CSS quede incrustado en el documento actual. Despus pulsa Aceptar.
Figura 4.58. Nueva regla CSS.
o A continuacin pulsa el botn del inspector de propiedades CSS. Se abre el cuadro de dilogo Definicin de regla para .normal, ya que .normal es el nombre del selector que habamos escogido en el cuadro de dilogo anterior. En este cuadro, categora Tipo, introducimos las siguientes propiedades: Fuente familia Verdana, Geneva, sans-serif; Tamao 14 pxeles, Color azul #0000FF, Estilo cursiva (italic). Luego pulsa en Aplicar para ver los cambios en pantalla y por ltimo, pulsa Aceptar.
Dreamweaver CS4. Captulo 4. Documentos
103
Figura 4.59. Definicin de regla.
De forma automtica, Dreamweaver le ha aplicado a nuestro texto seleccionado los atributos del nuevo estilo CSS.
Figura 4.60. Nuevo estilo CSS.
Si en algn momento deseas cambiarle el nombre a una regla CSS, puedes hacerlo fcilmente desde el panel Estilos CSS, ficha Todo, haciendo un solo clic sobre la regla cuyo nombre deseas modificar; automticamente el nombre de la regla se convierte en editable, y podrs ponerle el nombre que desees, aunque nosotros no vamos a hacerlo en este ejercicio.
Dreamweaver CS4. Captulo 4. Documentos
104
Figura 4.61. Cambiar nombre a una regla CSS.
Para editar la regla, puedes hacer doble clic sobre ella en este mismo panel, pulsar en el icono Editar estilo de la barra de herramientas del panel, o simplemente desplegar la propiedad a modificar desde Propiedades de .normal, donde tambin puedes aadirle nuevas propiedades. Si deseas eliminarla, puedes seleccionarla en el panel y pulsar Eliminar regla CSS en la barra de herramientas de este panel Estilos CSS.
Guarda el documento (Archivo>Guardar como) con el nombre estilos.
Una vez creada la regla CSS, para aplicarla sobre un elemento del documento en el que estamos trabajando, basta con seleccionar dicho elemento y elegir, en el Inspector de Propiedades CSS, la regla de destino que deseamos aplicar desplegando el men disponible en el cuadro Regla de destino.
4.8. Tipos de estilos CSS Crear nuevos estilos CSS Hemos comprobado como Dreamweaver nos permite crear estilos de forma rpida y sencilla. Los estilos creados de esta manera, se agrupan en una hoja de estilos que se encuentra incrustada en el cdigo de nuestro documento Web. Para crear un nuevo estilo, podemos hacerlo de varias formas: Haciendo clic en el botn Nueva regla CSS del Panel Estilos CSS, que abre el cuadro de dilogo Nueva regla CSS. Desde el men Formato>Estilos CSS>Nuevo. Dreamweaver CS4. Captulo 4. Documentos
105
Figura 4.62. Comando Nueva regla CSS desde el men Formato. Una tercera forma de abrir este cuadro de dilogo es desde el Inspector de Propiedades CSS, seleccionando <Nueva regla CSS> en Regla de destino y haciendo clic en . Segn el Tipo de selector que seleccionemos en el cuadro de dilogo Nueva regla CSS, podemos hablar de: Estilos de Clase Son los nicos estilos que se pueden aplicar a cualquier texto del documento como atributo class. Ejercicio
El objetivo en este ejercicio ser crear y definir un estilo CSS de clase.
Abre el documento estilos.html, si no lo tienes abierto.
Para crear un estilo de clase, abre el cuadro de dilogo Nueva regla CSS con cualquiera de los procedimientos descritos anteriormente.
En Tipo de selector, activa la opcin Clase (puede ser aplicable a cualquier elemento HTML).
Escribe el nombre .titulo2 para el nuevo estilo en el cuadro de texto Nombre del selector. Los nombres de los estilos de clase, como mencionbamos en el ejercicio anterior, deben comenzar con un punto y pueden contener valores alfanumricos. Si no pones el punto, Dreamweaver lo har de forma automtica.
En el apartado Definicin de regla, selecciona (Nuevo archivo de hoja de estilos) para crear Dreamweaver CS4. Captulo 4. Documentos
106
una hoja de estilo externa.
Figura 4.63. Crear un nuevo archivo de hoja de estilos.
Haz clic en Aceptar; se abrir el cuadro de dilogo Guardar archivo de hoja de estilos como. Localiza la carpeta donde vayas a guardar la hoja de estilos en el cuadro. Escribe el nombre hoja1 para la nueva hoja de estilos. La extensin .css se pone de forma automtica. Haz clic en el botn Guardar.
Dreamweaver CS4. Captulo 4. Documentos
107
Figura 4.64. Guardar archivo como hoja de estilos css.
Al hacer clic en Aceptar, automticamente se abre el cuadro de dilogo Definicin de regla para .titulo2 en hoja1.css.
Dreamweaver CS4. Captulo 4. Documentos
108
Figura 4.65. Definicin de regla para .titulo2 en hoja1.css
En este cuadro de dilogo podemos configurar diferentes atributos para definir el estilo desde las distintas categoras:
Tipo: desde esta categora podemos definir los atributos de texto, como el tipo de fuente, el tamao, color, etc. Fondo: podemos definir los atributos del fondo, imagen de fondo, decidir si esta imagen se repite o no, si est fija a su posicin original, etc. Bloque: nos permite definir la configuracin del espaciado y de la alineacin de las etiquetas y propiedades. Cuadro: desde aqu podemos definir la configuracin de las etiquetas y propiedades que controlan la ubicacin de los elementos en la pgina. Borde: define la configuracin de los bordes que rodean a los elementos (Ancho, Color o Estilo). Lista: nos permite definir la configuracin de la lista para las etiquetas de lista (por ejemplo el tamao y el tipo de vietas). Posicin: sus propiedades determinan cmo debe colocarse el contenido relacionado con el estilo CSS en la pgina. Extensiones: podemos definir los atributos de los filtros, saltos de pgina y opciones de puntero.
Vamos ahora a modificar las siguientes propiedades de la Categora Tipo del estilo .titulo2, creado anteriormente:
o Fuente: Georgia, Times New Roman, Times, Serif. o Tamao: 24 pxeles. o Estilo: oblicua. o Alto de lnea: normal. o Grosor: negrita. Dreamweaver CS4. Captulo 4. Documentos
109
o Variante: versales. o Color: azul oscuro (#000099).
Figura 4.66. Modificar definicin de regla.
Haz clic en los botones Aplicar y Aceptar, respectivamente, para guardar los cambios en estilos.html.
Ahora, si quisiramos agregar una nueva regla CSS a la hoja de estilos recin creada, veramos si desplegsemos el cuadro de dilogo Nueva regla CSS como ya hemos aprendido, la hoja1.css en el desplegable Definicin de regla.
Dreamweaver CS4. Captulo 4. Documentos
110
Figura 4.67. Crear una nueva regla CSS en una hoja ya existente. Estilos de Etiqueta. Son los estilos que se utilizan para redefinir el formato predeterminado de una etiqueta HTML especfica. Por ejemplo, si aplicamos el formato Encabezado 1 a un texto, Dreamweaver aplicar de forma automtica las etiquetas <h1> de inicio y </h1> de cierre al texto seleccionado. Si redefinimos la etiqueta <h1>, todo el texto al que se le haya aplicado cambiar al nuevo formato. Para crear este nuevo estilo podemos hacer clic en el botn Nueva regla CSS en el panel Estilos CSS y se abre el cuadro de dilogo Nueva regla CSS. Al seleccionar Etiqueta desde Tipo de selector, podemos seleccionar la etiqueta que vayamos a modificar desde la lista que se despliega en el cuadro Nombre del selector. En nuestro ejemplo vamos a seleccionar h1 (encabezado 1) y vamos a definir la regla en la hoja1.css que habamos creado antes. Dreamweaver CS4. Captulo 4. Documentos
111
Figura 4.68. Crear nueva regla CSS de etiqueta.
Al hacer clic en Aceptar, se activa el cuadro de dilogo Definicin de regla para h1 en hoja1.css, en el cual podemos modificar como hemos aprendido anteriormente, las propiedades que deseemos y aceptar los cambios, como por ejemplo en la Figura 4.69. de abajo. Dreamweaver CS4. Captulo 4. Documentos
112
Figura 4.69. Definicin de regla para h1. Automticamente, si vamos cambiamos al inspector de propiedades HTML, desplegamos Formato y seleccionamos Encabezado1, el texto que tecleemos en la ventana del documento, tendr las propiedades de la regla CSS que hemos creado para la etiqueta h1. Hojas de estilo Avanzadas. Son los estilos, tambin llamados compuestos, que se utilizan para redefinir el formato predeterminado de una combinacin concreta de etiquetas que contengan un cdigo especfico de atributo Id. Por ejemplo, si queremos modificar un encabezado h2 introducido en la celda de una tabla, podemos modificar las etiquetas <td> y <h2> respectivamente. Para crear este nuevo estilo debemos hacer clic en el botn Nueva regla CSS y nos aparece el cuadro de dilogo Nueva regla CSS. Seleccionamos la opcin Compuesto (basado en la seleccin) desde Tipo de selector y en el Nombre del selector podemos escribir las etiquetas que vayamos a modificar, en nuestro Dreamweaver CS4. Captulo 4. Documentos
113
ejemplo td h2. En Definicin de la regla, podemos decidir si agregar esta nueva regla a hoja1.css o aplicarla slo a este documento.
Figura 4.70. Crear una regla CSS compuesta.
Al hacer clic en Aceptar, se activa el cuadro de dilogo Definicin de regla para la td h2 y desde aqu podemos modificar las propiedades que deseemos; al aceptar los cambios, de forma automtica se aplicar el nuevo formato a todo el texto que tenga Formato Encabezado 2 y est dentro de la celda de una tabla que hayamos insertado en el documento. 4.9. Operaciones con estilos CSS Editar un estilo CSS Para modificar un estilo existente, podemos editarlo, como ya hemos mencionado antes, desde el botn Editar estilo de la barra de herramientas del panel Estilos CSS, o seleccionar la opcin Edicin que nos aparece en el men contextual, al pulsar con el botn derecho del ratn sobre el estilo correspondiente. Dreamweaver CS4. Captulo 4. Documentos
114
Figura 4.71. Editar regla CSS desde el men contextual Edicin. En cualquier caso, se abrir el cuadro de dilogo Definicin de regla desde el que podremos modificar las propiedades de la regla CSS. Borrar un estilo CSS Para eliminar una regla CSS de una hoja de estilos, basta con seleccionarla desde el panel Estilos CSS y hacer clic en el botn Eliminar regla CSS .
Mover estilos CSS Dreamweaver nos permite convertir reglas CSS en externas, cambiarlas de ubicacin y reorganizarlas segn nuestras necesidades. Simplemente, en el panel Estilos CSS tendremos que seleccionar una regla CSS que hayamos creado, por ejemplo en nuestro documento estilos.html y arrastrarla con el ratn, bien al interior de hoja1.css, o bien una regla de hoja1.css al exterior de la hoja. Si queremos integrar una regla en una hoja de estilos externa con la que contemos de antemano, tambin podemos seleccionar la regla y con el botn del ratn, seleccionar Mover reglas CSS desde el men contextual que se abre: Dreamweaver CS4. Captulo 4. Documentos
115
Figura 4.72. Mover regla CSS desde men contextual. Automticamente, se abre el cuadro de dilogo Mover a hoja de estilos externa, desde el que podemos seleccionar la hoja1.css que habamos creado antes, o localizar otra hoja de estilos que tengamos en nuestro equipo pulsando el botn Examinar; tambin podemos moverla a una nueva hoja de estilos.
Figura 4.73. Mover a hoja de estilos externa. Aplicar Hojas de Estilo Externas Ejercicio
El objetivo en este ejercicio ser aplicar una hoja de estilo externa a un nuevo documento, para lo cual vamos a utilizar una de las hojas de estilos de muestra que nos ofrece Dreamweaver. Con esto podemos utilizar estilos que se encuentren en un archivo externo a cualquier documento HTML. Esta posibilidad es muy til cuando nuestro Sitio Web tiene varias pginas y con definir una sola hoja de estilos, podremos utilizarlos en todas las pginas del sitio.
Crea un nuevo documento HTML segn hemos visto anteriormente. (Archivo>Nuevo... Pgina en blanco>HTML>Crear).
Para asociar una hoja de estilos al nuevo documento, haz clic en el botn Adjuntar hoja de Dreamweaver CS4. Captulo 4. Documentos
116
estilos del panel Estilos CSS.
Se abre el cuadro de dilogo Vincular hoja de estilos externa.
Figura 4.74. Cuadro de dilogo Vincular hoja de estilos externa.
En Aadir como, puedes seleccionar una de las siguientes opciones:
o Vincular: para crear un vnculo entre el documento actual y la hoja de estilos externa. De esta forma se crea una etiqueta de vnculo href en el cdigo HTML y conduce al URL al lugar en el que se encuentra la hoja de estilos publicada. Haz clic en esta opcin; de esta forma conseguimos que con una sola hoja de estilos podamos tener vinculadas varias pginas.
o Importar: para anidar la hoja de estilos en nuestra pgina.
o En el botn Vista previa, podemos verificar que la hoja de estilos aplica los estilos que deseamos en la pgina actual. Si estos estilos no cumplen con lo que esperamos, podemos hacer clic en Cancelar y la pgina recupera su aspecto anterior.
Ahora pulsa en hojas de estilos de muestra para abrir el cuadro de dilogo del mismo nombre. Selecciona Diseo completo: Accesible y despus pulsa el botn Examinar del cuadro Guardar en para localizar la carpeta del sitio MiWeb dentro de la cual debers guardar la nueva hoja que por defecto se llama Accessible_Design.css. Por ltimo, pulsa en Aceptar.
Dreamweaver CS4. Captulo 4. Documentos
117
Figura 4.75. Hojas de estilos de muestra.
Como el documento nuevo nunca ha sido guardado antes, Dreamweaver te lo recordar con el siguiente mensaje, que debers leer y aceptar.
Figura 4.76. Mensaje de alerta del programa.
El nombre de la hoja de estilos CSS externa aparece en el panel Estilos CSS.
Dreamweaver CS4. Captulo 4. Documentos
118
Figura 4.77. Hoja de estilos externa.
En vista Diseo, escribe en la ventana del Documento el texto: Utilizacin de un estilo CSS externo y observa sus propiedades.
Figura 4.78. Estilo CSS externo.
Guarda el documento (Archivo>Guardar como) con el nombre estilos2.
119
Captulo 5. Imgenes
Dreamweaver CS4. Captulo 5. Imgenes 120
Captulo 5. IMGENES Las imgenes de un sitio Web atraen la atencin de los visitantes y transmiten informacin inmediata sobre el tema que trata el sitio. La imagen para la Web es distinta a la imagen para imprimir. En la Web se sigue trabajando para que las imgenes sigan teniendo el tamao ptimo ms pequeo posible. Cuando estamos construyendo nuestra Web, el principal problema que nos podemos encontrar es el tiempo de descarga de nuestra pgina. La insercin de imgenes puede hacer pesada nuestra pgina y hacer que el usuario desespere en el tiempo de acceso a la misma. Una forma de optimizar el tiempo de descarga de nuestra Web es disminuir el tamao de un fichero de imagen. Esto podemos hacerlo disminuyendo las dimensiones de la imagen o su resolucin. Las imgenes generalmente se miden en pxeles y para disminuir sus dimensiones deberemos utilizar programas de edicin de imgenes.
RECOMENDACIN. Si reducimos el tamao de una imagen con Dreamweaver, nos puede dar la falsa impresin de que la imagen es ms pequea, pero realmente lo nico que hemos hecho es reducir la forma en que la vemos, el tamao sigue siendo el mismo.
Otra forma de disminuir el tamao del fichero es comprimir las imgenes, pero manteniendo un equilibrio con su calidad. Debemos tener presente que la informacin que se pierde en la compresin de una imagen es irrecuperable.
RECOMENDACIN. Deberemos tener la imagen original con la mxima resolucin y trabajar con una copia de la misma, pues si en algn momento necesitamos editarla nuevamente no habremos perdido informacin alguna.
5.1. Formatos de archivos de imgenes Los formatos de imgenes se dividen principalmente en dos categoras: mapa de bits y vectoriales. Mapa de bits El formato de mapa de bits est basado en la informacin contenida en cada pxel de la imagen. Esta informacin consta principalmente del color y de la posicin de cada pxel expresada en coordenadas. Cuanta mayor informacin tengamos de la imagen, es decir cuanto mayor sea el nmero de pxeles, mayor ser el tamao del fichero que la contiene. Este formato puede representar imgenes de fotografas, dibujos, ilustraciones, etc. Dreamweaver CS4. Captulo 5. Imgenes
121
En este tipo de formato debemos tener en cuenta los cambios de tamao, pues suele haber prdida de calidad en la imagen, especialmente cuando aumentamos sus dimensiones, pues el nmero de pxeles es invariable. Veamos un ejemplo de una imagen realizada con un formato de mapa de bits.
Figura 5.1. Imagen de mapa de bits.
Figura 5.2. Imagen de mapa de bits ampliada.
En los ejemplos anteriores se aprecia una prdida de calidad en la imagen de la figura 5.2 al aumentar su tamao con respecto a la imagen original, figura 5.1. Aunque existen formatos muy conocidos de mapa de bits, como por ejemplo BMP, TIFF, etc. stos no se suelen utilizar para insertar en las pginas Web porque su tamao es excesivamente grande y retrasara mucho la carga de la pgina. Los formatos que generalmente se utilizan para las pginas Web son GIF, JPEG y PNG por ser comprimidos y por tanto ocupar menor tamao. Los formatos GIF y JPEG son los ms compatibles y pueden verse en la mayora de los navegadores, mientras que PNG es compatible a partir de las versiones de Internet Explorer 4.0 y Netscape Navigator 4.04. El formato GIF (Graphic Interchange Format), como su nombre indica, es un formato de intercambio de grficos y es idneo para visualizar imgenes con grandes reas de color homogneo, como logotipos, iconos, botones y otras imgenes con colores y tonos uniformes. El mtodo de compresin est basado en una paleta de 256 colores como mximo, de tal forma que si pudiramos observar la cadena de nmeros entre 0 y 255 que describen los colores, podramos comprobar que existen muchos nmero iguales consecutivos, correspondientes a las zonas ms o menos extensas del mismo color. As, por ejemplo, en vez de almacenar 300 veces seguidas el color 132, es ms sencillo decir que los siguientes 30o nmeros son iguales al 132 y para esto se necesitan muy pocos bytes de memoria. Dreamweaver CS4. Captulo 5. Imgenes
122
El formato JPEG (Joint Photographic Experts Group) es el mejor para fotografas, texturas o imgenes con ms de 256 colores. Este formato posibilita un equilibrio adecuado entre la calidad de la imagen y el tamao de archivo. El formato de archivo PNG (Portable Network Group) soporta bien tanto las imgenes de pocos colores como las multicolores. Es compatible con el canal alfa para transparencias. PNG es el formato de archivo nativo de Fireworks y dichos archivos se deben guardar con la extensin .png para que Dreamweaver pueda reconocerlos como tales. Para encontrar el formato ms idneo de la imagen, existen varios programas de edicin de imgenes como Paint Shop Pro, Adobe Photoshop, Fireworks, el gratuito GIMP, etc. Pero si no tenemos ninguno de estos programas y tenemos dudas sobre qu tipo de formato utilizar en nuestra imagen, debemos tener presente que JPEG va bien con todo tipo de imgenes y tiene un buen nivel de compresin. La desventaja de este formato con respecto a los otros es que no admite transparencias.
RECOMENDACIN. Haz siempre una copia de la imagen original, pues es imposible recuperar informacin de una imagen comprimida.
Vectoriales El formato vectorial est basado en la informacin mediante vectores calculados matemticamente. El procedimiento que trata la informacin es indicar el punto inicial, el punto final y el color que hay entre ambos puntos. Este procedimiento es idneo para dibujos pues la calidad no la pierde ya que si modificamos el tamao, el programa slo tiene que volver a calcular a partir de los nuevos datos, adems el tamao del fichero ser mucho menor por tener que guardar menos informacin. Veamos un ejemplo de imagen realizada en formato vectorial. Dreamweaver CS4. Captulo 5. Imgenes
123
Figura 5.3. Imagen vectorial.
Figura 5.4. Imagen vectorial ampliada. En el ejemplo de la figura anterior no se aprecia prdida de calidad en el aumento de tamao de la imagen de la figura 5.4 con respecto a la original de la imagen de la figura 5.3. Dreamweaver CS4. Captulo 5. Imgenes
124
Este tipo de formato no es aconsejable para fotografas y similares, porque entonces debera almacenar mucha informacin debido al constante cambio de color en este tipo de ficheros. Los archivos de formato vectorial no suelen ser aceptados por los navegadores a excepcin de los realizados en Flash que, gracias a un programa vinculado al navegador (Plug-in), nos perrmite cargar y visualizar este tipo de ficheros. 5.2. Insertar una imagen Para insertar una imagen en nuestro documento lo podemos hacer desde el men Insertar > Imagen,
Figura 5.5. Insertar imagen desde el men Insertar. desde el panel Insertar, haciendo clic en el botn Imgenes: Imagen, de la ficha Comn, pulsando en el icono o arrastrando dicho icono desde la ficha Comn directamente al escenario.. Dreamweaver CS4. Captulo 5. Imgenes
125
Figura 5.6. Insertar imagen desde el panel Insertar. Al hacer esto se abre el cuadro de dilogo Seleccionar origen de imagen desde donde podemos buscar y seleccionar una imagen.
Figura 5.7. Cuadro de dilogo Seleccionar origen de imagen. En esta ventana nos aparecen por defecto los ficheros con extensiones gif, jpg, jpeg, png y .psd. Si queremos seleccionar un fichero de imagen con otra extensin, por ejemplo tif, bmp, etc, deberemos seleccionar en Tipo la opcin Todos los archivos (*.*). URL nos indica la ruta donde se encuentra la imagen. Esta ruta es relativa a lo que indiquemos en el cuadro Relativa a:. En este cuadro podemos definir si la imagen es relativa al Documento o a la Raz del Sitio. Es recomendable que activemos la opcin Documento para no perder el vnculo en el caso de mover todo el sitio a una ubicacin diferente. Los vnculos y rutas los trataremos ms detalladamente en el tema siguiente. Dreamweaver CS4. Captulo 5. Imgenes
126
Si activamos la opcin Vista previa de imagen, nos aparece la imagen en miniatura as como sus dimensiones, formato, tamao y tiempo aproximado de descarga. Al hacer clic en Aceptar, automticamente se abre la ventana Atributos de accesibilidad de la etiqueta de imagen, si previamente hemos activado dicho cuadro en Preferencias; en esta ventana podemos teclear un texto alternativo para que los usuarios lo lean cuando pasan el cursor por encima de la imagen, en el navegador. Deber ser un texto descriptivo de la imagen y su longitud deber limitarse a 50 caracteres. Tambin podemos rellenar el campo Descripcin larga, tecleando una ubicacin de un archivo que aparezca cuando el usuario haga clic en la imagen o en el icono de carpeta para desplazarse hasta el archivo. Este cuadro de texto proporciona un vnculo a un archivo con el que est relacionado u ofrece ms informacin acerca de la imagen.
Figura 5.8. Atributos de accesibilidad de la etiqueta de imagen. Si hacemos clic en Aceptar, la imagen se inserta en nuestro documento. Si hacemos clic en Cancelar, la imagen se inserta en nuestro documento, pero Dreamweaver no le asocia atributos o etiquetas de accesibilidad. Al insertar una imagen en el documento, Dreamweaver genera de forma automtica una referencia al archivo imagen en el cdigo HTML como en el del siguiente ejemplo: <img src="Elementos/Imágenes/teatro.jpg" width="1024" height="768"> Para asegurar que la referencia es correcta, el archivo de imagen deberemos tenerlo en el sitio actual. Si no estuviera, Dreamweaver nos preguntar si deseamos copiar el archivo en el sitio. Una vez insertada la imagen, al seleccionarla, en el Inspector de Propiedades nos muestra el archivo de origen de la imagen y sus dimensiones en pxeles. Adems, desde este inspector, podemos tambin establecer propiedades de la imagen.
Dreamweaver CS4. Captulo 5. Imgenes
127
Figura 5.9. Inspector de propiedades de imagen. A veces puede ocurrir, mientras diseamos nuestra pgina, que no tengamos todas las imgenes que necesitamos. Dreamweaver nos permite insertar un Marcador de posicin de imagen en el lugar destinado a la imagen que vayamos a colocar posteriormente. Para insertar un Marcador de posicin de imagen desplegamos el men Insertar > Objetos de imagen > Marcador de posicin de imagen.
Figura 5.10. Insertar marcador de posicin de imagen. Se abre el cuadro de dilogo Marcador de posicin de imagen.
Figura 5.11. Cuadro de dilogo Marcador de posicin de imagen. Dreamweaver CS4. Captulo 5. Imgenes
128
En este cuadro podemos poner el nombre del marcador, establecer el ancho y la altura que tendr nuestra imagen, el color que vamos a poner al marcador para hacerlo ms visible y un texto alternativo para completar la informacin. Para sustituir el marcador de posicin por la imagen basta con hacer doble clic sobre l y se abrir el cuadro de dilogo Seleccionar origen de imagen (Figura 5.7).
Ejercicio
El objetivo en este ejercicio ser insertar un marcador de posicin de imagen.
Crea un nuevo documento en blanco (Archivo > Nuevo).
Inserta un Marcador de posicin de imagen (Insertar > Objetos de imagen > Marcador de posicin de imagen).
En el cuadro de dilogo Marcador de posicin de imagen, indica las siguientes caractersticas:
o Nombre: templo. o Ancho: 300 pxeles. o Altura: 200 pxeles. o Color: #FFFF99. o Texto alternativo: Templo Diana.
Figura 5.12. Propiedades del marcador de posicin de imagen.
Haz clic en Aceptar. El marcador de posicin de imagen quedar como muestra el siguiente ejemplo: Dreamweaver CS4. Captulo 5. Imgenes
129
Figura 5. 13. Marcador de posicin de imagen desde vista diseo.
Guarda el documento como imagen1.
5.3. Propiedades de la imagen Cuando insertamos una imagen y la seleccionamos, el Inspector de Propiedades nos permite ver y modificar sus propiedades. Si es necesario, para que podamos ver todas las propiedades de la imagen, debemos hacer clic en la flecha de ampliacin situada en la esquina inferior derecha.
Figura 5.14. Inspector de propiedades de una imagen seleccionada. En el cuadro de texto situado bajo la imagen en miniatura podemos establecer un nombre de modo que pueda hacer referencia a la imagen cuando utilicemos un comportamiento de Dreamweaver (como Intercambiar imagen) o cuando utilicemos un lenguaje de creacin de Scripts como JavaScript o VBScript. Origen: en este cuadro de texto especificamos el archivo de origen para la imagen. En el icono de la carpeta podemos localizar la ruta del archivo de origen. Vnculo: en este cuadro de texto podemos indicar un hipervnculo para la imagen. En el siguiente captulo trataremos como crear vnculos. Alt: en este cuadro de texto pondremos el texto alternativo que aparecer en lugar de la imagen. Esto es muy vlido para los navegadores que slo admiten texto o en aqullos configurados para descargar las imgenes manualmente. En algunos navegadores, este texto tambin aparece al situar el puntero sobre la imagen. Dreamweaver CS4. Captulo 5. Imgenes
130
Tamao de la imagen Dreamweaver nos permite modificar el tamao de las imgenes. Esta modificacin no se efecta sobre la imagen sino sobre la visualizacin de la misma, por lo tanto slo modificaremos las proporciones de la imagen en la pantalla, pero no su tamao real. Para modificar el tamao real de una imagen necesitaremos un editor de imgenes externo. Podemos modificar el tamao de la imagen de dos formas: Arrastrando los manejadores de cambio de tamao que aparecen alrededor de la imagen al seleccionarla, o
Figura 5.15. Manejadores de cambio de tamao de imagen. Desde el Inspector de Propiedades, modificando los valores An (Ancho) y Al (Alto) de la imagen seleccionada. An (Ancho) y Al (Alto) especifican el ancho y el alto de la imagen en pxeles. Con los manejadores de tamao, al cambiar la imagen, varan automticamente las dimensiones de la misma en el Inspector de Propiedades. Para mantener las proporciones de la imagen, basta con mantener pulsada la tecla Mays mientras manipulamos los manejadores. Para recuperar el ancho y el alto originales de una imagen redimensionada, podemos hacer clic en el botn Restablecer tamao que aparece a la derecha, entre los cuadros An y Al cuando se han modificado los valores de la imagen seleccionada . Tambin lo podemos hacer seleccionando Restablecer tamao en el men contextual que aparece al hacer clic con el botn derecho sobre la imagen.
RECOMENDACIN. Comprueba en el panel del Inspector de Propiedades, que aunque modifiques desde l las dimensiones de la imagen, el tamao del fichero no vara.
Dreamweaver CS4. Captulo 5. Imgenes
131
Edicin de imgenes Dreamweaver nos va a permitir utilizar diferentes programas para editar y modificar las imgenes. Para configurar un editor de imgenes externo desplegamos el men Edicin y seleccionamos Preferencias. Se abre el cuadro de dilogo Preferencias y seleccionamos la Categora Tipos de archivos / editores.
Figura 5. 16. Preferencias de archivos y editores. Desde este cuadro podemos seleccionar el editor de imagen con el que deseamos abrir y editar los archivos grficos. Tambin podemos configurar los tipos de archivo que abre un editor determinado, seleccionar varios editores de imagen y asignar un editor distinto dependiendo del tipo de archivo que se trate y seleccionar el origen de Fireoworks, que es el editor de imagen que se complementa mejor con Dreamweaver, ya que ambos son de la misma familia de productos. Por ejemplo, si tenemos como editores Fireworks y Photoshop, podemos indicar a Dreamweaver que inicie Fireworks cuando deseemos editar un archivo GIF y que inicie Photoshop cuando sea un archivo JPG o JPEG. Si deseamos configurar un editor de imgenes externo para un tipo de archivo existente, llevaremos a cabo las siguientes acciones: Abrimos el cuadro de dilogo Edicin > Preferencias... y en Categora, seleccionamos Tipos de archivos/editores.
Dreamweaver CS4. Captulo 5. Imgenes
132
En el apartado Extensiones, seleccionamos la extensin del archivo para la que deseamos configurar un editor externo, por ejemplo .png.
Figura 5.17. Seleccionar extensin.
Hacemos clic en el botn Aadir situado encima del apartado Editores. Se abrir el cuadro de dilogo Seleccionar editor externo. En este cuadro de dilogo, localizamos la aplicacin que deseamos que se inicie como editor para este tipo de archivo, por ejemplo Fireworks, si lo tenemos ya instalado en nuestro equipo pero no configurado como editor principal. Puedes bajarte una versin de prueba del programa Fireworks de la web oficial de Adobe, e instalarlo en tu equipo para despus localizar su ejecutable en la ubicacin donde lo hayas instalado, desde este cuadro de dilogo Seleccionar editor externo. Hacemos clic en Abrir y volvemos al cuadro de dilogo Preferencias con el nuevo editor aadido para este tipo de fichero. Si deseamos que sea el editor principal hacemos clic en Convertir en principal . Con el mismo procedimiento podemos configurar otros editores adicionales para este tipo de archivo as como aadir nuevos editores a otros tipos de archivos. Para aadir un nuevo tipo de archivo a la lista Extensiones, realizaremos los siguientes pasos: Volvemos a abrir el cuadro de dilogo Preferencias (Edicin > Preferencias...) y en Categora seleccionamos Tipos de archivo/editores. Hacemos clic en el botn Aadir situado encima de la lista Extensiones. Aparecer un cuadro de texto al final de la lista Extensiones en el que escribimos la extensin del nuevo tipo de archivo, por ejemplo .bmp, (debes colocar el punto delante para indicar que es una extensin de archivo) y pulsamos la tecla Intro o hacemos clic en cualquier sitio para quedar escrita la extensin. Seguimos los pasos descritos anteriormente para seleccionar un editor externo con el que deseamos iniciar este tipo de archivos. Dreamweaver CS4. Captulo 5. Imgenes
133
Figura 5. 18. Aadir nueva extensin de archivo a Preferencias.
Si deseamos cambiar la configuracin del editor, deberemos llevar a cabo las siguientes acciones: Abrimos el cuadro de dilogo Edicin > Preferencias... y en Categora seleccionamos Tipos de archivos/editores. Seleccionamos el tipo de archivo en la lista Extensiones para ver los editores existentes para las diversas extensiones, por ejemplo seleccionamos .gif. En la lista de Editores, seleccionamos el editor deseado y hacemos clic en el botn Eliminar situado sobre esta lista para eliminarlo o bien hacemos clic en el botn Aadir para aadir un nuevo editor. Tambin podemos hacer clic en el botn para cambiar el editor que debe iniciarse de manera predeterminada. Desde el Inspector de Propiedades, Dreamweaver introduce unas sencillas herramientas que nos van a permitir editar o modificar las imgenes : Editar: desde este botn podemos iniciar el editor de imgenes que hayamos especificado en las preferencias de editores externos. El editor de imgenes especificado abre la imagen seleccionada. Dreamweaver CS4. Captulo 5. Imgenes
134
Editar configuracin de la imagen: pulsando este botn , abrimos el cuadro de dilogo Vista previa de la imagen y nos permite optimizar la imagen. Actualizar desde original: al pulsar el botn podemos actualizar la imagen seleccionada basndonos en el original de la misma. Si pulsamos los iconos agrupados en esta barra del mismo inspector de propiedades de la imagen, podremos llevar a cabo: Recortar: desde el botn Recorte podemos recortar el tamao de una imagen y eliminar las reas no deseadas de la imagen seleccionada. Tambin nos permite salvar la imagen recortada. Volver a muestrear: este botn nos permite mejorar la calidad de una imagen cuyo tamao se ha cambiado, aadiendo o quitando pxeles. Brillo y contraste: con este botn podemos ajustar los valores de brillo y de contraste de una imagen para corregir su iluminacin. Perfilar: este botn nos permite ajustar la nitidez de una imagen borrosa.
RECOMENDACIN. Es aconsejable utilizar programas de edicin para las modificaciones que vayamos a efectuar en las imgenes.
5.4. Imgenes interactivas Mapa de imagen Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas. Cuando el usuario hace clic en una zona interactiva, se realiza una accin, por ejemplo, se abre un archivo nuevo. Cuando insertamos un mapa de imagen del lado del cliente, debemos crear una zona interactiva y, a continuacin, definir un vnculo que se abra cuando el usuario haga clic en esta zona. En un mapa podemos crear mltiples zonas interactivas, pero formarn parte del mismo mapa de imagen. Para crear un mapa de imagen del lado del cliente, seleccionamos la imagen en la ventana de documento. Dreamweaver CS4. Captulo 5. Imgenes
135
En el Inspector de Propiedades tenemos herramientas para crear el mapa de la imagen seleccionada as como las zonas interactivas de la misma . En el cuadro de texto Mapa, escribimos un nombre para el mapa de imagen. Si vamos a utilizar varios mapas de imagen para un mismo documento, deberemos asignar un nombre distinto a cada uno. Para definir las zonas interactivas de mapas de imagen podemos seleccionar la herramienta Zona interactiva rectangular , la herramienta Zona interactiva oval o la herramienta Zona interactiva poligonal , dependiendo del tipo de zona interactiva que vayamos a crear. Una vez elegida la herramienta que vamos a utilizar, dibujamos sobre la imagen seleccionada, con el puntero del ratn la zona interactiva que vamos a insertar. Al hacerlo, Dreamweaver nos mostrar el siguiente aviso referente a la accesibilidad de las webs para personas con problemas de visin:
Figura 5.19. Aviso Dreamweaver accesibilidad mapas de imgenes. Si pulsamos Aceptar, podemos ver el Inspector de Propiedades de la zona interactiva que hayamos creado.
Figura 5.20. Inspector de propiedades de zona interactiva. Desde este Inspector de Propiedades podemos seleccionar las opciones de Vnculo, Destino y Texto alternativo (campo Alt), para la zona interactiva seleccionada. Estas caractersticas las iremos viendo con ms detalle en los siguientes captulos, a lo largo del curso. Una vez terminado de definir el mapa de imagen, basta con hacer clic en cualquier parte del documento para cambiar el Inspector de Propiedades. Dreamweaver CS4. Captulo 5. Imgenes
136
Con la herramienta Puntero de zona interactiva podemos seleccionar y mover las zonas interactivas. Otras opciones de la imagen disponibles en el inspector de propiedades si tenemos una imagen seleccionada son: Espacio V (vertical) y Espacio H (horizontal): son cuadros que nos permiten aadir espacios a los lados de la imagen. Los valores que pongamos en el cuadro de Espacio V ser el espacio en pxeles que aadiremos en la parte superior e inferior de la imagen, mientras que en el cuadro Espacio H, los valores que pongamos, crearan los espacios en pxeles a la izquierda y a la derecha de la imagen. Destino: este men desplegable slo est disponible cuando la imagen est vinculada a otro archivo. En este men figuran los nombres de todos los marcos de un conjunto de marcos actual y podemos seleccionar el marco o la ventana donde se cargar la pgina vinculada. Adems podemos seleccionar destinos reservados: - _blank carga el archivo vinculado en una ventana de navegador nueva y sin nombre. - _parent carga el archivo vinculado en un conjunto de marcos padre o en la ventana del marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el archivo vinculado se cargar en la ventana completa del navegador. La creacin de Marcos la veremos en un captulo posterior. - _self carga el archivo vinculado en el mismo marco o ventana que el vnculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo. - _top carga el archivo vinculado en la ventana completa del navegador, quitando as todos los marcos. Desde el campo Original podemos insertar directamente una imagen original creada con Fireworks (extensin .png) o con Photoshop (extensin .psd) simplemente pulsando el icono Sealar archivo y arrastrndolo hasta el archivo correspondiente en el panel de Archivos; automticamente Dreamweaver la guardar en el formato de imagen ms conveniente y la insertar en nuestro documento. Si no tenemos el archivo en el panel tambin podremos localizarlo en nuestro sitio web abriendo el icono Buscar archivo que abrir el cuadro de dilogo Seleccionar archivo original. Borde: en este cuadro podemos crear un borde a la imagen. El valor del cuadro se corresponder con el ancho del borde en pxeles. El color del borde ser el mismo que tengamos definido para el texto y si la imagen tiene asignado un hipervnculo, entonces el color ser el mismo que tengan definidos los hipervnculos. Por defecto, las imgenes no presentan borde. Alinear: Desplegado, este men nos permite alinear una imagen con el texto, con otra imagen, con un plug-in o con otros elementos de la misma lnea. Dreamweaver CS4. Captulo 5. Imgenes
137
Desde el men desplegable podemos modificar la alineacin de una imagen con respecto a otros objetos adyacentes. Basta con seleccionar la opcin que deseemos del men.
Figura 5.21. Men desplegable Alinear. Las opciones son: Predeterminado suele especificar una alineacin con la lnea de base. (El valor predeterminado puede variar en funcin del navegador del visitante del sitio.) Lnea de base e Inferior alinean la lnea de base del texto (u otro elemento del mismo prrafo) con la parte inferior del objeto seleccionado. Superior alinea la parte superior de una imagen con la parte superior del elemento ms alto (imagen o texto) de la lnea actual. Medio alinea la parte central de la imagen con la lnea de base de la lnea actual. Texto superior alinea la parte superior de la imagen con la parte superior del carcter ms alto de la lnea de texto. Medio absoluta alinea la parte central de la imagen con la parte central del texto de la lnea actual. Inferior absoluta alinea la parte inferior de la imagen con la parte inferior de la lnea de texto (incluidos los trazos descendentes, como en el caso de la letra g). Izquierda sita la imagen seleccionada en el margen izquierdo, ajustando a la derecha el texto que la rodea. Si hay texto alineado a la izquierda delante del objeto, los objetos alineados a la izquierda suelen pasar a una nueva lnea. Derecha sita la imagen en el margen derecho, ajustando a la izquierda el texto que la rodea. Si hay texto alineado a la derecha delante del objeto, los objetos alineados a la derecha suelen pasar a una nueva lnea. Imgenes de sustitucin Una imagen de sustitucin o Rollover es una imagen que al pasar el puntero del ratn sobre ella se transforma en otra imagen. Dreamweaver CS4. Captulo 5. Imgenes
138
El Rollover es muy utilizado en los botones o mens que nos llevan a distintas pginas.
Ejercicio
El objetivo en este ejercicio ser la creacin de un Rollover o imagen de sustitucin. Para realizarlo, vamos a crear previamente dos sencillas imgenes con el Paint.
Desde el men Inicio de Windows, lanza la aplicacin Paint, suele estar en Accesorios. Si no localizas este programa, ejecuta el comando Inicio > Ejecutar y en el cuadro de dilogo que te aparece escribe mspaint. Aceptar. Dibuja un rectngulo de color rojo y sobre l inserta el texto: Imagen de sustitucin, de color amarillo, tal como se muestra en la figura siguiente:
Figura 5.22. Crear una imagen con Paint.
Guarda la imagen en MiWeb>Elementos>imgenes, como img1.png (Archivo > Guardar como). Crea una nueva imagen con el Paint, idntica a la anterior, pero el fondo de color amarillo y el texto de color rojo. Guarda la nueva imagen como img2.png. Debes tener dos imgenes parecidas a las siguientes:
Figura 5.23. img1.png
Figura 5.24. img2.png Dreamweaver CS4. Captulo 5. Imgenes
139
NOTA: Si tienes dificultades para crear estas imgenes, te las podrs descargar desde la Mesa de trabajo del curso. Estn dentro de Materiales de Apoyo>Material necesario para ejercicios>Ejercicios del Captulo5, y continuar el ejercicio desde aqu.
Crea en Dreamweaver un nuevo documento en blanco (Archivo > Nuevo).
Coloca el cursor donde vayas a insertar el Rollover y selecciona Insertar > Objetos de imagen > Imagen de sustitucin. Tambin puedes hacerlo seleccionando Imagen de sustitucin, desde el botn Imagen en la ficha Comn de la barra Insertar.
Figura 5.25. Seleccionar imagen de sustitucin desde Ficha Insertar.
Se abre el cuadro de dilogo Insertar imagen de sustitucin.
En el cuadro de texto Nombre de la imagen: escribe rollover como nombre de la imagen. En el cuadro de texto Imagen original: utiliza el botn Examinar... para localizar el fichero img1.png en la carpeta donde lo guardaste.
En el cuadro de texto Imagen de sustitucin: utiliza el botn Examinar... para localizar el fichero img2.png en la carpeta donde lo guardaste.
Activa la opcin Carga previa de imagen de sustitucin para que se cargue a la vez que la pgina y as evitar retrasos por la descarga de la imagen cuando llega el momento de aparecer.
En el cuadro Texto alternativo: si quieres, puedes poner el texto que aparecer al poner el puntero del ratn sobre la imagen o el que aparecer en lugar de la imagen en el caso que esta no se pudiera mostrar en el navegador.
En el cuadro de texto Al hacerse clic, ir al URL: puedes crear un hipervnculo a la imagen de sustitucin, pero por ahora lo dejamos en blanco. Dreamweaver CS4. Captulo 5. Imgenes
140
Figura 5.26. Cuadro de dilogo Insertar imagen de sustitucin.
Guarda el documento como imagen2 (Archivo>Guardar como).
Pulsa la tecla F12 para ver el documento en el navegador. Comprueba el efecto al pasar el cursor sobre la imagen.
Barra de navegacin Una barra de navegacin es una imagen o un conjunto de imgenes cuya visualizacin cambia segn las acciones que realice el usuario y se utilizan generalmente como men para navegar por las pginas y los archivos de un sitio. Para insertar una barra de navegacin, podemos hacerlo desde el men Insertar>Objetos de imagen>Barra de navegacin, o seleccionando Barra de navegacin, desde el icono Imgenes en la ficha Comn de la barra Insertar. Dreamweaver CS4. Captulo 5. Imgenes
141
Figura 5.27. Insertar Barra de navegacin. Se abre el cuadro de dilogo Insertar barra de navegacin.
Figura 5.28. Cuadro de dilogo Insertar barra de navegacin. Dreamweaver CS4. Captulo 5. Imgenes
142
En el nuevo cuadro nos aparece de forma predeterminada el elemento sinnombre1. Este elemento se corresponde con un botn, sinnombre1, al cual debemos adjudicar un nombre desde el cuadro de texto Nombre de elemento: para nuestra barra de navegacin. Si no escribimos ningn nombre, Dreamweaver utilizar el nombre de la imagen que le insertemos. Para cada elemento (botn) que insertemos en nuestra barra de navegacin podemos especificar cuatro imgenes diferentes, correspondientes a cada uno de los estados del botn: Imagen arriba: la imagen que aparece en el botn antes de usarse. Sobre imagen: la imagen que aparece al pasar el puntero sobre el botn. Imagen abajo: la imagen que aparece al hacer clic sobre el botn. Sobre mientras imagen abajo: la imagen que aparece al pasar el puntero sobre el botn despus de haber hecho clic en l. Podemos utilizar el botn Examinar... para localizar las imgenes que vayamos a utilizar en cada uno de los estados del botn de la barra de navegacin, aunque no es necesario incluir imgenes en todos ellos. En el cuadro Texto alternativo pondremos el texto que aparecer en lugar de la imagen del botn en el caso que esta no se pudiera mostrar en el navegador. En el cuadro de texto Al hacerse clic, ir al URL, podemos crear un hipervnculo desde el botn a un URL. A la derecha de este cuadro de texto, aparece un cuadro desplegable donde podremos seleccionar en qu ventana se mostrar el documento vinculado. Podemos activar la opcin Carga previa de imgenes si queremos que las imgenes se carguen automticamente. Si queremos que se muestre la imagen del botn pulsado, deberemos activar la opcin Mostrar Imagen abajo inicialmente. Podemos insertar ms elementos (botones) a nuestra barra de navegacin haciendo clic en el botn . Si queremos eliminar algn elemento existente, lo seleccionamos y hacemos clic en el botn . Una vez creado los elementos de nuestra barra de navegacin, si queremos cambiar el orden, podemos utilizar los botones y sobre el elemento seleccionado. Por ltimo, podemos indicar si queremos que la barra de navegacin se muestre horizontal o verticalmente desde el desplegable Insertar y si queremos o no Utilizar tablas activando o desactivando dicha opcin en el cuadro de dilogo.
143
Captulo 6. Vnculos
Dreamweaver CS4. Captulo 6. Vnculos 144
Captulo 6. VNCULOS Un vnculo, hipervnculo, enlace, hiperenlace, etc. es la misma forma de denominar a un elemento que al ser pulsado te lleva de una pgina o archivo a otra pgina o archivo. Podremos asignar vnculos a una imagen, un botn, un texto, etc. La etiqueta HTML asociada a los vnculos es: <a href="archivoenlazado">elementodeenlace</a> 6.1. Rutas de vnculos Cuando vayamos a crear un vnculo, es fundamental conocer la ruta entre el elemento que establece el vnculo y el archivo vinculado. Para explicar las rutas de los vnculos vamos a partir de un ejemplo que nos puede ayudar a tener ms claras las ideas. Supongamos que trabajo en un edificio de oficinas de varias plantas. Mi direccin completa de trabajo sera el pas, la provincia, la ciudad, la calle, el nmero, el piso y la letra. Esta direccin podramos considerarla como una ruta de acceso absoluta. Mi oficina de trabajo est en la planta 5 y me encuentro en un momento determinado en la planta 3. Si alguien me pregunta por mi direccin de trabajo, podra indicarle la ruta absoluta que hemos visto anteriormente, pero no es lgico repetir el pas, la provincia, la ciudad, la calle y el nmero. Bastara con indicar que trabajo 2 plantas arriba. En este caso le indicara una ruta de acceso relativa al lugar donde me encuentro actualmente. Pero tambin le podra haber indicado que trabajo en la planta 5 con lo que le estoy indicando una ruta de acceso relativa a la ubicacin del edificio. Visto esto, podemos decir que existen varios tipos de rutas de acceso al definir los vnculos: Rutas absolutas: son las rutas que nos llevan a un documento externo al sitio y suelen indicar la direccin completa, es decir, el URL. Por ejemplo, https://centrovirtual.educacion.es/mentor/inicio.html. El URL (Uniform Resource Locator) son direcciones nicas que sirven para localizar una pgina Web en Internet. La ruta absoluta se suele utilizar para vincular documentos situados en otro servidor, sera como la direccin completa de mi lugar de trabajo del ejemplo anterior. Aunque tambin se podra utilizar para vnculos del sitio local, no es prctico. Adems, el problema est en que si cambiamos el sitio de dominio, se romperan todos los vnculos de las rutas absolutas locales. Rutas relativas al documento: son las rutas que nos llevan a otro documento de nuestro sitio, pero partiendo del directorio en el que se encuentra el documento actual. En este tipo de ruta se omite la parte del URL que es comn a ambos documentos.
Dreamweaver CS4. Captulo 6. Vnculos
145
En nuestro ejemplo de la oficina, sera indicar que trabajo dos plantas ms arriba, es decir, sera la ruta relativa al lugar donde me encuentro en ese momento (planta 3). Aqu no hace falta que indiquemos la direccin completa de mi lugar de trabajo, slo lo que difiere con respecto a mi localizacin actual. Qu ocurre si me preguntan por mi lugar de trabajo cuando estoy en la planta 1? Lgicamente la ruta que indiqu en la planta 3 ya no es vlida, pues mi lugar de trabajo no est dos plantas arriba. Es decir, al modificar mi localizacin, mi ruta relativa tambin ha sido modificada. Igualmente, cuando se mueve un archivo que tengamos vinculado, necesitaremos actualizar las rutas de sus vnculos. Dreamweaver actualiza los vnculos de forma automtica si tenemos activada esta opcin en la categora General de Edicin>Preferencias; podemos decidir si queremos que actualice los vnculos siempre, nunca, o que nos muestre un mensaje.
Figura 6.1. Preferencias de actualizacin de vnculos. Si nos hemos decidido esta ltima posibilidad, entonces nos preguntar si queremos aceptar los cambios. Rutas relativas a la raz del sitio: son las rutas que nos llevan a otro documento de nuestro sitio desde la carpeta raz. Una ruta relativa a la raz de un sitio comienza por una barra diagonal (/) que representa la carpeta raz del sitio. Dreamweaver CS4. Captulo 6. Vnculos
146
Figura 6.2. Actualizar vnculos. Siguiendo con nuestro ejemplo, nos basta con indicar que nuestro lugar de trabajo es la planta 5 y esta ruta permanece invariable respecto al edificio, es decir, no importa en la planta que nos encontremos. Aqu tampoco hace falta indicar la direccin completa. NOTA. Dreamweaver crea de forma automtica una ruta absoluta mientras no tengamos guardado el documento en el que estamos trabajando. En cuanto lo guardemos cambia el tipo de ruta asociado al vnculo. Para que podamos entender esto y veamos las diferencias entra las rutas relativas al documento y a la raz del sitio (MiWeb), pongamos un ejemplo prctico.
Figura 6.3. Carpetas y archivos del Sitio local. En el documento monumentos.htm escribimos las palabras FOTO e INICIO. Desde la palabra FOTO vamos a crear un vnculo al fichero templo_diana.png y desde la palabra INICIO creamos otro vnculo al fichero index.htm. Dreamweaver CS4. Captulo 6. Vnculos
147
Adems, en el documento index.htm escribimos la palabra MONUMENTOS para crear un vnculo al fichero monumentos.htm. Con esto podemos comprobar las diferencias de rutas dependiendo del origen del vnculo y el objeto vinculado Si los vnculos los creamos relativos al documento, las rutas que debemos indicar para cada uno de los enlaces ser: o Desde la palabra FOTO, en monumentos.htm, la ruta ser: Elementos/imagenes/templo_diana.png. Observa que la ruta desde la palabra foto indica todo el camino hasta el nombre del fichero vinculado (templo_diana.png) ya que se encuentra dentro de la carpeta imgenes del directorio Elementos, un directorio distinto al de monumentos.htm, por lo cual indica la carpeta (imgenes) que contiene el fichero vinculado (templo_diana.png) y que adems est dentro de otra carpeta distinta (Elementos). El cdigo HTML asociado a este tipo de vnculo es <a href="Elementos/imagenes/templo_diana.png">FOTO</a>. o Desde la palabra INICIO, en monumentos.htm, la ruta ser: index.html. Simplemente el nombre del documento hacia el cual se dirige el vnculo, ya que index.htm y monumentos.htm se encuentran en el mismo nivel. El cdigo HTML asociado a este vnculo ser <a href="index.html">INICIO</a>. o Si el fichero vinculado estuviese en un directorio distinto del fichero en el que realizamos el enlace y la ruta necesaria para localizarlo debiera subir un nivel en la jerarqua de carpetas, entonces la ruta comenzara por ../ y el cdigo HTML asociado a ese tipo de vnculo sera: <a href="../index.html">INICIO</a>
o Desde la palabra MONUMENTOS, en index, la ruta ser: monumentos.htm. Observa que la ruta desde la palabra monumentos es idntica al ejemplo anterior, ya que el fichero vinculado (monumentos.htm) se encuentra en un directorio idntico al fichero index.htm. El cdigo HTML asociado es <a href="monumentos.htm">MONUMENTOS</a>. Si los vnculos los creamos relativos a la raz del sitio, las rutas de cada uno de los enlaces ser: Desde la palabra FOTO, en monumentos.htm, la ruta ser: /mgas0012/Elementos/imagenes/templo_diana.png. (mgas0012 es el usuario de ejemplo que tenemos en el sitio MiWeb, el tuyo variar segn el que tengas asignado por Mentor). El cdigo HTML asociado a este vnculo es <a href="/mgas0012/Elementos/imagenes/templo_diana.png">FOTO</a> Desde la palabra INICIO, en monumentos.htm, la ruta ser: /mgas0012/index.html. (mgas0012 es el usuario de ejemplo que tenemos en el sitio MiWeb, el tuyo variar Dreamweaver CS4. Captulo 6. Vnculos
148
segn el que tengas asignado por Mentor). En este caso, observa que en el vnculo desde la palabra INICIO slo aparece la barra inclinada (/) para indicar que este fichero (index.htm) se encuentra en la raz del sitio (ejemplo: mgas0012). El cdigo HTML asociado a este vnculo es <a href="/mgas0012/index.html">INICIO</a> Desde la palabra MONUMENTOS, en index, la ruta ser idntica en forma a la anterior: /mgas0012/monumentos.htm. (mgas0012 es el usuario de ejemplo que tenemos en el sitio MiWeb, el tuyo variar segn el que tengas asignado por Mentor). El cdigo HTML asociado a este vnculo es <a href="/mgas0012/monumentos.htm">MONUMENTOS</a> Como norma general, para vincular documentos de la misma carpeta deberemos utilizar las rutas de acceso relativas al documento, mientras que si trabajamos con sitios muy grandes, que contienen muchas carpetas y subcarpetas, es mejor utilizar las rutas relativas a la raz del sitio. Las caractersticas de las rutas absolutas y relativas explicadas anteriormente son vlidas para todos los elementos que componen una pgina Web, aunque para las imgenes y otros tipos de archivos multimedia es aconsejable utilizar la rutas relativas al sitio.
RECOMENDACIN. Pasa de vez en cuando a la vista Dividir para que te muestre simultneamente las vistas cdigo y diseo del documento que ests elaborando y puedas identificar las etiquetas asociadas a los vnculos y sus rutas.
6.2. Creacin y eliminacin de vnculos Crear vnculos La forma ms sencilla que tenemos de crear un vnculo es a travs del Inspector de Propiedades HTML. Seleccionamos el elemento que vamos a vincular, ya sea una o varias letras, palabras, prrafos, imgenes, tablas, capas, etc., y despus, en el cuadro de texto Vnculo del Inspector de Propiedades HTML indicamos cual es el archivo vinculado. Si el documento es externo a nuestro sitio, escribiremos en el cuadro de texto Vnculo el URL completo, con indicacin del protocolo utilizado. Por ejemplo http://www.mentor.mec.es.
Ejercicio
El objetivo en este ejercicio ser la creacin de un vnculo externo.
Abre el documento enlaces.html (Doble clic sobre el nombre del fichero en el sitio local en la panel Archivos).
Si no lo tienes creado, debers crearlo y guardarlo con el nombre enlaces.htm. en tu sitio Dreamweaver CS4. Captulo 6. Vnculos
149
MiWeb.
Escribe en maysculas la palabra ISFTIC. Selecciona la fuente Arial, tamao 36 pxeles, color #000, negrita.
Selecciona la palabra completa (doble clic con el cursor del ratn sobre ella).
Localiza en el Inspector de Propiedades HTML el cuadro de texto Vnculo y escribe en l la ruta absoluta a http://www.isftic.mepsyd.es/.
Figura 6.4. Crear un hipervnculo externo.
Guarda los cambios del documento enlaces.html y pulsa F12 para visualizar la pgina en el navegador.
Comprueba en el navegador que ocurre al hacer clic sobre la palabra vinculada (ISFTIC).
Si cuando vamos a establecer un vnculo, el documento vinculado pertenece a nuestro propio sitio, podemos hacerlo directamente a travs del botn Sealar archivo . Para ello, basta con hacer clic en este botn y sin soltar, llevarlo hasta el fichero que deseamos vincular. Dreamweaver CS4. Captulo 6. Vnculos
150
Figura 6. 5. Vincular con el botn Sealar archivo. Tambin podemos utilizar el botn Buscar el archivo para localizar el fichero que vayamos a vincular y de esta forma asegurarnos de que la ruta est correctamente introducida. Al hacer clic en este botn se nos abre el cuadro de dilogo Seleccionar archivo.
Figura 6.6. Cuadro de dilogo Seleccionar archivo. Dreamweaver CS4. Captulo 6. Vnculos
151
En este cuadro elegiremos el fichero que vayamos a vincular. Para ello localizamos la carpeta que lo contiene en el cuadro Buscar en: y en el cuadro de texto inferior Nombre:, seleccionamos el fichero correspondiente. De forma automtica se nos escribe la ruta del enlace en el cuadro de texto URL:. En el cuadro de seleccin Relativa a: indicamos si la ruta ser relativa al Documento o a la Raz del sitio. Dependiendo de nuestra eleccin, en el cuadro de texto URL aparecer una ruta u otra. Tambin podemos establecer un vnculo seleccionando el texto o la imagen que vamos a vincular y haciendo clic en el comando Insertar>Hipervnculo. Se abrir el cuadro de dilogo Hipervnculo.
Figura 6.7. Cuadro de dilogo Hipervnculo. En el cuadro Texto, escribimos el texto que deseamos que aparezca como hipervnculo en el documento. En el cuadro Vnculo, escribimos el nombre del archivo de destino del vnculo. Tambin lo podemos seleccionar a travs del icono de la carpeta Examinar que nos ayudar a localizar el archivo de destino en nuestro directorio. En el cuadro Destino, seleccionamos la ventana en la que deber abrirse el archivo. En la lista emergente figuran los nombres de todos los marcos que hayamos creado en el documento actual, si se tratase de un conjunto de marcos. Tambin podemos seleccionar los nombres de destino reservados. En el cuadro de texto Ttulo, escribimos un ttulo para el hipervnculo el cual aparece al colocar el cursor sobre el mismo. En el cuadro de texto Clave de acceso, introducimos un equivalente de teclado (una letra) para seleccionar el hipervnculo en el navegador. Dreamweaver CS4. Captulo 6. Vnculos
152
Por ejemplo, si escribimos la letra a como clave de acceso, al navegar, si pulsamos Alt + a se nos cargar el archivo vinculado. En el cuadro de texto ndice de fichas, introduciremos un nmero para el orden de fichas. Es decir, si en una pgina tengo creados varios vnculos, puedo establecer el orden al que se pueden acceder, con el tabulador, a estos vnculos, indicando el nmero en este cuadro. Este atributo es muy vlido para los formularios en Internet. Tambin podemos acceder al cuadro de dilogo Hipervnculo haciendo clic en el botn Hipervnculo de la barra Insertar, categora Comn. Por ejemplo, si creamos un vnculo con los siguientes datos:
Figura 6. 8. Insertar hipervnculo. El cdigo HTML que le corresponde es: <a href="index.html" tabindex="2" title="Volver al inicio" accesskey="a" target="_self">vnculo</a> Tambin podemos crear vnculos a ficheros del sitio simplemente situndonos sobre el elemento a partir del cual vamos a crear el enlace y seleccionando, con el botn derecho del ratn, Crear vnculo. Se abrir el cuadro de dilogo Seleccionar archivo y podremos proseguir como ya hemos aprendido. Dreamweaver CS4. Captulo 6. Vnculos
153
Figura 6.9. Crear vnculo.
Ejercicio
El objetivo en este ejercicio ser la creacin de varios vnculos pertenecientes a nuestro sitio.
Crea, si hay alguno que an no tengas creado, los siguientes documentos en la raz del sitio MiWeb: index, rutas, monumentos y fiestas. Guarda los cambios.
Abre el documento index (Archivo > Abrir).
Crea una lista sin ordenar, para ello despliega el men Formato, y selecciona Lista>Lista sin ordenar.
Dreamweaver CS4. Captulo 6. Vnculos
154
Figura 6.10. Insertar lista sin ordenar
Escribe las siguientes palabras en maysculas: RUTAS, MONUMENTOS, FIESTAS, ENLACES.
Figura 6. 11. Lista sin ordenar.
Selecciona la palabra RUTAS y desde el Inspector de Propiedades HTML, con el botn Sealar archivo , a la derecha del cuadro de texto Vnculo, crea un vnculo al documento rutas.htm.
Dreamweaver CS4. Captulo 6. Vnculos
155
Figura 6. 12. Seleccionar vnculo con el Sealador.
Selecciona la palabra MONUMENTOS y desde el Inspector de Propiedades HTML, con el botn Examinar , a la derecha del cuadro de texto Vnculo, localiza el documento monumentos.htm y seleccinalo para crear un vnculo al mismo. En el cuadro de texto Relativa a:, selecciona Documento, para crear una ruta relativa al documento.
Dreamweaver CS4. Captulo 6. Vnculos
156
Figura 6. 13. Seleccionar vnculo relativo a documento.
Ahora selecciona la palabra FIESTAS y desde el Inspector de Propiedades HTML, con el botn Examinar , a la derecha del cuadro de texto Vnculo, localiza el documento fiestas.htm y seleccinalo para crear un vnculo al mismo. En el cuadro de texto Relativa a:, selecciona Raz del sitio, para crear una ruta relativa a la raz del sitio.
Dreamweaver CS4. Captulo 6. Vnculos
157
Figura 6. 14. Seleccionar vnculo relativo a la raz del sitio.
Por ltimo, selecciona la palabra ENLACES y desde el comando Insertar>Hipervnculo, lanza el cuadro de dilogo Hipervnculo. Observa que aparece escrita la palabra ENLACES en el cuadro Texto. A la derecha del cuadro de texto Vnculo, con el botn Examinar , localiza el documento enlaces.htm y seleccinalo para crear un vnculo al mismo. En el cuadro de texto Relativa a:, selecciona Documento, para crear una ruta relativa al documento.
Figura 6. 15. Crear vnculo desde el cuadro Hipervnculo. Dreamweaver CS4. Captulo 6. Vnculos
158
Guarda los cambios en el documento index.htm y pulsa F12 para visualizar la pgina en el navegador.
Comprueba en el navegador que ocurre al hacer clic sobre las palabras vinculadas.
RECOMENDACIN. Pasa a la vista Dividir para que te muestre simultneamente las vistas cdigo y diseo del documento que ests elaborando y comprueba las diferencias de cdigo HTML que se han generado en los distintos vnculos.
Eliminar vnculos Para eliminar un vnculo creado en nuestro documento, sin eliminar el elemento que lo contiene, podemos hacerlo seleccionando previamente este elemento, texto o imagen, y, con el botn derecho del ratn, ejecutando Quitar vnculo, o borrando directamente el enlace escrito en el cuadro Vnculo del Inspector de Propiedades HTML. 6.3. Destinos de los vnculos El destino de los vnculos indica en qu ventana va a ser abierto el documento vinculado y depender de los marcos, si procede, que hayamos establecido en nuestro documento. El destino de los vnculos lo podemos establecer desde el cuadro Destino del Inspector de Propiedades HTML o desde el cuadro de dilogo Hipervnculo que se abre si seleccionamos el men Insertar>Hipervnculo. Adems de los nombres de los marcos creados en nuestro documento, en el caso de que hayamos creado un conjunto de marcos, podemos seleccionar los nombres de destino reservados: _blank, carga el archivo vinculado en una ventana de navagador nueva y sin nombre. _parent, carga el archivo vinculado en el conjunto de marcos padre o en la ventana del marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el archivo vinculado se cargar en la ventana completa del navegador. La creacin de Marcos la veremos en un captulo posterior. _self, carga el archivo vinculado en el mismo marco o ventana que el vnculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo. _top, carga el archivo vinculado en la ventana completa del navegador, quitando as todos los marcos. 6.4. Otros vnculos Vnculos a un anclaje con nombre Dreamweaver CS4. Captulo 6. Vnculos
159
Cuando estamos trabajando con un documento muy extenso y queremos facilitar el acceso a varias partes del mismo, podemos establecer vnculos a estas partes. El sistema sera similar al ndice de un libro. Cuando tenemos un libro y efectuamos una consulta a su ndice buscando un elemento del mismo, ste nos indica en qu pgina se encuentra dicho elemento. Despus basta con acceder a esta pgina y localizamos el elemento buscado. Pues el sistema de vnculos a un anclaje con nombre acta de tal forma que, una vez localizado el elemento que deseamos en el ndice del documento, al hacer clic con el ratn sobre l, accedemos de forma automtica a esa parte. Al igual que en el libro tenemos numeradas las pginas que facilitan nuestra bsqueda, en estos documentos debemos establecer un anclaje que ser el elemento que nos facilite la tarea. Para crear este anclaje, colocamos el cursor en el lugar donde deseamos poner el punto de fijacin. Hacemos clic en el comando Insertar>Anclaje con nombre o tambin haciendo clic en el botn Anclaje con nombre de la barra Insertar, categora Comn. En ambos casos se nos abrir el cuadro de dilogo Anclaje con nombre.
Figura 6. 16. Cuadro de dilogo Anclaje con nombre. En el cuadro de texto Nombre de anclaje, escribimos un nombre para el anclaje procurando no dejar ningn espacio en blanco. Hacemos clic en Aceptar para insertarlo en el lugar donde habamos colocado el cursor. Dreamweaver inserta un icono en el lugar donde hemos colocado el anclaje y en el cdigo HTML se nos ha creado una etiqueta como por ejemplo sta: <a name="rutas" id="rutas"></a> . Si no aparece el icono en la pantalla de diseo, deberemos activar Elementos invisibles en el comando Ver>Ayudas visuales. Si seleccionamos nuestro haciendo doble clic sobre l en la ventana del documento, tambin podremos ver sus propiedades y modificarlas en el inspector, como en nuestro ejemplo.
Figura 6. 17. Propiedades de Anclaje con nombre. Dreamweaver CS4. Captulo 6. Vnculos
160
Ahora slo nos queda crear el vnculo al anclaje de nombre creado. Lo primero que debemos hacer es seleccionar el elemento, texto o imagen, que vamos a vincular. Desde el Inspector de Propiedades HTML, en el cuadro de texto Vnculo, ponemos el signo # y el nombre del anclaje. En nuestro ejemplo pondramos #rutas. Debemos tener cuidado al escribir el nombre del anclaje, pues distingue entre maysculas y minsculas. Tambin podemos establecer un vnculo con un anclaje con nombre utilizando el botn Sealar archivo . Basta con seleccionar el elemento que vamos a vincular y desde el botn Sealar archivo hacemos clic y arrastramos hasta el anclaje con nombre que deseemos. De forma automtica Dreamweaver pondr en el cuadro de texto Vnculo del Inspector de Propiedades HTML el signo # y el nombre del anclaje.
Figura 6. 18. Crear un vnculo a un anclaje con nombre desde el Sealador. Si queremos establecer un vnculo con un anclaje con nombre de un documento distinto, pero en la misma carpeta que el actual, deberemos poner en el cuadro de texto nombrearchivo.html#anclaje. Por ejemplo, si hemos creado un anclaje llamado ndice en el documento rutas.htm y queremos vincularlo desde el documento monumentos.htm, haremos Dreamweaver CS4. Captulo 6. Vnculos
161
los siguiente: abrimos el archivo monumentos.htm, seleccionamos el elemento que vamos a vincular y en el campo Vnculo del Inspector de Propiedades HTML de este elemento, escribimos rutas.htm#indice.
Ejercicio
El objetivo en este ejercicio ser la creacin de vnculos a anclajes de nombre.
Accede desde tu navegador a la direccin: https://centrovirtual.educacion.es/mentor/informacion_cursos/informacion.htm?dreamw eaver_cve.
Selecciona con el ratn toda la informacin del curso. Para ello debes colocar el puntero del ratn al inicio del documento, hacer clic y arrastrar sin soltar hasta el final del documento. Suelta el ratn, haz clic con el botn derecho sobre el texto seleccionado y en el men contextual elige Copiar.
Crea un nuevo documento en Dreamweaver.
Desde la ventana de diseo, haz clic en Edicin > Pegar (o bien pulsa Ctrl+V).
Comprueba que el texto anterior se ha pegado en tu nuevo documento. Selecciona todo el documento (Edicin > Seleccionar todo o Ctrl+A) y cambia la fuente a Arial desde el Inspector de Propiedades CSS. Te quedar un documento similar al que muestra la siguiente figura:
Dreamweaver CS4. Captulo 6. Vnculos
162
Figura 6.19. Aspecto del documento.
Observa que hay palabras en azul y subrayadas, es debido a que conservan el vnculo que tenan en el documento original. Deja estos vnculos como estn en tu documento.
Ahora vas a insertar un anclaje con nombre en cada uno de los siguientes apartados: CONTENIDOS DEL CURSO, MATERIALES, MTODO DE TRABAJO, CERTIFICACIN FINAL.
o CONTENIDOS DEL CURSO: Sita el cursor justo a la izquierda de la palabra CONTENIDOS. Haz clic sobre el botn Anclaje con nombre de la barra Insertar, categora Comn. Teclea la palabra CONTENIDOS en el cuadro de dilogo. Pulsa Aceptar para insertar el Anclaje con nombre.
Dreamweaver CS4. Captulo 6. Vnculos
163
Figura 6. 20. Crear un anclaje con nombre.
Observa que Dreamweaver ha insertado el icono del anclaje justo delante de la palabra CONTENIDOS.
o MATERIALES: Sita el cursor justo a la izquierda de la palabra MATERIALES. Haz clic sobre el botn Anclaje con nombre de la barra Insertar, categora Comn. Teclea la palabra MATERIALES en el cuadro de dilogo. Pulsa Aceptar para insertar el Anclaje con nombre.
o MTODO DE TRABAJO: Sita el cursor justo a la izquierda de la palabra MTODO. Haz clic sobre el botn Anclaje con nombre de la barra Insertar, categora Comn. Teclea la palabra METODO (sin tilde para evitar conflictos de caracteres) en el cuadro de dilogo. Pulsa Aceptar para insertar el Anclaje con nombre.
o CERTIFICACIN FINAL: Sita el cursor justo a la izquierda de la palabra CERTIFICACIN. Haz clic sobre el botn Anclaje con nombre de la barra Insertar, categora Comn. Teclea la palabra CERTIFICACION (sin tilde para evitar conflictos de caracteres) en el cuadro de dilogo. Pulsa Aceptar para insertar el Anclaje con nombre.
Coloca el cursor al principio del documento (lo puedes hacer tambin pulsando a la vez Ctrl + Inicio. Teclea dos veces la tecla Intro para crear unos espacios delante del texto del documento.
Vuelve a colocarte al principio del documento, escribe NDICE en maysculas y negrita. Pulsa la tecla Intro para escribir debajo.
Crea una lista sin numerar ejecutando Formato>Lista>Lista sin ordenar con los ttulos de cada uno de los apartados en maysculas y negrita: CONTENIDOS DEL CURSO, MATERIALES, MTODO DE TRABAJO, CERTIFICACIN FINAL.
Dreamweaver CS4. Captulo 6. Vnculos
164
Figura 6. 21. Crear un ndice en el documento.
Crea un vnculo a cada anclaje. Para ello, realizaremos lo siguiente:
o Selecciona CONTENIDOS DEL CURSO que acabas de escribir en el ndice. Pulsa sobre el botn de la barra Insertar, categora Comn. En el cuadro de dilogo Hipervnculo que se abre, despliega la lista Vnculo, selecciona #CONTENIDOS y pulsa Aceptar para crear el vnculo al anclaje.
Figura 6. 22. Crear vnculo a un anclaje con nombre.
o Repite la misma operacin con las palabras del resto de la lista sin ordenar del Dreamweaver CS4. Captulo 6. Vnculos
165
ndice, para hacer vnculos desde MATERIALES DEL CURSO al anclaje con nombre #MATERIALES, desde MTODO DE TRABAJO al anclaje con nombre #METODO, y desde CERTIFICACIN FINAL al anclaje con nombre #CERTIFICACION.
Guarda el documento como anclajes y comprueba pulsando F12 en el navegador lo que ocurre al hacer clic sobre las palabras que has vinculado en el listado del ndice.
Ejercicio
El objetivo de este ejercicio ser la creacin de un vnculo a anclaje con nombre desde otro documento.
Crea un nuevo HTML en Dreamweaver (Archivo>Nuevo).
Escribe la palabra Certificacin y haz doble clic sobre ella para seleccionarla.
En el cuadro de texto Vnculo del Inspector de Propiedades HTML, escribe anclajes.html#CERTIFICACION.
Observa que anclajes.html es el documento que contiene el anclaje con nombre al que vas a vincular. Y #CERTIFICACION es el anclaje al que vas a vincular y que has creado en el ejercicio anterior.
Guarda el documento como anclajes2 y pulsa F12 para comprobar en el navegador lo que ocurre al hacer clic sobre la palabra que has vinculado.
Vnculos a un correo electrnico Al igual que especificamos vnculos a otros documentos, podemos hacerlo tambin a direcciones de correo electrnico. Esto es muy til cuando deseamos que los visitantes de nuestra Web se pongan en contacto con nosotros. Para indicar que es un enlace a un correo electrnico deberemos escribir el comando mailto delante de la direccin electrnica a la que deseamos nos escriban, procurando no dejar espacios en blanco entre los dos puntos y la direccin de correo. Por ejemplo, mailto:mgas0012@fresno.pntic.mec.es, donde mgas0012 ser mi login o nombre de usuario. La etiqueta del cdigo HTML que vincula los correos electrnicos sera, en el caso de que hubisemos tecleado en un documento la palabra Correo y hubisemos creado un vnculo a nuestro correo electrnico de muestra, la siguiente: <a href="mailto:mgas0012@fresno.pntic.mec.es">Correo</a>. Con esta instruccin estamos indicando al navegador que abra el programa que gestiona el correo electrnico para crear un mensaje que ir dirigido a la direccin electrnica indicada en el vnculo. Dreamweaver CS4. Captulo 6. Vnculos
166
Como hemos visto anteriormente, al crear un vnculo de correo electrnico desde un texto o una imagen, basta con escribir el comando mailto delante de la direccin electrnica en el cuadro de texto Vnculo, del Inspector de Propiedades HTML.
Figura 6. 23. Crear un Vnculo a un correo electrnico.
El vnculo de correo tambin lo podemos crear desde Insertar>Vnculo de correo electrnico o haciendo clic en el botn Vnculo de correo electrnico de la barra Insertar, categora Comn. En ambos casos se nos abrir el cuadro de dilogo Vnculo de correo electrnico.
Figura 6.24. Cuadro de dilogo Vnculo de correo electrnico.
En el cuadro Texto escribimos el texto que vamos a vincular y en el cuadro Correo electrnico escribimos la direccin electrnica. Observa que en este cuadro no ponemos mailto, ya que al Aceptar, nos crea automticamente la etiqueta HTML correspondiente. Con este procedimiento no nos ser posible asignar vnculos de correo electrnico a una imagen, slo podremos introducir el texto que contendr el vnculo y la direccin electrnica.
Ejercicio
El objetivo de este ejercicio ser la creacin de un vnculo a un correo electrnico desde una imagen.
Abre en tu navegador la siguiente direccin: https://centrovirtual.educacion.es/mentor/inicio.html
En la pgina que se abre, localiza la imagen Correo web . Sitate sobre esta Dreamweaver CS4. Captulo 6. Vnculos
167
imagen y haz clic con el botn derecho del ratn sobre ella, selecciona Guardar imagen como y gurdala en la carpeta imagenes de tu sitio MiWeb. Se trata de un fichero de imagen llamado correo_click.gif. Si tienes dificultades haciendo esto, tambin puedes descargarte la imagen correo_click.gif desde Materiales de Apoyo, Material necesario para ejercicios, Ejercicios del Captulo6.
Localiza en tu sitio el documento index y brelo.
Coloca el cursor debajo de los vnculos que tenas creados en este documento y cntralo en la pgina.
Desde el comando Insertar>Imagen o desde el botn de la barra Insertar, categora Comn, accede al cuadro de dilogo Seleccionar origen de imagen para localizar la imagen que acabas de guardar (correo_click.gif).
Figura 6.25. Insertar una imagen en documento.
Pulsa Aceptar para insertar la imagen en el documento index. Automticamente se abrir el cuadro de Atributos de accesibilidad de la etiqueta de imagen donde vamos a teclear Correo web en el campo Texto alternativo y luego pulsaremos Aceptar.
Selecciona la imagen o comprueba que est seleccionada (es suficiente con hacer clic sobre ella). En el Inspector de Propiedades de la imagen escribe en el cuadro de texto Vnculo tu direccin de correo electrnico, pero teniendo la precaucin de anteponer Dreamweaver CS4. Captulo 6. Vnculos
168
mailto. Por ejemplo, si tu correo es mgas002@fresno.pntic.mec.es, en el cuadro de texto Vnculo, debers teclear sin espacios: mailto:mgas0012@fresno.pntic.mec.es
Figura 6.26. Crear un vnculo a un correo electrnico desde una imagen.
Guarda los cambios del documento y pulsa la tecla F12. Comprueba en el navegador lo que ocurre al hacer clic sobre la imagen del correo.
NOTA. Para que el enlace a un correo electrnico funcione correctamente, es necesario que en el ordenador desde el que accedemos a la pgina Web que contiene este tipo de vnculo, est configurado correctamente el programa gestor del correo electrnico.
Dreamweaver CS4. Captulo 6. Vnculos
169
6.5. Formato de los vnculos: Generalmente, cuando un texto contiene un vnculo, el texto suele aparecer subrayado y adems suele tener asociados tres colores distintos. - uno para indicar el vnculo, que suele ser por defecto el color azul, e indica que el vnculo no se ha visitado an - otro para indicar el vnculo activo, que suele ser por defecto de color rojo e indica que hemos hecho clic sobre l, y - un tercero para indicar el vnculo visitado, por defecto de color violeta.
RECOMENDACIN. No es aconsejable modificar esta identificacin de los vnculos, pues aunque no es necesario mantenerla, el usuario de nuestra Web puede estar habituado a ello.
Si de todas formas decidimos modificar estas caractersticas del vnculo, podremos hacerlo accediendo a las Propiedades de la pgina desde el men Modificar, desde el Inspector de Propiedades CSS del documento activo, o haciendo clic con el botn derecho del ratn sobre cualquier parte en blanco del documento y seleccionando Propiedades de la pgina, para despus seleccionar Vnculos (CSS).
Figura 6.27. Cuadro Propiedades de la pgina. Categora Vnculos (CSS). En la categora Vnculos (CSS) podemos configurar: Dreamweaver CS4. Captulo 6. Vnculos
170
Fuente de vnculo: nos permite especificar el tipo de fuente que se debe utilizar para el texto de un vnculo. Dreamweaver utiliza, de forma predeterminada, la misma combinacin de fuentes especificada para todo el documento, a menos que aqu especifiquemos otra fuente.
Figura 6.28. Lista de seleccin de Fuente de vnculo. Tamao: nos permite definir el tamao de la fuente.
Figura 6.29. Lista de seleccin de Tamao de fuente. Si seleccionamos un valor numrico, tambin nos permite elegir la unidad de medida. Dreamweaver CS4. Captulo 6. Vnculos
171
Figura 6.30. Lista de seleccin de unidad de medida. Color de vnculo: nos permite especificar el color de los vnculos. Este color ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas. Vnculos de sustitucin: nos permite especificar el color que tendr el vnculo cuando se coloque encima el ratn. Vnculos visitados: nos permite especificar el color de los vnculos visitados y ayuda al usuario a distinguirlos de los que an no han sido visitados. Vnculos activos: nos permite especificar el color de un vnculo al hacer clic sobre l con el ratn.
Figura 6.31. Especificar color de vnculos. Para modificar los colores del texto de los distintos estados del vnculo, debemos hacer clic en el botn Selector de color y seleccionarlo de la paleta de colores o poner su valor hexadecimal en cada cuadro de texto. Estilo subrayado: nos permite definir el estilo subrayado que se debe aplicar a los vnculos. Por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado.
Figura 6.32. Lista de seleccin de estilos de subrayado.
172
Captulo 7. Tablas
Dreamweaver CS4. Captulo 7. Tablas 173
Captulo 7. TABLAS Las tablas son una de la herramientas ms eficaces para la presentacin de textos, imgenes, objetos, etc. en una pgina Web, pues nos ayudan a mejorar las posibilidades de diseo al poder distribuir su contenido por toda la pantalla. Podemos definir una tabla como un conjunto de filas y columnas, cuya interseccin se denomina celda. Figura 7.1. Esquema de una tabla. Aunque Dreamweaver nos va a permitir manipular de forma sencilla la tabla y todos sus elementos: filas, columnas y celdas, en HTML no se especifican las columnas explcitamente, por lo que podramos decir que una tabla sera una o varias filas, donde cada una de ellas constara de una o varias celdas. Las etiquetas HTML ms bsicas que definen una tabla son: <table> .... </table> estas etiquetas nos indican el principio y el final de una tabla y entre ellas se debe desarrollar su contenido. <tr> .... </tr> estas etiquetas definen el comienzo y el final de cada fila de la tabla. <td> .... </td> estas etiquetas identifican a cada una de las celdas de cada fila. Entre estas etiquetas se insertar el contenido de cada celda. <th> ... </th> son etiquetas de celda que se utilizan para los encabezados. Se pueden definir los mismos atributos que al resto de celdas, pero hace que el texto aparezca centrado y en negrita. Teniendo en cuenta lo anterior, para definir en cdigo HTML la tabla de la figura 7.1., deberamos escribir: <table> (etiqueta que indica el principio de la tabla) <tr> (etiqueta que indica el principio de la fila 1) Dreamweaver CS4. Captulo 7. Tablas
174
<td> </td> (etiquetas de la celda 1,1) <td> </td> (etiquetas de la celda 1,2) <td> </td> (etiquetas de la celda 1,3) </tr> (etiqueta que indica el final de la fila 1) <tr> (etiqueta que indica el principio de la fila 2) <td> </td> (etiquetas de la celda 2,1) <td> </td> (etiquetas de la celda 2,2) <td> </td> (etiquetas de la celda 2,3) </tr> (etiqueta que indica el final de la fila 2) </table> (etiqueta que indica el final de la tabla) 7.1. Insertar una tabla Para insertar una tabla en nuestro documento, colocamos el cursor en el lugar deseado y elegimos cualquiera de las dos opciones: A travs del men Insertar>Tabla. Con el botn Tabla en la categora Comn de la barra Insertar. En ambos casos se nos abrir el cuadro de dilogo Tabla. Dreamweaver CS4. Captulo 7. Tablas
175
Figura 7.2. Cuadro de dilogo Tabla. Desde este cuadro de dilogo podemos especificar los atributos de la tabla antes de insertarla: 1. En la seccin Tamao de tabla, especificaremos las opciones siguientes: Filas: en el cuadro especificaremos el nmero de filas de la tabla. Columnas: en el cuadro especificaremos el nmero de columnas de la tabla. Ancho de tabla: desde aqu podemos especificar el ancho de la tabla en pxeles o como porcentaje del ancho de la ventana del navegador o del elemento que la contiene: tabla, capa, etc. La diferencia principal es que el ancho en pxeles permanece inalterable y caso que no se viera todo el contenido desde la pantalla del navegador, deberamos utilizar las barras de desplazamiento, en cambio, el ancho en Porcentaje indica el porcentaje que ocupar de la ventana del navegador o del elemento que la contiene y por lo tanto se adaptar a su tamao. Cuando indicamos un ancho de tabla, en el cdigo HTML se crea una de las siguientes etiquetas: <table width="100"> para indicar que la tabla tiene un ancho de 100 pxeles, independientemente de la ventana del navegador o del elemento que la contenga. <table width="100%"> para indicar que la tabla tiene un ancho del 100% de la ventana del navegador o del elemento que la contenga. Dreamweaver CS4. Captulo 7. Tablas
176
Grosor del borde: escribiremos el ancho en pxeles de los bordes de la tabla. Para disear la tabla sin borde, deberemos escribir el valor 0; en el caso de no escribir nada, la mayora de los navegadores mostrarn la tabla como si tuviera el valor 1. Dreamweaver mostrar los bordes de la tabla con puntos cuando el grosor del borde es 0. Si no lo podemos ver, deberemos activar Bordes de tabla desde Ver > Ayudas visuales. Cuando indicamos un borde de tabla, por ejemplo de 1 pxel, en el cdigo HTML se crea la siguiente etiqueta: <table border="1"> Relleno de celda: especificaremos la distancia en pxeles entre el borde de las celdas y sus contenidos. Si no escribimos ningn valor, por defecto, los navegadores mostrarn como valor de relleno de celda el 1. Cuando indicamos un relleno de celda, por ejemplo de 2 pxeles, en el cdigo HTML se crea la siguiente etiqueta: <table cellpadding="2"> Espacio entre celdas: indicaremos la distancia de separacin en pxeles entre las celdas de la tabla. Si no escribimos ningn valor, por defecto, los navegadores mostrarn el espaciado de celda como si fuera 2. Cuando indicamos un espacio entre celdas, por ejemplo de 2 pxeles, en el cdigo HTML se crea la siguiente etiqueta: <table cellspacing="2"> Lgicamente estas etiquetas pueden ir combinadas, indicando las propiedades que va a tener la tabla que estamos construyendo. Por ejemplo la etiqueta: <table width="100" border="1" cellspacing="2" cellpadding="2"> nos define una tabla con 100 pxeles de ancho, 1 pxel de borde, 2 pxeles de relleno de celda y 2 pxeles de espacio entre celdas. 2. En el caso que los usuarios utilicen lectores de pantalla, es recomendable la utilizacin de un encabezado para la tabla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la informacin de la tabla. En la seccin Encabezado, seleccionaremos una de las siguientes opciones: Ninguno: con esta opcin no utilizamos encabezados para la tabla. Izquierda: con esta opcin introducimos un encabezado para cada fila de la tabla, convirtiendo la primera columna de la tabla en una columna de encabezados. Superior: con esta opcin introducimos un encabezado para cada columna de la tabla, convirtiendo la primera fila de la tabla en una fila de encabezados. Ambos: con esta opcin podemos introducir encabezados de columna y de fila en la tabla. 3. En la seccin Accesibilidad, podemos especificar las siguientes opciones: Texto: si queremos poner un ttulo a la tabla que aparecer fuera de la misma. Dreamweaver CS4. Captulo 7. Tablas
177
Resumen: podemos escribir una descripcin de la tabla. Los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.
Ejercicio
El objetivo de este ejercicio ser la creacin de dos tablas para apreciar sus diferencias.
Crea un nuevo documento HTML (Archivo>Nuevo...).
Inserta una tabla (Insertar>Tabla) con las siguientes caractersticas:
o 2 Filas y 3 Columnas. o Ancho de tabla 100 Pxeles o Borde de 5 pxeles o Espacio entre celdas 3 pxeles o Texto: Tabla con borde.
Figura 7.3. Insertar tabla con borde.
Crea otra tabla (Insertar>Tabla), debajo de la anterior, (pulsa dos veces Intro en la ventana del documento despus de la tabla creada anteriormente) con las siguientes caractersticas:
o 2 Filas y 3 Columnas. o Ancho de tabla 100 Porcentaje o Borde de 0 pxeles Dreamweaver CS4. Captulo 7. Tablas
178
o Espacio entre celdas 10 pxeles o Texto: Tabla sin borde.
Figura 7.4. Insertar tabla sin borde.
Guarda el ejercicio (Archivo > Guardar) como tabla1.html.
Las tablas debern quedar similares a como se aprecia en la siguiente figura:
Figura 7.5. Vista diseo de tablas en ventana del documento.
RECOMENDACIN. Pasa de vez en cuando a la vista Dividir para que te muestre simultneamente las vistas de cdigo y diseo del documento que ests elaborando y puedas identificar las etiquetas asociadas a las tablas que has creado.
Dreamweaver CS4. Captulo 7. Tablas
179
7.2. Propiedades de tabla Propiedades de las tablas Las propiedades de la tabla se especifican en el Inspector de Propiedades.
Figura 7.6. Inspector de propiedades de tabla. A travs del Inspector de Propiedades podemos modificar los valores que habamos especificado al insertar la tabla. El cuadro desplegable situado justo debajo de Tabla en el inspector es el identificador de la tabla, en el cual se especifica un nombre o identificador para la tabla. Filas: indicamos el nmero de filas de la tabla Cols: indicamos el nmero de columnas que tendr la tabla. An: indicamos el ancho de la tabla en pxeles o como porcentaje del ancho de la ventana del navegador. Rell. celda: indicamos el nmero de pxeles entre el contenido de una celda y su borde. Esp. celda: indicamos el nmero de pxeles entre celdas contiguas de una tabla. Alinear: podemos determinar, desplegndolo , dnde aparecer la tabla en relacin con otros elementos del mismo prrafo, como por ejemplo texto o imgenes. Las opciones son: o Izquierda: alinea la tabla a la izquierda, por lo que el texto del mismo prrafo se ajusta alrededor de la tabla a la derecha. o Derecha: alinea la tabla a la derecha, por lo que el texto del mismo prrafo se ajusta alrededor de la tabla a la izquierda. o Centro: centra la tabla, con el texto encima y/o debajo de la tabla. o Predeterminado: indica que el navegador debe utilizar su alineacin predeterminada. En este caso, otro contenido no se mostrar junto a la tabla. Para mostrar una tabla junto a otro contenido, debemos utilizar la alineacin Izquierda o Derecha. Borde: especificamos el ancho en pxeles de los bordes de la tabla. Dreamweaver CS4. Captulo 7. Tablas
180
Clase: especificamos la hoja de estilos que deseemos aplicar a la tabla. La botonera del inspector nos permite: o Convertir anchos de tabla a porcentaje : establece el ancho de toda la tabla en su ancho actual como porcentaje del ancho de la ventana de documento. o Convertir anchos de tabla a pxeles : establece el ancho de toda la tabla en su ancho actual en pxeles. o Borrar ancho de columna : elimina todos los valores especificados para el ancho de la tabla. o Borrar alto de fila : elimina todos los valores especificados para el alto de fila de la tabla. Cuando hayamos introducido un valor en un cuadro de texto del Inspector de Propiedades, deberemos pulsar el tabulador o la tecla Intro para aplicar el cambio. Si pulsamos sobre el men del encabezado de la tabla , desplegaremos una lista de comandos que nos permitirn tambin modificar la tabla:
Figura 7.7. Modificar tabla. Propiedades de las celdas, filas o columnas Si seleccionamos una o varias celdas, filas o columnas, el Inspector de Propiedades HTML cambia con respecto al de la tabla para poder modificar otras opciones, aunque es el mismo para las celdas, filas y columnas.
Figura 7.8. Inspector de propiedades HTML de celda.
Dreamweaver CS4. Captulo 7. Tablas
181
La parte superior del Inspector de Propiedades sirve para configurar las propiedades del texto que se insertar en la celda, que ya describimos en el captulo del texto, por lo que vamos a centrarnos en las opciones especficas de los elementos de la tabla. Horiz: especificaremos la alineacin horizontal del contenido a la izquierda, a la derecha o al centro. La alineacin predeterminada toma la configuracin del navegador que generalmente es a la izquierda para celdas normales y al centro para celdas de encabezado. Vert: especificaremos la alineacin vertical del contenido con la parte superior, media, inferior o con la lnea de base de la celda. La alineacin predeterminada del navegador generalmente es al medio. An y Al: podemos indicar el ancho y el alto de las celdas seleccionadas en pxeles o como porcentaje del ancho o alto total de la tabla. Para especificar un porcentaje, introduciremos el smbolo de porcentaje (%) tras el valor. Para que el navegador determine el ancho o alto apropiado en funcin del contenido de la celda, y el ancho y alto del resto de las columnas y filas, dejemos dejar el campo en blanco. No aj.: activando esta opcin impedimos el ajuste de lnea, manteniendo todo el texto de una celda en una sola lnea. En este caso las celdas se adaptarn para incluir todos los datos a medida que se introducen o pegan en una celda. Habitualmente, las celdas se expanden horizontalmente para incluir la palabra ms larga o la imagen ms grande y, a continuacin, se expanden verticalmente cuando es necesario adaptarse a otros contenidos. Enc.: aplica a la celda seleccionada el formato de celdas de encabezado de tabla. De forma predeterminada, el contenido de las celdas de encabezado de la tabla aparecer en negrita y centrado. La etiqueta HTML para este tipo de celdas es <th> en lugar de <td> como es habitual para el resto de las celdas. Fondo: podemos indicar el color de fondo de una celda, columna o fila seleccionndolo con el selector de color o indicando su valor hexadecimal. El botn Combinar celdas combina, usando extensores, las celdas, filas o columnas seleccionadas para crear una sola celda. El botn Dividir celda divide una celda para crear dos o ms celdas. Slo puede dividirse una celda cada vez, por lo que este botn estar desactivado al seleccionar ms de una celda. Cuando hayamos introducido un valor en un cuadro de texto del Inspector de Propiedades, deberemos pulsar el tabulador o la tecla Intro para aplicar el cambio. Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la etiqueta <td> correspondientes a cada celda de la columna. Sin embargo, cuando se trata de una fila, Dreamweaver modifica los atributos de la etiqueta <tr> de la fila en lugar de los atributos de cada etiqueta <td> de las celdas. Con esto conseguimos un cdigo HTML ms claro y conciso. Dreamweaver CS4. Captulo 7. Tablas
182
Hemos de tener en cuenta que al aplicar formato a una tabla en vista Diseo, hay un orden de prioridad de tal forma que el formato de celda tiene prioridad sobre el formato de fila y ste sobre el de la tabla. 7.3. Operaciones con tablas: Seleccionar Una vez que hemos insertado la tabla, podemos introducir las modificaciones que deseemos. Para ello necesitaremos seleccionar el elemento o elementos de la tabla que vayamos a modificar. Seleccionar la tabla Podemos seleccionar una tabla de diversas formas: Llevamos el puntero del ratn hacia la esquina superior izquierda de la tabla, o a cualquier punto del borde derecho o inferior de la tabla o al borde de una fila o columna. Cuando el puntero cambia de forma y se convierte en el icono de cuadrcula de tabla , podemos seleccionar la tabla con un simple clic. Hacemos clic en el interior de la tabla, en cualquier celda y, seguidamente seleccionamos la etiqueta <table> del selector de etiquetas situado en la parte inferior izquierda de la ventana del documento . Colocamos el cursor en cualquier celda de la tabla, hacemos clic con el botn derecho del ratn y seleccionamos Tabla>Seleccionar tabla.
Figura 7.9. Seleccionar tabla desde el men contextual.
Dreamweaver CS4. Captulo 7. Tablas
183
Colocamos el cursor en cualquier celda de la tabla y a continuacin seleccionamos Modificar>Tabla>Seleccionar tabla.
Figura 7.10. Seleccionar tabla desde el men Modificar. Hacemos clic en el interior de la tabla, en cualquier celda y, seguidamente hacemos clic en el indicador de ancho de la tabla. Nos aparece un men contextual, del que elegiremos Seleccionar tabla.
Figura 7.11. Seleccionar tabla desde el indicador de ancho. Cuando hayamos ejecutado cualquiera de las opciones anteriores para seleccionar la tabla, nos aparecern los manejadores de seleccin en los bordes inferior y derecho de la tabla. Desde estos manejadores podremos modificar el ancho y el alto de la tabla. Dreamweaver CS4. Captulo 7. Tablas
184
Figura 7.12. Tabla seleccionada y puntos de control. Dreamweaver nos muestra el ancho de la tabla y de cada columna cuando est seleccionada o cuando tenemos colocado el cursor en cualquiera de sus celdas.
Figura 7.13. Visualizacin de anchos de tabla y columna. Podemos activar o desactivar la visualizacin de los anchos y mens de dos formas: A travs del men Ver>Ayudas visuales>Anchos de tabla. Haciendo clic con el botn derecho del ratn sobre cualquier parte de la tabla y seleccionando Tabla>Anchos de tabla, desde el men contextual. Si no apareciera el ancho de la tabla o de la columna, significa que la tabla o la columna no tienen el ancho especificado. En la figura anterior slo aparece el ancho de la tabla porque est especificado, sin embargo no aparece el de las columnas porque no hemos indicado ningn valor. Junto a estos anchos se encuentran unas flechas de men desplegables que nos permiten acceder de forma inmediata a algunos comandos de las tablas.
Figura 7.14. Men de tabla. A veces nos aparecen dos nmeros en la tabla y puede deberse a dos causas: Que al insertar la tabla, hayamos definido el ancho como Porcentaje. En este caso nos aparecer el valor en tanto por ciento aplicado y entre parntesis el valor en pxeles . Que el ancho visual que aparece en la vista diseo no se corresponda con el ancho que hayamos especificado. Esto nos puede ocurrir si insertamos un contenido en la tabla, como por Dreamweaver CS4. Captulo 7. Tablas
185
ejemplo una imagen, con dimensiones superiores a las especificadas. En este caso nos aparecer el valor del ancho especificado y entre parntesis el valor del ancho tal como aparece en la vista diseo.
Figura 7.15. Diferencia entre ancho definido y visualizado.
Cuando nos ocurra este caso, podemos modificar el tamao del contenido de la tabla o hacer que se cambie el ancho especificado por el real (el que estamos utilizando en la vista diseo); para ello debemos seleccionar la opcin Igualar todos los anchos del men desplegable. Seleccionar filas Podemos seleccionar una fila de diversas formas: Colocar el puntero del ratn en la primera celda de la fila que vayamos a seleccionar, pulsar el ratn y mantenindolo pulsado, arrastrarlo hasta la ltima celda de la fila.
Figura 7.16. Seleccionar fila con el ratn. Situar el puntero del ratn en el borde izquierdo de la fila que vayamos a seleccionar, cuando cambie de forma y se convierta en una flecha de seleccin, hacemos clic para seleccionarla.
Figura 7.17. Seleccionar fila con flecha de seleccin. Colocamos el cursor en cualquier celda de la fila que vayamos a seleccionar y, seguidamente seleccionamos la etiqueta <tr> del selector de etiquetas situado en la parte inferior izquierda de la ventana del documento .
Dreamweaver CS4. Captulo 7. Tablas
186
Seleccionar columnas Podemos seleccionar una columna de diversas formas: Colocar el puntero del ratn en la primera celda de la columna que vayamos a seleccionar, pulsar el ratn y mantenindolo pulsado, arrastrarlo hasta la ltima celda de la columna.
Figura 7.18. Seleccionar columna con el ratn. Situando el puntero del ratn en el borde superior de la columna que vayamos a seleccionar, cuando cambie de forma y se convierta en una flecha de seleccin, hacemos clic para seleccionarla.
Figura 7.19. Seleccionar columna con flecha de seleccin. Desde el men desplegable de los anchos de columnas, podemos elegir la opcin Seleccionar columna.
Figura 7.20. Seleccionar columna desde el men de anchos.
Seleccionar celdas Para seleccionar una celda, tambin lo podemos hacer de diversas formas: Presionando la tecla Control (Ctrl), mientras hacemos clic en la celda que vamos a seleccionar. Colocando el cursor en la celda que deseamos seleccionar y, a continuacin, ejecutamos el comando Edicin>Seleccionar todo. Si volvemos a ejecutar Seleccionar todo, estando la celda ya seleccionada, seleccionaramos toda la tabla.
Dreamweaver CS4. Captulo 7. Tablas
187
Colocamos el cursor en la celda que vayamos a seleccionar y, seguidamente seleccionamos la etiqueta <td> del selector de etiquetas situado en la parte inferior izquierda de la ventana del documento . Para seleccionar varias celdas contiguas, el procedimiento ms sencillo es mantener pulsado el ratn mientras lo arrastramos sobre las celdas que deseamos seleccionar.
Figura 7. 21. Seleccionar celdas contiguas. Si queremos seleccionar varias celdas no contiguas, deberemos mantener la tecla Control (Ctrl) pulsada mientras hacemos clic sobre las celdas que deseamos seleccionar.
Figura 7.22. Seleccionar celdas no contiguas.
7.4. Operaciones con tablas: Aadir, Eliminar Aadir filas o columnas Para aadir filas o columnas a una tabla, podemos hacerlo de varias formas: Ejecutando el comando Modificar>Tabla>Insertar fila; se insertar una fila encima de la fila donde hayamos colocado el cursor. Si ejecutamos el comando Modificar>Tabla>Insertar columna se insertar una columna a la izquierda de la columna donde hayamos colocado el cursor. Si ejecutamos el comando Modificar>Tabla>Insertar filas o columnas se activar el cuadro de dilogo Insertar filas o columnas. Dreamweaver CS4. Captulo 7. Tablas
188
Figura 7.23. Cuadro de dilogo Insertar filas o columnas. Este cuadro de dilogo nos va a permitir insertar una o varias filas o columnas en una tabla. En Insertar indicamos si queremos insertar Filas o Columnas. En Nmero de filas o Nmero de columnas, escribimos el nmero de filas o columnas que deseamos insertar. En Dnde, especificamos si las nuevas filas o columnas deben aparecer Sobre la seleccin o Bajo la seleccin, en el caso de las filas, o Antes de la columna o Despus de la columna, en el caso de las columnas, con respecto a la celda seleccionada. Desde el men contextual podemos acceder a las dos opciones anteriores seleccionando Tabla>Insertar fila, Tabla>Insertar columna o Tabla>Insertar filas o columnas. Este men contextual nos aparece al hacer clic con el botn derecho del ratn sobre la posicin donde deseamos insertar la fila o la columna. Cuando seleccionamos la tabla completa, desde el Inspector de Propiedades HTML podemos aumentar el valor de Filas para aadir filas o aumentar el valor de Cols para aadir columnas. Dreamweaver aade las filas al final de la tabla y las columnas a la derecha de la tabla.
Figura 7.24. Aadir filas o columnas desde el Inspector de Propiedades. Para insertar una columna, tambin lo podemos hacer desde el men desplegable de ancho de columna, seleccionando la opcin Insertar columna izquierda o Insertar columna derecha, con respecto a la columna seleccionada.
Figura 7.25. Insertar columna desde men de anchos. Dreamweaver CS4. Captulo 7. Tablas
189
Eliminar filas o columnas Para eliminar filas o columnas podemos utilizar varios procedimientos: Colocamos el cursor en la fila o columna que deseamos eliminar y ejecutamos Modificar>Tablas>Eliminar fila o Modificar>Tabla>Eliminar columna, segn corresponda. Tambin lo podemos hacer desde el men contextual, colocando el cursor en el lugar indicado y haciendo clic con el botn derecho del ratn. Ejecutamos Tabla>Eliminar fila o Tabla>Eliminar columna, segn el caso. Seleccionando la fila o la columna completa que deseamos eliminar y, a continuacin, ejecutamos Edicin>Borrar o pulsamos la tecla Supr. Seleccionando toda la tabla, desde el Inspector de Propiedades, podemos eliminar filas o columnas disminuyendo el valor de Filas o de Cols, respectivamente. Dreamweaver eliminar las filas del final de la tabla y las columnas de la derecha de la tabla. 7.5. Operaciones con tablas: Modificar tamao Modificar el tamao de la tabla Lo primero que debemos hacer es seleccionar la tabla completa para que nos aparezca el Inspector de Propiedades de la tabla.
Figura 7.26. Inspector de propiedades Tabla. Generalmente se especifica el ancho, An, mientras que el Alto, Al, no contiene valor y, por tanto, no aparece en el inspector. En el cuadro An podemos especificar los nuevos valores para el ancho de la tabla, indicando si el nuevo tamao ser en pxeles (px.) o en porcentaje (%). Al cambiar el tamao de toda la tabla, Dreamweaver modifica el tamao de las celdas proporcionalmente, excepto de aquellas que tengan un tamao especificado anteriormente. Si todas las celdas de la tabla tuvieran un tamao definido, al cambiar el tamao de la tabla tambin lo hara el tamao visual de las celdas en la ventana del documento, aunque no vare el valor especificado. Desde el Inspector de Propiedades podemos hacer modificaciones de forma rpida para el conjunto de elementos de la tabla a travs de los siguientes botones: Este botn convierte el ancho de la tabla en porcentaje del ancho total de la ventana del documento, as como el ancho de todas las columnas de la tabla como porcentaje del ancho de la tabla. Dreamweaver CS4. Captulo 7. Tablas
190
Este botn convierte el ancho de la tabla en su ancho actual en pxeles, as como el ancho de todas las columnas de la tabla. Este botn elimina todos los valores especificados para el ancho de la tabla, as como de las columnas. Este botn elimina todos los valores especificados para el alto de la tabla, as como de las filas. Otro procedimiento para modificar el tamao de la tabla consiste en utilizar los manejadores de seleccin que aparecen al seleccionarla completamente. Para modificar el ancho de la tabla, basta con arrastrar el manejador de seleccin de la derecha, para modificar el alto de la tabla, arrastraremos el manejador de seleccin de la parte inferior y para modificar ambos a la vez, arrastraremos el manejador de seleccin de la esquina inferior derecha. Modificar el tamao de una fila Para cambiar el alto de una fila lo podemos hacer: Desde el Inspector de Propiedades, seleccionando previamente la fila que vamos a modificar, ponemos el nuevo valor en el cuadro Al. y pulsamos la tecla Intro. Tambin podemos modificar el tamao, arrastrando el borde inferior de la fila. Al arrastrar el borde inferior de una fila, las filas que se encuentran por debajo de ella, son desplazadas hacia abajo, respetando sus alturas, pero modificando la altura general de la tabla. Modificar el tamao de una columna Para cambiar el ancho de una columna lo podemos hacer de varias formas: Desde el Inspector de Propiedades, seleccionando previamente la columna que vamos a modificar, ponemos el nuevo valor en el cuadro An. y pulsamos la tecla Intro. Tambin podemos modificar el ancho de la columna arrastrando su borde derecho. Con este procedimiento tambin modificamos el ancho de la columna contigua, por lo que modificamos los dos anchos, pero el ancho general de la tabla no vara. Para cambiar el ancho de la columna, sin modificar el ancho de la columna contigua deberemos mantener la tecla Mays pulsada mientras arrastramos su borde derecho. 7.6. Operaciones con tablas: Dividir, Combinar, Anidar En ocasiones nos encontramos con la necesidad de incluir dos o ms celdas en una misma fila o columna o por el contrario, que una celda ocupe el alto de dos o ms filas o el ancho de dos o ms columnas. Dreamweaver CS4. Captulo 7. Tablas
191
Para conseguir dividir o combinar las celdas de una tabla podemos hacerlo de varias formas. Divisin de celdas Para dividir una celda deberemos colocar el cursor en la celda que vamos a modificar y seguir uno de estos procedimientos: Ejecutando el comando Modificar>Tabla>Dividir celda. Desde el Inspector de Propiedades, haciendo clic en el botn Dividir celda . Si no se muestra el botn, deberemos ampliar el panel del Inspector de Propiedades desde el botn Expandir . En ambos casos nos aparece el cuadro de dilogo Dividir celda:
Figura 7.27. Cuadro de dilogo Dividir celda. En este cuadro de dilogo podemos especificar si la celda debe dividirse en Filas o Columnas, seleccionando lo que corresponda desde la opcin Dividir celda. Tambin podemos indicar el Nmero de filas o Nmero de columnas en que debe dividirse la celda, segn el caso.
Figura 7.28. Ejemplo de tabla con celdas divididas en filas y columnas.
Combinacin de celdas Para combinar las celdas, debemos tener presente que slo podemos hacerlo con aquellas celdas contiguas formando lnea o rectngulo. Una vez conocido esto, lo primero que debemos Dreamweaver CS4. Captulo 7. Tablas
192
hacer es seleccionar las celdas que vamos a combinar y despus seguir uno de estos procedimientos: Ejecutando el comando Modificar>Tabla>Combinar celdas. Desde el Inspector de Propiedades, haciendo clic en el botn Combinar celda . Si no se muestra el botn, deberemos ampliar el panel del Inspector de Propiedades desde el botn Expandir . Desde Dreamweaver podemos aumentar o disminuir el nmero de filas o columnas que ocupa una celda de forma ms sencilla, pero con ciertas limitaciones. Para aumentar el nmero de filas o columnas basta con colocar el cursor en la celda y seleccionar Modificar>Tabla>Aumentar tamao de fila o Modificar>Tabla>Aumentar tamao de columna, segn corresponda. Con este procedimiento combinamos la celda seleccionada con la que tiene debajo en el caso de Aumentar el tamao de fila o con la celda de su derecha en el caso de Aumentar el tamao de la columna. Por esta razn, la opcin Aumentar tamao de columna no es vlido para las celdas que se encuentren en la columna derecha de la tabla y Aumentar tamao de fila no es vlida para las celdas que se encuentren en la fila inferior de la tabla. Para disminuir el nmero de filas o columnas basta con colocar el cursor en la celda combinada y seleccionar Modificar>Tabla>Reducir tamao de fila o Modificar>Tabla>Reducir tamao de columna, segn corresponda. Esto slo es vlido para las celdas combinadas.
Figura 7.29. Ejemplo de tabla con distintas combinaciones de celdas. Cuando combinamos dos o ms celdas, en HTML se crean unas etiquetas para indicar el nmero de columnas y/o filas que ocupa la celda. Colspan: indica el nmero de columnas que ocupa la celda. Por ejemplo, la etiqueta <td colspan="2"> ... </td> indica que la celda ocupa dos columnas. Dreamweaver CS4. Captulo 7. Tablas
193
Rowspan: indica el nmero de filas que ocupa la celda. Por ejemplo, la etiqueta <td rowspan="2"> ... </td> indica que la celda ocupa dos filas. A veces podemos combinar varias celdas, cuyo cdigo HTML sera por ejemplo, <td colspan="2" rowspan="2"> ... </td>. En este caso indicamos que la celda ocupa dos columnas y dos filas.
Ejercicio
El objetivo en este ejercicio ser la personalizacin de una tabla mediante la modificacin de sus filas y columnas.
Crea un nuevo documento HTML e inserta una tabla (Insertar>Tabla) de 4 filas y 5 columnas, con 400 pxeles de ancho y 1 pxel de grosor del borde.
Figura 7.30. Insertar tabla.
Para facilitar la localizacin de las celdas, voy a numerar las celdas de la tabla que has insertado. Lgicamente esto no es necesario que lo hagas, basta con que te sirva de referencia para identificar la ubicacin de las celdas que vamos a combinar.
Dreamweaver CS4. Captulo 7. Tablas
194
Figura 7.31. Identificacin de celdas en tabla.
Selecciona las celdas (1,1), (2,1) y (3,1). Para ello, haz clic en una de ellas (1,1) y arrastra el ratn sin soltar hasta la ltima (3,1).
Figura 7.32. Seleccionar celdas.
Haz clic con el botn derecho del ratn sobre las celdas seleccionadas y en el men contextual que te aparece selecciona Tabla > Combinar celdas.
Figura 7.33. Combinar celdas.
Dreamweaver CS4. Captulo 7. Tablas
195
Selecciona las celdas 3,2 y 4,2. Para ello haz clic en una de ellas (3,2) y arrastra el ratn sin soltar hasta la siguiente (4,2). Desde el Inspector de propiedades haz clic en el botn Combinar celdas . Si es necesario expande el panel para que te aparezca el botn.
Selecciona las celdas 1,3 y 1,4. Para ello haz clic en una de ellas (1,3) y arrastra el ratn sin soltar hasta la siguiente (1,4). A continuacin combina las celdas desde Modificar>Tabla>Combinar celdas.
Por ltimo, selecciona las celdas 3,4, 3,5, 4,4 y 4,5. Para ello haz clic en una de ellas (3,4) y arrastra el ratn sin soltar hasta la ltima (4,5). Observa que se han seleccionado las cuatro celdas. Desde el Inspector de propiedades haz clic en el botn Combinar celdas . Si es necesario expande el panel para que te aparezca el botn.
Al final te deber quedar una tabla parecida a la siguiente:
Figura 7.34. Aspecto final de la tabla.
Guarda el documento como tabla2.
Anidar tablas Anidar tablas es insertar una tabla dentro de una celda de otra tabla. El procedimiento es bastante sencillo, basta con colocar el cursor en la celda elegida e insertamos la tabla como hemos visto anteriormente en este captulo.
Figura 7.35. Ejemplo de tabla anidada. Ordenar tablas Las filas de una tabla pueden ordenarse en funcin del contenido de una sola columna, e incluso en funcin del contenido de dos columnas. Las tablas que no se pueden ordenar son aquellas con atributos colspan o rowspan, es decir, tablas con celdas combinadas. Dreamweaver CS4. Captulo 7. Tablas
196
Para ordenar una tabla, deberemos seleccionarla o hacer clic en cualquiera de sus celdas, y despus seleccionar Comandos>Ordenar tabla. Se abre el cuadro de dilogo Ordenar tabla.
Figura 7.36. Cuadro de dilogo Ordenar tabla. Seleccionando en los diferentes desplegables del cuadro podemos establecer lo siguiente: Ordenar por determina los valores de la columna que se utilizarn para ordenar las filas de la tabla. Orden determina si la columna debe ordenarse alfabtica o numricamente, y si el orden ser ascendente (de la A a la Z, de los nmeros ms bajos a los ms altos) o descendente. Si la columna contiene nmeros, selecciona Numricamente. Una clasificacin alfabtica aplicada a una lista de nmeros de uno y dos dgitos ordenar los nmeros como si fueran palabras (como 1, 10, 2, 20, 3, 30) en lugar de ordenarlos como si fueran nmeros (como 1, 2, 3, 10, 20, 30). Despus por / Orden establece el orden de una clasificacin secundaria en otra columna. Especificaremos la columna de clasificacin secundaria en el men emergente Despus por y el orden de clasificacin secundaria en los mens emergentes de Orden. El apartado Opciones permite activar: El orden incluye la primera fila especifica que la primera fila de la tabla debe incluirse en la clasificacin. Si la primera fila contiene un encabezado que no se debe mover, no seleccionaremos esta opcin. Ordenar filas de encabezado especifica que se ordenen todas las filas de la seccin thead de la tabla (si las hay) siguiendo los mismos criterios que para las filas del cuerpo. (Observamos que las filas thead permanecern en la seccin thead y seguirn apareciendo en la parte superior de la tabla, incluso despus de ordenarlas.) Ordenar filas de pie especifica que se ordenen todas las filas de la seccin tfoot de la tabla (si las hay) siguiendo los mismos criterios que para las filas del cuerpo. (Observamos que Dreamweaver CS4. Captulo 7. Tablas
197
las filas tfoot permanecern en la seccin tfoot y seguirn apareciendo en la parte superior de la tabla, incluso despus de ordenarlas.) No modificar los colores de fila hasta que haya finalizado la operacin de orden especifica que los atributos de fila de la tabla (como por ejemplo, el color) deben permanecer asociados al mismo contenido despus de que la tabla sea ordenada. Si el formato de las filas de la tabla alterna dos colores, no se debe seleccionar esta opcin para garantizar que la tabla ordenada incluya filas con colores alternos. Si los atributos de fila son especficos del contenido de cada fila, se debe seleccionar esta opcin para garantizar que los atributos permanezcan asociados a las filas apropiadas de la tabla ordenada. 7.7. Modos de tablas Cuando estamos trabajando con tablas, Dreamweaver nos facilita el trabajo con distintos modos de visualizacin. Generalmente se trabaja como lo hemos hecho hasta ahora, es decir, en Modo estndar, pero tambin podemos trabajar en Modo de tablas expandidas. Modo de tablas expandidas El modo de tablas expandidas aade temporalmente relleno y espaciado de celda a las tablas de un documento y aumenta los bordes de las tablas para facilitarnos la edicin. Este modo se utiliza principalmente porque permite seleccionar elementos de las tablas o colocar el punto de insercin de forma precisa, pero no nos presenta la pgina como quedar exactamente. Cuando hayamos realizado la seleccin o hayamos colocado el punto de insercin, deberemos volver al modo estndar para realizar las modificaciones de la pgina. Para pasar al modo de tablas expandidas desde la vista diseo, pues no lo podemos hacer desde la vista cdigo, seguiremos uno de los siguientes procedimientos: Ejecutando Ver > Modo de tabla > Modo de tablas expandidas. Haciendo clic en el en el botn Ampliada, en la categora Diseo de la barra Insertar, para activar el modo de tablas expandidas, o pulsando F6.
Figura 7.37. Botn Ampliada de la categora Diseo de la barra Insertar. Dreamweaver aade relleno y espaciado de celdas a todas las tablas de la pgina y aumenta sus bordes. En la ventana del Documento, en la parte superior, aparecer una barra etiquetada Modo de tablas expandidas y a su derecha un vnculo para Salir de este modo.
Figura 7.38. Modo de tablas expandidas de la ventana del documento. Dreamweaver CS4. Captulo 7. Tablas
198
Tambin podemos salir de este modo ejecutando Ver > Modo de tabla > Modo estndar o bien haciendo clic en el botn Estndar, en la categora Diseo de la barra Insertar. Dreamweaver regresa al modo estndar. 7.8. Importar y exportar datos de tablas Puedes importar datos de tabla creados con otra aplicacin y guardados en un formato de texto delimitado (con elementos separados por tabuladores, comas, dos puntos o puntos y comas) a Dreamweaver y aplicarles formato de tabla. Tambin puedes exportar los datos de tabla desde Dreamweaver a un archivo de texto, con el contenido de las celdas contiguas separado por un delimitador. Se pueden utilizar comas, dos puntos, puntos y comas o espacios como delimitadores. No se pueden exportar partes de una tabla, por lo que es necesario exportar la tabla entera en todos los casos. Importar datos de tabla Podemos importar datos de tabla de diversas formas: Ejecutando Archivo>Importar>Datos de tabla.
Figura 7.39. Importar datos de tabla.
Dreamweaver CS4. Captulo 7. Tablas
199
Pulsando el icono Importar datos de tabla de la categora Datos de la barra Insertar.
Desplegando el men Insertar y seleccionando Objetos de tabla>Importar datos de tabla.
Figura 7.40. Importar datos de tabla desde Insertar.
En cualquier caso, se abrir el cuadro de dilogo Importar datos de tabla:
Dreamweaver CS4. Captulo 7. Tablas
200
Figura 7.41. Cuadro de dilogo Importar datos de tabla.
En el campo Archivo de datos podremos especificar el nombre del archivo de datos que deseamos importar; si pulsamos en Examinar, podremos localizarlo en nuestro equipo. Si desplegamos Delimitador , podemos seleccionar el delimitador utilizado en el archivo que estamos importando; deber usarse el mismo delimitador que se us cuando se guard en nuestro equipo el fichero de datos. En caso de seleccionar Otro, aparecer un cuadro de texto a la derecha del men emergente.
En Ancho de tabla , podemos activar Ajustar a los datos, si deseamos que todas las columnas tengan el ancho suficiente para contener la cadena de texto ms larga en la columna; o activar Establecer en, introduciendo un valor de ancho fijo de la tabla en pxeles o como porcentaje del ancho de la ventana del navegador.
En el campo Relleno de celda podemos especificar el nmero de pxeles entre el contenido de una celda y los lmites de la misma. En el campo Espacio entre celdas, determinaremos el nmero de pxeles entre celdas de tablas contiguas, y en el campo Borde, podemos teclear el ancho en pxeles de los bordes de la tabla.
Dreamweaver CS4. Captulo 7. Tablas
201
Si desplegamos Formatear primera fila , podemos determinar el formato aplicado a la primera fila de la tabla de entre las cuatro opciones de formatos posibles. Exportar datos de tabla Situando el cursor dentro de cualquier celda de una tabla, podemos seleccionar Archivo>Exportar>Tabla. Se abre el cuadro de dilogo Exportar tabla.
Figura 7.42. Cuadro de dilogo Exportar tabla. En este cuadro podemos establecer el Delimitador a usar para separar los elementos en el archivo a exportar y seleccionar en Saltos de lnea, el sistema operativo en el que va a abrirse el archivo exportado.
202
Captulo 8. Marcos
Dreamweaver CS4. Captulo 8. Marcos 203
Captulo 8. MARCOS Cuando diseamos un sitio Web, podemos pensar en distribuir la informacin de una cierta forma. Por ejemplo podemos tener una zona superior de la pgina en la que se muestre por ejemplo un logotipo, otra zona lateral en la que se incluya un men que enlaza con las diferentes secciones del sitio Web. Queremos que estas dos zonas se mantengan fijas en todo el sitio. Adems queremos que el resto de las pginas del sitio se muestren en la parte central. Ser solamente esta parte la que cambie segn navegamos por las pginas de nuestro sitio Web. Para disear un sitio web, siguiendo modelos similares a estos, podemos utilizar marcos. Por tanto podemos considerar un marco como una zona de la pgina que puede mantenerse fija en todo el sitio o bien albergar distintas pginas Web. La utilizacin de marcos en HTML nos permite al disear una pgina Web dividir el contenido de la misma en diferentes partes, facilitando su visin ya que, es posible mantener fijas alguna de estas regiones mientras que otras pueden variar. Por tanto, adems de la funcionalidad de nuestro sitio Web tambin mejoran su apariencia. Cada uno de estos marcos individuales va a contener a su vez una pgina HTML, pudiendo editarse todos los marcos a la vez desde la pgina que los contiene de forma que es posible contemplar de un solo vistazo el aspecto final que tendr nuestra pgina Web. A modo de resumen se podra decir que los marcos no son ms que pginas Web contenidas en el interior de otra pgina Web que las engloba. 8.1. Ventajas y desventajas de los marcos Entre las principales ventajas del uso de marcos en el diseo de pginas Web podramos destacar las siguientes: Cada marco puede disponer, si as lo especificamos al disear nuestra pgina Web, de su propia barra de desplazamiento, para mostrar su contenido en el caso de que no pueda visualizarse en su totalidad en la ventana del navegador. Si en uno de los marcos mostramos imgenes que sirven de vnculo al contenido del marco central de nuestra pgina Web, dichas imgenes no se cargarn nada ms que la primera vez que se acceda a la Web, con lo que la velocidad a la hora de visualizarla aumentar. Como principales desventajas se pueden indicar: Algunos buscadores no tienen configurados sus motores de bsqueda para que funcionen correctamente en pginas con marcos, aunque los ms conocidos y utilizados s que tienen resuelto este problema. La alineacin de objetos situados en distintos marcos puede llegar a ser complicado en ocasiones. Dreamweaver CS4. Captulo 8. Marcos
204
Comprobar las opciones de navegacin puede llevar mucho tiempo. No todos los navegadores son compatibles con el uso de marcos, por lo que algunos visitantes con discapacidades pueden experimentar dificultades para navegar. Si utilizas marcos, incluye siempre una seccin noframes (sin marcos) en tu conjunto de marcos para los visitantes que no pueden verlos. Tambin se puede incluir un vnculo explcito con una versin sin marcos del sitio. Al disear la pgina Web en funcin de nuestras necesidades y a la vista de esta lista de ventajas y desventajas podemos optar por disearla con o sin marcos a nuestro gusto. 8.2. Operaciones con marcos Crear marcos y conjuntos de marcos Un marco es una regin de una ventana del navegador Web que puede mostrar un documento HTML independientemente de lo que se muestre en el resto de dicha ventana. Un conjunto de marcos es un archivo HTML que va a indicar el nmero de marcos que van a componer la pgina Web, su ubicacin dentro de la misma e incluso la direccin Web a travs de la cual se acceder a esa misma pgina. La forma general de trabajar con marcos se podra resumir en la creacin de una pgina principal HTML que va a englobar a todos los marcos (a la que podemos denominar conjunto de marcos), a continuacin la creacin de los marcos que deseemos dentro de esta pgina principal y por ltimo el alojamiento a su vez de cada uno de ellos en una pgina HTML. Se debe tener claro que tanto la pgina principal, como cada una de las pginas HTML que se alojen en los distintos marcos son pginas independientes y como tales deben ser tratadas y almacenadas. Por ejemplo, si disponemos de una pgina principal con tres marcos: uno superior, uno lateral y uno central, estaremos trabajando con cuatro pginas HTML independientes. Para crear un marco en Dreamweaver basta con abrir un documento ya existente o crear uno nuevo, a continuacin hacemos clic en la opcin Insertar>HTML>Marcos y dentro de ella indicamos la posicin donde deseamos aadir el marco dentro de la pgina: izquierda, derecha, superior, inferior,...: Dreamweaver CS4. Captulo 8. Marcos
205
Figura 8.1. Crear un marco. Tambin es posible aadir un marco haciendo clic en el icono Marcos dentro del panel Insertar, categora Diseo, pestaa Estndar, eligiendo el conjunto de marcos que mejor se adapte a nuestras necesidades:
Figura 8.2. Insertar marcos. Dreamweaver CS4. Captulo 8. Marcos
206
Si ejecutamos Archivo>Nuevo, tambin podemos crear directamente un conjunto de marcos de entre los diversos de muestra que nos ofrece Dreamweaver, si en el cuadro de dilogo Nuevo Documento, pulsamos la seccin Pgina de muestra, seleccionamos Conjunto de marcos en Carpeta de muestra y elegimos el conjunto de que ms se ajuste a nuestras necesidades.
Figura 8.3. Crear un nuevo conjunto de marcos. Si decidimos crear un conjunto de marcos utilizando los iconos del panel Insertar y hacemos clic en una de las opciones que se nos muestran en la categora Diseo, icono , por ejemplo en la opcin Marco superior , en la pgina Web que estamos creando aparece una lnea horizontal, indicndonos que se ha creado un marco superior; adems se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta marco, en el que podremos darle un ttulo al marco principal (mainframe) y al marco superior (topFrame) que acabamos de crear en nuestro nuevo conjunto de marcos. Dreamweaver CS4. Captulo 8. Marcos
207
Figura 8.4. Pgina web con marco superior En este caso estamos creando un conjunto de marcos sobre el documento actual, es decir uno de los marcos creados denominado marco principal va a contener dicho documento. Podemos crear un conjunto de marcos en Dreamweaver con todos los marcos en blanco, desde el cuadro Nuevo documento, como hemos mencionado antes, es decir, un nuevo documento totalmente vaco, que es a la vez un conjunto. Si nos decidimos por esta ltima opcin, Seleccionamos Pgina de muestra, carpeta Conjunto de marcos en Carpetas de muestra y, a continuacin, seleccionamos uno de los conjuntos que se nos muestran en la columna Pgina de muestra, de los cuales podemos ver una previsualizacin a la derecha, tal y como muestra la Figura 8.3.
RECOMENDACIN. Debemos tener claro que antes de poder ver en un navegador nuestra pgina compuesta por diferentes marcos, hay que guardarlos uno a uno, as como guardar el conjunto de marcos que los engloba.
Para llevar a cabo esta tarea tenemos que seleccionar cada uno de ellos de forma individual como veremos en el apartado siguiente y seleccionar la opcin Archivo>Guardar marco. Una vez realizado esto, aparecer un cuadro de dilogo indicndonos dnde deseamos almacenar dicho marco en nuestro disco duro y con qu nombre: Dreamweaver CS4. Captulo 8. Marcos
208
Figura 8.5. Cuadro de dilogo Guardar como para un marco. De la misma forma debemos almacenar tambin el conjunto de marcos, seleccionndolo como veremos a continuacin en el siguiente apartado, y haciendo clic en la opcin Archivo>Guardar conjunto de marcos. Seleccionar marcos Para seleccionar marcos individuales podemos hacer clic dentro del documento actual en el marco que se desea modificar o bien pulsar sobre un marco concreto en el Panel Marcos de Dreamweaver:
Figura 8.6. Panel Marcos. Dreamweaver CS4. Captulo 8. Marcos
209
En este panel es posible: Seleccionar el conjunto de marcos haciendo clic en la lnea que rodea a todos los marcos (indicado por una lnea gruesa de color oscuro).
Figura 8.7. Seleccionar conjunto de marcos. Seleccionar marcos individuales haciendo clic en cada una de las regiones delimitadas por lneas de color ms claro.
Figura 8.8. Seleccionar un marco individual. Para poder seleccionar un marco o un conjunto de marcos desde la ventana principal del documento, en la vista Diseo, haciendo clic en cada uno de ellos es necesario que estn activas las lneas que los delimitan. En el caso de que no estn activas, podemos activarlas haciendo clic en Ver>Ayudas visuales>Bordes de marco. Dreamweaver CS4. Captulo 8. Marcos
210
Figura 8.9. Ver bordes de marco. Tambin es posible modificar marcos que hayamos creado previamente, realizando dentro de los mismos divisiones a travs del men Modificar>Conjunto de marcos eligiendo posteriormente cualquiera de las divisiones que se nos muestran.
Figura 8.10. Modificar conjunto de marcos.
Dreamweaver CS4. Captulo 8. Marcos
211
Cdigo alternativo para pginas con marcos A la hora de disear una pgina Web con marcos debemos tener en cuenta que no todos los navegadores los aceptan o bien que puede que no estn configurados correctamente para ello, con lo cual no se vern las pginas correctamente. Para solucionar este problema, existe una etiqueta en HTML denominada noframes que nos va a permitir especificar un cdigo alternativo para dichos navegadores. Dicho cdigo alternativo, debera tener el mismo contenido (o al menos lo ms parecido posible) que nuestra pgina Web con marcos y no debe limitarse simplemente a los mensajes tipo Su navegador no acepta marcos. En Dreamweaver hay otra forma de especificar este cdigo alternativo a travs de la opcin Modificar>Conjunto de marcos>Editar contenido sin marcos.
Figura 8.11. Editar contenido sin marcos. Una vez hecho esto la ventana que mostraba el documento ahora nos muestra otra ventana bajo el ttulo Contenido sin marcos en la cual se podr especificar dicho contenido de forma similar a como haramos con otra pgina HTML: Dreamweaver CS4. Captulo 8. Marcos
212
Figura 8.12. Contenido sin marcos. En el caso de querer indicar ese contenido a travs de la vista cdigo se especificara entre las etiquetas de inicio y de fin noframes de la siguiente forma: <noframes> .... cdigo HTML alternativo.... </noframes> 8.3. Propiedades de los marcos Para modificar las propiedades de un marco o conjunto de marcos es necesario seleccionarlo previamente. Una vez llevado a cabo este paso previo, podemos modificar las caractersticas del marco o conjunto de marcos desde el Inspector de Propiedades. Si este Inspector de propiedades no est visible podemos hacer que sea as desde Ventana>Propiedades. Dreamweaver CS4. Captulo 8. Marcos
213
Figura 8.13. Propiedades de un conjunto de marcos. Desde este inspector es posible especificar si deseamos que los marcos aparezcan separados por una lnea o no, cambiando el valor del campo Bordes ; podemos indicar adems el color del borde si hemos activado S, en el campo Color del borde (seleccionndolo desde el selector de colores o indicndolo mediante un valor hexadecimal) e, incluso el grosor del mismo en el campo Ancho . En el campo Fila (o Columna segn el marco que hayamos elegido en el campo Seleccin Fila Col.), podemos indicar: El tamao deseado para el marco indicando un valor en el campo Valor. La unidad de medida a la que se aplicar dicho valor. Dicha unidad de medida se especifica en el campo Unidades y podr ser Pxeles, Porcentaje o Relativo . Lo normal es especificar un tamao concreto en pxeles a uno de los marcos y al otro asignarle un valor relativo (indicando un 1 en el campo Valor, lo que equivale a no introducir ningn valor), para que se ajuste al tamao de la ventana del navegador. Si lo que se desea modificar son las propiedades de un marco concreto basta con seleccionarlo tal y como vimos en el apartado anterior e indicar los datos concretos a modificar en el Inspector de Propiedades:
Figura 8.14. Propiedades de un marco. En este inspector se van a poder especificar las siguientes propiedades: Dreamweaver CS4. Captulo 8. Marcos
214
Nombre de marco: en l se especificar el nombre que deseamos dar a este marco, con una particularidad, dicho nombre no podr contener espacios en blanco. Origen: en este campo indicaremos la pgina HTML que se alojar en este marco. Si hacemos clic en el icono de la carpeta aparecer el cuadro de dilogo Seleccionar archivo HTML para buscar el fichero deseado en nuestro equipo. Bordes: si se desea que entre los marcos aparezcan lneas de separacin se elegir el valor S. Color borde: si en la propiedad anterior se ha indicado que se desea que las lneas de separacin sean visibles, aqu podremos especificar el color de dichas lneas. Es posible utilizar para ello el selector de colores, o bien, indicar un valor hexadecimal. Desplaz.: en funcin del valor elegido , en la ventana del navegador Web aparecern barras de desplazamiento, siempre que el documento contenido en el marco pueda mostrarse completamente o no. Mismo tamao: si seleccionamos este campo, el usuario no podr modificar el tamao de los distintos marcos desde el navegador. Ancho y Alto del margen: indican respectivamente la distancia entre el contenido del marco y sus bordes izquierdo o derecho en el caso de la propiedad Ancho y superior e inferior en el caso del Alto del margen. 8.4. Vnculos entre marcos En el apartado anterior en el que veamos como modificar las propiedades de un marco, indicbamos que en el campo Origen era posible indicar la pgina que inicialmente contendr el marco. Sin embargo, como se ha mencionado a lo largo de este captulo el uso ms habitual de los marcos es situar una serie de vnculos en uno de estos marcos de manera que al hacer clic en alguno de ellos, el contenido del marco principal vare. Para llevar a cabo esta tarea, es necesario indicar, al crear un vnculo, cul ser su destino y en qu marco se debe mostrar esa pgina de destino. Utilizamos para ellos los campos Vnculo y Destino del Inspector de propiedades del vnculo. En el campo Vnculo se indica cul es la pgina que se desea mostrar. Dreamweaver CS4. Captulo 8. Marcos
215
En el campo Destino es posible especificar si queremos mostrar la pgina indicada en el campo Vnculo, dentro de uno de los marcos definidos en la propia pgina Web o no . (En la imagen hay dos marcos especificados, mainframe y topFrame) Adems de los posibles destinos predeterminados de todo hipervnculo podemos seleccionar tambin: _blank: muestra el documento vinculado en nueva ventana del navegador, _parent: muestra el contenido del documento indicado en el conjunto de marcos padre, _self: es la opcin predeterminada del sistema y abre el contenido del documento vinculado en el propio marco donde se encuentre el vnculo y _top: muestra el documento vinculado en la ventana actual del navegador, con lo que desaparecern todos los marcos. Aparecen tambin, como hemos visto en la imagen, los nombres de los marcos existentes en la pgina Web que estamos creando. El equivalente en cdigo HTML al campo Destino en el cual indicar en qu marco mostrar el documento vinculado es el parmetro target, dentro de la etiqueta correspondiente al vnculo, por ejemplo. <a href="http://www.mipagina.com" target="_blank"> Enlace</a>
Ejercicio
El objetivo de este ejercicio ser la creacin de una pgina Web que contenga tres marcos: uno en la parte superior de la pgina donde incluiremos un logotipo y el ttulo de nuestra Web, otro en el lateral izquierdo de la pgina donde incluiremos enlaces a diferentes pginas web y el tercer marco lo situaremos en el centro de la pgina que contendr el contenido principal de nuestra Web.
Crea una pgina bsica de HTML (Archivo>Nuevo).
Crea los marcos de los que se va a componer la pgina desde la barra de mens de la aplicacin Insertar>HTML>Marcos. A continuacin selecciona los distintos marcos a aadir: superior, izquierda, O bien, cralos usando la barra Insertar, categora Diseo, Marcos, seleccionando los marcos a aadir. Esta ltima opcin es la ms rpida y cmoda, ya que te va a permitir crear los tres marcos de una sola vez si haces clic en el icono Marco superior e izquierdo anidado.
Dreamweaver CS4. Captulo 8. Marcos
216
Figura 8.15. Insertar conjunto de marcos.
En el marco lateral se incluirn varios enlaces cuyo contenido se deber mostrar en el marco central de la pgina. Para llevar a cabo esta tarea selecciona el marco izquierdo a travs del panel Marcos situado en la parte derecha del documento actual haciendo clic en el recuadro correspondiente a dicho marco (si no est activo dicho panel, lo puedes activar a travs del men Ventana>Marcos).
Figura 8.16. Seleccionar marco izquierdo desde el panel Marcos.
Dreamweaver CS4. Captulo 8. Marcos
217
Inserta en el marco izquierdo el texto ENLACES OFICIALES, a modo de ttulo.
Crea los siguientes enlaces mediante el men Insertar > Hipervnculo:
o Enlace a la web del ISFTIC con el Texto ISFTIC; como Vnculo escribe http://www.isftic.mepsyd.es/, como Destino selecciona el marco central o mainFrame, y como Ttulo, indica Web del ISFTIC.
Figura 8.17. Configurar hipervnculo.
o Enlace al Aula MENTOR, con el Texto Aula Mentor; como Vnculo escribe https://centrovirtual.educacion.es/Visitas/inicio.html, Destino mainFrame o marco central; Ttulo, Web del Aula Mentor. o Enlace a la web del Ministerio de Educacin, con el Texto Ministerio de Educacin; como Vnculo escribe http://www.mepsyd.es/portada.html, Destino mainFrame o marco central; Ttulo, Web del Ministerio de Educacin.
En el marco superior inserta una tabla de 616 pxeles de Ancho con Borde 0, con dos columnas y una sola fila, tal y como hemos visto en el captulo anterior.
En la primera columna inserta la imagen (Insertar > Imagen) correspondiente al logotipo del Ministerio de Educacin. Para obtener esta imagen debes acceder con tu navegador a http://www.mepsyd.es/portada.html, localizar la imagen que vers en la esquina superior izquierda de la web, hacer clic sobre ella con el botn derecho del ratn y seleccionar Guardar imagen como. Gurdala dentro de la carpeta imagenes de MiWeb; se llama escudo- ministerio.gif. Desde ah, puedes insertarla en la tabla. Si tienes dificultades localizando la imagen, tambin la tienes disponible para descargar desde Materiales de Apoyo, Material necesario para ejercicios, Ejercicios del Captulo 8.
En la segunda columna aades un texto, como por ejemplo: Pgina web creada con marcos.
Guarda todo lo creado hasta ahora (Archivo>Guardar todo). Observa que el primer nombre que pide es el de la pgina que contiene los marcos, el conjunto de marcos, es decir la pgina que contiene el resto de marcos. Despus ir pidiendo el nombre de las dems pginas, cada una correspondiente a un marco. Para identificar la pgina que vas a guardar en cada momento observa en la vista diseo de Dreamweaver que aparece seleccionada. Dreamweaver CS4. Captulo 8. Marcos
218
Estos son los nombres que vas a dar a las pginas: o Al conjunto de marcos: marcos.html o Al marco central: principal.html o Al marco izquierdo: menu.html (sin tilde) o Al marco superior: superior.html
Recuerda que no es recomendable usar tildes ni caracteres especiales en los nombres de ficheros y carpetas para que se puedan leer correctamente en todas las plataformas y navegadores, as como dejar espacios en blanco en dichos nombres.
El aspecto que presentar tu pgina hasta ahora deber ser similar a ste:
Figura 8.18. Aspecto de la pgina web creada con marcos.
Ahora, para distinguir los marcos superior e izquierdo, les vamos a asignar un color de fondo distinto al del marco principal.
Si habas cerrado tu trabajo, abre las pginas alojadas en el marco superior e izquierdo, es decir, superior.html y menu.html respectivamente, desde el panel Archivos.
En el Inspector de Propiedades haz clic en el botn Propiedades de la pgina . Se abre el cuadro de dilogo Propiedades de la pgina con la categora Apariencia (CSS) seleccionada. En el campo Color de fondo teclea el color #006699 a las dos pginas; pulsa Aplicar y luego Aceptar.
Dreamweaver CS4. Captulo 8. Marcos
219
Figura 8.19. Color de fondo de pgina.
Si al pulsar Aceptar no ves el color de fondo aplicado en la vista Diseo, no te preocupes, pulsa Vista en vivo para ver como quedara tu pgina en un navegador, y en esta vista s vers el nuevo color de fondo.
Realiza los cambios que ms te gusten para el formato de los textos, pero que se puedan ver correctamente en la pgina. Por ejemplo te puede quedar como muestra la siguiente figura:
Figura 8.20. Aspecto final de la pgina creada con marcos.
Guarda los cambios y pulsa F12 para ver la pgina en tu navegador. Prueba los enlaces que Dreamweaver CS4. Captulo 8. Marcos
220
has creado en el marco izquierdo.
221
Captulo 9. Formularios
Dreamweaver CS4. Captulo 9. Formularios 222
Captulo 9. FORMULARIOS Los formularios en HTML permiten a los visitantes de una pgina web una cierta interaccin, permitindoles enviar o recibir informacin segn el tipo de formulario. Esto se consigue gracias a la adicin de campos de entrada/salida a la pgina Web denominados campos de formulario. Los hay de muy diferentes tipos: campos de texto, botones, casillas de verificacin, botones de opcin, etc. stos permitirn al usuario de la web, rellenar dichos campos o seleccionar entre las diferentes opciones disponibles y pasar toda esta informacin al servidor. Todos estos campos se deben incluir entre las etiquetas <form> y </form> de inicio y fin de formulario respectivamente (Dreamweaver se encargar de crearlas cuando le digamos que queremos insertar un formulario en nuestra pgina HTML). Cuando el usuario, despus de hacer clic en el botn del formulario, enva la informacin al servidor, en l se procesan los datos, y si debe haber una respuesta, se genera una nueva pgina HTML con los datos correspondientes que se devuelve de nuevo al navegador desde el que se origin la peticin. Este procesamiento de datos en el servidor no se realiza con HTML sino con otro tipo de lenguajes denominados lenguajes de servidor como pueden ser: PHP, ASP, CGI, 9.1. Crear formularios Para crear un formulario en Dreamweaver slo tenemos que crear un nuevo HTML como ya hemos aprendido en captulos anteriores. Despus, situamos el cursor en el punto del documento donde queramos insertar el formulario, desplegamos el men Insertar>Formulario y seleccionamos Formulario.
Figura 9.1. Insertar Formulario. Dreamweaver CS4. Captulo 9. Formularios
223
Dicho formulario se identifica en la vista Diseo de la pgina web, mediante un cuadro de trazos discontinuos de color rojo.
Figura 9.2. Formulario en la vista diseo de un documento.
RECOMENDACIN. Si no observas el cuadro que identifica el formulario puedes activarlo desde el comando Ver > Ayudas visuales > Elementos invisibles.
Para modificar las propiedades del formulario que acabamos de crear, slo hay que seleccionarlo, bien haciendo clic en el contorno de trazos antes mencionado, o haciendo clic en la etiqueta form en el selector de etiquetas situado en la parte inferior de la ventana y especificar los datos concretos relativos al formulario en el Inspector de Propiedades.
Figura 9.3. Propiedades de un formulario. Las propiedades que podemos modificar son: Nombre del formulario: aqu debemos escribir un nombre significativo para identificar al formulario dentro del cdigo HTML. Accin: indicamos qu programa o pgina HTML debe ejecutar el formulario al interactuar con el servidor, por ejemplo al pulsar un botn de envo de datos de formulario. Por ejemplo, si indicamos como destino una pgina HTML hay que especificar la ruta completa de la forma: http://www.mipagina.com/index.html Si por el contrario deseamos ejecutar un programa escrito con cualquier lenguaje de programacin web, por ejemplo PHP, deberemos especificar el nombre de dicho programa y en el caso de ser necesaria la ruta completa donde se encuentra dicho programa alojado, de la siguiente forma: /php/recoger_datos.php Mtodo: aqu seleccionamos cmo se pasarn los datos del formulario al servidor. En este caso podemos especificar dos posibles valores : Dreamweaver CS4. Captulo 9. Formularios
224
GET: este mtodo lo utilizaremos para pasar los datos del formulario al servidor utilizando el URL de la barra de navegacin segn el formato: http://www.nombre_pagina.es?nombre_campo1=valor_campo1&nombre_campo2=valor_ca mpo2&...... es decir, en primer lugar la direccin completa de la pgina HTML donde est alojado nuestro formulario, a continuacin el smbolo ?, y por ltimo parejas de nombres de campos con sus valores correspondientes separados por el smbolo &. Supongamos que nuestro formulario alojado en http://www.miweb.com, tiene dos campos, uno llamado nombre y otro apellidos, cuando el usuario rellene los campos y haga clic en enviar los datos mediante el botn dentro de ese formulario, este mtodo aadira los valores introducidos al URL de la siguiente forma: http://www.miweb.com?nombre=Antonio&apellidos=Lpez A la hora de seleccionar este mtodo se deben tener en cuenta dos puntos importantes: - El primero y ms importante es que al mostrar todos los datos del formulario a travs de la URL, dichos datos son totalmente visibles por lo que si no queremos que sea as (supongamos un formulario donde se introduzcan contraseas, datos bancarios,...) ste mtodo no ser el ms adecuado. - Otro aspecto a tener en cuenta es que los URL admiten como mximo 8.192 caracteres, con lo cual si nuestro formulario contiene muchos campos, o bien si los datos introducidos en cada uno de estos campos tienen una longitud muy grande, es posible que se sobrepase este lmite y por tanto los datos no se enven completamente, pudiendo quedar algunos de ellos cortados. POST: al contrario que el mtodo citado anteriormente, POST no utiliza el URL para enviar los datos del formulario, sino que los incluye en la peticin HTTP del formulario de forma transparente al usuario. Este mtodo soluciona los dos problemas antes mencionados con el mtodo GET, ya que, los datos enviados no son visibles en ningn momento para el usuario y adems en este caso no existen limitaciones de tamao de ningn tipo. La eleccin del mtodo de envo de datos queda a nuestra eleccin en funcin de nuestras necesidades y preferencias al disear el formulario. Dest: en el campo Destino, podemos especificar dnde queremos que se ejecute los datos mostrados por el archivo indicado en el campo Accin, en una ventana nueva sin nombre (opcin _blank), en la ventana padre de la que est mostrando el documento actual (_parent), en la misma ventana que contiene el formulario que ha realizado el envo del formulario (opcin _self) o en la ventana actual pero cubrindola por completo (eligiendo la opcin _top). Tipo de codificacin: este campo nos sirve para especificar el formato de los datos que se van a mostrar en la pgina (MIME). El explorador utiliza este atributo para codificar de forma correcta la informacin que se muestra en el servidor. En funcin del valor que se asigne a este atributo la informacin se mostrar de una forma u otra, por ejemplo si el valor es text/plain la informacin se enviar como texto plano, legible y sin codificar. Dreamweaver CS4. Captulo 9. Formularios
225
El valor predeterminado en los formularios de tipo POST es application/x-www-form- urlencode. Para aquellos formularios que contengan campos de tipo fichero es necesario utilizar el mtodo POST, seleccionando el valor multipart/form-data para subir los ficheros desde el navegador al servidor.
Figura 9.4. Desplegable Tipo de codificacin de propiedades de formulario. Una vez realizado el envo de la informacin lo ms usual es que algn programa escrito en un lenguaje del lado del servidor tipo PHP, ASP, recoja dicha informacin, realice algunas operaciones con ella y la presente en pantalla con algn formato concreto; tambin es posible que dichos lenguajes de programacin interacten con bases de datos, sin embargo este tipo de programacin va un paso ms all de lo que estamos viendo en este curso y, por tanto, no procede en estos momentos entrar en detalle con dichos lenguajes. Sin embargo se menciona porque en la mayor parte de los casos en los que se trabaje con formularios se trabajar tambin con este tipo de lenguajes de programacin. Podemos establecer la diferencia entre las dos partes que entran a formar parte de un formulario: lenguaje HTML y lenguajes del lado del servidor. El lenguaje HTML lo utilizaremos para disear el aspecto visual del formulario, es decir, lo que el usuario ve cuando accede a una pgina Web que contiene un formulario y forma parte del contenido de este curso. Los lenguajes del lado del servidor se utilizan para el procesamiento y posterior tratamiento de la informacin que es enviada desde estos formularios. Estos lenguajes se estudian en otros cursos del Aula Mentor (por ejemplo el curso de PHP). Para ilustrar la diferencia existente entre utilizar el mtodo GET o el mtodo POST a la hora de enviar informacin a travs de un formulario vamos a ver el siguiente ejemplo. Partimos de un formulario con tres campos de texto de distinto tipo y que se van a llamar respectivamente campo1, campo2 y campo3 y que van a contener los valores contenido1, contenido2 y contenido3. Dicho formulario es el que se muestra en la siguiente figura: Dreamweaver CS4. Captulo 9. Formularios
226
Figura 9.5. Ejemplo de un formulario.
Suponiendo que la pgina destino de nuestro formulario es la pgina del Ministerio de Educacin (http://www.mepsyd.es), si utilizamos el mtodo POST para el envo de datos a travs de este formulario, el contenido de la barra de navegacin sera: http://www.mepsyd.es. Mientras que si utilizsemos el mtodo GET el contenido sera: http://www.mepsyd.es/?texto1=contenido1&texto2=contenido2&texto3=contenido3&Submit =Enviar Como se observa claramente con el mtodo GET la informacin enviada est expuesta a la vista de cualquier usuario, con lo cual, si dicha informacin fuese confidencial este mtodo no podra ser utilizado. Cuando insertamos un formulario en la vista diseo de Dreamweaver, el cdigo HTML que se genera sera el siguiente: <form action="" method="" name="" target="" id=" ">
</form> Este cdigo est situado en el cuerpo de la pgina HTML, es decir, entre las etiquetas <body> y </body>. Adems, todos los elementos que se quieran insertar en el formulario deben ir lgicamente entre las etiquetas de inicio y fin del formulario: <form> y </form>. Dreamweaver CS4. Captulo 9. Formularios
227
En el interior de la etiqueta de inicio de formulario es donde se deben indicar todos los parmetros que se quieran especificar para el formulario (parmetros que hemos visto con anterioridad) y que iran entre las comillas. Ms adelante veremos algunos cdigos ms concretos.
RECOMENDACIN. Pasa de vez en cuando a la vista Dividir para que te muestre simultneamente las vistas cdigo y diseo del documento y puedas identificar las etiquetas asociadas a los formularios.
Ejercicio
El objetivo de este ejercicio ser la creacin de un sencillo formulario.
Crea un nuevo HTML desde Archivo>Nuevo.
Desde el panel Insertar, categora Formularios, inserta un formulario en tu nuevo documento.
Figura 9.6. Insertar Formulario desde panel Insertar.
Selecciona el formulario que acabas de crear haciendo clic en el recuadro que lo representa para poder modificar sus propiedades desde el Inspector de Propiedades con los siguientes datos: o Nombre del formulario: formulario1 o Accin: http://www.mepsyd.es o Mtodo: POST o Dest: _blank (para que la pgina destino se abra en una ventana nueva).
Dreamweaver CS4. Captulo 9. Formularios
228
Figura 9.7. Propiedades de formulario1.
Guarda la pgina HTML que contiene el formulario (Archivo>Guardar como...) en MiWeb con el nombre formulario1.html.
El aspecto final del formulario que hemos creado debe ser el siguiente:
Figura 9.8. Aspecto final de formulario1.html
El cdigo HTML que ha generado este formulario es: <form action="http://www.mepsyd.es" method="post" name="formulario1" target="_blank" id="formulario1"> </form> Un detalle a tener en cuenta tambin en los formularios es el del envo de correos electrnicos a travs de formularios, pues su inclusin no garantiza la recepcin de los mismos. Navegando por Internet encontraremos pginas con formularios, que despus de rellenar una serie de datos, debemos hacer clic sobre un enlace que nos permitir enviar un correo electrnico (normalmente se utiliza para enviar consultas, quejas, al creador de la pgina, o al propietario de la misma). Al hacer esto se abrir el gestor de correo electrnico predeterminado que tengamos instalado en nuestro ordenador para que escribamos el texto y enviemos el correo. Sin embargo, si no hay configurada previamente una cuenta de correo electrnico en este equipo, el correo nunca llegar a su destino, puesto que no sabr qu camino seguir (en trminos tcnicos no sabe cul es el servidor POP a utilizar para realizar el envo). Para solucionar este problema existe otro camino, y es utilizar lenguajes de programacin como PHP que gestionen el envo de manera transparente al usuario, de forma que ste, al hacer clic en un botn que se presente en la pgina, automticamente enviar el correo electrnico a su destinatario. Pero, como hemos dicho anteriormente, no es un tema a tratar en este curso.
Dreamweaver CS4. Captulo 9. Formularios
229
9.2. Objetos de formulario Una vez que hemos detallado las propiedades que debe tener nuestro formulario, el siguiente paso es darle contenido incluyendo los campos que van a componerlo. Veremos a continuacin las posibilidades de las que disponemos a la hora de aadir campos al formulario, as como sus distintas propiedades. Para aadir objetos dentro de un formulario existen dos mtodos, podemos hacerlo a travs de los mens Insertar>Formulario>... donde en el men desplegable mostrado podemos elegir cualquier objeto de entre todos los que tenemos disponibles: campos de texto, botones,...
Figura 9.9. Insertar objetos de formulario. El otro mtodo disponible para aadir objetos de formulario es a travs del panel Insertar eligiendo la categora Formulario, y a travs de los botones correspondientes, aadir un objeto u otro. Dreamweaver CS4. Captulo 9. Formularios
230
Figura 9.10. Panel Insertar, Categora Formularios Objetos de Campo de texto Un campo de texto es un objeto de formulario que podemos utilizar para recoger informacin que previamente se desconoce, como por ejemplo el nombre, apellidos, direccin, etc. en el cual el usuario puede introducir caracteres de todo tipo. Existen tres tipos de campos de texto disponibles: Campos de texto de una sola lnea: para textos cortos y sencillos: datos personales, datos postales,... Campos de texto de varias lneas: para textos ms amplios y de mayor contenido: observaciones respecto a un tema, comentarios,... Campos de tipo contrasea: para aquellos textos que no deseamos que se muestren por pantalla; al escribir cualquier texto, aparecer un asterisco por cada carcter alfanumrico tecleado para que quede oculto. Para insertar un campo de texto dentro del formulario tenemos dos caminos: A travs del men Insertar>Formulario>Campo de texto. Con el botn Campo de texto en la categora Formularios de la barra Insertar. De cualquier forma, se abrir el cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada que nos permitir crear un identificador y darle un nombre al campo de texto y decidir el estilo y la posicin del campo. Tambin podremos aadir en el campo Etiqueta, un texto que ir al lado del campo, para indicar cul es el contenido que se solicita en el campo, como por ejemplo, si se debe rellenar con el nombre, los apellidos, etc. Dreamweaver CS4. Captulo 9. Formularios
231
Figura 9.11. Cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada. Si no queremos rellenar estos datos ahora, podemos simplemente pulsar Cancelar y hacerlo ms adelante. Una vez que hayamos aadido el campo de texto, si no habas tecleado antes una Etiqueta para el mismo en el cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada, lo normal ser hacerlo ahora, aadiendo por tanto un texto al lado del campo para indicar cul ser el contenido que se solicita en el campo: si se debe rellenar con un nombre, con apellidos,... Para ello slo hay que hacer clic en el lado del campo donde queramos incluir dicho texto (dentro de la vista Diseo) y escribirlo.
Figura 9.12. Nombre indicativo de un campo de texto. Podemos elegir un tipo de campo de texto u otro en el Inspector de Propiedades del campo de texto insertado, as como indicar otros detalles referentes a estos campos.
Dreamweaver CS4. Captulo 9. Formularios
232
Figura 9.13. Propiedades de un campo de texto. Para los campos de texto de una lnea y para los de tipo contrasea, el aspecto del Inspector de Propiedades es el que se muestra en la figura anterior (difiere un poco, como veremos a continuacin, del relativo a los campos de texto de varias lneas). En este tipo de campos podemos especificar las propiedades siguientes: o Campo de texto: nombre identificativo del campo de texto (es recomendable darle un nombre que identifique claramente el contenido que tendr el campo, ya que dicho nombre ser el utilizado por el formulario para su procesamiento). Este nombre no puede contener espacios ni caracteres especiales. o Ancho car: en este campo debemos establecer el ancho del campo de texto indicado por el nmero de caracteres que debe mostrar inicialmente. o Car. mx.: este campo va a indicar el nmero mximo de caracteres que el usuario podr introducir en el campo de texto. o Si el valor especificado en el campo anterior Ancho car es inferior al introducido en este campo, esto provocar que a primera vista no se vea todo el texto introducido en el campo, sin embargo el formulario s lo considerar en su totalidad a la hora de ser enviado al servidor. o Val. inicial: en este campo pondremos un valor inicial para mostrarlo al usuario. A veces utilizamos el valor inicial como ejemplo de lo que puede escribir en el cuadro, pero ocurre que a veces, los usuarios no introducen nada en estos campos con valores iniciales. Lo ms recomendable es utilizar el ejemplo fuera del cuadro.
Figura 9.14. Valor inicial de ejemplo.
o Clase: si hemos definido una hoja de estilo para nuestra pgina, en este campo se la podremos asociar al campo que estamos creando. o Desactivado: desactiva el rea de texto del campo. o Slo lectura: convierte el rea de texto del campo en un rea de slo lectura. Los campos de texto de mltiples lneas, tendran el aspecto siguiente: Dreamweaver CS4. Captulo 9. Formularios
233
Figura 9.15. Campo de texto multilena. Para los campos de texto que pueden contener mltiples lneas, las propiedades varan un poco con respecto a los otros campos de texto.
Figura 9.16. Propiedades de un campo de texto con mltiples lneas. En este caso adems de las propiedades antes mencionadas para los otros campos de texto, podemos establecer: o Lneas nm: nos permite indicar el mximo nmero de lneas de este campo.
Ejercicio
El objetivo de este ejercicio ser la creacin de tres campos de texto con diferentes propiedades.
Abre el formulario que creaste en el ejercicio anterior con el nombre formulario1.html, al que vamos a aadir ahora tres campos de texto. Sita el cursor dentro del formulario que habas insertado, justo al final del objeto de formulario que habas creado en el ejercicio previo y pulsa dos veces la tecla Intro.
Ahora, aadimos un campo de texto de una sola lnea, llamado texto con una etiqueta denominada Campo 1. Para ello, pulsa sobre el icono de la categora Formularios del panel Insertar y en el cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada, teclea en el cuadro ID, texto; y en el cuadro Etiqueta, Campo 1. Deja activado Ajustar con etiqueta de Rtulo en Estilo, y en Posicin, activa Antes del elemento del formulario. Despus, pulsa Aceptar.
Dreamweaver CS4. Captulo 9. Formularios
234
Figura 9.17. Atributos de accesibilidad de campo de texto 1.
Selecciona el campo y desde el Inspector de propiedades, modifica lo siguiente: o Ancho car: 50 o Car. mx.: 100 o Val inicial: sin ningn valor o Clase: Ninguna
Figura 9.18. Propiedades del campo de texto 1.
A continuacin, crea un segundo campo de texto de tipo contrasea. En el cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada, teclea textocontrasea en ID, y Campo 2 en Etiqueta, dejando el resto de valores tal y como los tenas en el primer campo que insertaste. Dreamweaver CS4. Captulo 9. Formularios
235
Figura 9.19. Atributos de accesibilidad de campo de texto 2.
Ahora selecciona este campo y en el Inspector de Propiedades realiza lo siguiente:
o En Tipo, activa Contrasea o Ancho car: 10 o Car. Max: 10 o Val inicial: sin ningn valor. o Clase: Ninguna.
Figura 9.20. Propiedades del campo de texto 2.
Por ltimo aade al formulario un campo de texto de varias lneas de la forma en la que lo hemos hecho hasta ahora. En el cuadro Atributos de Accesibilidad de la etiqueta de entrada, en ID teclea areatexto y en Etiqueta Campo 3.
Dreamweaver CS4. Captulo 9. Formularios
236
Figura 9.21. Atributos de accesibilidad de campo de texto 3.
A continuacin selecciona el campo y en el Inspector de Propiedades modifica lo siguiente:
o Activa Varias lneas en el apartado Tipo. o Ancho car: 80. o Lneas nm: 10 o Val inicial: sin ningn valor o Clase: Ninguna
Guarda la pgina (Archivo > Guardar). Pulsa F12 para ver como se muestra en el navegador.
Dreamweaver CS4. Captulo 9. Formularios
237
Figura 9.22. Aspecto final del formulario.
El cdigo HTML generado en el formulario para cada uno de los distintos campos de texto que acabamos de insertar en este ejercicio es el siguiente: <form name="form1" method="post" action=""> <p>Campo1 <input name="texto" type="text" id="texto" size="50" maxlength="100"> </p> <p>Campo2 <input name="textocontraseña" type="password" id="textocontraseña" size="10" maxlength="10"> </p> <p>Campo3 <textarea name="areatexto" cols="80" rows="10" wrap="PHYSICAL" id="areatexto"></textarea> Dreamweaver CS4. Captulo 9. Formularios
238
</p> </form> OBSERVACIN. Como puedes observar, en el cdigo HTML el carcter no existe como tal, por lo que Dreamweaver lo traduce como ñ. De igual forma puedes identificar desde la vista Cdigo las palabras acentuadas y otros caracteres especiales. La prctica totalidad de los campos de entrada de un formulario se caracterizan porque las etiquetas HTML que los identifican comienzan por la palabra reservada input. Los campos de texto de mltiples lneas son una excepcin, pues comienzan con la palabra reservada textarea. Adems, en este tipo de campos su contenido no se muestra con el parmetro value (como en la gran mayora de los campos de entrada de un formulario), sino encerrado entre las etiquetas de comienzo y de fin del campo, es decir entre las etiquetas <textarea> y </textarea>. Campos ocultos Los campos ocultos son utilizados habitualmente para enviar informacin al servidor, al procesar el formulario, que no deseamos que sea visible para el visitante de nuestra pgina. Normalmente se trata de informacin relativa al usuario que deseamos enviar al servidor. Para insertar un campo oculto en nuestro formulario existen dos caminos: A travs del comando: Insertar>Formulario>Campo oculto. Haciendo clic en el botn Campo oculto en la categora Formularios del panel Insertar. Una vez insertado el campo oculto en el formulario, Dreamweaver inserta un marcador de campo oculto en la ventana del documento actual para indicar el lugar que ocupa. El siguiente paso despus de insertar el campo oculto es asignarle las propiedades desde el Inspector. Campo oculto: este campo se utiliza para dar un nombre al campo oculto creado. Valor: para asignarle un valor concreto a dicho campo oculto, que se transfiere al servidor cuando se enva el formulario.
Figura 9. 23. Propiedades de un campo oculto.
Dreamweaver CS4. Captulo 9. Formularios
239
El cdigo HTML generado en el formulario para un campo oculto sera similar al siguiente: <form name="form1" method="post" action=""> <input name="nombreoculto" type="hidden" id="nombreoculto" value="valoroculto"> </form> Como podemos comprobar, en este caso, lo nico que diferencia a este tipo de campos de los campos de entrada de texto, que vimos anteriormente, es el atributo type, que en este caso indica que estamos tratando con un campo oculto (hidden). Campos de carga de archivos Este tipo de campos se utiliza para permitir al usuario subir ficheros desde su disco duro al servidor donde est alojada la pgina Web como dato del formulario. El aspecto de estos campos es similar al de los campos de texto normales, pero con la salvedad de que en el lateral aparece un botn Examinar donde, al hacer clic, se permite al usuario seleccionar desde su sistema de ficheros local el archivo a cargar en el servidor a travs del formulario.
Figura 9.24. Campo de carga de archivo. Como ya se explic con anterioridad al hablar de los mtodos de envo de datos de formularios para poder utilizar de forma correcta este tipo de campos de archivos, al crear un nuevo formulario es necesario que le asignemos a la propiedad Mtodo el valor POST y a la propiedad Tipo de codificacin, el valor multipart/form-data. Para insertar un campo de archivo podemos: Ejecutar el comando: Insertar>Formulario>Campo de archivo. Haciendo clic en el botn Campo de archivo en la categora Formularios de la barra Insertar. Una vez insertado el campo, podemos seleccionarlo y modificar sus propiedades desde el Inspector de Propiedades. Los posibles valores a modificar son los siguientes: Campo archivo: para indicar un nombre al campo que estamos creando. Ancho car: de la misma forma que suceda con los campos de texto normales, indicamos el ancho del campo en nmero de caracteres. Car. mx: mximo nmero de caracteres que se podr incluir en este campo. Si el fichero es seleccionado a travs del cuadro de dilogo que aparece al hacer clic en el botn Examinar, Dreamweaver CS4. Captulo 9. Formularios
240
dicho lmite no ser tenido en cuenta, sin embargo si es el usuario el que introduce manualmente el nombre del fichero, no se le permitir superar el nmero mximo de caracteres aqu introducido. Clase: si existe alguna hoja de estilo creada es posible asignrsela a este campo para adaptar su formato.
Figura 9.25. Propiedades de un campo de archivo. Para representar un formulario con un campo de seleccin de archivos en cdigo HTML utilizaramos un cdigo como ste: <form action="" method="post" enctype="multipart/form-data" name="form1"> Foto <input name="fotografía" type="file" id="fotografía" size="30" maxlength="50"> </form> Observa que en la etiqueta de inicio de formulario necesitamos especificar que se va a trabajar subiendo ficheros al servidor y por ello hay que especificarlo con la propiedad enctype y el valor multipart/form-data. Casilla de verificacin Las casillas de verificacin son utilizadas habitualmente para permitir la eleccin entre una serie de opciones disponibles en el formulario. Estos campos se diferencian de los llamados botones de opcin en que permiten seleccionar varias opciones de entre todas las disponibles, mientras que stos ltimos slo permiten seleccionar una opcin de entre todas las proporcionadas. Para insertar una casilla de verificacin lo podemos hacer desde: El comando: Insertar>Formulario>Casilla de verificacin. Haciendo clic en el botn Casilla de verificacin en la categora Formularios de la barra Insertar. En las casillas de verificacin tambin debemos poner un texto que facilite la seleccin de las opciones que se pueden presentar. Dreamweaver CS4. Captulo 9. Formularios
241
Figura 9.26. Aspecto de casillas de verificacin en un formulario. En estos campos podemos modificar las siguientes propiedades desde el Inspector de Propiedades: Nombre de casilla: nombre exclusivo e indicativo que deseamos dar a la casilla de verificacin. Valor activado: pondremos el valor inicial que ser el que se enve al servidor cuando se active esta casilla de verificacin (habitualmente se suelen asignar valores numricos; por ejemplo si disponemos de cuatro casillas de verificacin en este campo asignaramos valores consecutivos del 1 al 4). Estado inicial: en funcin de si deseamos que la casilla de verificacin est inicialmente activada o no, elegiremos una de entre las dos opciones disponibles. Clase: para aplicarle al campo un formato basado en una hoja de estilo previamente creada y que podemos seleccionar de la lista desplegable.
Figura 9.28. Propiedades de casilla de verificacin (correspondiente a Opcin 1). El cdigo HTML del formulario para dos casillas de verificacin llamadas opcion1 y opcion2 cuyos valores respectivos son 1 y 2 sera el que se muestra a continuacin: <form name="form1" method="post" action=""> <p>Opción 1 <input name="opcion1" type="checkbox" id="opcion1" value="1" checked> </p> <p>Opción 2 <input name="opcion2" type="checkbox" id="opcion2" value="2"> </p> </form> Dreamweaver CS4. Captulo 9. Formularios
242
En la primera casilla de verificacin comprobamos que al final de la etiqueta aparece la palabra reservada checked. Esto nos indica que la primera casilla de verificacin aparecer activada de forma predeterminada al ser mostrada por primera vez al usuario que visite nuestra pgina. Se pueden crear tambin grupos de casillas de verificacin, mediante el botn Grupos de casillas de verificacin , cuyo funcionamiento ser similar a los grupos de opcin que vamos a ver en el apartado que viene a continuacin. Botn de opcin Otra de las opciones disponibles para permitir a los usuarios elegir una de entre varias opciones disponibles son los botones de opcin. Como hemos dicho anteriormente estos botones tienen la particularidad de que su eleccin es individual y excluyente, es decir, slo se permite elegir uno de ellos a la vez. Aunque Dreamweaver nos permite insertar botones de opcin aislados, tanto a travs de mens (Insertar>Formulario>Botn de opcin) como mediante un clic de ratn en el Botn de opcin del panel Formularios, de la barra Insertar, el uso ms habitual de este tipo de botones es que se encuentren integrados dentro de un grupo (parece que no tiene mucho sentido agregar un solo botn de este tipo cuando su funcionalidad es permitir una nica opcin de entre varias disponibles). Por este motivo en este apartado vamos a tratar el tema de los grupos de botones de opcin. Dichos grupos pueden incluirse en el formulario: Mediante el comando Insertar>Formulario>Grupo de opciones. Haciendo clic en el botn Grupo de opcin en la categora Formularios de la barra Insertar. Tras realizar este paso nos aparece el cuadro de dilogo Grupo de opcin.
Figura 9.29. Cuadro de dilogo Grupo de opcin. Dreamweaver CS4. Captulo 9. Formularios
243
Dentro de este cuadro es posible configurar el grupo de opciones que estamos creando: En el cuadro de texto Nombre asignamos un nombre al grupo de opciones. Podemos aadir opciones haciendo clic en el botn . Si por el contrario queremos eliminar alguna, debemos seleccionarla y hacer clic en el botn . Cuando insertemos un botn de opcin, podemos asignarle el nombre de la opcin (Label) y el valor (Value), dentro del recuadro de texto situado en la parte central de dicha ventana. El texto que se escriba bajo el ttulo Label (Etiqueta), ser el que aparezca en nuestro formulario, mientras que el valor que escribamos en el campo Value ser el que se tenga en cuenta cuando se procese la informacin del formulario y se enve al servidor. Los botones ) y nos permitirn subir o bajar la opcin en la lista o men para cambiar el orden. Por ltimo, es posible elegir si deseamos que nuestro grupo de opciones se muestre con saltos de lnea de HTML o en el interior de una tabla, segn lo que escojamos en la ltima opcin, Disponer utilizando. Haciendo clic en el botn Aceptar se crear nuestro grupo de opciones. En el botn Ayuda encontramos comentarios acerca de cmo completar la informacin en esta ventana. Supongamos un formulario con un grupo de opciones compuesto por dos de estos botones cuyos valores respectivos son 1 y 2. El cdigo HTML equivalente sera el que se muestra a continuacin: <form name="form1" method="post" action=""> <p> <label> Opcin 1 <input type="radio" name="GrupoOpciones1" value="1"> </label> <br> <label> Opcin 2 <input type="radio" name="GrupoOpciones1" value="2"> </label> <br> Dreamweaver CS4. Captulo 9. Formularios
244
</p> </form> Para especificar que deseamos que uno de los botones est activado de forma predeterminada al mostrarse la pgina por primera vez se utiliza, al igual que ocurra con las casillas de verificacin, la palabra reservada checked. Para este caso particular de los botones de opcin, observamos que en el parmetro name ambos tienen el mismo valor; esto se utiliza para decir que los dos botones de opcin pertenecen al mismo grupo, es decir que son excluyentes entre s y si uno de ellos est seleccionado, el otro no podr ser seleccionado al mismo tiempo. Tambin podemos observar en este cdigo HTML que la etiqueta del botn va situada detrs del mismo. Para colocarla delante slo deberemos poner Opcin 1 y Opcin 2 delante de la etiqueta input. Esto queda siempre a gusto del diseador de la pgina. Listas y mens Las listas y los mens son utilizados en un formulario para presentar a los usuarios diferentes opciones de entre las cuales pueden escoger varias (si se trata de una lista de desplazamiento) o una sola (si estamos trabajando con un men). Aunque ambos elementos de formulario compartan una misma forma de ser aadidos a nuestra pgina HTML, como veremos a continuacin, cada uno de ellos tiene unas opciones particulares para ser detalladas en las propiedades como ahora veremos. Para aadir una lista o un men, podemos hacerlo a travs de las opciones de mens correspondientes Insertar>Formulario>Lista/men, o bien, haciendo clic en el botn Lista/men en la categora Formularios de la barra Insertar. Una vez aadido este elemento en el interior del formulario, nos aparece un cuadro de seleccin sin contenido . En este punto, y en funcin de nuestras necesidades deberemos optar por configurar, bien una lista de desplazamiento, o bien un men indicando las propiedades precisas para un elemento u otro en el Inspector de Propiedades. Si la opcin elegida es un Men, el Inspector de Propiedades presentar un aspecto similar a ste: Dreamweaver CS4. Captulo 9. Formularios
245
Figura 9.30. Propiedades de un men. En este Inspector de propiedades es posible configurar las siguientes opciones: Lista/men: bajo este ttulo debemos escribir el nombre que se quiera para el men (o la lista de desplazamiento). Tipo: en esta opcin escogemos si el elemento que queremos aadir es un Men o una Lista de desplazamiento. Valores de lista: al hacer clic en este botn se nos muestra una nueva ventana en la que podemos configurar las opciones que aparecern en la lista.
Figura 9.31. Cuadro Listar valores. Bajo el ttulo Etiqueta de elemento escribiremos una etiqueta para cada elemento del men o lista y bajo el ttulo Valor escribiremos el texto que ser enviado al servidor cuando el formulario sea procesado. Para aadir ms elementos hacemos clic en el botn y para eliminar alguno, basta con seleccionarlo y hacer clic en el botn . Los botones y nos permitirn cambiar el orden de la opcin en la lista o men. Tras hacer clic en el botn Aceptar las opciones sern aadidas al men (o a la lista segn el elemento que estemos configurando). Dicha ventana dispone adems de un botn de ayuda con informacin precisa acerca de cmo completar los datos correctamente. Dreamweaver CS4. Captulo 9. Formularios
246
Clase: si deseamos dar formato a la lista mediante una hoja de estilo, ste es lugar para hacerlo. Seleccionado inicialmente: si queremos que aparezca nuestro men en el formulario con una de las opciones sealada de forma predeterminada, bastar con indicarlo en este campo haciendo clic sobre la opcin elegida. Si por el contrario, el elemento que queremos aadir al formulario es una Lista de desplazamiento adems de las propiedades comentadas para los mens dispondremos de las siguientes:
Figura 9.32. Propiedades de una lista.
Alto: en este campo es posible especificar cuntas opciones deben mostrarse de la lista. Selecciones Permitir mltiples: si queremos permitir al usuario poder seleccionar ms de una opcin simultneamente. Si se selecciona esta opcin, en la lista Seleccionado inicialmente podremos indicar las opciones sealadas de forma predeterminada. Al crear un formulario con un men y una lista desplegable en formato HTML , con cuatro opciones posibles, deberamos escribir un cdigo HTML similar al siguiente: <form name="form1" method="post" action=""> <p> Menú <select name="select"> <option value="1" selected>opcion menu 1</option> <option value="2">opcion menu 2</option> <option value="3">opcion menu 3</option> <option value="4">opcion menu 4</option> </select> </p> <p> Dreamweaver CS4. Captulo 9. Formularios
247
Lista desplegable <select name="select" size="3" multiple> <option value="1" selected>opcion lista 1</option> <option value="2">opcion lista 2</option> <option value="3">opcion lista 3</option> <option value="4">opcion lista 4</option> </select> </p> </form> Si analizamos este trozo de cdigo mostrado, comprobamos que: Las etiquetas que marcan el principio y el final del men y de la lista desplegable son <select> y </select> y entre ambas se deben indicar todas las opciones. Cada una de las opciones que se muestran comienzan y finalizan con las etiquetas <option> y </option> respectivamente. Para indicar que una de ellas est seleccionada por defecto se utiliza la palabra reservada selected. El texto que aparecer en la lista se escribe entre las etiquetas <option> y </option>, mientras que el valor asociado a esa opcin se debe escribir en el parmetro value. Las diferencias de cdigo existentes entre el men y la lista que acabamos de ver es que se pueden especificar dentro de la etiqueta de inicio de la lista (<select>) dos nuevos parmetros: multiple: para indicar que se puede seleccionar ms de una opcin al mismo tiempo. size=n: para detallar cuntas opciones son visibles, donde n indica dicha cantidad. En este caso, la diferencia entre ambos componentes de formulario en un navegador quedara de la siguiente forma:
Figura 9.33. Aspecto de una lista y de un men en una web.
Dreamweaver CS4. Captulo 9. Formularios
248
Botones de formulario Los botones de formulario son los que nos permiten enviar informacin al servidor, o por el contrario borrar toda la informacin contenida en los campos del formulario, restablecindolo a su estado inicial. Tambin nos permiten otra serie de funciones personalizables mediante la asignacin de scripts, como veremos en este apartado. Para insertar un botn estndar de formulario, a travs de los mens de la aplicacin debemos hacer clic en la opcin Insertar>Formulario>Botn. Si esta insercin la hacemos a travs de la categora Formularios de la barra Insertar, slo hay que hacer clic en el botn . Automticamente se abre el cuadro Atributos de accesibilidad de la etiqueta de entrada, donde podremos darle una id y una etiqueta al botn, como ya hemos aprendido. No se recomienda teclear la etiqueta que va a aparecer antes del botn en este caso, ya que cuando el botn se inserte en la ventana del documento, lo har por defecto con el valor Enviar, que podremos cambiar en el Inspector de Propiedades si fuese necesario. Desde el Inspector de Propiedades podemos indicar las propiedades que deseamos que tenga nuestro botn. Nombre del botn: para indicar un nombre para el botn que se est creando y que ser utilizado en el procesamiento de la informacin enviada por el formulario. Valor: en este campo podemos indicar el texto que aparecer en el interior del botn. Accin: deberemos elegir, una de entre las tres posibilidades que se nos ofrecen: Enviar formulario: para procesar el formulario enviando la informacin al servidor una vez que se haga clic en l. Ninguno: si se elige esta opcin deberemos indicar la accin que se activar al hacer clic en el botn. Por ejemplo, podemos aadir un comportamiento JavaScript que presente un mensaje o abra otra pgina al hacer clic en el botn. Restablecer formulario: para devolver los campos del formulario a su estado inicial, bien vacindolos de contenido o bien seleccionando de nuevo la opcin predefinida para aquellos campos que as la tuvieran asignada. Clase: para asignarle una hoja de estilo y darle as al botn un formato determinado.
Figura 9.34. Propiedades de un botn. Cuando utilicemos un botn estndar de envo de formulario, es aconsejable poner otro que restablezca el contenido del mismo. Dreamweaver CS4. Captulo 9. Formularios
249
Adems de los botones estndar aqu mencionados, podemos aadir a nuestro formulario otro tipo de botones personalizados utilizando imgenes para ello. sto es lo que vamos a ver en el siguiente apartado. El cdigo HTML asociado a un formulario con un botn de sera el siguiente: <form name="form1" method="post" action=""> <input type="submit" name="Submit" value="Enviar"> </form> Imgenes Otro de los elementos que es posible aadir a un formulario son las imgenes. Adems de servir de adorno en las pginas HTML, en los formulario pueden tener otras utilidades como servir de vnculos a otras pginas, como botones de formularios,... todo esto lo trataremos en este apartado. El primer paso es aadir la imagen en el formulario; como siempre disponemos de dos caminos: A travs de los mens de la aplicacin: Insertar > Formulario > Campo de imagen. Haciendo clic en el botn Campo de imagen en la categora Formularios de la barra Insertar. Al llevar a cabo este primer paso aparecer el cuadro de dilogo Seleccionar origen de imagen, desde el que podemos seleccionar la imagen que vayamos a utilizar como botn. Por defecto nos aparecen los ficheros con extensiones gif, jpg, jpeg, png y .psd. Si queremos seleccionar un fichero de imagen con otra extensin, por ejemplo tif, bmp, etc, deberemos seleccionar en Tipo la opcin Todos los archivos (*.*). En URL: indicaremos, o aparecer automticamente la ruta donde se encuentra la imagen, una vez seleccionada la misma. En el cuadro Relativa a: podemos definir si la imagen es relativa al Documento o a la Raz del Sitio. En la columna de la derecha de este cuadro es posible ver una vista previa de la imagen antes de insertarla en el formulario. Una vez pulsamos Aceptar, se abre el cuadro Atributos de accesibilidad de etiqueta de entrada, que ya sabemos manejar. Para que la imagen funcione como un botn Enviar debemos seguir los siguientes pasos: 1. Insertar la imagen tal y como se acaba de detallar. Dreamweaver CS4. Captulo 9. Formularios
250
2. En el campo Campo Imagen del Inspector de Propiedades escribir el texto Enviar. 3. En el campo Alt, escribir un texto corto (dos o tres palabras como mximo), acerca de la funcionalidad del botn que estamos creando. Dicho texto ser el que aparezca al situarnos encima de la imagen con el ratn, texto alternativo.
Figura 9.35. Propiedades de un campo de imagen. En este caso el cdigo HTML que genera el formulario con la imagen sera el siguiente: <form name="form1" method="post" action=""> <input name="Enviar" type="image" id="Enviar" src="file:///C|/ MiWeb/Elementos/imagenes/correo_click.gif" alt="Enviar datos" width="96" height="40" border="0"> </form> En este caso el parmetro src indica la ruta hacia la imagen que hemos insertado en el formulario. En el ejemplo que acabamos de ver, y tal y como se ve en el cdigo generado, para especificar dnde se encuentra la imagen utilizada para crear el hipervnculo hemos utilizado la ruta absoluta hacia la misma. Este tipo de ruta absoluta lo crea Dreamweaver de forma automtica mientras no tengamos puesto nombre al documento en el que estamos trabajando. En cuanto guardemos el documento cambia la ruta a relativa.
RECOMENDACIN. Es aconsejable utilizar rutas relativas al sitio para las imgenes y otros tipos de archivos multimedia.
Las imgenes que hemos tratado en este apartado no dejan de ser imgenes normales de las que utilizamos para dar vistosidad a nuestra pgina web, con la salvedad de que en este caso se les dota de una nueva funcionalidad, como es el hecho de servir de hipervnculo o enlace a una pgina web, como botn de formulario, etc.
Dreamweaver CS4. Captulo 9. Formularios
251
9.3. Validacin de formularios Un aspecto que debemos tener en cuenta cuando estamos hablando de formularios es la validacin de los mismos, es decir, comprobar que los datos introducidos por el usuario son correctos, as como otro tipo de comprobaciones. Para aadir esta validacin lo primero que necesitamos es que la ventana Comportamientos est visible; para hacer que esto sea as debemos hacer clic en los mens Ventana>Comportamientos, o bien utilizar la combinacin de teclas Mays+F4. Tras hacer esto en la columna de Paneles, a la derecha de la ventana principal, aparecer el panel Inspector de Etiquetas con la solapa de la ventana Comportamientos.
Figura 9.36. Ventana Comportamientos. A continuacin, y despus de hacer clic en el botn Aadir Comportamiento , debemos escoger la opcin Validar formulario. Dreamweaver CS4. Captulo 9. Formularios
252
Figura 9.37. Aadir comportamiento Validar formulario. Tras hacer esto aparecer nuevo cuadro:
Figura 9.38. Cuadro Validar formulario.
Dreamweaver CS4. Captulo 9. Formularios
253
Dentro de este cuadro y en el recuadro situado al lado del texto Campos aparecern todos aquellos campos de texto que se encuentren dentro del formulario. Para asignarle unos criterios de validacin concretos a cada uno de ellos, es necesario seleccionarlos de forma individual haciendo clic sobre la lnea que indica su nombre y a continuacin modificar las propiedades siguientes: Valor: si seleccionamos en este campo el valor Obligatorio, ser necesario que el usuario siempre rellene este campo antes de enviar la informacin del formulario al servidor. Aceptar: dentro de este grupo de botones de opcin, podremos elegir una de entre las cuatro posibilidades que se nos presentan: Cualquier cosa: se permite introducir cualquier combinacin de caracteres en el campo. Nmero: para permitir que los nicos valores admisibles en el campo sean los numricos. Direccin de correo electrnico: slo se permitir que el texto introducido en el campo sea una direccin de correo electrnico y adems que el formato en el que se haya introducido sea el correcto. Nmero del... al...: slo se permiten valores numricos y adems entre los lmites inferior y superior especificados en los campos situados al lado de este botn de opcin. Una vez configurada la validacin segn nuestras necesidades y tras hacer clic en el botn Aceptar de forma automtica se crea un cdigo JavaScript (visible en la vista Cdigo) con las especificaciones que hayamos creado en el cuadro anterior.
9.4. Datos de Spry Los conjuntos de datos de Spry son objetos JavaScript que alojan la recopilacin de datos especificados. Dreamweaver permite crear rpidamente el objeto y cargar datos de una fuente de datos (como un archivo XML o un archivo HTML) en el mismo. El conjunto de datos se convierte en una matriz de datos con forma de tabla estndar con filas y columnas. Un conjunto de datos se puede visualizar como un contenedor virtual con una estructura de filas y columnas. Existe como objeto JavaScript y la informacin slo se puede visualizar cuando se especifica un diseo para pginas Web. Podemos visualizar todos los datos del contenedor o slo los datos seleccionados.
Dreamweaver CS4. Captulo 9. Formularios
254
Crear un conjunto de datos HTML de Spry Si slo deseamos crear un conjunto de datos, no es necesario preocuparnos de donde, en el documento, vamos a insertarlo. Si lo que deseamos es crear el conjunto e insertar un diseo, entonces deberemos situar el cursor exactamente en el punto del documento donde deseemos insertar el diseo de la pgina. Podemos ejecutar Insertar>Spry>Conjunto de datos de Spry.
Figura 9.39. Insertar conjunto de datos de Spry. Tambin podemos pulsar en el botn Conjunto de datos de Spry disponible en la categora Spry de la barra Insertar. Dreamweaver CS4. Captulo 9. Formularios
255
Figura 9.40. Insertar conjunto de datos de Spry desde la barra Insertar. En cualquier caso, si estamos realizando esta accin en un documento activo nuevo que nunca hayamos guardado antes, Dreamweaver nos avisar de que es necesario guardar el documento antes de utilizar esta funcin, as que en primer lugar guardaremos nuestro documento para que a continuacin se abra el cuadro Conjunto de datos de Spry.
Figura 9.41. Conjunto de datos de Spry. Dreamweaver CS4. Captulo 9. Formularios
256
En la pantalla Especificar fuente de datos, en el men emergente Seleccionar tipo de datos, seleccionamos HTML, que normalmente es el primer tipo que viene por defecto. En Nombre del conjunto de datos especificaremos un nombre para dicho conjunto. Por defecto, la primera vez que se crea un conjunto de datos, el nombre que aparece tecleado en este campo es ds1. El nombre del conjunto de datos puede contener letras, nmeros y guiones bajos, pero no puede empezar por un nmero. En el desplegable Detectar , seleccionaremos la fuente de datos que queremos que Dreamweaver detecte. Por defecto, Tablas es la fuente seleccionada, aunque tambin, por ejemplo, si hemos organizado muestros datos dentro de una etiqueta div y deseamos que Dreamweaver detecte las etiquetas div en lugar de las tablas, podremos seleccionar Divs en el men emergente Detectar. En Especificar archivo de datos, podemos teclear la ruta al HTML en el que tenemos almacenados los datos, o pulsar Examinar para localizarlo directamente en nuestro equipo. Imaginemos por ejemplo, que tenemos un documento html que contiene una tabla en la que tenemos los prefijos telefnicos de diversos pases y queremos crear un conjunto de datos Spry con ellos. Una vez localizado el documento desde el cuadro Seleccionar Origen de Archivo, Dreamweaver representa la fuente de datos HTML en la ventana Seleccin de datos, Dreamweaver CS4. Captulo 9. Formularios
257
Figura 9.42. Seleccin de datos. y muestra marcadores visuales, representados por una flecha amarilla de los elementos que se pueden seleccionar como contenedores para el conjunto de datos. El elemento que elijas utilizar debe tener un ID exclusivo asignado, es decir, cuando se insert ese elemento en su documento HTML hubo que darle una identidad, un nombre concreto; por ejemplo, en nuestro ejemplo, la tabla que contiene los nombres de pases y prefijos telefnicos cuenta con un ID concreto en el Inspector de Propiedades de su documento. Si no tiene ID exclusivo, Dreamweaver mostrar un mensaje de error y debers volver al archivo de fuente de datos para asignarle un ID exclusivo. Para seleccionar el contenedor de datos de la ventana, tendremos que pulsar sobre el marcador amarillo , o desplegar el men Contenedores de datos para seleccionar el contenedor adecuado. Una vez hecho esto, observamos que los datos de nuestro contenedor (la tabla en nuestro ejemplo) quedan seleccionados, el marcador ha cambiado de forma y color y tenemos una vista previa de los datos en la parte inferior de la pantalla. Dreamweaver CS4. Captulo 9. Formularios
258
Figura 9.43. Datos seleccionados. Si pulsamos en Siguiente, pasaremos a la pantalla Establecer opciones de datos, en la que podemos hacer lo siguiente: Para configurar los tipos de columna de conjunto de datos, selecciona una columna y despliega el tipo de columna en el men emergente Tipo. Por ejemplo, si una de las columnas del conjunto de datos contiene nmeros, seleccione la columna y nmero en el men Tipo. Esta slo es importante si deseamos que el usuario pueda ordenar los datos por los datos de esta columna.
Para seleccionar una columna de conjunto de datos, hacemos clic en el encabezado, la elegimos en el men Nombre de columna o, mediante las flechas izquierda y derecha situadas en la esquina superior izquierda de la pantalla. Para especificar cmo deseamos ordenar los datos, seleccionamos la columna segn la cual se ordenarn los datos en el men Columna de ordenacin. Despus de seleccionar la columna, especificamos si el orden debe ser ascendente o descendente. Slo en el caso de tablas, anularemos la seleccin de Usar primera fila como encabezado si deseamos utilizar nombres de columna genricos (es decir, columna 0, columna 1, columna 2, etc.) en lugar de los nombres de columna especificados en la fuente de datos HTML. Dreamweaver CS4. Captulo 9. Formularios
259
En el caso de las tablas, podemos seleccionar Usar columnas como filas para invertir la orientacin horizontal y vertical de los datos del conjunto de datos. Si seleccionamos esta opcin, las columnas se utilizarn como filas. Podemos seleccionar Filtrar filas duplicadas para excluir las filas duplicadas de datos del conjunto de datos. Al seleccionar Desactivar cach de datos tendremos acceso siempre a los datos ms recientes en el conjunto de datos. Si deseamos que los datos se actualicen automticamente, entonces habr que seleccionar Actualizar datos automticamente y especificar un tiempo de actualizacin en milisegundos.
Figura 9.44. Establecer opciones de datos. Una vez terminadas de configurar todas las opciones en la pantalla Establecer opciones de datos, haremos clic en Siguiente para pasar a la pantalla Elegir opciones de insercin. Dreamweaver CS4. Captulo 9. Formularios
260
Figura 9.45. Elegir opciones de insercin. En esta pantalla, podemos realizar una de las acciones siguientes: Seleccionar un diseo para el conjunto nuevo y especificar las opciones de configuracin adecuadas. Seleccionar No insertar HTML. Si seleccionamos esta opcin, Dreamweaver crea al conjunto de datos pero no aade HTML a la pgina. El conjunto de datos est disponible en el panel Vinculaciones (Ventana > Vinculaciones) y puedes arrastrar los datos manualmente desde el conjunto de datos a la pgina. Por ltimo, hacemos clic en Listo y Dreamweaver crea el conjunto de datos y, si se ha seleccionado una opcin de diseo, muestra el diseo y los marcadores de posicin de datos de la pgina. Si accedemos a la vista Cdigo, podremos comprobar que Dreamweaver ha aadido en el encabezado referencias al archivo SpryData.js y al archivo SpryHTMLDataSet.js. Estos archivos son activos importantes de Spry que funcionan con la pgina. Este cdigo no puede eliminarse de la pgina; de lo contrario, el conjunto de datos no funcionar. Cuando se carga la pgina en el servidor, tambin se debern cargar estos archivos como archivos dependientes. El aspecto final del conjunto de datos en la ventana del documento en Vista Diseo sera similar a ste: Dreamweaver CS4. Captulo 9. Formularios
261
Figura 9.46. Aspecto final del conjunto de datos de Spry en Vista Diseo. Y as se vera en la Vista en vivo:
Figura 9.47. Aspecto final del conjunto de datos de Spry en Vista en vivo.
262
Captulo 10. Capas
Dreamweaver CS4. Captulo 10. Capas 263
Captulo 10. CAPAS Una capa en Dreamweaver no es ms que un elemento HTML que puede colocarse en cualquier parte del documento que estemos creando. En dichas capas se puede colocar texto, imgenes,... y , en general, cualquier contenido HTML. En Dreamweaver CS4 se llaman Elementos PA, es decir, Elementos de Posicin Absoluta. Es posible realizar operaciones muy variadas con los elementos PA adems de insertar contenido dentro de ellos: podemos superponer varios PA, hacer que algunos aparezcan o desaparezcan, moverlos desde una parte de la pgina a otra, redimensionarlos,... con lo cual disponemos de una gran cantidad de opciones de diseo. Los navegadores ms antiguos (anteriores a Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0) no son compatibles con el uso de PAs en HTML, no los visualizan correctamente o, en ocasiones, directamente no los muestran. Por este motivo si pensamos que los usuarios de nuestra pgina dispondrn de dichos navegadores deberemos especificar un contenido alternativo para que la visualicen correctamente, si por el contrario pensamos que este caso no se va a dar podemos trabajar tranquilamente con capas en nuestra pgina web. 10.1. Crear elementos PA Opciones predeterminadas de elementos PA Dentro de las preferencias establecidas en Dreamweaver existe un apartado dedicado a elementos PA, en el cual podemos especificar las opciones predeterminadas que tendrn dichos elementos en el momento que los creemos. Para llegar a estas preferencias hacemos clic en el men Edicin>Preferencias y seleccionamos la categora Elementos PA.
Figura 10.1. Opciones predeterminadas de los elementos PA. Dreamweaver CS4. Captulo 10. Capas
264
Una vez que hemos seleccionado la categora Elementos PA disponemos de varios valores para configurarlos: Visibilidad: indicamos cul ser la visibilidad predeterminada de los elementos PA: o Default: (predeterminada) la visibilidad depende del navegador que est accediendo a la pgina. o Inherit: (heredada) para que el elemento PA que se cree herede la visibilidad del elemento padre. o Visible: (visible) para que el PA se muestre en cualquier caso. o Hidden: (oculta) para que el PA se oculte en cualquier caso. Ancho: especificamos el ancho por defecto del PA en pxeles. Alto: especificamos la altura predeterminada del PA en pxeles. Color de fondo: podemos escoger el color de fondo que tendr el PA mediante el selector de colores o indicando en este campo su valor hexadecimal. Imagen de fondo: desde aqu podemos indicar el nombre del archivo de la imagen de fondo en todos los elementos PA que creemos. Anidar: permitimos el anidamiento de un elemento PA en otro al crearlo en un punto interior del elemento PA padre. Insertar elementos PA En Dreamweaver podemos aadir PAs a travs de los mens de la aplicacin siguiendo la ruta Insertar>Objetos de diseo>Div PA. Dreamweaver CS4. Captulo 10. Capas
265
Figura 10.2. Insertar un elemento PA. O haciendo clic en el botn Dibujar Div PA de la pestaa Estndar en la categora Diseo de la barra Insertar. A medida que vamos aadiendo elementos PA a nuestro documento HTML, se hace ms difcil poder seleccionar cada una de ellas individualmente, aunque siempre las podemos seleccionar desde el panel Elementos PA. Este panel puede activarse desde Ventana>Elementos PA, o pulsando F2. Dreamweaver CS4. Captulo 10. Capas
266
Figura 10.3. Panel Elementos PA. Tambin podemos seleccionar un elemento PA desde el manejador de seleccin que se hace visible sobre el mismo cuando colocamos el cursor en su interior.
Figura 10.4. Elemento PA seleccionado con manejador de seleccin visible. Una vez activado el panel Elementos PA, aparecer en l un listado con el nombre de todos los PA que forman parte de nuestro documento, pudiendo seleccionar individualmente cada uno de ellos. El primer PA que hayamos creado ser el que aparezca el ltimo en esta lista.
Figura 10.5. Panel de Elementos PA. Dreamweaver CS4. Captulo 10. Capas
267
Adems, en este panel podemos indicar si queremos que un elemento PA est visible o no haciendo clic al lado de cada PA: el icono indica que dicho elemento est visible, por el contrario el icono nos indica que dicho elemento no es visible. Los elementos PA anidados se mostrarn de forma que aqul que se encuentre en el interior de otro, se situar inmediatamente debajo de ste y adems con una lnea vertical indicando de qu elemento PA depende. Tambin es posible Evitar solapamiento si activamos la casilla de verificacin con ese ttulo que se encuentra en el mismo panel.
RECOMENDACIN. Si queremos seleccionar varios elementos PA, deberemos mantener presionada la tecla Maysculas mientras hacemos clic en el borde o dentro de los PA que vayamos a seleccionar. Tambin podemos seleccionar varios PA desde el panel Elementos PA, manteniendo presionada la tecla Maysculas mientras hacemos clic en los nombres de los elementos.
10.2. Propiedades de los Elementos PA Para modificar las propiedades de un elemento PA, debemos tenerlo seleccionado previamente. Las caractersticas del elemento seleccionado se especifican en el Inspector de Propiedades.
Figura 10.6. Inspector de propiedades de un elemento PA. Elemento CSS-P: asignamos un nombre al elemento que estamos creando. Tambin es posible modificar el nombre de dicho elemento haciendo doble clic sobre l mismo en el panel Elementos PA. Izq: (izquierda) indicamos la distancia en pxeles entre el lmite izquierdo del documento y el PA. Sup: (superior) indicamos la distancia en pxeles entre el borde superior del documento y el PA que se est modificando. An.: (anchura) especificamos la anchura del elemento PA medido en pxeles. Al.: (altura) especificamos la altura del elemento PA en pxeles. Dreamweaver CS4. Captulo 10. Capas
268
ndice Z: es el identificador nico para cada PA que indica el orden en el que se visualizar cada elemento (orden de apilamiento). Los elementos PA con un ndice Z mayor se superponen a aquellos con un ndice menor y viceversa. Este valor lo podemos modificar tambin en el panel Elementos PA. Vis: (visibilidad) de la misma forma que podemos hacer en el panel Elementos PA, tambin es posible desde aqu modificar la visibilidad de los PA, segn los siguientes valores: o Default: (predeterminado) la visibilidad depende del navegador que est accediendo a la pgina. La mayora de los navegadores utilizan la propiedad Heredada como predeterminada. o Inherit: (heredado) el PA se muestra o no segn el valor que se hay especificado para el PA padre. o Visible: (visible) hace visible el elemento PA independientemente del valor que tenga asignado el PA padre. o Hidden: (oculto) el elemento PA se oculta y no se mostrar. Im. fondo: (imagen de fondo) situamos una imagen de fondo en el elemento PA si as lo deseamos. Slo tenemos que hacer clic en el icono que representa una carpeta y seleccionar la imagen en nuestro equipo. Col. fondo: (color de fondo) si en lugar de una imagen lo que queremos situar como fondo de un PA es un color, podremos seleccionarlo desde aqu, bien escribiendo su valor hexadecimal, o bien seleccionndolo desde la paleta de colores. Clase: nos permite dar un formato determinado al elemento PA al seleccionar una hoja de estilo de esta lista desplegable. Desb.: (desbordamiento) controlamos cmo van a aparecer los elementos PA en el navegador cuando el contenido en su interior supera los lmites especificados para ellos. Existen cuatro posibles valores para controlar el desbordamiento: o Visible: (visible) se ampla el tamao del PA para hacer visible todo el contenido. o Hidden: (oculto) el contenido adicional no se va a mostrar en el elemento PA. o Desplaz: (desplazamiento) el navegador mostrar barras de desplazamiento en el elemento PA tanto si son necesarias como si no. o Automtico: las barras de desplazamiento aparecern slo cuando sean necesarias en el elemento PA. Rec: (recorte) con esta propiedad podemos especificar qu parte de todo el elemento PA queremos que sea visible. Con las coordenadas que se muestran a continuacin es posible representar un rectngulo que ser la seccin que ser visible de todo el PA (comenzando desde la esquina superior izquierda de la pgina). Dreamweaver CS4. Captulo 10. Capas
269
o Iz: (izquierda) coordenada izquierda. o Sup: (superior) coordenada superior. o Der: (derecha) coordenada derecha. o Inf: (inferior) coordenada inferior.
Ejercicio
El objetivo de este ejercicio ser la creacin de dos elementos PA con distintas propiedades.
Crea una pgina bsica de HTML (Archivo>Nuevo).
Para trabajar con elementos PA en Dreamweaver ser necesario activar el panel lateral Elementos PA. Para hacerlo selecciona la opcin del men Ventana > Elementos PA o pulsa la tecla F2.
Figura 10.7. Panel Elementos PA.
Aade un elemento PA a travs de la barra Insertar en la categora Diseo, haciendo clic en el botn Dibujar Div PA . Dibuja el elemento PA haciendo clic con el botn izquierdo del ratn y arrastrando el ratn, en la ventana del documento, hasta que tenga el tamao deseado.
Selecciona el elemento PA haciendo clic con el botn izquierdo del ratn sobre el recuadro situado en la parte superior izquierda del PA .
En el Inspector de Propiedades del elemento PA estable los siguientes valores: o Nombre: inferior o Ancho y Alto: 300 pxeles. o Distancia a los bordes superior e izquierdo: 50 pxeles. o Visibilidad: default. o Color de fondo: #00FF33. o Desbordamiento: automtico.
Dreamweaver CS4. Captulo 10. Capas
270
Figura 10.8. Inspector de propiedades del elemento PA llamado inferior.
Por ltimo aade el texto Capa inferior dentro del elemento PA, centrndolo dentro de l y ponindolo en negrita.
El elemento PA final debera quedar as:
Figura 10.9. Elemento PA inferior finalizado.
A continuacin crea un segundo elemento PA de la misma forma que has hecho antes, pero ahora con las siguientes propiedades:
o Nombre: superior. o Anchura y Altura: 350 pxeles y 190 pxeles respectivamente. o Distancia a los bordes superior e izquierdo: 130 pxeles y 180 pxeles respectivamente. o Visibilidad: default. o Color de fondo: #FFFF00. o Desbordamiento: visible. Dreamweaver CS4. Captulo 10. Capas
271
Figura 10.10. Inspector de propiedades del elemento PA llamado superior.
Aade el texto Capa superior dentro del elemento PA, centrndolo dentro de l y ponindolo en negrita.
Guarda la pgina con el nombre capas1 (Archivo>Guardar).
La pgina HTML final quedara aproximadamente de la siguiente forma:
Figura 10.11. Aspecto final del documento con dos elementos PA insertados.
Pulsa la tecla F12 para ver cmo queda la pgina en el navegador, o utiliza la Vista en vivo.
Aproximadamente el aspecto de nuestra pgina sera el que se muestra en la figura siguiente:
Dreamweaver CS4. Captulo 10. Capas
272
Figura 10.12. Aspecto de los elementos PA en la Vista en vivo.
10.3. Operaciones con elementos PA Anidar elementos PA Podramos definir un elemento PA anidado como un PA que se encuentra dentro de otro PA. Normalmente los elementos PA anidados se utilizan para mover ambos elementos de una sola vez, quedando agrupados cuando se anidan. Para dibujar un elemento PA anidado disponemos de varios procedimientos: Sobre un PA ya creado, hacemos clic en el interior del mismo e insertamos un nuevo PA a travs de los mens Insertar>Objetos de diseo>Div PA. Haciendo clic en el interior de un elemento PA ya creado y, a continuacin, hacemos clic en el botn correspondiente de la barra Insertar . Si la opcin Anidar est desactivada en las Preferencias de los Elementos PA, debemos mantener pulsada la tecla Alt mientras arrastramos el ratn al anidar un PA dentro de otro existente. El aspecto que mostraran dos elementos PA anidados en el documento actual sera el que se muestra a continuacin: Dreamweaver CS4. Captulo 10. Capas
273
Figura 10.13. Elementos PA anidados en un documento activo. En el panel Elementos PA tambin se aprecia la anidacin de los elementos:
Figura 10.14. Elementos PA anidados. Es posible anidar elementos PA existentes. Para anidar un elemento PA ya existente dentro de otro, slo hay que seleccionarlo en el panel Elementos PA con el botn izquierdo del ratn y arrastrarlo, manteniendo pulsada la tecla Ctrl, hasta el PA que queremos que lo contenga. Redimensionar capas Si la operacin que queremos realizar es cambiar el tamao de un elemento PA, tenemos varias vas para hacerlo: Asignando los valores oportunos en los campos referidos a la anchura y a la altura dentro del Inspector de Propiedades. Dreamweaver CS4. Captulo 10. Capas
274
Seleccionando el PA (mediante cualquiera de los mtodos antes mencionados) y arrastrar con el ratn cualquiera de los manejadores de tamao que aparecen en el contorno del PA cuando est seleccionado, hasta conseguir el tamao deseado. Manteniendo pulsada la tecla Ctrl y pulsando las teclas de flecha tantas veces como sea necesario, podemos cambiar el tamao del PA pxel a pxel. Para modificar el tamao de varios elementos PA simultneamente, deben seleccionarse todos a la vez y, a continuacin, hacer clic en la opcin Modificar>Alinear>Asignar mismo ancho o Modificar>Alinear>Asignar mismo alto, en funcin de que queramos que todos los PA seleccionados sean iguales en anchura o en altura. Tambin podemos modificar el tamao de varios PA, una vez seleccionados todos, desde el Inspector de Propiedades de varios elementos, introduciendo los valores de ancho y alto que deseemos. Mover elementos PA La forma de mover un elemento PA dentro del documento HTML que estamos creando, es muy sencilla. El primer paso es seleccionar el PA a mover, para ello basta con hacer clic en el contorno de dicho elemento dentro de la ventana principal, o bien seleccionarlo en el panel Elementos PA. Una vez seleccionado el PA es posible moverlo: Pxel a pxel utilizando las teclas de direccin del teclado. El espacio deseado, haciendo clic en el manejador de seleccin que aparece en la esquina superior izquierda del PA y arrastrndolo con el ratn a la posicin que deseemos. Cambiar orden de apilamiento de los Elementos PA En ocasiones necesitaremos cambiar el orden en el que se encuentran apilados los elementos PA para hacer que unos aparezcan por delante de las otros. Para llevar a cabo esta tarea es necesario modificar el valor del campo ndice Z. Esto lo podemos realizar desde el Inspector de Propiedades, o bien desde el panel Elementos PA: Una vez seleccionado un PA, desde el Inspector de Propiedades es posible modificar el valor del campo ndice Z, asignando valores altos para los PA que deseamos que aparezcan en los niveles superiores y valores ms bajos para los que queramos que aparezcan en niveles inferiores. Desde el panel Elementos PA tambin es posible modificar este valor. Se puede seleccionar un elemento PA haciendo clic con el ratn sobre su nombre y arrastrndolo arriba o abajo de la lista en funcin de la posicin donde lo queramos colocar. Tambin haciendo clic en la columna situada bajo el ttulo Z en el elemento del cual queramos modificar dicho ndice. Dreamweaver CS4. Captulo 10. Capas
275
Propiedades de mltiples Elementos PA En un apartado anterior vimos cmo modificar las propiedades de un elemento PA utilizando el Inspector de Propiedades. Hay que apuntar que tambin es posible modificar las propiedades de varios elementos de forma simultnea. Seleccionamos aquellos elementos de los cuales queramos modificar dichos valores y, a continuacin, modificamos los valores deseados en el Inspector de Propiedades. El aspecto de ste ahora, es diferente al que apareca cuando modificbamos un solo elemento.
Figura 10.15. Inspector de propiedades HTML de varios elementos PA.
Figura 10.16. Inspector de propiedades CSS de varios elementos PA. En este nuevo Inspector de Propiedades como vemos aparecen nuevas propiedades, principalmente referidas al formato de fuentes de texto, al estilo, a la justificacin del texto dentro del PA, todo esto lo podemos ver en la parte superior de este panel. En la parte inferior del mismo aparece nicamente una nueva propiedad Etiq. (Etiqueta), para que indiquemos la etiqueta HTML utilizada para definir los elementos PA. El resto de propiedades son las mismas que tratamos en el apartado dedicado a las propiedades de un PA, pero lgicamente con la particularidad de que los cambios que apliquemos a cada una de las propiedades que aqu aparecen afectarn a todos y cada uno de los PA seleccionados. Convertir elementos PA en tablas Es posible que una vez que hemos diseado nuestra pgina web utilizando elementos PA, comprobemos para decepcin nuestra que los navegadores antiguos (anteriores a Microsoft Internet Explorer 4.0 y a Netscape Navigator 4.0) no muestran los PA de forma correcta. Si estamos seguros de que los usuarios de nuestra pgina estn a la ltima y no se van a encontrar este problema, no hay necesidad de llevar a cabo la tarea que vamos a ver a continuacin, pero en el caso de que esto no sea as deberemos llevar a cabo una conversin de elementos PA en tablas como veremos ahora. Dreamweaver CS4. Captulo 10. Capas
276
En Dreamweaver existe una herramienta denominada Convertir Divs PA en tabla que nos va a permitir realizar esta operacin de forma sencilla e intuitiva. Nosotros disearemos nuestra pgina web utilizando elementos PA, tal y como hemos visto en este captulo y para asegurar la compatibilidad con los navegadores ms antiguos utilizaremos esta herramienta para transformar estos elementos en tablas. Esta herramienta la encontramos en el men Modificar>Convertir> Divs PA en tabla.
Figur 10.17. Convertir Divs PA en tabla. Al elegir esta opcin del men se abrir el cuadro de dilogo Convertir Divs PA en tabla, con las diferentes opciones para configurar esta conversin.
Figura 10.18. Cuadro de dilogo Convertir divs PA en tabla. Dreamweaver CS4. Captulo 10. Capas
277
Las distintas opciones de las que disponemos a la hora de convertir los PA de nuestra pgina en tablas son las siguientes: Ms preciso: va a crear para cada una de los PA existentes una celda, adems de insertar celdas intermedias para conservar el espacio entre PAs. Mnimo (contraer celdas vacas): indica que para aquellos elementos que estn situados a menor distancia de la especificada en el campo Menor que... pxeles los bordes se van a alinear (es posible que el resultado final no coincida con el diseo original). Usar GIF transparentes: Dreamweaver utiliza esta opcin para rellenar la ltima fila de la tabla con imgenes GIF transparentes con el fin de asegurar que las tablas aparezcan con la misma anchura en cualquier navegador. Centrar en pgina: muestra la tabla resultante centrada en la pgina. Herramientas de Diseo: con esta opcin podremos indicar otra serie de operaciones relativas a la conversin que se est realizando como Evitar solapamientos, Mostrar el panel de elementos PA o la cuadrcula o Ajustar la tabla resultante a la cuadrcula.
NOTA. Si hay ms de un elemento PA en el documento y stos se encuentran anidados o superpuestos, esta conversin no se permitir.
Ejercicio
El objetivo de este ejercicio ser la creacin de elementos PA anidados.
Crea una pgina bsica de HTML (Archivo>Nuevo).
Aade un elemento PA a travs de la barra Insertar en la categora Diseo, haciendo clic en el botn Dibujar Div PA .
Dibuja el elemento haciendo clic con el botn izquierdo del ratn y arrastrando el ratn, en la ventana del documento, hasta que tenga el tamao deseado.
Selecciona el elemento PA haciendo clic con el botn izquierdo del ratn sobre el recuadro situado en la parte superior izquierda del elemento .
En el Inspector de Propiedades del elemento PA establece los siguientes valores:
o Nombre: primera. o Anchura y Altura: 300 pxeles y 250 pxeles respectivamente. o Distancia a los bordes superior e izquierdo: 40 pxeles y 225 pxeles respectivamente. o Visibilidad: visible. o Imagen de fondo: la imagen gente.jpg procedente del aula Mentor. Para hacerte con esta imagen, puedes ir a http://www.mentor.mec.es/administracion.html; est justo Dreamweaver CS4. Captulo 10. Capas
278
debajo de la palabra EDUCACIN, slo tienes que hacer clic con el botn derecho del ratn sobre la imagen, seleccionar Guardar imagen como y guardar gente.jpg en la carpeta imagenes de tu sitio MiWeb. Si tienes problemas para localizar esta imagen, puedes descargarla tambin desde Materiales de apoyo, Material necesario para ejercicio, Ejercicios del Captulo 10. o Desb.: visible.
Figura 10. 19. Inspector de Propiedades del PA llamado primera.
El aspecto del elemento PA dentro del documento HTML debe ser el siguiente:
Figura 10.20. Aspecto del elemento PA insertado en el documento.
Inserta un elemento PA anidado dentro de este primero. Para ello coloca el cursor dentro del PA que acabas de dibujar y ejecuta Insertar>Objetos de Diseo>Div PA.
Selecciona este nuevo PA y establece sus propiedades en el Inspector:
o Nombre: segunda. o Anchura y Altura: 215 pxeles y 165 pxeles respectivamente. o Distancia a los bordes superior e izquierdo: 75 pxeles y 75 pxeles respectivamente. o Visibilidad: visible. Dreamweaver CS4. Captulo 10. Capas
279
o Color de fondo: #FF3300. o Desbordamiento: visible.
Figura 10.21. Propiedades del elemento PA anidado.
Teclea dentro de este PA anidado el texto Capa anidada, centrado en negrita.
El nuevo elemento PA creado tendra el siguiente aspecto:
Figura 10.22. Aspecto del elemento PA anidado.
El Panel Elementos PA debe ser el siguiente mostrando los elementos PA anidados:
Dreamweaver CS4. Captulo 10. Capas
280
Figura 10.23. Panel Elementos PA con los dos elementos anidados.
Guarda la pgina HTML creada con el nombre capas2 y pulsa la tecla F12 para ver el resultado obtenido en un navegador o pulsa Vista en vivo.
281
Captulo 11. Multimedia
Dreamweaver CS4. Captulo 11. Multimedia 282
Captulo 11. MULTIMEDIA Los elementos multimedia, considerando como tal los archivos de vdeo, los sonidos, las animaciones Flash,... nos permiten dotar a nuestra pgina Web de un estilo ms ameno, a la vez que amplan las opciones de diseo disponibles. 11.1. Trabajando con Flash Insertar un archivo SWF Uno de los objetos ms comunes para ser aadidos a una pgina Web son los archivos con formato Flash: pequeas animaciones con movimiento y, en ocasiones, con sonido. Flash se puede considerar como el estndar de animacin para la Web. Los archivos Flash ofrecen multitud de posibilidades relativas a sonido, movimiento, imgenes,... adems, al ser de tamao reducido son relativamente rpidos de descargar. Estos ficheros tendrn la extensin SWF.
RECOMENDACIN. Para que este tipo de archivos sea visible desde los distintos navegadores es necesario tener instalado en ellos una pequea aplicacin denominada plug-in. Esta aplicacin reconocer que en el interior de la pgina Web a la que se est accediendo hay un fichero de tipo Flash y lo mostrar. El plug-in para mostrar estos elementos se puede descargar desde la pgina oficial de Adobe (propietarios de Flash) en la direccin: http://www.adobe.com/es/products/flashplayer/ (es rpido de descargar e instalar).
Para insertar un archivo SWF en una pgina Web, slo hay que colocar el cursor con el puntero del ratn el lugar en el que queremos insertar el elemento dentro del documento, desplegar Media y hacer clic en el botn correspondiente a SWF dentro de la categora Comn en la barra Insertar. Dreamweaver CS4. Captulo 11. Multimedia
283
Al hacer esto, si no hemos guardado nunca el documento, Dreamweaver nos pedir que lo hagamos antes de proceder a insertar el SWF, y una vez guardado el documento, entonces se abre el cuadro de dilogo Seleccionar archivo, en el cual localizaremos el archivo SWF que deseemos insertar (.swf) para despus pulsar Aceptar. Existe otra forma de aadir un objeto Flash a nuestra pgina, utilizando los mens de la aplicacin. Slo hay que seguir la ruta Insertar>Media>SWF o bien, utilizar la combinacin de teclas Ctrl+Alt+F.
Figura 11.1. Ejecutar Insertar>Media>SWF. Al hacer esto, se aadir el fichero SWF a la pgina HTML que estamos creando en el punto donde le hayamos indicado, mostrando el documento el siguiente aspecto: Dreamweaver CS4. Captulo 11. Multimedia
284
Figura 11.2. Archivo .swf de Flash insertado en un documento HTML.
Podemos cambiar las propiedades del archivo .swf, desde el Inspector de Propiedades.
Figura 11.3. Inspector de propiedades de un archivo SWF. Para ello slo hay que seleccionar el objeto y especificar los datos deseados para los siguientes campos: SWF: para indicar un nombre identificador que represente el objeto Flash dentro de la pgina Web. An. y Alt.: anchura y altura en pxeles respectivamente con la que deseamos que aparezca el objeto Flash en el documento. Archivo: ruta en la que se encuentra ubicado el archivo SWF que estamos modificando dentro de nuestro equipo. Si hacemos clic sobre el botn Examinar podremos buscar dicho archivo navegando a travs del sistema de directorios de nuestro disco duro, o bien indicar manualmente la ruta. Origen: indica la ruta al archivo origen con la extensin .fla del objeto Flash introducido. Este fichero con la extensin .fla se utiliza para poder modificar, desde Flash CS4, el objeto Dreamweaver CS4. Captulo 11. Multimedia
285
insertado con la extensin .swf por lo que se necesita tener instalados en el sistema tanto Dreamweaver CS4 como Flash CS4. Aunque no tengamos instalado en nuestro sistema la aplicacin Flash, podemos insertar un objeto Flash en nuestra pgina Web, pero no podremos modificarlo. Este campo no aparecer y, el botn Editar aparecer desactivado ya que no tendr asociada la aplicacin. Editar: abre directamente Flash para modificar el archivo origen. Si no est instalado en el sistema Flash este botn est desactivado. Clase: para aplicar un formato a la visualizacin del objeto Flash en funcin de una hoja de estilo predefinida. Bucle: si esta opcin est activada, el objeto Flash que hemos insertado se reproducir continuamente; si no lo est el objeto se reproducir una vez y se parar. Rep. Autom.: (reproduccin automtica) si activamos esta opcin, en el momento de que se cargue la pgina en el navegador se reproducir automticamente el objeto Flash insertado. Espacio V: (espacio vertical) nmero de pxeles de espacio en blanco que habr por encima y por debajo del objeto Flash. Espacio H: (espacio horizontal) nmero de pxeles de espacio a la derecha y a la izquierda del objeto Flash insertado. Calidad: de entre los valores de calidad podemos escoger uno: 1. Alta: este valor antepone el aspecto del objeto Flash a la velocidad a la hora de mostrarlo. 2. Alta automtica: intenta encontrar el equilibrio entre ambas cualidades, pero antepone, si es necesario, el aspecto a la velocidad. 3. Baja: se prioriza la velocidad frente al aspecto. 4. Baja automtica: da prioridad a la velocidad del objeto Flash, pero atendiendo tambin, en la medida de lo posible, al aspecto. Escala: escala en achura y altura a la que se debe mostrar el objeto Flash. Es posible escoger entre los valores siguientes: 1. Predeterminada (mostrar todo): muestra toda la pelcula a su tamao original. 2. Sin borde: ajusta el tamao original de la pelcula de forma que no aparezcan bordes y se mantenga adems la relacin de aspecto. 3. Ajuste exacto: establece el tamao del objeto Flash a las dimensiones indicadas sin preocuparse de la relacin de aspecto. Alinear: esta opcin la utilizamos para alinear el objeto Flash dentro de la pgina que estamos creando. Las opciones de alineacin disponibles se corresponden con las de esta figura, idnticas a las que vimos para las imgenes en el captulo 5 Dreamweaver CS4. Captulo 11. Multimedia
286
. Wmode: Establece el parmetro Wmode para el archivo SWF con el fin de evitar conflictos con elementos DHTML, como los widgets de Spry. El valor predeterminado es Opaco, que permite a los elementos DHTML aparecer sobre los archivos SWF en un navegador. Si el archivo SWF incluye transparencias y deseas que los elementos DHTML aparezcan detrs de ellas, selecciona la opcin Transparente. Selecciona la opcin Ventana para eliminar el parmetro Wmode del cdigo y permitir que el archivo SWF aparezca sobre otros elementos DHTML. Reproducir: reproduce la pelcula en la ventana del documento. Fondo: para indicar un color de fondo para la zona donde est ubicado el objeto Flash que hemos insertado. Parmetros: esta opcin muestra un cuadro de dilogo Parmetros, en el cual se podrn indicar parmetros para pasar al objeto Flash en el caso de que ste los necesite. Haciendo clic en el botn aadimos parmetros y, haciendo clic en los borramos. Adems para cada parmetro se debe especificar un nombre y un valor.
Figura 11.4. Cuadro de dilogo Parmetros.
Ejercicio
El objetivo de este ejercicio ser insertar un SWF en la pgina Web.
Dreamweaver CS4. Captulo 11. Multimedia
287
Para hacer el ejercicio descarga previamente de Materiales de apoyo, Material necesario para ejercicios, Ejercicios del Captulo 11, que tienes en el aula virtual, el fichero multimedia1.swf y gurdalo en tu carpeta imagenes del sitio MiWeb.
Crea una nueva pgina bsica HTML (Archivo>Nuevo).
A continuacin selecciona SWF desde el men desplegable del icono Media en la ficha Comn de la barra Insertar.
Figura 11.5. Insertar SWF.
Al hacer esto aparecer el cuadro de dilogo Seleccionar archivo, desde el cual podrs seleccionar el archivo Flash a insertar: multimedia1.swf.
Si se abren los Atributos de accesibilidad de la etiqueta de objeto donde podemos darle datos identificativos a nuestro swf si as lo deseamos, aunque tambin podemos Cancelar y hacerlo ms adelante, que es lo que vamos a hacer en este ejercicio.
Figura 11.6. Atributos de accesibilidad de la etiqueta de objeto. Dreamweaver CS4. Captulo 11. Multimedia
288
Una vez insertado el objeto Flash en la pgina, lo seleccionas y, desde el Inspector de Propiedades, indicas los siguientes datos:
o Anchura: 250 pxeles. o Altura: 250 pxeles. o Bucle: activa esta opcin para que el archivo se reproduzca continuamente en la pgina HTML. o Espacio V y Espacio H: 150 pxeles y 200 pxeles respectivamente.
Figura 11.7. Inspector de propiedades del SWF insertado.
Guarda (Archivo>Guardar) la pgina creada con el objeto Flash insertado y le asignas el nombre multimedia1.
RECOMENDACIN. Slo debemos publicar trabajos originales o de libre uso. En caso contrario deberemos pedir permiso por escrito al autor. El material publicado en Internet est protegido por la legislacin sobre Propiedad Intelectual.
Insertar un archivo FLV De la misma manera que hemos aprendido a insertar objetos de Flash, tambin podemos insertar vdeos de flash, son los archivos FLV. Para insertar un vdeo FLV podemos ir al panel Insertar, categora Comn, desplegar Media y seleccionar FLV , o ejecutar Insertar>Media>FLV. Dreamweaver CS4. Captulo 11. Multimedia
289
Figura 11.8. Insertar FLV. En cualquier caso, se abre el cuadro de dilogo Insertar FLV, Dreamweaver CS4. Captulo 11. Multimedia
290
Figura 11.9. Cuadro de dilogo Insertar FLV. Tipo Descarga progresiva de vdeo. en el cual podemos configurar las siguientes opciones: Tipo de vdeo: si lo desplegamos podemos seleccionar Descarga progresiva de vdeo o Flujo de vdeo. o Si seleccionamos Descarga progresiva de vdeo, descarga el archivo FLV en el disco duro del visitante del sitio y lo reproduce. Sin embargo, a diferencia de los mtodos tradicionales de entrega de vdeo de tipo descarga y reproduccin, la descarga progresiva permite iniciar la reproduccin del archivo de vdeo antes de que haya finalizado la descarga. o Si seleccionamos Flujo de vdeo, transfiere el contenido de vdeo y lo reproduce en una pgina Web transcurrido un breve periodo debfer que garantice una reproduccin fluida. Para activar el flujo de vdeo en las pginas Web, se debe tener acceso a Adobe Flash Media Server.
En el caso de seleccionar Descarga progresiva de vdeo, las opciones configurables en el cuadro de dilogo Insertar FLV son:
URL especifica una ruta de acceso relativa o absoluta al archivo FLV. Para especificar una ruta de acceso relativa, haremos clic en el botn Examinar , localizaremos el archivo FLV en nuestro equipo y lo seleccionaremos. Para especificar una ruta de acceso absoluta, Dreamweaver CS4. Captulo 11. Multimedia
291
escribiremos el URL (por ejemplo, http://fresno.pntic.mec.es/mgas0012/mivideo.flv) del archivo FLV. Aspecto especifica el aspecto del componente de vdeo. Si lo desplegamos, podemos escoger entre diversos tipos de interfaces para nuestro componente . Se muestra una presentacin preliminar del aspecto seleccionado bajo el men emergente Aspecto.
Ancho especifica el ancho del archivo FLV en pxeles. Para que Dreamweaver calcule el ancho exacto del archivo FLV, haremos clic en el botn Detectar tamao. Si Dreamweaver no puede calcular el ancho, deberemos introducir un valor de anchura.
Altura especifica el alto del archivo FLV en pxeles. Para que Dreamweaver calcule el alto exacto del archivo FLV, haremos clic en el botn Detectar tamao. Si Dreamweaver no puede calcular el alto, deberemos introducir un valor de altura.
Total con aspecto es el valor del ancho y alto del archivo FLV ms el ancho y alto del aspecto seleccionado.
Restringir mantiene la misma relacin de aspecto entre el ancho y el alto del componente de vdeo. Esta opcin est activada de forma predeterminada.
Reproduccin automtica especifica si el archivo se va a reproducir al abrir la pgina Web.
Rebobinado automtico especifica si el control de reproduccin vuelve al punto de inicio cuando finalice la reproduccin.
Una vez configuradas todas las opciones, hacemos clic en Aceptar y el FLV quedar insertado en nuestro documento. El comando Insertar FLV crea un archivo SWF de reproductor de vdeo y un archivo SWF de aspecto que se utilizan para mostrar el contenido de vdeo en una pgina Web. (Quizs tengas que hacer clic en el botn Actualizar del panel Archivos para ver los nuevos archivos.) Estos archivos se almacenan en el mismo directorio que el archivo HTML al que estamos aadiendo Dreamweaver CS4. Captulo 11. Multimedia
292
contenido de vdeo. Cuando carguemos la pgina HTML que incluye el archivo FLV, Dreamweaver cargar estos archivos como archivos dependientes (siempre y cuando haymos pulsado en S en el cuadro de dilogo Colocar archivos dependientes).
En el caso de seleccionar Flujo de vdeo, las opciones configurables en el cuadro de dilogo Insertar FLV son un poco diferentes a las anteriores:
Figura 11.10. Cuadro de dilogo Insertar FLV. Tipo Flujo de vdeo.
URL de servidor especifica el nombre de servidor, nombre de la aplicacin y nombre de instancia con el formato rtmp://www.ejemplo.com/app_name/instance_name.
Nombre de flujo especifica el nombre del archivo FLV que deseamos reproducir (por ejemplo, mivideo.flv). La extensin .flv es opcional.
Aspecto especifica el aspecto del componente de vdeo, de idntico modo a como vimos para la Descarga progresiva de vdeo.
Entrada de vdeo en vivo especifica si el contenido de vdeo es contenido en vivo. Si se selecciona Entrada de vdeo en vivo, el reproductor de Flash reproducir una entrada de vdeo en vivo transmitida en flujo desde Flash Media Server. El nombre de la entrada de vdeo en vivo es el nombre especificado en el cuadro de texto Nombre de flujo. Dreamweaver CS4. Captulo 11. Multimedia
293
Si activamos la opcin Entrada de vdeo en vivo, slo aparecer el control de volumen en el aspecto del componente, porque no es posible manipular el vdeo en vivo. Tampoco tendrn ningn efecto las opciones Reproduccin automtica y Rebobinado automtico.
Reproduccin automtica especifica si el archivo se va a reproducir al abrir la pgina Web.
Rebobinado automtico especifica si el control de reproduccin vuelve al punto de inicio cuando finalice la reproduccin.
Tiempo de bfer especifica los segundos necesarios para almacenar en bfer el vdeo antes de iniciar su reproduccin. El tiempo de bfer predeterminado es 0, de forma que el vdeo comienza a reproducirse inmediatamente despus de pulsar el botn Reproducir. (Si se activa la opcin Reproduccin automtica, el vdeo comenzar a reproducirse en cuanto se establezca una conexin con el servidor.) Si lo desearamos, tambin podemos establecer un tiempo de bfer, por ejemplo, si deseamos publicar contenido de vdeo con una velocidad de bits superior a la velocidad de conexin del usuario o cuando el trfico de Internet pueda provocar cuellos de botella en el ancho de banda o problemas de conectividad. Por ejemplo, si deseamos enviar 15 segundos de vdeo a la pgina Web antes de que sta comience a reproducirlo, estableceremos un tiempo de bfer de 15.
Una vez configuradas estas opciones, hacemos clic en Aceptar para insertar el FLV en el documento. Como en el caso anterior, en este tipo Flujo de vdeo, crea un archivo SWF de reproductor de vdeo y un archivo SWF de aspecto que se utilizan para mostrar el vdeo en una pgina Web. El comando tambin crea un archivo main.asc que debe cargarse en Flash Media Server. (Quizs tengas que hacer clic en el botn Actualizar del panel Archivos para ver los nuevos archivos.) Estos archivos se almacenan en el mismo directorio que el archivo HTML al que ests aadiendo contenido de vdeo. Cuando cargues la pgina HTML que incluye el archivo FLV, no olvides cargar los archivos SWF en el servidor Web y el archivo main.asc en Flash Media Server.
Si deseamos cambiar la configuracin del FLV insertado, entonces podremos hacerlo, seleccionndolo previamente en el documento activo, desde el Inspector de Propiedades; las opciones configurables en el inspector son las mismas que habamos visto referidas al cuadro de dilogo Insertar FLV. Lo nico que no puede cambiarse en el inspector son los tipos de vdeo. La nica manera de cambiar el tipo de vdeo es eliminar el componente e insertarlo de nuevo.
Dreamweaver CS4. Captulo 11. Multimedia
294
Figura 11.11. Inspector de propiedades de un vdeo FLV insertado en un documento.
Al insertar un archivo FLV en una pgina, Dreamweaver inserta cdigo que detecta si el usuario dispone de la versin correcta del reproductor Flash Player. Si no dispone de ella, la pgina mostrar un contenido alternativo predeterminado que solicita al usuario que descargue la versin ms reciente. Se puede cambiar este contenido alternativo en cualquier momento. Este procedimiento tambin es aplicable a archivos SWF.
Figura 11.12. Contenido alternativo sobre versin del Flash Player en vista Diseo.
Podemos editar la informacin de descarga del reproductor Flash Player de la siguiente manera:
En la vista Diseo de la ventana de documento, selecciona el archivo SWF o el archivo FLV.
Haz clic en el icono del ojo de la ficha del archivo SWF o el archivo FLV.
Edita el contenido del mismo modo que cualquier otro contenido de Dreamweaver.
Haz clic en el icono de nuevo para regresar a la vista de archivo SWF o FLV.
Este sera el mensaje que nos mostrara Dreamweaver en la Vista en vivo: Dreamweaver CS4. Captulo 11. Multimedia
295
Figura 11.13. Vista en vivo del mensaje alternativo.
Insertar Flash Paper Del mismo modo que hemos insertado archivos SWF o FLV, podemos insertar documentos Flash Paper en nuestras pginas web. Cuando se abra una pgina que contenga un documento FlashPaper en un navegador, el usuario puede navegar por todas las pginas del documento FlashPaper sin necesidad de cargar pginas Web nuevas. El usuario tambin puede realizar bsquedas en el documento, imprimirlo y utilizar la herramienta Zoom para acercarse o alejarse. Para insertar este tipo de documento en nuestra pgina, bien seleccionamos el icono Media de la categora Comn del panel Insertar,
Figura 11.14. Insertar Flash Paper desde Categora Comn. bien, ejecutamos Insertar>Media>Flash Paper. Dreamweaver CS4. Captulo 11. Multimedia
296
Figura 11.15. Ejecutar FlashPaper. Una vez llevado a cabo cualquiera de estos dos procedimientos, se abre el cuadro Insertar FlashPaper, en el que podemos insertar la ruta al documento Flash Paper, bien teclendola , o bien pulsando Examinar hasta localizar dicho documento en nuestro equipo, as como especificar las dimensiones del objeto Flash Paper en la pgina Web. Para ello, introducimos el ancho y el alto en pxeles. Flash Paper vara la escala del documento para ajustar el ancho.
Figura 11.16. Cuadro de dilogo Insertar FlashPaper. Dreamweaver CS4. Captulo 11. Multimedia
297
Una vez hagamos clic en Aceptar el documento de Flash Paper queda insertado en nuestra pgina y podemos configurar tambin los atributos de accesibilidad si tenemos configurado el programa para que se abran para este tipo de objetos, o ir directamente al inspector de propiedades del Flash Paper por si queremos editar este objeto. Las propiedades configurables para este tipo de objetos son similares a las que ya hemos visto para los objetos SWF, ya que ambos objetos comparten inspector. Dado que un documento Flash Paper es un archivo SWF, en la pgina aparece un marcador de posicin de archivo SWF. Para obtener la vista previa del documento Flash Paper, pulsamos en el marcador de posicin y pulsamos el botn Reproducir del inspector de propiedades. Pulsaremos en Detener para poner fin a la vista previa. Tambin podemos obtener una vista previa del documento en un navegador presionando F12. La barra de herramientas de Flash Paper se muestra al completo en el navegador. 11.2. Archivos de sonido A la hora de insertar sonido a una pgina Web es necesario conocer cules son los previsibles gustos de los usuarios potenciales de nuestra pgina, el tema al que est dedicado la pgina Web, la calidad del sonido, el tamao del archivo, cmo se reproduce un mismo archivo de audio en los diferentes navegadores, ... Todas estas cuestiones habr que tenerlas en cuenta a la hora de decidirnos a insertar un archivo de audio en nuestra pgina, sobre todo cuando muchos usuarios mientras navegan por Internet estn escuchando su propia msica en el ordenador y el hecho de que en una pgina aparezca un sonido que se entremezcle quiz no sea del todo de su agrado.
RECOMENDACIN. Deberemos incluir un sonido en una pgina Web SLO Y EXCLUSIVAMENTE CUANDO SEA NECESARIO y no como norma general. Aparte de aumentar el tamao de la pgina, un sonido reiterativo puede resultar exasperante.
De entre los distintos formatos de audio existentes, los ms comunes a la hora de trabajar en una pgina Web son: Formato .midi o .mid: formato de msica instrumental, generalmente de pequeo tamao y calidad aceptable (vara en funcin de la tarjeta de sonido del usuario). Se suele utilizar como msica de fondo en algunos sitios. Formato .mp3: formato de audio comprimido, de calidad muy alta comparable con la de un CD. El tamao de estos archivos es relativamente grande y puede ser lento de descargar para conexiones telefnicas. Adems los navegadores necesitarn tener instalado un plug-in para reproducirlo correctamente. Formato .wav: este formato de sonido tiene una buena calidad, es compatible con la mayora de los navegadores y adems no necesitan ningn plug-in para reproducirlo. El nico Dreamweaver CS4. Captulo 11. Multimedia
298
problema que presentan estos archivos es el gran tamao de los mismos, en ocasiones inaceptable a la hora de navegar por internet. Formato .aif: igual que los arhivos WAV, tienen una calidad de sonido aceptable, son compatibles con la mayora de los navegadores y no es necesario un plugin para reproducirlos. Adems presentan un problema similar, el tamao excesivo de los mismos. Formato RealAudio: los archivos con este formato tendrn extensin .ra, .ram o .rpm. Son archivos de sonido comprimidos, con un tamao algo menor a los archivos de formato mp3, y de calidad aceptable. Para reproducirlos hace falta un plug-in denominado RealPlayer. Formato .qt, .qtm, .mov o QuickTime: es un formato de audio y de vdeo desarrollado por Apple Computer. QuickTime est incluido con los sistemas operativos Apple Macintosh, y lo utilizan la mayora de las aplicaciones de Macintosh que emplean audio, vdeo o animacin. Los PC tambin pueden reproducir archivos en formato QuickTime, pero requieren un controlador de QuickTime especial. QuickTime admite la mayora de los formatos de codificacin, como Cinepak, JPEG y MPEG. Insertar archivos de sonido mediante un vnculo La forma ms sencilla de aadir sonido a nuestra pgina Web es mediante un vnculo. Esto permite que aquellos usuarios que deseen escuchar el sonido vinculado a la pgina hagan clic en este vnculo y lo escuchen y, aquellos usuarios cuyo navegador no les permita escuchar sonido o, simplemente, no lo quieran escuchar puedan navegar tranquilamente por la pgina sin problemas ni molestia alguna. Para insertar un archivo de sonido de esta forma creamos un hipervnculo usando texto o imagen como vnculo al archivo de sonido, (como hemos visto en el captulo dedicado a Vnculos) y en el campo Vnculo indicamos la ruta donde se encuentra el archivo de sonido que deseamos vincular.
Figura 11.17. Cuadro de dilogo Hipervnculo com ruta a un archivo de udio. Dreamweaver CS4. Captulo 11. Multimedia
299
Para probar el hipervnculo que acabamos de crear, abrimos el navegador pulsando la tecla F12. Al hacer clic en dicho hipervnculo, se abrir el reproductor de sonido que tenga asociado el navegador para este tipo de archivos. Por ejemplo, si es un archivo de tipo Windows Media (con extensin WMA), se abrir el Windows Media Player para reproducirlo (en cada navegador es posible configurar que reproductor se utilizar para abrir cada archivo de sonido).
Figura 11.18. Inspector de propiedades HTML de un hipervnculo a un sonido. Por ltimo, comentar que es recomendable guardar los archivos de sonido que vincularemos en nuestra pgina en el interior de la carpeta Activos dentro de la raz de nuestro sitio y, posteriormente crear los enlaces oportunos a cada uno de estos sonidos. Incrustar archivos de sonido Adems del mtodo explicado en el apartado anterior existe otra forma de aadir sonido a nuestra pgina Web: incrustarlo en la propia pgina. De esta forma el sonido se reproducir siempre que se muestre la pgina, con el condicionante de que un usuario lo escuchar correctamente slo si tiene instalado el plug-in adecuado para ello. Al insertar sonido de esta forma en la pgina, podremos especificar ms en detalle las propiedades que debe tener en cuanto a duracin del sonido, puntos de inicio y fin del mismo, el volumen al que se debe escuchar, Para insertar un sonido de esta forma elegimos el lugar de la pgina donde lo queremos insertar y hacemos clic en la barra Insertar, dentro de la categora Comn y dentro de ella en el botn Media. Se despliega un listado en el que elegimos la opcin Plugin . Tambin es posible insertar un sonido utilizando los mens de la aplicacin Insertar>Media>Plug-in. Dreamweaver CS4. Captulo 11. Multimedia
300
Figura 11.19. Ejecutar Insertar Plug-in. En el cuadro de dilogo Seleccionar archivo que se abre, seleccionamos el fichero de audio que queremos incrustar y pulsamos Aceptar. Una vez llevada a cabo esta operacin, el sonido incrustado en la pgina mostrar el siguiente aspecto en la ventana del documento:
Figura 11.20. Aspecto del archivo de sonido incrustado en la ventana del documento.
Dreamweaver CS4. Captulo 11. Multimedia
301
Para seleccionar y editar el archivo de sonido podemos seleccionarlo y recurrir al Inspector de Propiedades.
Figura 11.21. Inspector de Propiedades de un audio incrustado. En este Inspector de Propiedades es posible modificar los siguientes datos: Plug-in: nombre que se le asignar al archivo de sonido que acabamos de insertar dentro de la pgina Web. An y Al: anchura y altura respectivamente de los controles de audio que se mostrarn en el navegador a la hora de reproducirse el sonido. Origen: en este campo deberemos seleccionar el archivo de audio que insertaremos en la pgina. Haciendo clic en el botn aparecer el cuadro de dilogo para seleccionar el archivo correspondiente de entre los que se encuentren en nuestro disco duro. Tambin es posible rellenar y modificar este campo manualmente, slo se debe indicar la ruta completa al archivo que queramos incrustar. URL plg: este campo se utiliza para especificar la ruta completa desde donde se puede descargar el plug-in adecuado para escuchar el sonido vinculado correctamente. Alinear: especifica cul va a ser la alineacin del objeto en la pgina (tal y como se especific en el captulo dedicado a las imgenes). Clase: si deseamos aplicar algn formato de presentacin basado en una hoja de estilo, ste es el campo indicado para ello. Reproducir: si hacemos clic en este botn podremos probar el sonido que acabamos de insertar. Espacio V: (espacio vertical) nmero de pxeles de espacio en blanco que habr por encima y por debajo del plug-in. Espacio H: (espacio horizontal) nmero de pxeles de espacio a la derecha y a la izquierda del plug-in. Borde: se utiliza para indicar el ancho del borde alrededor del plug-in. Parmetros: esta opcin muestra un cuadro de dilogo en el cual podremos indicar los parmetros para pasar al plug-in. Haciendo clic en el botn aadimos parmetros y, haciendo clic en los borramos. Adems para cada parmetro se debe especificar un Dreamweaver CS4. Captulo 11. Multimedia
302
nombre y un valor. Los parmetros se pueden considerar atributos que definirn el comportamiento de la reproduccin del archivo de sonido.
Figura 11.22. Parmetros de un archivo de sonido incrustado.
Ejercicio
El objetivo de este ejercicio ser incrustar un archivo de sonido de fondo en nuestra pgina Web, de forma que cuando el usuario visite nuestra pgina comenzar a escuchar la msica que nosotros hayamos insertado.
Antes de comenzar, debers ir a la carpeta Ejercicios del Captulo 11 del Material necesario para ejercicios de Materiales de apoyo que est en el aula virtual del curso y copiar a la carpeta Elementos de tu sitio MiWeb un archivo de sonido .midi llamado primaver.
Ahora abre el documento html que habas creado en el ejercicio anterior y guardado con el nombre multimedia1.
Sita el cursor debajo del objeto SWF que habas insertado antes, y a continuacin selecciona la opcin Plug-in desde la categora Comn del panel Insertar.
En el cuadro de dilogo Seleccionar archivo que se abre, localiza y selecciona el archivo de sonido midi llamado primaver que habas guardado en tu equipo, y por ltimo pulsa Aceptar.
Dreamweaver CS4. Captulo 11. Multimedia
303
Figura 11.23. Cuadro de dilogo Seleccionar Archivo.
Una vez seleccionado dicho archivo, el aspecto que mostrar la pgina en Dreamweaver ser la siguiente:
Figura 11.24. Archivo de sonido incrustado en nuestra pgina multimedia1.
Desde el Inspector de Propiedades, asigna las siguiente opciones: Dreamweaver CS4. Captulo 11. Multimedia
304
o Plugin: (nombre del objeto insertado) sonido. o An y Al (anchura y altura): 350 y 50 pxeles respectivamente. o Espacio V y Espacio H: 10 pxeles en ambo casos. o Origen: aqu deber aparecer indicada la ruta hacia el archivo de sonido que acabamos de incrustar, que en nuestro ejercicio, si lo hemos hecho todo siguiendo las indicaciones propuestas ser Elementos/primaver.MID. o Borde: 1 pxel
El resto de parmetros los dejamos sin modificar.
Figura 11.25. Inspector de propiedades del archivo de sonido incrustado en nuestro ejercicio.
Guarda los cambios (Archivo>Guardar) y comprueba el funcionamiento de la pgina Web en diferentes navegadores.
11.3. Archivos de vdeo Al insertar un archivo de vdeo debemos tener en cuenta dos premisas fundamentales: el vdeo debe tener una calidad aceptable y, adems, su tamao no debe ser excesivamente grande. Adems de los FLV que hemos visto anteriormente como objetos de vdeo Flash, de entre los formatos de vdeo ms conocidos y utilizados destacan los siguientes: Archivos con extensin AVI: es el formato habitual de los archivos de vdeo en Windows, de ah que sean muy conocidos. Archivos con formato MPEG: archivos con formato comprimido de tamao reducido. Archivos RealVideo: archivos que permiten ser reproducidos en tiempo real a la vez que son descargados. Para su correcta reproduccin es necesario tener instalado el programa RealPlayer. Archivos MOV: otro formato de vdeo que necesita el programa QuickTime para reproducirse. Insertar un vdeo Para insertar un vdeo vamos a la barra Insertar y dentro de la categora Comn desplegamos la opcin Media. Al hacer esto se despliega un listado en el que elegimos la opcin Plug-in , tal y como hemos visto para los archivos de sonido. Dreamweaver CS4. Captulo 11. Multimedia
305
Tambin podemos ejecutar Insertar>Media>Plug-in. En cualquier caso el aspecto del documento activo en el que estamos trabajando es el mismo que para la adicin de sonido. El aspecto del Inspector de Propiedades y, por tanto, las propiedades a especificar son las mismas que para los archivos de sonido, con dos particularidades: Lgicamente, en este caso en el campo Origen debemos especificar un archivo de vdeo y no uno de audio. El proceso para seleccionarlo es igual al mencionado para los archivos de audio. A la hora de especificar la anchura y la altura (en los campos An y Al) con la que se mostrar el vdeo, sera bueno conocer a priori el formato original en el que se encuentra dicho fichero (en cuanto a tamao nos referimos), de forma que a la hora de mostrarlo no aparezca distorsionado. Podemos comprobar cmo se visualiza un vdeo que hayamos insertado pulsando la tecla F12. Al hacer esto se abrir el navegador predeterminado y podremos comprobar el resultado de nuestra operacin. 11.4. Otros objetos multimedia Adems de todos los objetos que hemos visto en el captulo, Dreamweaver permite tambin insertar objetos de Shockwave, applets de Java y controles Activex. El proceso para insertar cualquiera de estos objetos es idntico a los vistos para el resto; podemos ejecutar Insertar>Media y seleccionar el tipo de objeto a insertar en nuestra pgina,
Figura 11.26. Insertar diferentes objetos multimedia. O pulsar en el icono correspondiente al medio a insertar desde la categora Comn del panel Insertar, desplegando Media: Dreamweaver CS4. Captulo 11. Multimedia
306
Figura 11.27. Insertar Media desde la categora Comn de la barra Insertar. Se abrir el cuadro Seleccionar archivo que nos permitir localizar el objeto a insertar en nuestro equipo, y una vez pulsemos Aceptar podremos tambin configurar los atributos de accesibilidad del objeto multimedia. Una vez insertado el objeto, al igual que en el caso de los vistos anteriormente, podremos seleccionarlo y modificar sus propiedades desde el inspector, como por ejemplo el archivo de origen, las dimensiones y otros parmetros y atributos de cada objeto.
307
Captulo 12. Plantillas y Biblioteca
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
308
Captulo 12. PLANTILLAS Y BIBLIOTECA 12.1. Plantillas Cuando comenzamos a disear un sitio web compuesto por mltiples pginas, normalmente diseamos la primera y, a continuacin, hacemos una copia de sta para que nos sirva como base para disear el resto, simplemente modificando lo que difieren unas de otras pero manteniendo el aspecto general del sitio. Bsicamente sta va a ser la idea de las plantillas. Una plantilla de Dreamweaver es un tipo de documento especial en el cual vamos a poder basar todas las pginas HTML que van a componer nuestro sitio web. A la hora de crear una plantilla disearemos la disposicin de la pgina y dentro de ella incluiremos regiones editables para los documentos que, posteriormente, basaremos en esta plantilla. Nosotros mismos controlaremos las regiones que sern editables y las que no. Una de las ventajas fundamentales de la utilizacin de plantillas es la posibilidad que tenemos de actualizar todo el sitio basado en plantillas de una sola vez. Si modificamos un aspecto de diseo de una plantilla automticamente podemos actualizar todos los documentos que estn basados en ella.
OBSERVACIN. Las plantillas tienen la extensin .dwt y se almacenan en el directorio Templates dentro de la carpeta raz local del sitio.
Crear una plantilla Podemos crear una plantilla desde cero o bien utilizando un documento ya existente como base para crearla. Para crear una plantilla desde el inicio podemos hacerlo utilizando el panel Activos . Para activar dicho panel hay que hacer clic en la opcin del men Ventana>Activos. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
309
Figura 12.1. Ventana>Activos. Hay que tener en cuenta que para poder utilizar este panel deberemos haber creado previamente un sitio (tal y como hemos visto en el captulo 3), para posteriormente definir plantillas dentro de dicho sitio. Una vez que se nos muestra este panel, hacemos clic en el botn Plantillas para mostrar el apartado dedicado a las pmismas. El aspecto que tendra este panel sera:
Figura 12.2. Seccin Plantillas del panel Activos. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
310
En la parte inferior del panel Activos aparecen varios botones que nos van a permitir: Dar de alta una nueva plantilla . Editar una plantilla ya existente . Borrar una plantilla creada . Actualizar la lista de plantillas del sitio . Aplicar todos los cambios realizados . Si al comenzar a definir plantillas para nuestro sitio, el botn de alta de una nueva plantilla no est activo, la podemos crear haciendo clic con el botn derecho del ratn sobre el panel Activos y eligiendo la opcin Nueva Plantilla en el men contextual que aparece.
Figura 12.3. Crear una plantilla nueva. Una vez creada la nueva plantilla se nos pedir que introduzcamos un nombre para la misma. Tras hacer esto, se almacenar en la carpeta Templates, dentro de la raz de nuestro sitio con dicho nombre y la extensin .dwt (Dreamweaver crear automticamente esta carpeta la primera vez que se almacene un archivo con extensin de plantillas). Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
311
Figura 12.4. Nombre de nueva plantilla. El siguiente paso, tal y como se indica en el panel Activos ser editar la plantilla, aadirle contenido y marcar algunas regiones como editables mediante el men Modificar. Tambin podemos crear una plantilla sin utilizar el panel Activos. En este caso dispondramos de dos caminos para llevar a cabo esta tarea: Si deseamos utilizar un archivo ya existente como plantilla, simplemente lo abrimos a travs del men Archivo>Abrir, seleccionndolo desde nuestro sistema local de archivos. Si queremos crear una plantilla a partir de un documento nuevo, elegimos la opcin Archivo>Nuevo y elegimos Plantilla en blanco en el cuadro de dilogo Nuevo Documento que aparece; en la columna Tipo de plantilla, Plantilla HTML. Una vez que ya tenemos el documento que nos servir como plantilla procedemos a guardarlo como tal, mediante el men Archivo>Guardar como plantilla. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
312
Figura 12.5. Guardar como plantilla. Al hacer esto nos aparecer un cuadro de dilogo en el cual podremos especificar los siguientes datos: Sitio: lista desplegable en la que podemos seleccionar el sitio donde almacenaremos la plantilla. Plantillas existentes: plantillas existentes en el sitio seleccionado en la lista anterior. Descripcin: para insertar un breve apunte sobre la plantilla. Guardar como: nombre asignado a la plantilla que vamos a guardar.
Figura 12.6. Cuadro de dilogo Guardar como plantilla. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
313
Una vez rellenados los campos y tras pulsar el botn Guardar nuestra plantilla quedar almacenada en la carpeta Templates en la raz del sitio que hayamos escogido y con la extensin .dwt. 12.2. Regiones editables en plantillas Aadir una regin editable De forma predeterminada todos los elementos de una plantilla se encuentran bloqueados, es decir, no se pueden modificar. Mediante la creacin de regiones editables es posible especificar elementos que s pueden ser modificados en aquellas pginas que se basen en esta plantilla. Podemos crear una regin editable en una plantilla existente de dos formas distintas: Haciendo clic con el botn derecho del ratn en el interior de la plantilla que estamos creando y eligiendo la opcin correspondiente en el men contextual que aparece.
Figura 12.7. Crear nueva regin editable en una plantilla. Eligiendo la opcin correspondiente dentro del men Insertar>Objetos de plantilla>Regin editable o bien utilizando la combinacin de teclas Ctrl+Alt+V. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
314
Figura 12.8. Crear nueva regin editable desde el men Insertar. Una vez elegida esta opcin aparecer el cuadro Nueva regin editable, en el cual podremos indicar el nombre que le queramos dar a la regin editable que estamos creando:
Figura 12.9. Cuadro Nueva regin editable. Tras darle un nombre a la regin editable que acabamos de crear, el aspecto que presenta dicha regin dentro de la plantilla es el siguiente (suponiendo que el nombre que le hemos dado a la regin editable es FormularioEnvio): Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
315
Figura 12.10. Aspecto y nombre de regin editable. Como se observa, el nombre de la regin editable aparece enmarcado en un recuadro de color turquesa (aunque este color es configurable en las preferencias). Debajo de dicho recuadro aparece otro en el cual podremos aadir todos los objetos que queramos, siendo dichos objetos modificables en las pginas que utilicen esta plantilla. Los objetos que se encuentren fuera de esta regin editable tambin aparecern en dichas pginas pero no podrn ser modificados. El nombre asignado podemos modificarlo dentro del Inspector de Propiedades correspondiente a la regin editable.
Figura 12.11. Inspector de Propiedades de regin editable.
Eliminar una regin editable Si deseamos que una regin editable deje de serlo y queremos bloquearla para que no pueda modificarse en las pginas que utilizan la plantilla, debemos seguir los siguientes pasos: Seleccionamos la regin editable que deseamos modificar, haciendo clic en el recuadro que la identifica. A continuacin seleccionamos la opcin del men Modificar>Plantillas>Quitar formato de plantilla. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
316
Figura 12.12. Modificar>Plantillas>Quitar formato de plantilla. 12.3. Trabajar con plantillas Aplicar plantillas a un documento nuevo Para aplicar una plantilla a un documento nuevo, slo tenemos que crear el documento nuevo (por ejemplo una pgina bsica HTML, como ya hemos visto en otros apartados) y, a continuacin, hacer clic en la opcin del men Modificar>Plantillas>Aplicar plantilla a pgina.
Figura 12.13. Aplicar plantilla a un documento HTML. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
317
Despus de haber seleccionado esta opcin aparecer el cuadro Seleccionar plantilla, que nos muestra un listado de todos los sitios disponibles y de las plantillas de las que se compone cada uno de estos sitios. Para elegir una plantilla basta con hacer clic con el ratn sobre el nombre de la misma. En este mismo cuadro si seleccionamos la opcin Actualizar pgina cuando cambie la plantilla, en el momento en que la plantilla se modifique, se actualizar automticamente la pgina.
Figura 12. 14. Cuadro Seleccionar plantilla. Una vez elegida la plantilla en la que se va a basar nuestra pgina, hacemos clic en el botn Seleccionar y automticamente la plantilla queda aplicada. En dicha pgina podremos modificar nicamente aquellos elementos situados dentro de la regin editable de la plantilla.
Figura 12.15. Documento HTML basado en una plantilla.
OBSERVACIN. Una nota situada a la derecha del documento actual nos mostrar en todo momento el nombre de la plantilla que se est utilizando para construir la pgina.
Tambin existe la posibilidad de crear un documento nuevo desde una plantilla ya existente; para ello ejecutamos la opcin de men Archivo>Nuevo, seleccionamos Pgina de Plantilla y Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
318
la plantilla del sitio a utilizar, para despus pulsar Crear. Se genera un nuevo documento basado en esa plantilla.
Figura 12.16. Crear nuevo documento basado en una plantilla.
Aplicar plantillas a un documento existente De forma similar a lo que hacamos con un documento nuevo a la hora de aplicarle una plantilla, tambin es posible llevar a cabo esta operacin en un documento ya existente. En este caso y una vez abierto el documento los pasos a seguir son los mismos que en el caso anterior, hacemos clic en el men Modificar > Plantillas > Aplicar plantilla a pgina y en la ventana que se abre, seleccionamos la plantilla a aplicar. Es posible que en el documento exista algn contenido que no pueda ser aplicado directamente a alguna regin editable de la plantilla. En ese caso aparecer un cuadro con el ttulo Nombres de regiones no coincidentes para que asignemos manualmente dicho contenido a las regiones editables existentes en la plantilla. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
319
Figura 12.17. Cuadro Nombres de regiones no coincidentes. En este cuadro nos encontraremos lo siguiente: Una ventana central con un listado de todos los elementos que no pueden asignarse automticamente a una regin editable. Una lista desplegable con todas las regiones editables pertenecientes a la plantilla actual. En esta lista aparecen las siguientes opciones : No resuelto: opcin predeterminada que indica que se est a la espera de resolver el problema. Ningn lugar: elimina el contenido del documento actual. Doctitle: coloca el elemento en la regin de ttulo del documento actual. Head: para colocar el elemento en la seccin de cabecera del documento. Regiones editables: las regiones editables pertenecientes a la plantilla tambin aparecen en este listado para poder asignar elementos a dichas regiones. Para asignar un elemento a una regin editable, hacemos clic en el elemento dentro de la ventana central y seleccionamos la regin donde lo queremos alojar. Si despus de seleccionar una regin editable hacemos clic en el botn Utilizar para todo, dicha regin ser asignada automticamente a todos los elementos que estn causando conflictos. Por ltimo hacemos clic en el botn Aceptar para aplicar los cambios. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
320
Separar un documento de una plantilla Si en un momento dado deseamos eliminar la correspondencia entre una pgina HTML y la plantilla en la que se basa, simplemente debemos elegir la opcin de men Modificar>Plantillas>Separar de plantilla y automticamente la pgina dejar de estar asociada a la plantilla.
Figura 12.18. Separar documento HTML de la plantilla en la que est basado. 12.4. Otras operaciones con plantillas Editar plantillas Una vez generada una plantilla es posible que necesitemos modificarla para adecuarla a nuestras necesidades cambiantes al disear un sitio web. Para realizarlo desde el panel Activos hacemos clic en el botn Plantillas . Aparecern todas las plantillas, seleccionamos aquella que queremos modificar haciendo clic en el nombre de la misma y, a continuacin, hacemos clic en el botn Editar . El siguiente paso es llevar a cabo los cambios deseados en la plantilla y como ltimo paso acceder a la opcin del men Archivo>Guardar como plantilla... y desde el cuadro Guardar como plantilla que aparece escribir el nombre indicado para la plantilla y hacer clic en el botn Guardar.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
321
Borrar plantillas Una vez que dejamos de necesitar ciertas plantillas es conveniente eliminarlas para no ocupar espacio innecesario en memoria. Desde el panel Activos hacemos clic en el botn Plantillas , seleccionamos la plantilla que deseamos borrar haciendo clic sobre el nombre de la misma y, por ltimo, hacemos clic en el botn Borrar . Al hacer esto ltimo aparecer un cuadro de dilogo pidindonos que confirmemos el borrado. Si hacemos clic en el botn S la plantilla se borrar.
Figura 12.19. Confirmar borrado de plantilla. Actualizacin de plantillas Una vez que se ha asignado una plantilla a un documento, si realizamos algn cambio en la plantilla original, al guardar estos cambios aparecer el cuadro Actualizar archivos de plantilla, indicndonos si deseamos actualizar las plantillas de esos documentos.
Figura 12.20. Cuadro Actualizar archivos de plantilla. Si hacemos clic en la opcin Actualizar aparecer un nuevo cuadro llamado Actualizar pginas. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
322
Figura 12.21. Cuadro Actualizar pginas. Dentro de este cuadro podemos modificar: En la opcin Buscar en es posible escoger una de entre tres opciones disponibles: Arch. que usan: al elegir esta opcin aparece un men emergente para que seleccionemos una plantilla. Con esto haremos que todas las pginas que utilicen dicha plantilla se actualicen. Arch. Seleccionados: al elegir esta opcin aparecen al lado los archivos seleccionados que pueden actualizarse. Todo el sitio: si seleccionamos esta opcin aparecer otra lista desplegable al lado con todos los sitios disponibles. Al elegir uno de los sitios y hacer clic en el botn Iniciar, se actualizarn todas las pginas de ese sitio con los cambios sufridos en sus plantillas correspondientes. Actualizar: en este apartado es posible indicar si al realizarse la actualizacin deseamos que se actualicen tanto los elementos de biblioteca como las plantillas. Mostrar registro: si queremos ver los resultados paso a paso de las actualizaciones de las pginas necesitamos tener activada esta opcin. Tambin es posible actualizar las pginas que dependen de una plantilla modificada a travs de los mens de la aplicacin: Si elegimos la opcin Modificar>Plantillas>Actualizar pgina actual se actualizar nicamente la pgina HTML en la que nos encontramos. Si por el contrario escogemos la opcin Modificar>Plantillas>Actualizar pginas... aparecer el cuadro anterior donde podremos escoger entre las diferentes opciones disponibles de actualizacin.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
323
Ejercicio
El objetivo de este ejercicio ser crear una primera plantilla que nos servir como base para utilizarla aplicndola a diferentes pginas HTML.
En primer lugar activa el Panel Activos (Ventana>Activos) para poder trabajar ms cmodamente con las plantillas.
A continuacin, en la pestaa Activos del panel, selecciona Plantillas pulsando en el botn situado a la izquierda del mismo. Despus pulsa el botn para crear una nueva plantilla y dale el nombre de principal.
Figura 12.22. Crear plantilla nueva llamada principal.
Haz doble clic sobre el nombre de la plantilla (principal.dwt) para poder editarla, o pulsa el botn Editar del panel Activos.
Inserta en ella una imagen cualquiera en la parte superior, por ejemplo la imagen gente.jpg que utilizaste en un ejercicio anterior, a travs del men Insertar>Imagen.
Debajo de la imagen inserta el texto: Mi primera plantilla para el Aula Mentor, con un tamao cualquiera y con el color #00CC00. Adems alinea dicho texto en el centro de la pgina HTML. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
324
Debajo de dicho texto y dejando un espacio entre ambos inserta otro texto: Final de la plantilla, con las mismas caractersticas en cuanto a formato que hayas utilizado en el anterior.
Por ltimo, entre ambos textos vas a aadir una regin editable (Insertar > Objetos de plantilla > Regin editable) a la que llamars region1, la cual debe quedar centrada en la pgina.
Guarda los cambios efectuados a la plantilla principal.dwt. Observa que obtienes un resultado parecido al siguiente en la ventana del documento en Dreamweaver.
Figura 12.23. Aspecto de la plantilla principal.dwt modificada.
Ahora crea un nuevo documento HTML desde Archivo>Nuevo y aplcale la plantilla principal.dwt ejecutando el men Modificar> Plantillas > Aplicar plantilla a pgina.
En el cuadro que aparece seleccionas la plantilla principal. Haz clic en el botn Seleccionar para aplicar la plantilla a la pgina HTML.
Figura 12.24. Seleccionar plantilla principal.
En la regin editable inserta una tabla de tres filas y dos columnas (Insertar > Tabla). En el Inspector de Propiedades de la tabla le indicas adems en el campo Alinear el valor Centro para que la tabla quede centrada en la pgina web.
RECOMENDACIN. Para insertar un elemento en una regin editable basta con hacer clic en su interior e insertar dicho elemento.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
325
En la primera columna de la tabla inserta los siguientes valores para cada una de las tres filas: Alumno, Profesor y Curso, dejando todos los parmetros de estos textos a sus valores predeterminados, con lo que no tienes que modificar nada.
En la segunda columna y para cada una de las tres filas inserta un campo de texto de formulario, haciendo clic en el botn , dentro de la barra Insertar, en su categora Formularios. En la ID de cada campo, asigna los nombres campo1, campo2 y campo3 respectivamente.
Figura 12.25. Regin editable modificada en documento activo.
Una vez finalizada esta operacin guarda los cambios efectuados con el nombre plantilla1.html.
12.5. Biblioteca Se denominan activos a los diferentes elementos que pueden almacenarse en un sitio, como por ejemplo archivos de imagen, vdeos,... Una biblioteca no es ms que un conjunto de estos activos que pueden ser utilizados en las distintas web que creemos. Por ejemplo, si un trozo de cdigo de una pgina HTML (una tabla, una imagen, un pie de pgina,...) se va a repetir en todos los documentos de nuestro sitio web, puede ser interesante almacenarlo en la biblioteca, de forma que pueda volver a utilizarse. Estos elementos pueden aadirse a las pginas web de un sitio desde el panel de bibliotecas mediante la sencilla accin de arrastrarlos y soltarlos en ellas. Una de las ventajas del uso de activos almacenados en una biblioteca es que, al modificar dicho activo todas aquellas pginas que lo contienen pueden actualizarse. Al insertar un elemento de biblioteca en una pgina, realmente no se inserta dicho elemento en s, sino que lo que se inserta es un vnculo o una instancia de ese elemento, de forma que si dicho elemento sufre algn tipo de modificacin dicha instancia se actualiza tambin de forma inmediata. Dreamweaver almacena los elementos de biblioteca en la carpeta Library dentro de la raz del sitio con la extensin .lbi. La utilizacin de elementos de biblioteca se ve mejor en el siguiente ejemplo: Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
326
Supongamos que en todas las pginas de un sitio web debe aparecer siempre un logotipo corporativo, sin embargo ste an no ha sido finalizado por el diseador en cuestin, podemos crear un elemento de biblioteca con esta imagen y aadirlo en todas las pginas. Cuando el logotipo est finalizado se actualizar el objeto y por tanto, se actualizarn todas las pginas del sitio en las que lo hayamos incluido (sin necesidad de ir una por una actualizando el logotipo).
RECOMENDACIN. Para aadir un elemento de biblioteca no hace falta ningn plug-in especial, simplemente stos harn falta cuando por su propia naturaleza el objeto lo requiera: archivos de sonido, vdeo,
Crear un elemento de biblioteca Como hemos dicho los elementos de biblioteca no son ms que trozos de cdigo de HTML de una pgina que deseamos almacenar de forma que puedan ser reutilizados en otras pginas del mismo sitio. Para manejar los elementos de biblioteca en el entorno de Dreamweaver necesitamos tener activada la opcin Biblioteca. Activamos la pestaa Biblioteca en el panel Activos, haciendo clic en el botn correspondiente . Para almacenar un trozo de cdigo HTML como elemento de biblioteca, slo hay que realizar una de estas acciones: Seleccionamos el trozo de cdigo a aadir y hacemos clic en el botn de Nuevo elemento de biblioteca situado en la parte inferior de la pestaa actual.
Figura 12.26. Panel Biblioteca. Seleccionamos el elemento a aadir y hacemos clic en la opcin de men Modificar>Biblioteca>Aadir objeto a Biblioteca. Hasta que no seleccionemos el objeto a aadir esta opcin no estar disponible. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
327
Figura 12.27. Agregar objeto a biblioteca. En cualquier caso, ser necesario darle un nombre al nuevo elemento, que podremos asignarle en el propio panel de Biblioteca, pulsando Intro una vez que tecleemos dicho nombre. En ese mismo panel tambin podemos observar la ruta en la que nuestro elemento de biblioteca se guarda dentro de nuestro sitio.
Figura 12.28. Nuevo elemento de biblioteca en panel.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
328
Si cambiamos cualquier elemento de biblioteca, Dreamweaver nos avisar si deseamos hacer los pertinentes cambios en aquellos documentos que usen esos elementos, mediante el siguiente mensaje:
Figura 12.29. Aviso de actualizacin de documentos. Editar un elemento de biblioteca Si una vez creado un elemento de biblioteca necesitamos posteriormente editarlo y modificar alguna de sus caractersticas, podemos seguir los siguientes pasos: Seleccionamos el elemento haciendo clic en su nombre dentro de la pestaa Biblioteca en el panel Activos. A continuacin podemos modificarlo haciendo doble clic con el ratn en el nombre del elemento o bien, haciendo clic en el botn Editar . Una vez realizados los cambios oportunos los grabamos mediante el men Archivo>Guardar. A continuacin es posible a travs de los mens: Actualizar en el documento actual en el que nos encontramos los cambios originados en el objeto de biblioteca mediante Modificar>Biblioteca>Actualizar pgina actual. Actualizar todas las pginas del sitio en las que se incluye este objeto: Modificar>Biblioteca>Actualizar pginas... Al hacer esto aparecer un cuadro de dilogo con el ttulo Actualizar pginas que, de forma similar a como ocurra con las plantillas, nos permite actualizar todas las pginas del sitio. Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
329
Figura 12.30. Actualizar elementos de biblioteca. 12.6. Otras operaciones con elementos de biblioteca Cambiar el nombre a un elemento de biblioteca Para cambiarle el nombre slo hay que seleccionar el elemento en la pestaa Biblioteca del panel Activos y despus hacer clic con el ratn sobre el nombre del elemento para editarlo. En ese momento podemos introducir el nuevo nombre deseado para el elemento de biblioteca. Borrar un elemento de biblioteca Para borrar un elemento de biblioteca lo seleccionamos como siempre en la pestaa Biblioteca del panel Activos y, a continuacin, hacemos clic en el botn Borrar o bien pulsamos la tecla Supr. Dreamweaver nos pedir confirmacin acerca del elemento a borrar. Si confirmamos, el elemento de biblioteca ser suprimido. Copiar un elemento de biblioteca Por ltimo y tambin como una operacin relativa a los elementos de biblioteca cabe destacar la posibilidad que se nos ofrece de copiar elementos de un sitio web a otro. Para ello, slo hay que seleccionar el elemento como ya hemos visto en apartados anteriores y haciendo clic con el botn derecho del ratn aparecer un men contextual en el cual Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
330
mediante Copiar en el sitio podremos copiar el elemento en cuestin en cualquier otro sitio web que tengamos definido (el sitio web actual de forma predeterminada aparece desactivado). Aadir un elemento de biblioteca a una pgina Como hemos mencionado con anterioridad al insertar un elemento de biblioteca en un documento no se inserta el elemento en s: se inserta su contenido y una referencia al propio elemento. Para aadir un elemento de biblioteca, basta con que sigamos uno de estos caminos: Desde la pestaa Biblioteca dentro del panel de Activos, seleccionamos el elemento a aadir y lo arrastramos con el botn izquierdo del ratn hacia el punto exacto del documento donde lo queramos insertar. Tambin es posible insertarlo, seleccionando el elemento y haciendo clic en el botn Insertar situado en la parte inferior de la pestaa Biblioteca.
Figura 12.31. Propiedades de un elemento de biblioteca insertado en un documento activo. A la hora de aadir un elemento de biblioteca a un documento an tenemos una posibilidad ms y es aadir el contenido pero no el vnculo a dicho elemento (de esta forma es posible modificar este contenido en la propia pgina, pero si actualizamos ese elemento de biblioteca el contenido dentro de esta pgina no se actualizar al no poseer el vnculo). Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca
331
Para realizar esta tarea, con la tecla Ctrl presionada arrastramos el elemento de biblioteca al punto del documento donde lo queramos insertar.
Ejercicio
El objetivo de este ejercicio ser crear desde una nueva pgina un elemento de biblioteca y posteriormente editarlo para modificar sus propiedades. A continuacin aadiremos ese elemento de la biblioteca a otra nueva pgina.
Para empezar, crea una pgina bsica de HTML (Archivo>Nuevo). Activa el apartado Biblioteca haciendo clic en el botn , dentro del panel Activos.
Inserta en el documento la imagen escudo-ministerio.gif que ya has usado en un ejercicio anterior, y a su derecha el texto Ejercicio de bibliotecas para el Aula Mentor.
Selecciona ambos elementos y haciendo clic con el botn izquierdo del ratn sobre ellos y mantenindolo pulsado arrastra ambos elementos hacia el panel lateral Activos dentro de su seccin Biblioteca. Se pedir un nombre al elemento de biblioteca que ests creando, indica el nombre: titulo_mentor.
Guarda la pgina con el nombre biblioteca1 (Archivo>Guardar como...). Comprueba el resultado en el navegador.
A continuacin haz doble clic sobre el elemento de biblioteca titulo_mentor en el panel Activos. Se abrir un cuadro con su contenido para poder modificarlo. Selecciona el texto y cambia sus propiedades a Tamao 24 pxeles, Estilo negrita y color #FF6600. Guarda los cambios al elemento de biblioteca titulo_mentor.
RECOMENDACIN. Al modificar un elemento de la Biblioteca, Dreamweaver pedir confirmacin para actualizar este elemento en las pginas donde se haya insertado. Con hacer clic en Actualizar se harn efectivos todos los cambios.
Crea otra pgina bsica HTML e inserta el elemento de biblioteca modificado anteriormente (titulo_mentor). Para ello slo tienes que arrastrarlo con el botn izquierdo del ratn desde el panel Activos, seccin Biblioteca, hasta la posicin donde lo quieras colocar dentro de la pgina web.
Guarda la nueva pgina con el nombre biblioteca2 (Archivo>Guardar como...). Comprueba el resultado en el navegador.
332
Captulo 13. Comportamientos
Dreamweaver CS4. Captulo 13. Comportamientos 333
Captulo 13. COMPORTAMIENTOS Los comportamientos son acciones que ocurren como respuesta a eventos producidos sobre algunos elementos por parte de los usuarios, como por ejemplo: validar un formulario cuando el usuario hace clic sobre un determinado botn, resaltar un texto o el color de fondo de un botn cuando el usuario pasa el ratn sobre ellos, hacer clic en un mapa de imgenes,... Los eventos son procedimientos asociados a un elemento que genera algn tipo de suceso provocando la ejecucin de una accin. La recarga de la pgina, cada cierto tiempo, que est visitando un usuario la pgina, pasar el ratn por un objeto de la pgina, son ejemplos de eventos. En Dreamweaver los comportamientos aaden cdigo escrito en un lenguaje de programacin denominado Javascript a la pgina HTML, que es el que permitir que los visitantes de una pgina Web interacten con ella. 13.1. Insertar comportamientos Es posible vincular un comportamiento a un documento HTML completo, o bien, a un elemento particular como por ejemplo un vnculo, una imagen, un mapa de imgenes, un elemento de formulario, Para cada uno de los comportamientos resultante de un evento es posible especificar ms de una accin. Para aplicar un comportamiento, independientemente del elemento al cual lo queramos vincular, debemos seguir una serie de pasos: Seleccionar el elemento HTML al cual aplicaremos el comportamiento. Si queremos aplicar un comportamiento a todo un documento HTML debemos indicarlo haciendo clic con el ratn en la etiqueta <body> del selector de etiquetas situado en la parte inferior de la ventana del documento. A continuacin activamos el Panel Comportamientos si no est ya activado, mediante el men Ventana>Comportamientos. Tambin es posible activar dicho panel mediante la combinacin de teclas Mays+F4.
Figura 13.1. Panel Comportamientos. Dreamweaver CS4. Captulo 13. Comportamientos
334
Figura 13.2. Men Ventana>Comportamientos.
A continuacin hacemos clic en el botn Aadir comportamiento del Panel Comportamientos. Al hacerlo aparecer un men emergente con diferentes acciones, de entre las cuales deberemos elegir una. Algunas de estas acciones aparecern en un tono ms claro que el resto; esto se debe a que en este momento no existen los elementos adecuados en la pgina que estamos diseando para aplicar dichas acciones y, por tanto, no estn activas.
Figura 13.3. Men de acciones. Dreamweaver CS4. Captulo 13. Comportamientos
335
En este men aparecen adems de las acciones dos entradas de men que merecen ser detalladas: Mostrar eventos para: esta opcin nos permitir especificar los eventos que queremos mostrar, en funcin del navegador que elijamos de la lista desplegable que aparece al seleccionarla. Esto es debido a que algunos eventos no son compatibles con todos los navegadores por lo que habr que especificar para qu navegador queremos mostrar la lista de eventos.
Figura 13.4. Navegadores para seleccionar eventos.
o Obtener ms comportamientos: al seleccionar esta opcin Dreamweaver se conectar a la pgina Web oficial de Adobe con el objetivo de poder descargar alguna actualizacin que contenga ms comportamientos. Una vez seleccionada la accin deseada aparecer un cuadro de dilogo en el cual podremos especificar los parmetros concretos para esa accin. Dichos parmetros variarn en funcin de la accin escogida. Una vez indicados dichos parmetros y tras hacer clic en el botn Aceptar la accin aparecer en el Panel Comportamientos.
Figura 13.5. Cuadro de dilogo de la accin Ir a URL. Dreamweaver CS4. Captulo 13. Comportamientos
336
Una vez aadida la accin podemos modificar el evento que la desencadena. De forma predeterminada aparece uno de ellos seleccionado en la lista desplegable de eventos; lo podremos cambiar a nuestro gusto escogiendo el evento adecuado.
Figura 13.6. Eventos desencadenadores de acciones.
RECOMENDACIN. Si insertamos varios comportamientos para un mismo elemento stos se ejecutarn en orden correlativo comenzando por el primero de ellos, aunque este orden se puede cambiar desde el propio Panel Comportamientos.
13.2. Modificar comportamientos Para modificar un comportamiento que hayamos aplicado previamente a algn objeto, el proceso a llevar a cabo es similar a la operacin de alta: Simplemente debemos seleccionar el objeto del que queremos modificar dicho comportamiento. A continuacin nos dirigimos al Panel Comportamientos y seleccionamos el comportamiento, haciendo clic con el botn izquierdo del ratn sobre el nombre del evento. Llegados a este punto tenemos varias posibilidades: o Para modificar el evento que desencadena el comportamiento, seleccionamos dicho evento y elegimos el valor que queramos de entre los disponibles en la lista desplegable que aparece. Dreamweaver CS4. Captulo 13. Comportamientos
337
o Para modificar el orden en el que se ejecutarn los eventos, en el caso de que haya varios asociados al comportamiento, seleccionamos aqul del que vamos a cambiar el orden y hacemos clic en los botones segn corresponda. o Para editar los parmetros asociados al comportamiento, hacemos doble clic con el ratn en el nombre del comportamiento, modificamos los parmetros en el cuadro de dilogo mostrado y hacemos clic en el botn Aceptar para aplicar los cambios. o Para eliminar un comportamiento lo seleccionamos con el ratn y hacemos clic en el botn Quitar evento o bien presionamos la tecla Supr. 13.3. Acciones de comportamiento Vamos a ver en este apartado las acciones asociadas a los comportamientos ms usuales a la hora de disear un sitio Web. Para ms informacin sobre el resto de acciones, podemos consultar la ayuda incluida dentro del propio Dreamweaver. Las acciones incluidas en Dreamweaver se han diseado para que sean compatibles con la mayora de los navegadores modernos. Sin embargo, algunos navegadores no son compatibles con JavaScript y, adems, muchos usuarios navegan con JavaScript desactivado en sus navegadores. Para obtener la mejor compatibilidad en distintas plataformas, se recomienda incorporar interfaces alternativas incluidas en etiquetas <noscript> para que las personas sin JavaScript puedan usarel sitio. Abrir ventana del navegador Este comportamiento nos permite mostrar una URL en una nueva ventana de un navegador. Para esta nueva ventana podemos especificar parmetros tales como: tamao de la ventana, ttulo de la ventana, atributos (que aparezcan barras de desplazamiento o no, que se permita modificar el tamao de la ventana,...).
RECOMENDACIN. Si no se especifica ningn valor para estos atributos, la ventana se mostrar con las mismas caractersticas que la ventana desde la cual se lanza.
El aspecto del cuadro de dilogo de parmetros para esta accin sera el siguiente:
Figura 13.7. Cuadro de dilogo Abrir ventana del navegador. Dreamweaver CS4. Captulo 13. Comportamientos
338
Los parmetros que podemos especificar son los siguientes: Mostrar URL: en este cuadro de texto indicamos el archivo o direccin de la pgina Web que se debe mostrar en la ventana que se debe abrir. Podemos utilizar el botn Examinar para localizar el archivo en nuestro sitio local. Ancho y alto de la ventana: indicando estos valores podemos establecer la anchura y altura de la ventana a abrir en pxeles. Atributos: o Barra de herramientas de navegacin: indicamos que se presente aquella barra en la que se muestran los botones del navegador atrs, adelante, inicio y actualizar. o Barra de mens: para mostrar o no, la barra que incluye los mens tpicos de cualquier navegador: archivo, edicin, ver, ir y ayuda. o Barra de herramientas de ubicacin: para mostrar u ocultar la barra que incluye el campo de texto en el cual indicar la URL a la que nos queremos desplazar. o Barra de despl. si necesarias: para mostrar las barras de desplazamiento siempre que estas sean necesarias porque el contenido exceda de la zona visible. o Barra de estado: para mostrar u ocultar la barra situada en la parte inferior de la ventana en la cual el navegador muestra distintos mensajes. o Selectores de cambio de tamao: para permitir al usuario modificar el tamao de la ventana, bien arrastrando la esquina inferior izquierda, o bien, haciendo clic en el botn Maximizar situado en la esquina superior derecha del navegador. o Nombre de la ventana: nombre descriptivo para la nueva ventana que se crear. Una vez que hayamos establecido los valores para los distintos parmetros, hacemos clic en el botn Aceptar y la accin ser aplicada al comportamiento que estamos manejando.
Ejercicio
El objetivo de este ejercicio ser insertar un hipervnculo al cual le aadiremos un comportamiento de forma que, al hacer clic sobre el mismo, se abrir una nueva ventana del navegador mostrando el contenido de una pgina web alojada en Internet.
Crea una nueva pgina bsica HTML.
Escribe Ministerio de Educacin y dale estilo subrayado desde el men Formato. Con el texto seleccionado, activa el Panel Comportamientos si no est ya activado, mediante el men Ventana>Comportamientos.
Haz clic en el botn para crear un comportamiento sobre dicho texto. Dreamweaver CS4. Captulo 13. Comportamientos
339
Selecciona Abrir ventana del navegador y especifica las siguientes caractersticas:
o Mostrar URL: http://www.mepsyd.es/portada.html o Ancho de la ventana: 600 pxeles. o Alto de la ventana: 400 pxeles. De entre todas las barras disponibles para una ventana de navegador, activaremos: o Barra de herramientas de navegacin, o Barra de estado, o Barras de desplazamiento, siempre que sean necesarias.
Figura 13.8. Cuadro de dilogo Abrir ventana del navegador.
El evento, si no sale por defecto seleccionado, deber ser onClick.
Guarda el documento con el nombre comportamientos1 y comprueba que funciona correctamente en diversos navegadores.
Cambiar propiedad Esta accin se utiliza para cambiar la propiedad de un objeto como respuesta a un evento provocado por el usuario. Podemos cambiar propiedades como el color de fondo de un formulario, el tamao de una capa, las propiedades de los campos de un formulario, En funcin del navegador utilizado ser posible modificar unas propiedades u otras.
Figura 13.9. Cambiar propiedad. Dreamweaver CS4. Captulo 13. Comportamientos
340
En este caso podremos especificar los siguientes valores para esta accin: Tipo de elemento: podemos escoger el tipo de elemento del cual queremos modificar una propiedad: una capa, un formulario, una imagen, un campo de texto,
Figura 13.10. Tipo de elemento desplegado. ID de elemento: al elegir un tipo de elemento, automticamente aparecen en esta lista todos los objetos contenidos en la pgina HTML de ese tipo. Entre todos ellos deberemos escoger uno. Propiedad: Seleccionar: seleccionamos la propiedad a modificar de entre las que aparecen en la lista desplegable en funcin del navegador Web elegido de entre los que aparecen en la segunda lista.
Figura 13.11. Seleccionar propiedad desplegado. O Introducir: si en lugar de seleccionar una propiedad deseamos introducirla manualmente, este es el campo adecuado para ello que deberemos activar. Nuevo valor: este campo se utiliza para que introduzcamos el nuevo valor que debe tener la propiedad que debe ser modificada. Comprobar navegador Este comportamiento no se utiliza a partir de Dreamweaver 9. Para obtener acceso a l, deberemos seleccionar el elemento de men ~Ya no se utiliza en el men Aadir comportamiento del panel Comportamientos. Dreamweaver CS4. Captulo 13. Comportamientos
341
Figura 13.12. ~ Ya no se utiliza. Se usa el comportamiento Comprobar navegador para enviar a los visitantes a distintas pginas, dependiendo de las marcas y versiones de sus navegadores. Por ejemplo, puede resultar conveniente que los visitantes que utilicen Netscape Navigator 4.0 vayan a una pgina diferente a aquella a la que van los que utilizan Internet Explorer 4.0. Resulta til adjuntar este comportamiento a la etiqueta <body> de una pgina que sea compatible prcticamente con cualquier navegador (y que no use ninguna otra secuencia JavaScript). De esta manera, los visitantes que visiten la pgina con JavaScript desactivado podrn ver parte del contenido. Otra posibilidad consiste en adjuntar este comportamiento a un vnculo nulo (como <a href="javascript:;">) y que la accin determine el destino del vnculo en funcin de la marca y la versin del navegador del visitante. Los pasos para aadir este comportamiento sern los siguientes: Seleccionamos un objeto y elecutamos ~Ya no se utiliza > Comprobar navegador en el men Aadir comportamiento del panel Comportamientos. Se abre el cuadro de dilogo Comprobar navegador en el cual determinamos el criterio de separacin que deseamos aplicar a los visitantes: por tipo de navegador, por versin de navegador o por ambas. Dreamweaver CS4. Captulo 13. Comportamientos
342
Figura 13.13. Comprobar navegador. Especificamos una versin de Netscape Navigator. En los mens emergentes que aparecen al lado, seleccionamos las opciones de destino (Ir a URL, Ir a Alt URL y Permanecer en esta pgina). Aqu deberemos especificar cmo proceder si el navegador corresponde a la versin de Netscape Navigator especificada o una versin posterior y cmo proceder en caso contrario. Especificamos una versin de Internet Explorer y seleccionamos opciones de destino de la misma forma que en el paso anterior. Seleccionamos una opcin en el men Otros navegadores para especificar cmo se debe proceder si el navegador no es Netscape Navigator ni Internet Explorer. Permanecer en esta pgina es la mejor opcin para los navegadores distintos de Netscape Navigator e Internet Explorer, ya que la mayora de ellos no son compatibles con JavaScript y, si no pueden leer este comportamiento, permanecern en la misma pgina de todos modos. Introducimos las rutas y los nombres de archivo del URL y el URL alternativo en los cuadros situados en la parte inferior del cuadro de dilogo. Si introducimos un URL remoto, deberemos introducir el prefijo http:// adems de la direccin www. Hacemos clic en Aceptar y comprobamos que el evento predeterminado es el correcto. Si no lo es, seleccionaremos otro evento o cambiaremos el navegador de destino en el submen Mostrar eventos para Comprobar plug-in Usamos el comportamiento Comprobar plug-in para remitir a los visitantes a distintas pginas dependiendo de si tienen instalado el plug-in en cuestin. Por ejemplo, puede resultar conveniente que los visitantes vayan a una pgina si tienen Shockwave y a otra distinta si no lo tienen. No es posible detectar plug-ins especficos en Internet Explorer con JavaScript. No obstante, la seleccin de Flash o Director har que se aada el cdigo VBScript adecuado a la pgina para Dreamweaver CS4. Captulo 13. Comportamientos
343
detectar los plug-ins en Internet Explorer en Windows. La deteccin de plug-ins es imposible con Internet Explorer en Mac OS. El procedimiento para aplicar este comportamiento es el siguiente: Seleccionamos un objeto y a continuacin seleccionamos Comprobar plug-in en el men Aadir comportamiento del panel Comportamientos.
Figura 13.14. Comprobar plug-in. Se abre el cuadro de dilogo Comprobar plug-in y seleccionamos un plug-in en el men Plug-in o activamos Introducir y escribimos el nombre exacto del plug-in en el cuadro de texto contiguo. Deberemos utilizar el nombre exacto del plug-in. En el cuadro de texto Si se encuentra, ir a URL, especificaremos un URL para los visitantes que dispongan del plug-in. Si especificamos un URL remoto, deberemos incluir el prefijo http:// en la direccin. Si dejamos en blanco este campo, los visitantes permanecern en la misma pgina. En el cuadro De lo contrario, Ir a URL, especificaremos una URL alternativa para los visitantes que no dispongan del plug-in. Si dejamos en blanco este campo, los visitantes permanecern en la misma pgina. Debemos especificar qu debe hacerse si la deteccin de plug-ins no es posible. De forma predeterminada, cuando la deteccin resulta imposible, se enva al visitante al URL indicado en el cuadro De lo contrario. Para enviar al visitante a la primera URL (si se encuentra), seleccionamos la opcin Ir siempre al primer URL si no es posible detectar. Cuando est seleccionada, esta opcin hace que se d por hecho que el visitante dispone del plug-in, a no ser que el navegador indique explcitamente que el plug-in no est presente. En general, seleccionaremos esta opcin si el contenido del plug-in es parte integrante de la pgina; si no lo es, desactivaremos esta opcin. Dreamweaver CS4. Captulo 13. Comportamientos
344
Figura 13.15. Cuadro de dilogo Comprobar Plug-in. Esta opcin afecta slo a Internet Explorer; Netscape Navigator siempre detecta los plug- ins. Pulsamos Aceptar y comprobamos que el evento predeterminado es el correcto. Si no lo es, seleccionaremos otro evento o cambiaremos el navegador de destino en el submen Mostrar eventos para.
Controlar Shockwave o SWF Este comportamiento no se utiliza a partir de Dreamweaver 9. Para obtener acceso a l, deberemos seleccionar el elemento de men ~Ya no se utiliza en el men Aadir comportamiento del panel Comportamientos.
Figura 13.16. Men Controlar Shockwave o SWF. Se usa el comportamiento Controlar Shockwave o SWF para reproducir, detener, rebobinar o ir a un fotograma de un archivo Shockwave o SWF. Dreamweaver CS4. Captulo 13. Comportamientos
345
Este comportamiento slo afecta a animaciones situadas en la lnea de tiempo principal. No controla las animaciones que tienen lugar dentro de clips de pelcula. Para que aparezca activo en el men Aadir Comportamiento deberemos tener insertado y seleccionado en nuestro documento HTML un archivo Shockwave o SWF. Entonces, una vez seleccionado el comportamiento Controlar Shockwave o SWF se abre el cuadro de dilogo correspondiente y en el mismo seleccionamos una pelcula del men Pelcula; Dreamweaver presenta automticamente una lista con los nombres de todos los archivos SWF o Shockwave que hay actualmente en el documento. (En concreto, Dreamweaver presenta una lista con todos los nombres de los archivos con las extensiones .dcr, .dir, .swf o .spl que estn en las etiquetas <object> o <embed>.). Especificaremos en este cuadro si deseamos reproducir, detener, rebobinar o ir a un fotograma de la pelcula. La opcin Reproducir reproduce la pelcula empezando en el fotograma en que se produce el comportamiento.
Figura 13.17. Cuadro de dilogo Controlar Shockwave o SWF. Por ltimo, aceptamos y comprobamos que el evento predeterminado es el correcto. Arrastrar elemento PA El comportamiento Arrastrar elemento PA permite al visitante arrastrar un elemento con posicin absoluta (PA). Usaremos este comportamiento para crear puzzles, controles deslizantes y otros elementos mviles de interfaz. Se puede especificar la direccin en la que el visitante puede arrastrar el elemento PA (en horizontal, vertical o en cualquier direccin), un destino hasta el que el visitante debe arrastrar el elemento PA, si el elemento PA debe ajustarse al destino cuando el elemento PA se encuentra a un cierto nmero de pxeles del destino y qu suceder cuando el elemento PA llegue al destino, entre otras opciones. Dado que la llamada al comportamiento Arrastrar elemento PA debe producirse antes de que el visitante pueda arrastrar el elemento PA, deberemos asociar Arrastrar elemento PA al objeto body (con el evento onLoad). Para poder aplicar este comportamiento podemos seguir estos pasos: Seleccionamos Insertar > Objetos de diseo > Div PA o hacemos clic en el botn Dibujar Div PA del panel Insertar y dibujamos una Div PA en la vista Diseo de la ventana del documento. Dreamweaver CS4. Captulo 13. Comportamientos
346
Hacemos clic en <body> en el selector de etiquetas, situado en la esquina inferior izquierda de la ventana de documento . Seleccionamos Arrastrar elemento PA en el men Aadir comportamiento del panel Comportamientos.
Figura 13.18. Men Arrastrar elemento PA. Si Arrastrar elemento PA no est disponible, es probable que no tengas un elemento PA seleccionado. Se abre el cuadro de dilogo Arrastrar elemento PA, que tiene dos fichas Bsico y Avanzado.
Figura 13.19. Cuadro Arrastrar elemento PA (Bsico). Veamos la ficha Bsico: Dreamweaver CS4. Captulo 13. Comportamientos
347
En el men emergente Elemento PA, selecciona el elemento PA al cual vamos a aplicarle el comportamiento. En Movimiento, seleccionamos Restringido o Sin restric.. El movimiento no restringido es adecuado para puzzles y otros juegos de arrastrar y soltar. Si hemos seleccionado movimiento restringido, el cuadro de dilogo variar para permitirnos introducir valores (en pxeles) en los cuadros Arriba, Abajo, Izda. y Dcha.
Figura 13.20. Cuadro Arrastrar elemento PA (Bsico) con Movimiento restringido. Los valores son relativos a la posicin inicial del elemento PA. Para restringir el movimiento a una regin rectangular, introduciremos valores positivos en los cuatro cuadros. Para permitir solamente el movimiento vertical, introduciremos valores positivos para Arriba y Abajo, y 0 para Izquierda y Derecha. Para permitir slo el movimiento horizontal, introduciremosvalores positivos para Izquierda y Derecha, y 0 para Arriba y Abajo. A continuacin introduciremos valores (en pxeles) en los cuadros Izda y Arriba para definir el Destino de la capa. El destino es el punto hasta el que el visitante debe arrastrar el elemento PA. Se considera que un elemento PA ha alcanzado el destino cuando sus coordenadas izquierda y superior coinciden con los valores introducidos en los cuadros Izda y Arriba. Los valores son relativos a la esquina superior izquierda de la ventana del navegador. Si hacemos clic en la opcin Obtener posicin actual el programa rellenar automticamente los campos con la posicin actual del elemento PA. En el campo Ajustar si a menos de se teclear el nmero de pxeles para determinar a qu distancia del destino el visitante debe soltar el elemento PA para que ste se ajuste al destino. Los valores altos facilitan al visitante la localizacin el destino para soltar la capa. La ficha Avanzado permite definir el manejador de arrastre del elemento PA, controlar su movimiento mientras se arrastra y desencadenar una accin al soltar dicho elemento. Dreamweaver CS4. Captulo 13. Comportamientos
348
Ficha 13.21. Cuadro Arrastrar elemento PA (Avanzado). Si desplegamos Arrastrar selector, para definir una zona determinada del elemento PA en la que el visitante debe hacer clic para arrastrarlo, seleccionaremos rea dentro del elemento; luego introduciremos las coordenadas izquierda y superior, as como los valores de ancho y alto del selector de arrastre. Esta opcin resulta til cuando la imagen contenida en el elemento PA incluye un elemento que sugiere la posibilidad de arrastrarla, como una barra de ttulo, por ejemplo. No se recomienda determinar esta opcin si lo que deseamos es que el visitante pueda pulsar en cualquier lugar del elemento PA para arrastrarlo.
Ficha 13.22. Arrastrar selector rea dentro del elemento (Avanzado). Seleccionaremos las opciones Al arrastrar que deseemos utilizar:
Selecciona Traer el elemento al frente si el elemento PA debe desplazarse a la primera posicin en el orden de apilamiento mientras se est arrastrando. Si seleccionamos esta opcin, utilizaremos el men emergente para determinar si deseamos dejar el elemento PA en la primera posicin o devolverlo a su posicin original en el orden de apilamiento. En el cuadro Llamar JavaScript, introduciremos cdigo JavaScript o un nombre de funcin para ejecutar repetidamente el cdigo o funcin mientras se est arrastrando el elemento PA. Por ejemplo, se podra escribir una funcin que controle las coordenadas del elemento PA y muestre mensajes y consejos como se est acercando o an est lejsimos para poder soltar la capa en un cuadro de texto. Dreamweaver CS4. Captulo 13. Comportamientos
349
En Al soltar, teclearemos cdigo JavaScript o un nombre de funcin en el segundo cuadro de texto Llamar JavaScript para ejecutar el cdigo o la funcin cuando se suelte el elemento PA. Seleccionaremos la opcin Slo si se ajusta cuando el cdigo JavaScript deba ejecutarse solamente si el elemento PA ha alcanzado su destino. Por ltimo pulsamos Aceptar y comprobamos que el evento predeterminado es el correcto. Ir a URL El comportamiento Ir a URL abre una nueva pgina en la ventana actual o en el marco especificado. Este comportamiento resulta til para cambiar el contenido de dos o ms marcos con un solo clic. Para aplicarlo seguiremos estos pasos: Seleccionamos un objeto y luego Ir a URL en el men Aadir comportamiento del panel Comportamientos.
Figura 13.23. Ir a URL. Se abre el cuadro de dilogo Ir a URL, en el cual podemos elegir un destino para el URL en la lista Abrir en. La lista Abrir en muestra automticamente los nombres de todos los marcos del conjunto de marcos actual y de la ventana principal. Si no hay marcos, la ventana principal es la nica opcin posible.
OBSERVACIN. Este comportamiento puede dar lugar a resultados inesperados si hay algn marco que se llame top, blank, self o parent. Los navegadores a veces confunden estos nombres con nombres de destino reservados.
Dreamweaver CS4. Captulo 13. Comportamientos
350
A continuacin hacemos clic en Examinar para seleccionar el documento que deseamos abrir o tecleamos la ruta y el nombre de archivo del documento en el cuadro de texto URL. Repetiremos el paso segundo y tercero para abrir ms documentos en otros marcos, si procede. Por ltimo, hacemos clic en Aceptar y comprobamos que el evento predeterminado es el correcto.
Figura 13.24. Cuadro de dilogo Ir a URL. Men de salto Al crear un men de salto mediante Insertar > Formulario > Men de salto, Dreamweaver crea un objeto de men y le adjunta el comportamiento del Men de salto. Normalmente no es preciso adjuntar manualmente el comportamiento Men de salto a un objeto. Un men de salto existente se puede editar de dos formas: Se pueden editar y reorganizar los elementos del men, cambiar los archivos a los que se salta y cambiar la ventana en la que esos archivos se abren haciendo doble clic en el comportamiento de Men de salto existente en el panel Comportamientos. Para ello deberemos tener seleccionado un objeto de formulario Men de salto previamente insertado en nuestro documento. Los elementos de este men se editan igual que los de cualquier men, es decir, seleccionando el men y usando el botn Valores de lista del inspector de propiedades. Si nos decidimos por la primera opcin entonces se abrir el cuadro de dilogo Men de salto en el cual podremos llevar a cabo los cambios pertinentes y luego hacer clic en Aceptar. Dreamweaver CS4. Captulo 13. Comportamientos
351
Figura 13.25. Cuadro de dilogo Men de salto. Men de salto Ir El comportamiento Men de salto Ir est estrechamente relacionado con el comportamiento anterior. Men de salto Ir permite asociar un botn Ir con un men de salto. (Para utilizar este comportamiento debe existir ya un men de salto en el documento.) Al hacer clic en el botn Ir, se abre el vnculo seleccionado en el men de salto. Los mens de salto generalmente no necesitan un botn Ir; al seleccionar un elemento de un men de salto, normalmente se carga un URL sin necesidad de que el visitante lleve a cabo ninguna otra accin. No obstante, si el visitante selecciona el mismo elemento que se encuentra ya seleccionado en el men de salto, el salto no se producir. En general, eso no importa, pero si aparece el men de salto en un marco y los elementos del men de salto contienen vnculos con pginas de otros marcos, suele ser til disponer de un botn Ir para permitir a los visitantes volver a elegir un elemento que ya est seleccionado en el men de salto. Para aplicar este comportamiento, debemos seleccionar un objeto para utilizarlo como botn Ir (generalmente una imagen de un botn) y seleccionar Men de salto Ir en el men Aadir comportamiento del panel Comportamientos. En el men Elegir men de salto, selecciona un men para que se active el botn Ir y haz clic en Aceptar. Reproducir sonido Este comportamiento no se utiliza a partir de Dreamweaver CS4. Para obtener acceso a l, debes seleccionar el elemento de men ~Ya no se utiliza en el men Aadir comportamiento del panel Comportamientos. Puedes utilizar el comportamiento Reproducir sonido para reproducir un efecto sonoro cuando el puntero pase por encima de un vnculo, para que se reproduzca msica al cargarse la pgina, etc. Dreamweaver CS4. Captulo 13. Comportamientos
352
Es posible que los navegadores precisen compatibilidad adicional con audio (como un plug-in de audio, por ejemplo) para reproducir sonidos. Dado que cada navegador utiliza un plug-in diferente, es difcil predecir exactamente cmo sonarn estos efectos. Para aplicar este comportamiento a un objeto seleccionado en un documento activo deberemos seguir estos pasos: Selecciona un objeto y ejecuta Controlar sonido en el men Aadir comportamiento del panel Comportamientos.
Figura 13.26. Controlar sonido. Hacemos clic en Examinar en el cuadro de dilogo Controlar sonido que se abre, para seleccionar un archivo de sonido o introducimos la ruta y el nombre del archivo en el cuadro Reproducir sonido. Pulsamos Aceptar y comprobamos que el evento predeterminado es el correcto.
Figura 13.27. Cuadro de dilogo Controlar sonido.
Dreamweaver CS4. Captulo 13. Comportamientos
353
Mensaje emergente El comportamiento Mensaje emergente muestra una alerta de JavaScript con el mensaje que especifiquemos. Dado que las alertas de JavaScript slo tienen un botn (Aceptar), utilizaremos este comportamiento para proporcionar informacin al usuario y no para proponer una eleccin. Puedes incrustar en el texto cualquier llamada, propiedad, variable global u otra expresin de funcin JavaScript vlida. Para incrustar una expresin JavaScript, la encerraremos entre llaves ({}). Para que aparezca una llave, tendremos que anteponerle una barra invertida (\{). Observa la siguiente llamada a modo de ejemplo: El URL de esta pgina es {window.location}, y hoy es {new Date()}.
OBSERVACIN. El navegador controla el aspecto de la alerta. Si deseas tener un mayor control sobre el aspecto, puedes usar el comportamiento Abrir ventana del navegador.
Para aplicar este comportamiento, podemos seguir los siguientes pasos: Selecciona un objeto y luego selecciona Mensaje emergente en el men Aadir comportamiento del panel Comportamientos.
Figura 13.28. Mensaje emergente. En el cuadro de dilogo Mensaje emergente que se abre, tecleamos el mensaje en el cuadro Mensaje y hacemos clic en Aceptar. Despus guardamos los cambios a nuestro Dreamweaver CS4. Captulo 13. Comportamientos
354
documento activo y comprobamos el funcionamiento del comportamiento en los navegadores.
Figura 13. 29. Ejemplo de cuadro para Mensaje emergente. Carga previa de imgenes El comportamiento Carga previa de imgenes reduce el tiempo de visualizacin mediante la creacin de un cach para las imgenes que no se muestran cuando aparece la pgina inicialmente (por ejemplo, las imgenes que se intercambiarn por comportamientos o scripts).
OBSERVACIN. El comportamiento Intercambiar imagen carga automticamente todas las imgenes resaltadas cuando se selecciona la opcin Carga previa de imgenes en el cuadro de dilogo Intercambiar imagen, por lo que no es necesario aadir manualmente la accin Carga previa de imgenes al usar Intercambiar imagen.
Para aplicar este comportamiento seguiremos estos pasos: Seleccionamos un objeto y luego ejecutamos Carga previa de imgenes en el men Aadir comportamiento del panel Comportamientos. Dreamweaver CS4. Captulo 13. Comportamientos
355
Figura 13.30. Carga previa de imgenes. En el cuadro de dilogo Carga previa de imgenes, hacemos clic en Examinar para seleccionar el archivo de imagen o tecleamos la ruta y el nombre de archivo de una imagen en el cuadro Archivo de origen de imagen.
Figura 13.31. Cuadro de dilogo Carga previa de imgenes. Utilizaremos el botn para aadir imgenes a la lista Carga previa de imgenes y el botn para quitar imgenes de la lista. Cuando hayamos terminado, slo tenemos que Aceptar y comprobar si el evento predeterminado es correcto y luego comprobarlo todo en el navegador. Definir texto de marco Utilizaremos esta accin para reemplazar el texto contenido en un marco por el que le especifiquemos en la ventana de dilogo asociada a esta accin, dentro del campo Nuevo HTML. Para aplicar este comportamiento en una pgina de marcos ejecutaremos desde el panel Comportamientos, Aadir comportamiento, Establecer texto>Definir texto de marco. Dreamweaver CS4. Captulo 13. Comportamientos
356
Figura 13.32. Definir texto de marco. Esta accin, adems del contenido del marco, va a permitir cambiar el formato del mismo de forma dinmica, slo tenemos que indicar el cdigo HTML apropiado para ello (este cdigo HTML puede incluir incluso cdigo Javascript).
Figura 13.33. Cuadro de dilogo Definir texto de marco. En este caso los parmetros a especificar son: Marco: en esta lista desplegable deberemos elegir, de entre todos los marcos de los que disponga nuestra pgina, aquel en el que queramos llevar a cabo las modificaciones oportunas. Nuevo HTML: campo en el cual incluir el nuevo cdigo HTML que queremos insertar en el marco. Dreamweaver CS4. Captulo 13. Comportamientos
357
Conservar color de fondo: este campo se utiliza para conservar el color, tanto del fondo del marco como del texto del mismo. Esto es til para casos en los que modifiquemos el formato del marco pero queramos conservar estas propiedades. Si hacemos clic en el botn Obtener HTML actual se copia en el campo Nuevo HTML, todo el cdigo incluido en la seccin body del marco para que sea ms sencilla su modificacin. Definir texto de contenedor El comportamiento Definir texto de contenedor reemplaza el contenido y el formato de un contenedor existente (es decir, cualquier elemento que pueda contener texto u otros elementos, como por ejemplo una capa (PA)) en una pgina con el contenido que especifiquemos. Dicho contenido puede incluir cualquier cdigo HTML vlido. Podemos incrustar en el texto cualquier llamada, propiedad, variable global u otra expresin de funcin JavaScript vlida. Para incrustar una expresin JavaScript, la encerramos, como hemos visto anteriormente, entre llaves ({}). Para que aparezca una llave, tendremos que anteponer una barra invertida (\{). Por ejemplo, podramos incrustar esta expresin: El URL de esta pgina es {window.location}, y hoy es {new Date()}. Seguiremos los siguientes pasos para aplicar este comportamiento: Seleccionamos un objeto y luego ejecutamos Establecer texto>Definir texto de contenedor en el men Aadir comportamiento del panel Comportamientos.
Figura 13.34. Definir texto de contenedor. En el cuadro de dilogo Definir texto de contenedor, desplegamos el men Contenedor para elegir el elemento de destino y escribimos el nuevo texto o HTML en el cuadro Nuevo HTML. Hacemos clic en Aceptar y comprobamos que el evento predeterminado es el correcto. Dreamweaver CS4. Captulo 13. Comportamientos
358
Figura 13.35. Cuadro de dilogo Definir texto de contenedor. Mostrar-Ocultar Elementos
Ejercicio
El objetivo de este ejercicio ser crear comportamientos a elementos PA, de forma que se muestren o se oculten en funcin de la interaccin del usuario con la pgina web.
Abre comportamientos1.html e inserta la imagen abu_simbel.jpg. Se encuentra en el aula virtual dentro de la carpeta Ejercicios del Captulo 13 del Material necesario para ejercicios de los Materiales de Apoyo necesario para ejercicios para que puedas descargarla desde ah y guardarla en la carpeta imagenes de tu sitio MiWeb.
A continuacin dibuja una Div PA a la derecha de la imagen que has insertado desde el panel Insertar, categora Diseo, Dibujar Div PA.
Sita el cursor dentro de la Div PA y teclea en su interior el siguiente texto: Abu Simbel. Monumento que fue mandado construir por el faran Ramss II y que fue rescatado de las aguas del Nilo en el presente siglo.
El aspecto del ejercicio hasta ahora debera ser aproximadamente el siguiente:
Dreamweaver CS4. Captulo 13. Comportamientos
359
Figura 13.36. Vista actual del ejercicio.
Selecciona el elemento PA que contiene el texto. En el Inspector de propiedades asgnale el nombre capatexto y el valor hidden a la propiedad Vis (visibilidad), para ocultarla. Comprueba que se oculta la capa al quitar la seleccin de la misma haciendo clic en cualquier parte de la pgina.
Ahora crea un comportamiento asociado a la imagen de forma que cuando el usuario pase el ratn por encima de la misma, el texto situado en el elemento PA de al lado se muestre en la pgina web. Para realizar esto necesitars crear dos comportamientos: uno que muestre el texto al pasar con el ratn por encima de la imagen y otro que lo oculte cuando el ratn salga de la zona marcada por dicha imagen.
Selecciona la imagen haciendo clic sobre ella y activa el Panel Comportamientos si no est ya activado, mediante el men Ventana>Comportamientos.
Con la imagen seccionada haz clic en el botn para agregar un comportamiento; selecciona Mostrar Ocultar elementos.
En el cuadro de dilogo Mostrar-Ocultar elementos que te aparece, selecciona el elemento PA llamado capatexto y haz clic en el botn Mostrar (recuerda que inicialmente la has ocultado). Por ltimo aplica los cambios haciendo clic en el botn Aceptar.
Dreamweaver CS4. Captulo 13. Comportamientos
360
Figura 13.37. Mostrar el elemento PA llamado capatexto.
Para hacer que dicho texto se muestre al pasar el puntero del ratn por encima de la imagen, desde el Panel Comportamientos selecciona el evento onMouseOver como accin asociada al comportamiento indicado en el punto anterior:
Panel 13.38. Seleccionar el evento onMouseover.
A continuacin debemos conseguir que el texto se oculte cuando el ratn salga de la zona delimitada por la imagen. Para ello seleccionaremos la imagen y aadiremos un nuevo comportamiento haciendo clic en el botn y seleccionando otra vez Mostrar-Ocultar elementos.
En el cuadro de dilogo Mostrar-Ocultar elementos que te aparece, selecciona capatexto y haz clic en el botn Ocultar. Aplica los cambios haciendo clic en el botn Aceptar. Dreamweaver CS4. Captulo 13. Comportamientos
361
Figura 13.39. Ocultar el elemento llamado capatexto.
Para hacer que el elemento PA se oculte al salir el cursor del ratn de la zona delimitada por la imagen, selecciona la opcin onMouseOut, desde el Panel Comportamientos.
Figura 13.40. Seleccionar el evento onMouseOut.
Una vez aplicados los dos comportamientos a la imagen seleccionada, el panel Comportamientos deber mostrar ambos.
Figura 13.41. Panel Comportamientos con dos comportamientos agregados. Dreamweaver CS4. Captulo 13. Comportamientos
362
Guarda los cambios a comportamientos1.html y comprueba su funcionamiento en los navegadores.
Establecer texto de la barra de estado Esta accin se utiliza para mostrar un texto en la barra de estado del navegador (situada en la parte inferior del mismo), por ejemplo para indicar una determinada informacin al pasar con el ratn por encima de un vnculo o de una imagen, ... Se debe tener en cuenta que no todos los navegadores aceptan este texto en la barra de estado, adems de que mucha gente no presta atencin a la informacin que se muestra en dicha barra. Para agregar este comportamiento deberemos ejecutar desde el botn del panel Comportamientos, Establecer texto>Establecer texto de la barra de estado. Se abre el cuadro de dilogo correspondiente y el nico parmetro que hay que indicar en este caso es el texto que se desea mostrar, en el campo Mensaje.
Figura 13.42. Cuadro establecer texto de la barra de estado. Establecer imagen de barra de navegacin Usaremos el comportamiento Establecer imagen de barra de navegacin para convertir una imagen en una imagen de barra de navegacin o para cambiar la visualizacin y las acciones de imgenes en una barra de navegacin. Una vez ejecutado el comportamiento Establecer imagen de barra de navegacin y abierto el cuadro de dilogo correspondiente, utilizaremos la ficha Bsico del mismo para crear o actualizar una imagen de barra de navegacin, cambiar el URL que debe mostrarse cuando el usuario hace clic en un botn de la barra de navegacin y seleccionar una ventana distinta para mostrar un URL. Dreamweaver CS4. Captulo 13. Comportamientos
363
Figura 13.43. Ficha Bsico del cuadro Establecer imagen de barra de navegacin. Utilizaremos la ficha Avanzado del cuadro de dilogo Establecer imagen de barra de navegacin para cambiar el estado de las imgenes de un documento en funcin del estado del botn actual. De forma predeterminada, al hacer clic en un elemento de una barra de navegacin, todos los dems elementos recuperan su estado Arriba. La ficha Avanzado nos permite establecer un estado diferente para una imagen cuando la imagen seleccionada se encuentre su estado Abajo o Sobre.
Figura 13.44. Ficha Avanzado del cuadro Establecer imagen de barra de navegacin. Dreamweaver CS4. Captulo 13. Comportamientos
364
Definir texto de campo de texto En este caso esta accin nos permitir sustituir el texto contenido en un campo de texto de formulario, por el que especifiquemos en el cuadro de dilogo asociado a esta accin. Seleccionamos el campo de texto al que vamos a aplicarle el comportamiento y desde el panel Comportamientos, pulsamos el botn Aadir comportamiento y ejecutamos Establecer texto>Definir texto de campo de texto.
Figura 13.45. Definir texto de campo de texto. Se abre el cuadro de dilogo correspondiente:
Figura 13.46. Cuadro Definir texto de campo de texto.
Dreamweaver CS4. Captulo 13. Comportamientos
365
En dicho cuadro deberemos especificar: Campo de texto: lista desplegable en la cual deberemos especificar aquel campo de texto (de entre los disponibles en nuestro formulario) en el que queremos realizar la sustitucin del texto. Nuevo texto: texto a incluir en el campo especificado en la lista desplegable anterior. Intercambiar imagen El comportamiento Intercambiar imagen intercambia una imagen por otra cambiando el atributo src de la etiqueta <img>. Utilizamos este comportamiento para crear sustituciones de botones y otros efectos de imgenes (incluido el intercambio de varias imgenes a la vez). Al insertar una imagen dinmica se aade automticamente un comportamiento Intercambiar imagen a la pgina.
OBSERVACIN. Dado que slo el atributo src se ve afectado por este comportamiento, el intercambio debe hacerse con imgenes que tengan las mismas dimensiones (altura y anchura) que la imagen original. En caso contrario, la imagen que se intercambia se reducir o ampliar para adaptarse a las dimensiones de la imagen original. Tambin existe un comportamiento denominado Restaurar imagen intercambiada que restaura el ltimo conjunto de imgenes intercambiadas a sus archivos de origen anteriores y que veremos a continuacin. Este comportamiento se aade automticamente siempre que se adjunta el comportamiento Intercambiar imagen a un objeto; si hemos dejamos seleccionada la opcin Restaurar al adjuntar Intercambiar imagen, no tendremos que seleccionar manualmente el comportamiento Restaurar imagen intercambiada.
Los pasos para aplicar este comportamiento son los siguientes, sobre una imagen previamente insertada y seleccionada en un documento activo: Con la imagen que vamos a intercambiar seleccionada, elegiremos Intercambiar imagen del men Aadir comportamiento del panel Comportamientos.
Se abre el cuadro de dilogo correspondiente, en el cual seleccionaremos en la lista Imgenes la imagen cuyo origen deseamos cambiar.
Dreamweaver CS4. Captulo 13. Comportamientos
366
Figura 13.47. Cuadro de dilogo Intercambiar imagen.
Pulsaremos en Examinar para seleccionar el archivo de la nueva imagen o introduciremos la ruta y el nombre de archivo de la nueva imagen en el cuadro Definir origen como.
Si tenemos ms imgenes para cambiar, repetiremos los dos pasos anteriores con ellas. Puedes usar la misma accin Intercambiar imagen para todas las imgenes que desees cambiar a la vez; en caso contrario, la accin correspondiente Restaurar imagen intercambiada no las restaurar todas. Para crear un cach para las nuevas imgenes cuando se cargue la pgina, deberemos seleccionar la opcin Carga previa de imgenes. Esto contribuye a evitar las demoras en la descarga cuando llega el momento de que aparezcan las imgenes. Por ltimo pulsamos Aceptar y comprobamos que el evento predeterminado es el correcto. Si no lo es, seleccionaremos otro evento o cambiaremos el navegador de destino en el submen Mostrar eventos para. Restaurar imagen intercambiada Esta accin va aparejada con la que acabamos de ver, denominada Intercambiar imagen. Es posible utilizarla, tal y como muestra el mensaje, nicamente despus de haber aplicado el comportamiento antes mencionado. Su misin es restaurar las imgenes intercambiadas a sus archivos de origen iniciales.
Figura 13.48. Cuadro de dilogo Restaurar imagen intercambiada. Dreamweaver CS4. Captulo 13. Comportamientos
367
Validar formulario Esta accin se utiliza en aquellos formularios en los que deseemos comprobar que la informacin que ha introducido el usuario en los distintos campos de texto es la correcta. Para ello podremos ir seleccionando los distintos campos de texto que componen nuestro formulario y estableciendo las reglas que deben cumplir cada uno de ellos para que sean rellenados correctamente, as que seleccionamos un campo de texto y desde el panel Comportamientos, pulsamos el botn y seleccionamos Validar formulario. Se abre el cuadro de dilogo correspondiente:
Figura 13.49. Parmetros de validacin de un formulario. Los parmetros asociados a esta opcin son los siguientes: Campos: en esta lista desplegable deberemos ir eligiendo los distintos campos de texto para los cuales deseamos establecer algn tipo de restriccin. Valor Obligatorio: si seleccionamos esta casilla de verificacin ser imprescindible para el usuario introducir algn valor en el campo de texto que se ha indicado en la lista anterior. Aceptar: o Cualquier cosa: el usuario podr introducir en el campo de texto cualquier carcter. o Nmero: en el campo de texto correspondiente slo se podrn introducir valores numricos. o Direccin de correo electrnico: el usuario deber indicar en el campo una direccin de correo electrnico vlida. Dreamweaver CS4. Captulo 13. Comportamientos
368
o Nmero del.. al..: el campo slo aceptar aquellos valores numricos comprendidos entre los lmites establecidos en estos dos campos. 13.4. Eventos Los eventos son los procedimientos que van a desencadenar el comportamiento asociado a un elemento. Van a depender de los navegadores, es decir, en funcin del navegador elegido dispondremos de unos eventos u otros. Tal y como vimos en el apartado anterior, podremos seleccionar para qu navegador queremos mostrar los eventos y, por tanto, con cules de estos eventos trabajaremos. Recordemos que es necesario ejecutar Mostrar eventos para desde el panel Comportamientos.
Figura 13.50. Ejemplo de Mostrar eventos para IE 6.0 Hay eventos de todo tipo, veamos algunos de ellos: onAbort se genera cuando el usuario detiene el explorador antes de que se cargue completamente una imagen. onAfterUpdate se genera cuando un elemento de datos vinculados de la pgina termina de actualizar el origen de los datos. onBeforeUpdate se genera cuando un elemento de datos vinculados de la pgina ha cambiado y va a perder foco (y, por consiguiente, va a actualizar el origen de los datos). Dreamweaver CS4. Captulo 13. Comportamientos
369
onBlur es lo contrario a onFocus. El evento onBlur se genera cuando el elemento especificado deja de ser el foco de interaccin del usuario. Por ejemplo, cuando un usuario hace clic fuera de un campo de texto despus de haber hecho clic en l, el explorador genera un evento onBlur para el campo de texto. onBounce se genera cuando el contenido de un elemento de marquesina ha alcanzado el lmite de la marquesina. onChange se genera cuando el usuario cambia un valor de la pgina, como, por ejemplo, cuando el usuario elige un elemento de un men o cambia el valor de un campo de texto y, seguidamente, hace clic en algn otro lugar de la pgina. onClick se genera cuando el usuario hace clic (pulsar y soltar) en el elemento especificado, como, por ejemplo, un vnculo, un botn o un mapa de imagen. onDblClick se genera cuando el usuario hace doble clic (pulsar y soltar rpidamente dos veces) en el elemento especificado. onError se genera cuando se produce un error en el explorador al cargar una pgina o una imagen. onFinish se genera cuando el contenido de un elemento de marquesina completa un bucle. onFocus se genera cuando el elemento especificado se convierte en el foco de interaccin del usuario. Por ejemplo, al hacer clic en un campo de texto de un formulario, se genera un evento onFocus. onHelp se genera cuando el usuario hace clic en el botn de Ayuda o elige Ayuda del men de un explorador. onKeyDown se genera en el momento en que el usuario pulsa cualquier tecla. onKeyPress se genera cuando el usuario pulsa y suelta cualquier tecla; este evento es una combinacin de los eventos onKeyDown y onKeyUp. onKeyUp se genera cuando el usuario suelta una tecla despus de pulsarla. onLoad se genera cuando termina de cargarse una imagen o una pgina. onMouseDown se genera cuando el usuario pulsa el botn del ratn. onMouseMove se genera cuando el usuario mueve el ratn dentro de los lmites del elemento especificado mientras lo seala. onMouseOut se genera cuando el cursor abandona el elemento especificado. onMouseOver genera cuando el ratn comienza a moverse desde una posicin que no seala al elemento especificado hasta una posicin que s lo seala. El elemento especificado para este evento es generalmente un vnculo. onMouseUp se genera cuando se suelta un botn del ratn que se encuentra pulsado. Dreamweaver CS4. Captulo 13. Comportamientos
370
onMove se genera cuando se mueve una ventana o un marco. onReadyStateChange se genera cuando cambia el estado del elemento especificado. Entre los estados posibles del elemento figuran uninitialized (sin inicializar), loading (cargando) y complete (terminado). onReset se genera cuando se restauran los valores predeterminados de un formulario. onResize se genera cuando el usuario cambia el tamao de la ventana del explorador o de un marco. onRowEnter se genera cuando ha cambiado el cursor de registro actual del origen de datos vinculados. onRowExit se genera cuando va a cambiar el cursor de registro actual del origen de datos vinculados. onScroll se genera cuando el usuario desplaza la pgina hacia arriba o hacia abajo. onSelect se genera cuando el usuario selecciona texto en un campo de texto. onStart se genera cuando el contenido de un elemento de marquesina inicia un bucle. onSubmit se genera cuando el usuario enva un formulario. onUnload se genera cuando el usuario abandona la pgina.
RECOMENDACIN. Si necesitas informacin adicional sobre alguno de estos eventos es posible consultarla en la pgina oficial de Adobe, en la siguiente ruta: http://www.adobe.com/es/support/dreamweaver/
371
Captulo 14. Publicacin del sitio
Dreamweaver CS4. Captulo 14. Publicacin del Sitio 372
Captulo 14. PUBLICACIN DEL SITIO 14.1. Algunas comprobaciones Comprobacin del sitio Antes de colocar nuestro sitio en Internet al alcance de cualquier usuario, es conveniente realizar una comprobacin previa en nuestro ordenador de que todas las pginas funcionan correctamente y se muestran tal y como las diseamos en un navegador web. Esta comprobacin previa se debe hacer desde tres perspectivas distintas: Comprobacin de que las pginas se muestran correctamente en los diferentes navegadores existentes: que tanto los colores, como el tipo y el tamao de las fuentes,... se mantienen y se muestran correctamente tal y como lo especificbamos al disearlas. Esto se puede hacer obteniendo una vista previa de las pginas en los navegadores de destino. Comprobacin de que no existen enlaces rotos que no llevan a ningn destino, dando sensacin de mal funcionamiento global del sitio. Comprobacin del correcto funcionamiento de la pgina en diferentes navegadores. Adems de estas comprobaciones previas es bueno tener presente estos otros puntos: Las pginas no deben tardar un tiempo excesivo en mostrar su contenido, ni en descargarse en el navegador del usuario, esto puede provocar desnimo y que el usuario cambie de pgina sin llegar a ver la nuestra. El diseo debe ser atractivo y agradable para el usuario, pero no es conveniente recargar la pgina con mucho recurso multimedia, pues podra producir el efecto contrario, que provoque rechazo debido a la sobrecarga. Igual de importante que el hecho de dotar de buenos contenidos a la pgina, es el hecho de mantener este contenido es decir, aadir noticias nuevas, secciones, ... con el fin de mantener al usuario atento a las novedades y no provocar en l desinters por nuestra pgina. Comprobacin en distintos navegadores Es conveniente realizar pruebas con distintos navegadores a medida que desarrollamos un sitio web, para no encontrarnos con la desagradable sorpresa de que una vez terminado el trabajo resulta que determinadas pginas no se ven correctamente con algn navegador. Las pruebas mnimas deberan corresponder a probar la compatibilidad de nuestras pginas con los navegadores ms utilizados por los usuarios en Internet: Internet Explorer, Netscape Navigator y Mozilla Firefox. Para realizar esta comprobacin elegimos la opcin de men Archivo>Comprobar pgina>Compatibilidad con navegadores. Dreamweaver CS4. Captulo 14. Publicacin del Sitio
373
Figura 14.1. Comprobar compatibilidad de pgina con navegadores. Una vez realizada esta operacin se abre el panel Resultados situado en la parte inferior de la ventana que nos permite observar las distintas advertencias que nos muestra Dreamweaver acerca del diseo de nuestra pgina en relacin con los distintos navegadores configurados.
Figura 14.2. Compatibilidad con navegadores. Dentro de esta misma pestaa y haciendo clic en el botn podremos seleccionar alguna de las siguientes opciones:
Figura 14.3. Opciones de compatibilidad con navegadores. Comprobar compatibilidad con navegadores: realiza la comprobacin de compatibilidad con navegadores para la pgina actual. Dreamweaver CS4. Captulo 14. Publicacin del Sitio
374
Editar lista de problemas ignorados: para mostrar u omitir la lista de errores de modificacin en un documento independiente con extensin XML. Configuracin: al seleccionar esta opcin aparecer un cuadro de dilogo en el que podremos elegir para qu navegadores deseamos realizar la comprobacin (seleccionando la casilla de verificacin al lado de su nombre) y a partir de qu versin (seleccionndola de entre la lista desplegable que aparece al lado de cada uno de ellos), en funcin de los navegadores que estimemos van a utilizar los usuarios de nuestra Web.
Figura 14.4. Opciones de configuracin de navegadores de destino. En este mismo panel Resultados abierto en la parte inferior de la ventana del documento tenemos disponibles otras opciones: Validacin: consiste en validar el cdigo para localizar errores en las etiquetas o en la sintaxis del mismo.
Figura 14.5. Ejemplo de validacin finalizada de un sitio web. Verificador de vnculos: muestra vnculos rotos, externos, y archivos hurfanos en el sitio para su posterior reparacin.
Figura 14.6. Verificador de vnculos. Dreamweaver CS4. Captulo 14. Publicacin del Sitio
375
Informes de sitios: si pulsamos sobre en esta pestaa, automticamente se abre el cuadro de dilogo Informes que nos permite generar un informe sobre el documento actual, el sitio al completo, etc., dependiendo de lo que seleccionemos en el desplegable Informe y adems seleccionar qu informe queremos generar, activando en el rbol Seleccionar informes, lo que nos resulte pertinente. Una vez activado, se activa tambin el botn Configuracin de informe ; si lo pulsamos se abre el cuadro Modificado recientemente, que nos permite avanzar an ms en el informe.
Figura 14.7. Cuadro de dilogo Informes.
Dreamweaver CS4. Captulo 14. Publicacin del Sitio
376
Figura 14.8. Cuadro de dilogo Modificado recientemente.
Una vez pulsamos Aceptar en el cuadro de la Figura 14.8. y Ejecutar en el cuadro de la Figura 14.7., el panel Resultados muestra que el informe est en progreso mediante la activacin del botn . Cuando ha terminado de ejecutarse, el panel Resultados muestra el informe en pantalla, como en el ejemplo de esta figura:
Figura 14.9. Informe finalizado.
La botonera de la parte izquierda de Resultados nos ofrece algunas opciones ms: Ms info.: esta opcin muestra un cuadro de dilogo con ms informacin acerca de cada una de las advertencias mostradas, dependiendo de la ficha que tengamos activada en el panel Resultados. Dreamweaver CS4. Captulo 14. Publicacin del Sitio
377
Figura 14.10. Ejemplo de cuadro emergente al pulsar Ms info. Guardar informe: si deseamos guardar el informe en un archivo debemos elegir esta opcin (hay que recordar que el informe se genera en un archivo temporal y que, si no lo guardamos, se borrar). Examinar informe: muestra el informe en formato de pgina Web en un navegador, con ms detalle, informando de los errores o avisos generados para cada uno de los navegadores en sus distintas versiones, y siempre referidos a la pestaa que tengamos activada en Resultados. Vista previa en navegadores Otra opcin de la que disponemos para comprobar el correcto funcionamiento de nuestro sitio web en distintos navegadores es utilizar otra herramienta disponible en Dreamweaver denominada Vista previa en el navegador. Esta herramienta est disponible a travs de los mens de la aplicacin en la ruta Archivo>Vista previa en el navegador y, a continuacin seleccionamos el navegador en el que queremos previsualizar nuestra pgina.
Figura 14.11. Archivo>Vista previa en el navegador. Esta herramienta nos va a permitir comprobar de forma rpida y a medida que desarrollamos nuestro sitio web el aspecto de las pginas en los distintos navegadores que seleccionemos. Dreamweaver CS4. Captulo 14. Publicacin del Sitio
378
Esto es conveniente porque nos permite detectar errores que podremos evitar al seguir desarrollando el sitio. Como se observa en la figura anterior, aparecen varios navegadores configurados, eligiendo cualquiera de ellos se generar una vista previa para dicho navegador. Tambin aparece otra opcin denominada Editar lista de navegadores, que nos va a permitir aadir navegadores para los cuales obtener esta vista previa. Si hacemos clic en esta opcin, aparecer el cuadro de dilogo Preferencias en el cual, y dentro de la seccin Vista previa en el navegador, podremos aadir y eliminar navegadores.
Figura 14.12. Cuadro Preferencias. Vista previa en el navegador. Lgicamente para poder realizar estas operaciones los navegadores deben haber sido instalados previamente en nuestro equipo.
RECOMENDACIN. Para comprobar la correcta visualizacin de nuestra pgina Web, deberemos tener instalado en nuestro ordenador varios navegadores. Entre los ms utilizados estn Internet Explorer, Netscape Navigator y Mozilla Firefox.
Para aadir un navegador slo tenemos que hacer clic en el botn y para eliminarlo seleccionar uno de ellos y hacer clic en el botn . De la misma forma si queremos modificar alguno de los ya configurados, slo tenemos que seleccionarlo y hacer clic en el botn Editar . Dreamweaver CS4. Captulo 14. Publicacin del Sitio
379
Si damos de alta un navegador nuevo nos aparecer un cuadro de dilogo con el ttulo Aadir navegador , y si modificamos uno ya existente aparecer otro cuadro de dilogo bajo el ttulo Editar navegador . Tanto en un caso como en el otro, los cuadros son similares. Nos permiten indicar: Nombre: nombre identificativo del navegador que estamos configurando. Aplicacin: en este campo debemos indicar la ruta donde se encuentra instalado el navegador que estamos configurando, bien escribindola manualmente o seleccionando el archivo ejecutable correspondiente al navegador haciendo clic en el botn Examinar y navegando por las distintas carpetas de nuestro disco duro. Predeterminado: para especificar de forma predeterminada en Dreamweaver si queremos que este navegador sea el navegador principal o el navegador secundario. Una vez indicados los datos necesarios, hacemos clic en el botn Aceptar para que los cambios sean aplicados. 14.2. Publicacin del sitio Una vez que tenemos nuestro sitio web completamente diseado en nuestro sistema de ficheros local y que, adems, hemos solucionado todos los errores encontrados en l, mediante las distintas herramientas antes comentadas ha llegado la hora de hacer accesible a todos los usuarios nuestro sitio web. Para ello es necesario alojar todas y cada una de las pginas que componen nuestro sitio en algn espacio en Internet. Algunos proveedores de servicios en Internet ofrecen alojamientos gratuitos, normalmente con poco espacio disponible (entre 5 y 10 Mb suele ser lo habitual) y Dreamweaver CS4. Captulo 14. Publicacin del Sitio
380
con gran cantidad de publicidad que estar presente siempre que se visite una de nuestras pginas. Con lo cual si nuestra necesidad de espacio es mayor o, si no deseamos que la publicidad interfiera y moleste a los visitantes de nuestro sitio ser conveniente contratar un espacio web con algn proveedor, lgicamente previo pago por los servicios. Antes de contratar un espacio web, debemos tener claro varios puntos: No siempre el ms caro es el mejor proveedor de servicios, es mejor comparar precios y ofertas de entre las muchas disponibles en Internet. La cantidad de espacio web necesario para alojar nuestro sitio depender de la cantidad de recursos y del tamao de los mismos que forman parte del sitio web, adems de las previsiones de crecimiento que tengamos para dicho sitio. Es bueno conocer de antemano la rapidez de acceso a las pginas alojadas por el proveedor de servicios que vayamos a contratar. Otro detalle importante es la posibilidad de disponer de estadsticas de nuestro sitio: nmero de accesos a nuestro sitio web, nmero de pginas visitadas, preferencias de los usuarios,... Si queremos que los usuarios accedan a nuestra pgina, no a travs del nombre del servidor que hemos contratado para alojar nuestro sitio Web, sino a travs de un nombre propio, es decir de un dominio, deberemos contratar dicho dominio virtual y asociarlo al servidor donde estn alojadas nuestras pginas. La mayora de los proveedores de servicios se encargan de gestionar la compra del dominio para nuestra pgina.
RECOMENDACIN. Es conveniente organizar nuestro sitio web separando los distintos contenidos que lo componen en diferentes carpetas dndoles nombres descriptivos a dichas carpetas, de forma que a simple vista podamos saber exactamente cul es la estructura de nuestro sitio.
14.3. Configuracin del acceso remoto al servidor Configuracin de la conexin remota con Dreamweaver Una vez que poseemos un espacio web en Internet para alojar nuestro sitio web, el siguiente paso a realizar es transferir todas las pginas que componen el sitio almacenadas en nuestro disco duro (sitio local) al espacio disponible en Internet (tambin denominado sitio remoto). Dreamweaver CS4. Captulo 14. Publicacin del Sitio
381
Para realizar esto, Dreamweaver dispone de una herramienta dentro de la seccin Sitio>Administrar sitios o pulsando . Al seleccionar esta opcin aparecer un cuadro de dilogo en el cual veremos todos los sitios actualmente definidos en Dreamweaver y adems podremos crear un sitio nuevo o bien, modificar uno ya existente.
Figura 14.13. Cuadro de dilogo Administrar sitios. Tanto si decidimos crear un sitio nuevo pulsando Nuevo, como modificar uno ya existente seleccionndolo en ese cuadro de dilogo y pulsando Editar, accedemos a la configuracin de un sitio web mediante el cuadro Definicin del sitio para MiWeb (MiWeb es el sitio con el que hemos trabajado durante todo el curso; dependiendo del sitio web seleccionado podr aparecer otro nombre). En este caso accedemos a la pestaa Avanzadas, categora Datos remotos, ya que en ella es donde podremos configurar la herramienta para transferir nuestro sitio local al espacio disponible en Internet: sitio remoto y las opciones de transferencia remota. Dreamweaver CS4. Captulo 14. Publicacin del Sitio
382
Figura 14.14. Configuracin avanzada de datos remotos de un sitio web. Como vemos en la lista desplegable Acceso existen muchas opciones disponibles. Para realizar esta transferencia nosotros utilizaremos la opcin FTP por ser el protocolo ms habitual para este tipo de operaciones. El protocolo FTP se basa en una arquitectura cliente / servidor, donde nuestro ordenador es el cliente y el remoto es el servidor. Con los datos que nos habr facilitado nuestro proveedor de servicios de Internet, en nuestro caso Mentor para el presente curso, y una vez elegida esta opcin deberemos completar los siguientes parmetros: Servidor FTP: nombre del servidor en el cual vamos a alojar nuestro sitio Web. En algunas ocasiones deberemos indicar en este campo un nombre completo del tipo ftp.miservidor.com. En este campo no se pueden introducir barras, ni carpetas, ni nombres de dominio. En el caso de Mentor, el nombre del servidor ftp ser todo aquello que vaya detrs de la @ en la cuenta de correo que nos proporcionaron en el aula Mentor cuando nos matriculamos en el curso; es decir, si tenemos un email de Mentor como por ejemplo mgas0012@fresno.pntic.mec.es, entonces nuestro servidor FTP se llamar fresno.pntic.mec.es. Directorio del servidor: esta opcin no siempre es necesario utilizarla, pero en el caso de que debamos colocar nuestros archivos en una carpeta especfica dentro del servidor y no en el directorio raz del sitio, ser ste el campo donde deberemos indicarlo. En el caso de Mentor, S es necesario indicar el nombre del directorio inicial remoto, que adems en nuestro caso se llamar public_html. Dreamweaver CS4. Captulo 14. Publicacin del Sitio
383
Usuario: nombre del usuario con el que nos identificaremos en el servidor remoto. En el caso de Mentor, nuestro nombre de usuario ser todo aquello que vaya delante de la @ en la cuenta de correo que nos proporcionaron en el aula Mentor cuando nos matriculamos en el curso; es decir, si tenemos un email de Mentor como por ejemplo mgas0012@fresno.pntic.mec.es, entonces nuestro nombre de usuario ser mgas0012. Contrasea: palabra clave que junto con el nombre de usuario nos va a permitir conectarnos al servidor remoto donde alojaremos nuestro sitio Web. Si no deseamos tener que introducir la contrasea cada vez que nos conectemos al servidor remoto, slo tenemos que activar la casilla de verificacin Guardar situada al lado de este campo. En el caso de Mentor, nuestra contrasea ftp ser la misma que nos proporcionaron al matricularnos en el curso para la cuenta de correo. Usar FTP pasivo: si la configuracin de la transferencia requiere de este tipo de conexin deberemos activar esta casilla. Utilizar cortafuegos: si el ordenador desde el cual se va a conectar al servidor para realizar la transferencia de archivos dispone de un cortafuegos o pertenece a una red que lo tiene, deberemos activar esta casilla y haciendo clic en el botn Configuracin de cortafuegos, indicar en la ventana que aparece el nombre del servidor que hace de cortafuegos, as como el puerto de dicho cortafuegos. Utilizar FTP seguro (SFTP): si el servidor remoto reconoce este tipo de protocolo de transferencia de ficheros es recomendable activarlo, puesto que proporcionar ms seguridad contra ataques de intrusos en las conexiones, que el protocolo FTP. Mantener informacin de sincronizacin: activar si queremos tener activada la funcin de Sincronizacin del sitio. Cargar archivos en el servidor automticamente al guardar: deberemos activar esta casilla si queremos que Dreamweaver al guardar los archivos despus de alguna modificacin los cargue automticamente en el sitio remoto. Permitir desproteger y proteger archivo: en el caso de que estemos diseando un sitio Web entre un grupo de colaboradores, esta casilla nos permitir proteger los archivos remotos para que no sufran alteraciones imprevistas. Si activamos esta casilla deberemos indicar tambin un nombre para indicar la persona que requiere la proteccin, as como una direccin de correo electrnico que permita a alguien que quiera modificar los archivos ponerse en contacto con nosotros.
Ejercicio
El objetivo de este ejercicio es definir el acceso remoto a un sitio web, configurando el espacio web que nos proporciona el Aula Mentor.
Accedemos a nuestro sitio Web. Desde el men Sitio >Administrar sitio y en el cuadro que aparece, seleccionamos el sitio con el que estamos trabajando en el curso (por ejemplo MiWeb). Hacemos clic en Editar y en el nuevo cuadro seleccionamos la ficha Dreamweaver CS4. Captulo 14. Publicacin del Sitio
384
Avanzadas y la Categora Datos remotos.
Sigue el resto de los pasos que hemos detallado en 14.3. Configuracin del acceso remoto al servidor. Configuracin de la conexin remota con Dreamweaver utilizando tus propios datos.
Configura el servidor ftp, el directorio del servidor, el usuario y la contrasea con los datos que te han proporcionado en tu Aula Mentor al matricularte en este curso.
El resto de valores los configuramos en funcin de nuestras necesidades atendiendo a las explicaciones que hemos visto en este captulo y dependiendo de las caractersticas de la conexin. Si tienes problemas en la conexin prueba a activar la opcin Utilizar FTP pasivo.
Al hacer clic en el botn Aceptar nuestro sitio remoto queda configurado y a la espera de que le sean transferidas las distintas pginas que conforman nuestro sitio web.
Si vas ahora al panel Archivos, seleccionas Vista Remota y pulsas en el botn Conectar al servidor remoto, podrs conectarte a tu sitio remoto que estar listo para comenzar a transferir archivos.
14.4. Transferencia del sitio al servidor remoto Transferencia del sitio Web Una vez configurado la conexin remota al servidor donde alojaremos nuestro sitio Web, vamos a realizar la transferencia de archivos, desde nuestro ordenador hasta el servidor remoto. El primer paso a realizar es expandir el panel Archivos si est ya activo. Caso que no est en el grupo de paneles, lo podemos activar mediante el men Ventana>Archivos o bien pulsando la tecla F8.
Figura 14.15. Panel Archivos. Vista local. Dreamweaver CS4. Captulo 14. Publicacin del Sitio
385
Desde este panel y haciendo clic en el botn Expandir/contraer , expandimos el panel de archivos y aparece una ventana dividida en dos partes. En la parte de la derecha aparecen los archivos de nuestro sitio local, mientras que en la parte de la izquierda nos mostrar los archivos del servidor remoto cuando establezcamos la conexin.
Figura 14.16. Panel Archivos expandido.
RECOMENDACIN. A pesar de que Dreamweaver nos ofrece la posibilidad de trabajar en el sitio remoto directamente, lo recomendable es trabajar siempre en modo local y cuando tengamos terminado y probado el sitio web a nuestro gusto, entonces transferirlo al servidor remoto.
Desde este panel, podremos realizar las siguientes acciones, haciendo clic en los diferentes botones que contiene: Conectar al servidor remoto: se utiliza para conectarse al servidor remoto (lgicamente antes de poder utilizar esta funcionalidad debemos haber definido un sitio remoto, tal y como hemos visto en este captulo). En el caso de que la conexin no se produzca con xito, se mostrar un mensaje de error; si por el contrario la conexin se lleva a cabo en la parte izquierda de la ventana aparecern listados los archivos alojados en el servidor remoto. Dreamweaver CS4. Captulo 14. Publicacin del Sitio
386
Figura 14.17. Archivos colocados en sitio remoto. Actualizar: nos permite actualizar los archivos colocados en el sitio remoto. La forma ms lgica de actualizar un sitio web, una vez que ya se ha alojado en el servidor remoto, es transferir slo aquellas pginas y/o elementos que hayan sufrido alguna modificacin y no transferir siempre el sitio web completo, para ello Dreamweaver dispone de una herramienta denominada Sincronizacin que resolver esta tarea por nosotros. Esta herramienta va a comparar los archivos de nuestro sistema de ficheros local, con los archivos alojados en el servidor remoto as como la fecha de la ltima vez que fueron modificados. Aquellos archivos que hayan sido modificados desde la ltima transferencia o los archivos nuevos son subidos al servidor remoto. Para activar esta herramienta elegimos la opcin Sitio>Sincronizar dentro del panel del sitio expandido y se abre el cuadro de dilogo Sincronizar archivos, que cuenta con varias opciones: Dreamweaver CS4. Captulo 14. Publicacin del Sitio
387
Figura 14.18. Cuadro de dilogo Sincronizar archivos. Sincronizar: nos va a permitir especificar sobre qu archivos queremos realizar la operacin de sincronizacin. o Todo el sitio: realizar la sincronizacin sobre todos los archivos del sitio Web. O Archivos remotos seleccionados solamente: nicamente realizar la sincronizacin sobre los archivos seleccionados previamente. Direccin: en este campo podremos indicar en qu sentido queremos que se haga la transferencia de archivos: O Colocar archivos ms nuevos en remoto: todos los archivos locales ms actuales que los remotos son transferidos al servidor remoto. o Obtener archivos ms nuevos de remoto: los archivos remotos ms actuales que los locales son transferidos a nuestro sistema de ficheros local. o Obtener y colocar archivos ms nuevos: transfiere los archivos ms nuevos tanto en el sistema de ficheros local como en el remoto. Eliminar archivos remotos no existentes en la unidad local: si activamos esta casilla, aquellos ficheros del sistema de ficheros destino que no existan en el sistema de ficheros origen sern eliminados al realizar la transferencia. Vista previa...: antes de realizar la transferencia de archivos, si lo pulsamos, abrir el cuadro de dilogo Sincroniza, que nos mostrar cules sern las operaciones que se realizarn en cada uno de los sistemas de ficheros tanto el local como el remoto; nos permite seleccionar cualquier archivo de los que van a sufrir la sincronizacin y eliminarlo, omitirlo, marcarlo como sincronizado o comparar las versiones local y remota del mismo, utilizando la botonera en la parte inferior del cuadro. Dreamweaver CS4. Captulo 14. Publicacin del Sitio
388
Figura 14.19. Cuadro de dilogo Sincroniza. Registro FTP del sitio: si durante la transferencia de archivos se produce algn tipo de error, Dreamweaver lo registra en un archivo especial que ser visible dentro del panel Resultados. Al pulsar el botn Registro FTP del sitio, este panel se activa en pantalla y podremos ver las incidencias ocurridas en la pestaa Registro FTP del Panel. Obtener archivo(s): este botn nos va a permitir transferir los archivos o carpetas que hayamos seleccionado en el sitio remoto hasta nuestro sistema de ficheros local. Colocar archivo(s): haciendo clic en este botn realizaremos la operacin inversa a la anterior, es decir nos permitir subir archivos desde nuestro equipo hasta el servidor remoto donde alojaremos nuestro sitio web. Proteger archivo(s): nos va a permitir proteger archivos para que no sean modificados sin nuestro consentimiento. Desproteger: permitir desproteger archivos que hayamos protegido con anterioridad. Estas dos ltimas opciones sern muy tiles sobre todo si trabajamos en grupo a la hora de disear nuestro sitio web. 14.5. Visualizar el sitio Web en Internet Independientemente de que hayamos transferido el sitio web utilizando Dreamweaver o un programa gestor de FTP independiente de los que se pueden encontrar en la red de forma gratuita o de pago, el acceso a la web utilizando un navegador es idntico. Centrndonos en el sitio remoto que hemos configurado en el servidor de Mentor, y al que tendremos que transferir nuestro ejercicio global siguiendo los pasos del apartado 14.4., para Dreamweaver CS4. Captulo 14. Publicacin del Sitio
389
acceder a la pgina web de nuestro usuario, debemos teclear en la barra de navegacin de un navegador web algo similar a: http://fresno.pntic.mec.es/~mgas0012. En el caso del ejemplo, la pgina principal de nuestro sitio Web se debe denominar index.html, pues si adjudicamos otro nombre, entonces deberemos escribirlo en la barra de direccin del navegador. Por ejemplo, si nuestra pgina inicial se llama inicio.html, deberamos escribir en el navegador: http://fresno.pntic.mec.es/~mgas0012/inicio.html. Por otro lado, y siguiendo con nuestro ejemplo, los archivos locales se habrn transferido tal cual los vemos en local al servidor remoto, y no dentro de una carpeta, porque si hubiera estado incluidos en el interior de una carpeta llamada por ejemplo ejercicio_global, entonces tendramos que indicarlo en la barra de direccin del navegador tecleando: http://fresno.pntic.mec.es/~mgas0012/ejercicio_global.
RECOMENDACIN. El carcter ~ se obtiene con la combinacin Alt-126 (del teclado nmerico).