CURSO DE DISEO DE PGINAS WEB

Unidad 1. Conceptos bsicos de Dreamweaver 8 (I)....................................................................................... 3 Unidad 1. Conceptos bsicos de Dreamweaver 8 (II) ..................................................................................... 7 Unidad 1. Conceptos bsicos de Dreamweaver 8 (III) .................................................................................. 10 Unidad 1. Conceptos bsicos de Dreamweaver 8 (IV).................................................................................. 13 Ejercicio 1: Mi primera pgina. ............................................................................................................. 14 Unidad 2. El entorno de trabajo (I) ................................................................................................................ 15 Unidad 2. El entorno de trabajo (II)............................................................................................................... 21 Unidad 3. Configuracin de un sitio local (I) ................................................................................................ 24 Unidad 3. Configuracin de un sitio local (II)............................................................................................... 27 Ejercicio 2 Web deportes....................................................................................................................... 34 Ejercicio 3 web animales ....................................................................................................................... 35 Unidad 4. El texto (I) ..................................................................................................................................... 36 Unidad 4. El texto (II).................................................................................................................................... 39 Unidad 4. El texto (III) .................................................................................................................................. 41 Ejercicio 4 web Deportes continuacion ................................................................................................ 46 Ejercicio 5 Web animales continuacion ............................................................................................... 46 Unidad 5. Hiperenlaces (I)............................................................................................................................. 48 Unidad 5. Hiperenlaces (II) ........................................................................................................................... 53 Ejercicio 6 Deportes Continuacin........................................................................................................ 56 Ejercicio 7 Animales Continuacin ....................................................................................................... 56 Unidad 6. Imgenes (I) .................................................................................................................................. 58 Ejercicio 8 Cocina Zonas interactivas .................................................................................................. 66 Unidad 6. Imgenes (II)................................................................................................................................. 68 Ejercicio 9 Web deportes continuacin ................................................................................................. 73 Ejercicio 10 Web animales continuacin .............................................................................................. 73 Ejercicio 11 Barra de navegacin .......................................................................................................... 74 Ejercicio 12 Texto flash........................................................................................................................ 74 Unidad 7. Tablas (I)....................................................................................................................................... 75 Ejercicio 13 Insertar tabla...................................................................................................................... 77 Unidad 7. Tablas (II)...................................................................................................................................... 79 Ejercicio 14 Cocina ampliacin............................................................................................................. 82 Unidad 7. Tablas (III) .................................................................................................................................... 85 Unidad 7. Tablas (IV) .................................................................................................................................... 89 Ejercicio 15 web deportes ampliacin tablas......................................................................................... 90 Ejercicio 16 web animales ampliacin tablas ........................................................................................ 91 Unidad 8. Marcos (I)...................................................................................................................................... 93 Ejercicio17 Deportes Ampliacin. Marcos........................................................................................... 95 Unidad 9. Formularios (I) .............................................................................................................................. 96 Unidad 9. Formularios (II)............................................................................................................................. 99 Ejercicio 18 web deportes Formulario................................................................................................. 100 Ejercicio 19 web animales Formulario ................................................................................................ 101 Unidad 10. Multimedia (I)........................................................................................................................... 102 Unidad 10. Multimedia (II).......................................................................................................................... 105 Unidad 11. Las plantillas (I) ........................................................................................................................ 106 Unidad 11. Las plantillas (II)....................................................................................................................... 108 Unidad 11. Las plantillas (III) ..................................................................................................................... 110 Unidad 12. HTML desde Dreamweaver (I)................................................................................................. 112 Unidad 12. HTML desde Dreamweaver (II) ............................................................................................... 119 Unidad 12. HTML desde Dreamweaver (III) .............................................................................................. 121 Unidad 12. HTML desde Dreamweaver (IV).............................................................................................. 123 Unidad 12. HTML desde Dreamweaver (V) ............................................................................................... 124 Unidad 12. HTML desde Dreamweaver (VI).............................................................................................. 126 Unidad 13. Otros elementos (I) ................................................................................................................... 141

Unidad 13. Otros elementos (II) .................................................................................................................. 142 Unidad 13. Otros elementos (III)................................................................................................................. 144 Unidad 14. Capas......................................................................................................................................... 146 Unidad 15. Comportamientos (I)................................................................................................................. 149 Unidad 15. Comportamientos (II)................................................................................................................ 152 Unidad 16. Comportamientos Avanzados (I) .............................................................................................. 154 Unidad 16. Comportamientos Avanzados (II)............................................................................................. 157 Unidad 16. Comportamientos Avanzados (III) ........................................................................................... 159 Unidad 16. Comportamientos Avanzados (IV) ........................................................................................... 161 Unidad 16. Comportamientos Avanzados (V)............................................................................................. 164 Unidad 16. Comportamientos Avanzados (VI) ........................................................................................... 166 Unidad 17. Estilos CSS Avanzado (I) ......................................................................................................... 168 Unidad 17. Estilos CSS Avanzado (II) ........................................................................................................ 170 Unidad 17. Estilos CSS Avanzado (III)....................................................................................................... 172 Unidad 17. Estilos CSS Avanzado (IV) ...................................................................................................... 174 Unidad 17. Estilos CSS Avanzado (V)........................................................................................................ 176 Unidad 17. Estilos CSS Avanzado (VI) ...................................................................................................... 178 Unidad 17. Estilos CSS Avanzado (VII) ..................................................................................................... 180 Unidad 17. Estilos CSS Avanzado (VIII).................................................................................................... 182 Unidad 17. Estilos CSS Avanzado (IX) ...................................................................................................... 184 Unidad 17. Estilos CSS Avanzado (X)........................................................................................................ 187 Unidad 17. Estilos CSS Avanzado (XI) ...................................................................................................... 191 Unidad 17. Estilos CSS Avanzado (XII) ..................................................................................................... 194 Unidad 17. Estilos CSS Avanzado (XIII).................................................................................................... 202 Unidad 17. Estilos CSS Avanzado (XIV).................................................................................................... 205 Unidad 18. Sitios Remotos (I) ..................................................................................................................... 208 Unidad 18. Sitios Remotos (II).................................................................................................................... 211 Unidad 18. Sitios Remotos (III)................................................................................................................... 213

Unidad 1. Conceptos bsicos de Dreamweaver 8 (I)

Qu es Dreamweaver 8

Pg. 1.1

Dreamweaver 8 es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver 8 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de Adobe, la versin caduca al cabo de 30 das, pero seguro que te animas a comprar la versin de pago de este estupendo programa.

Si no conoces las caractersticas bsicas de HTML puedes verlas aqu.

HTML bsico
Las pginas que vemos en Internet estn escritas utilizando el lenguaje HTML (Hyper Text Markup Language). Este lenguaje est basado en etiquetas que marcan el inicio y fin de cada elemento de la pgina Web. Por ejemplo, el ttulo de la pgina Web se escribe entre las etiquetas <TITLE> y </TITLE>. Como ves, ambas etiquetas consisten en poner un mismo comando entre los smbolos "<" y ">". La primera etiqueta indica inicio, y la segunda, que incluye el smbolo "/", indica final. Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan. Por ejemplo, <TABLE Border="1"> indica que la tabla tendr un borde de tipo 1. Una pgina HTML bsica tendra el siguiente aspecto: <HTML> <HEAD> <TITLE> Mi primera pgina web </TITLE> <BODY> <A href:"http://www.aulaclic.com"> Haz clic aqu para ir a aulaClic</A> resto de la pgina web </BODY>

<HTML> Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se muestra en un navegador (IExplorer, Netscape, etc). Cuando un usuario desde Internet solicita ver una pgina el servidor Web enva la pgina al navegador y este interpreta las etiquetas para dar el formato a la pgina. Cuando utilizamos Dreamweaver para crear una pgina Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el editor grfico.

Novedades de Dreamweaver 8
En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior, Dreamweaver MX 2004. Integracin de RSS: con Dreamweaver 8 podrs integrar entradas RSS provinientes de otras pginas con slo introducir la fuente y arrastrar y colocar los campos. De esta forma podrs introducir datos en forato XML fcil y cmodamente. Mejoras CSS: esta ltima versin ha mejorado mucho respecto a la compatibilidad y manejo de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS, donde ahora podrs acceder a la configuracin de cada uno de los estilos desde una lista mucho mejor dotado de una cuadrcula editable desde donde podrs modificar sus propiedades. Adems, Dreamweaver 8, aade una nueva barra de herramientas que proporciona la reproducin inmediata de los estilos para diferentes medios (pantalla, impresora, webTV, PDAs...). Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2 marcadas por la WCAG/W3C. Transferencia de archivos: Ahora con Dreamweaver 8 podrs seguir trabajando con tus archivos mientras el programa se comunica con tu servidor e incluye los archivos creados o modificados recientemente. Su sincronizacin ha mejorado notablemente siendo posible una mejor gestin de cambios, adems de pemitir en uso de bolqueo/desbloqueo de archivos para que estos no se sobreescriban. Interfaz mejorada: Los usuarios con problemas visuales podrn acceder auna opcin de Aumento de la pantaa en vista de diseo para analizar o trabajar con difcles anidamientos de tablas. Adems de la inclusin de informacin visual gracias a las guas que permitirn la medicin pxel a pxel de todos los elementos. Nueva barra de herramientas: Se ha aadido una barra de herramientas a Dreamweaver 8, podrs encontrarla en la parte lateral izquierda del modo de Cdigo, esta barra hace mucho ms accesible el cdigo al permitirnos la navegacin por etiquetas y su contraccin. Una de las nuevas novedades es la posibilidad de aadir comentarios con un slo clic. Compatibilidad: Comentaremos, adems, la compatibilidad aadida en esta versin con PHP5, Coldfusion MX 7 y Video Flash.

Editar pginas web

Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo. Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina. Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromeda Dreamweaver.

Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.

Cmo tener una pgina en Internet

Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por disponer de espacio propio en el servidor depender de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque s es aceptable para una pgina personal. Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com. En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la empresa contratada. A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de cuentas de correo electrnico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para usuarios avanzados. Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo. Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que se encuentre a disposicin de todo el mundo en Internet. Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor

manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no lo haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn.

Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en blanco. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l. Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los nombres en minscula. Algunos servidores distinguen entrre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imgen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.

Unidad 1. Conceptos bsicos de Dreamweaver 8 (II)

Arrancar y cerrar Dreamweaver 8
Veamos las dos formas bsicas de

Pg. 1.2

arrancar

Dreamweaver

8.

Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men; al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Macromedia (o Adobe si tienes las ltimas versiones), seguidamente Dreamweaver 8, hacer clic sobre l, y se arrancar el programa.

Desde el icono de Dreamweaver 8 del escritorio

Puedes arrancar Dreamweaver 8 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios tambin puedes compaginar dos sesiones de la forma que te explicamos aqu.

Compaginar dos sesiones

Aqu te explicaremos cmo conseguir tener la pantalla dividida en dos partes, una con el curso y otra con Dreamweaver 8. 1 Abrir la sesin con el curso en Internet Explorer. 2 Abrir la sesin de Dreamweaver 8. 3 Pulsar con el botn derecho sobre cualquier parte vaca de la barra de tareas, en la parte inferior de la ventana de Windows (del escritorio). Es la barra en la que se encuentra el botn Inicio. 4 Elegir la opcin Mosaico vertical. Observa como la pantalla ha quedado dividida en dos partes, como en la figura:

5 Una vez tenemos las dos sesiones con el tamao adecuado, basta hacer clic con el ratn para pasar de la una a la otra. Para volver a dejar las ventanas con su tamao normal, hacer clic en el botn Maximizar .

Esto va bien con monitores grandes ( de 17" o ms), con monitores pequeos quizs prefieras dejar las ventanas con su tamao normal e ir pasando de una a otra presionando las teclas Alt + tabulador (manteniendo pulsada Alt, presionar la tecla tabulador) o pulsando el botn correspondiente a la sesin en la barra de tareas en la ltima lnea de la pantalla.

Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botn cerrar Pulsar la combinacin de teclas ALT+F4. Hacer clic sobre el men Archivo y elegir la opcin Salir. Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedir confirmacin para guardar o no cada uno de ellos.

Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botn abrir de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+O. Hacer clic sobre el men Archivo y elegir la opcin Abrir. Hacer doble clic sobre el archivo en la ventana del sitio.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botn abrir de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+N. Hacer clic sobre el men Archivo y elegir la opcin Nuevo. Hacer doble clic sobre el archivo en la ventana del sitio. Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina bsica, HTML.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botn guardar de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+S. Hacer clic sobre el men Archivo y elegir la opcin Guardar.

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones. Hacer clic en el botn guardar todo de la barra de herramientas estndar.

Hacer clic sobre el men Archivo y elegir la opcin Guardar todo. Al tener varios documentos abiertos es fcil olvidarse de todos las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opcin guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opcin, al menos hasta que te hayas habituado a manejar el programa.

Unidad 1. Conceptos bsicos de Dreamweaver 8 (III)

PAG 1.3

Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina web sencilla, con varios estilos de texto, una imagen y un enlace a otra pgina. Crear esta pgina solo te llevar unos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el momento para descubrir lo fcil que es.

Mi primera pgina
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como puede hacerse. Abres un documento nuevo y seleccionas la Categora Pgina bsica, HTML. Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.

Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del documento. Para ello debes hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Entonces se abrir una ventana como la que aparece ms abajo.

Cambia el Ttulo por Mi primera pgina. En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color azul. Seguidamente pulsa sobre el botn Aceptar. Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en el disco duro. Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. En los navegadores ms modernos al colocar el cursor sobre una imagen aparecen estos iconos en una esquina de la imagen, si haces clic en el icono del disquete aparecer el mismo men Guardar imagen como... a que hacamos referencia anteriormente. Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web que estamos creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos.

Ahora tienes que insertar la imagen debajo de la segunda lnea de texto. En primer lugar debes situar el cursor al final de la segunda lnea y pulsar un intro (Enter) para ir a una nueva lnea. Despus debes dirigirte al men Insertar, a la opcin Imagen. En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la habas guardado, y despus seleccionarla.

Unidad 1. Conceptos bsicos de Dreamweaver 8 (IV)

PAG 1.4

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:

Si no te aparece, puedes mostrarlo a travs del men Ventana, con la opcin Propiedades. Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est contraido. Para que te aparezca desplegado debes pulsar sobre el botn , que aparece junto al nombre.

Selecciona la primera lnea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen.

Despus de esto, la apariencia de la primera lnea habr cambiado. Selecciona la imagen y las dos timas lneas de texto. Pulsa sobre el botn para centrarlos.

Una vez hayas centrado la imagen y las otras dos lneas siguientes, selecciona la segunda lnea de texto, que an no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el botn . pulsa tres veces sobre el botn y

Selecciona de nuevo la ltima lnea, y en Vnculo introduce http://www.elpais.es, para crear un enlace a esa otra pgina:

Despus de todos estos pasos, puedes ver cmo ha quedado el documento pulsando la tecla F12. Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men Archivo, desde la opcin Guardar. Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensin ha de ser htm o html. Por ejemplo, puedes llamarlo prueba1.htm.

Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus de haber seguido todos los pasos anteriores. Compara esta pgina con la tuya, para ver si lo has hecho todo bien.

Ejercicio 1: Mi primera pgina.

Sin resolver Resuelto

Unidad 2. El entorno de trabajo (I)

Pag 2.1

Vamos a ver cules son los elementos bsicos de Dreamweaver 8 , la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear pginas web.

La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes fundamentales. As conoceremos los nombres de los diferentes elementos y ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada momento, como veremos ms adelante.

Las barras

La barra de ttulo

La barra de ttulo contiene el nombre del programa (Marcromedia Dreamweaver 8) y seguidamente el nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar.

La barra de mens

La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o indispensable hacerlas desde los paneles.

La barra de herramientas estndar

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms habituales, como Abrir , Guardar , etc.

La barra de herramientas de documento

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.

La barra de estado

La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>). Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).

Los paneles e inspectores

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms importantes.

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc. Pulsando sobre el botn inferior-derecha. se despliega para mostrar ms opciones. Este botn se encuentra en la esquina

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

La barra de herramientas Insertar o panel de objetos

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al men Insertar. Los elementos estn clasificados segn su categora: tablas, texto, objetos de formulario, etc. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.

Si lo deseas puedes personalizar el rea de trabajo, te explicamos cmo hacerlo aqu

Personalizar el rea de trabajo (I)

Cambiar el aspecto del Panel de objetos

Es posible cambiar el aspecto del panel de objetos, se puede visualizar a modo de fichas, tal como aparece en la siguiente imagen:

Tambin puede tener este otro aspecto:

Para pasar del aspecto Fichas al otro hay que hacer clic sobre el botn como men.

, y seleccionar la opcin Mostrar

Para volver al aspecto Fichas, desplegamos el men Diseo (o el que est en ese momento) y seleccionamos la opcin Mostrar como fichas.

Cambiar el nombre de un grupo de paneles

Es posible cambiar el nombre de un grupo de paneles de forma sencilla. Vamos a ver como ejemplo el cambio de nombre del panel de objetos.

En estos momentos el panel se llama "Insertar", pero queremos renombrarlo como "Insert". Para ello lo primero que hay que hacer es pulsar con el botn derecho sobre la zona del nombre sobre el botn con el siguiente aspecto , ambos situados a los extremos superiores del panel. o hacer clic

Entonces se mostrar el siguiente men, en el que habr que elegir la opcin Cambiar nombre de grupo de paneles.... Despus de esto se mostrar una ventana en la que se podr introducir el nuevo nombre del panel

Cambiar la agrupacin de los paneles

La mayora de los paneles y los inspectores aparecen agrupados junto a otros en una misma ventana flotante. Para cambiar la agrupacin de un panel o de alguna de sus pestaas es necesario, en primer lugar, seleccionar el panel y la pestaa deseados.

Por ejemplo, vamos a ver cmo cambiar la agrupacin de la pestaa Capas del panel Diseo. Como puede apreciarse en la imagen, la pestaa Capas ya est activa. Seguidamente hay que hacer clic sobre el botn con el siguiente aspecto , o pulsar con el botn derecho sobre la zona del nombre del panel o de la pestaa.

Para cambiar la agrupacin del panel a otro grupo diferente es necesario dirigirse a Agrupar Capas con, despus de lo cual debe mostrarse una lista de todos los paneles, pudiendo seleccionar uno de ellos. De este modo Capas dejara de estar incluida en el panel Diseo, y aparecera en ese otro panel.

Personalizar el rea de trabajo (II)

Cambiar los mtodos abreviados de teclado
Los mtodos abreviados de teclado son las combinaciones de teclas que permiten acceder a algunas opciones sin la necesidad de moverse a travs de los mens. Para modificar las combinaciones de teclas hay que dirigirse al men Edicin, a la opcin Mtodos abreviados de teclado.

En esta nueva ventana es necesario seleccionar un comando y una de las combinaciones de la lista de Mtodos abreviados, situar el cursor en el campo Pulse tecla, seguidamente pulsar la combinacin de teclas deseada, y por ltimo hacer clic sobre el botn Cambiar. Es posible que no se permita modificar las combinaciones de teclas del conjunto seleccionado, por ser combinaciones que provienen de fbrica, por lo que se pedir confirmacin para crear una copia modificable del conjunto. Hay que tener tambin en cuenta que no se permite asignar a un comando una combinacin de teclas que ya est asignada a otro diferente.

Acoplar y desacoplar grupos de paneles

Para facilitar la organizacin de los paneles flotantes es posible acoplarlos a la derecha o izquierda del rea de trabajo, en un grupo de paneles. Para mover un panel, ya sea para acoplarlo o desacoplarlo de un grupo de paneles, simplemente hay que pulsar sobre la zona de puntos que se encuentra junto al nombre del panel, y mantener pulsado el ratn mientras se arrastra el panel hacia el lugar deseado. Los grupos de paneles pueden mostrarse y ocultarse pulsando sobre el botn que tiene el siguiente aspecto . Tambin pueden mostrarse y ocultarse todos los paneles pulsando la tecla F4, o a travs de una opcin del men Ventana. Al ocultar los paneles la ventana de trabajo queda ms grande, por lo que estas opciones son de gran utilidad.

Unidad 2. El entorno de trabajo (II)

Vistas de un documento

Pag 2.2

Puedes cambiar la vista del documento a travs de la barra de herramientas de documento.

La vista Diseo La vista Diseo permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente.

La vista Cdigo

La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No permite tener directamente una referencia visual de cmo va quedando el documento segn se va modificando el cdigo.

La vista Cdigo y Diseo La vista Cdigo y Diseo permite dividir la ventana en dos zonas. La zona superior muestra el cdigo fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.

La ayuda
A travs del men Ayuda puedes: Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde puedes buscar por temas, por ndice o por contenido, si seleccionas la opcin Utilizacin de Dreamweaver o simplemente pulsando F1. Acceder a tutoriales (opcin Primeros pasos con Dreamweaver). Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las etiquetas HTML. Acceder al Centro de servicio tcnico de Dreamweaver en la web. Acceder al Foros en lnea de Dreamweaver.

Unidad 3. Configuracin de un sitio local (I)

Pag 3.1

En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las propiedades de los documentos, como puede ser el color de fondo.

Introduccin
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que va a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podr verlo en Internet. La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc. Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL genrica. Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.com en el navegador, ste intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el caso de que no existiera ninguna pgina con el nombre index.htm.

Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el sitio en Dreamweaver. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios.... Recuerda que a travs del panel Archivos, pestaa Archivos, se puede acceder a cada uno de los sitios creados y a la opcin Administrar sitio.

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad. Por supuesto, pueden existir varios sitios locales en un mismo ordenador. Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana en la que definir las caractersticas del sitio.

Las caractersticas del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda. Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella. Vamos a ver los datos que hay que editar para la categora Datos locales. Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se encuentra el sitio dentro del disco duro local. Despus, si se desea, a travs de la categora Mapa de diseo del sitio puede definirse la pgina principal del sitio, de la que colgarn el resto de documentos HTML dentro del sitio, si en la carpeta raz del sitio existe una pgina con el nombre index.htm, Dreamweaver la coger por defecto. Estas tres caractersticas son las imprescindibles para definir un sitio local. Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es

necesario establecer los datos del servidor en el que estar el sitio remoto. Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio. Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa Bsicas, en vez de la pestaa Avanzadas.

Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo. Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men desplegable de la pestaa Archivos.

Unidad 3. Configuracin de un sitio local (II)

Vistas del sitio
Es posible visualizar un sitio en el panel Archivos o en una ventana.

Pag 3.2

El panel Archivos se puede abrir a travs del men Ventana, opcin Archivos. Tambin pulsando F8.

Para cambiar de una vista a otra hay que pulsar sobre el botn y de la ventana.

que aparece en la parte superior del panel

Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio. En esta imagen se visualizan el mapa del sitio y el sitio local. En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm, ya que ste ha sido definido como pgina principal del sitio y contiene vnculos hacia los otros dos.

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc.

En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a travs del sitio, es posible actualizar automticamente las pginas para que si hacen referencia a un objeto que ha cambiado, despus no se produzcan problemas al visualizarlas. Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar a esta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados. Simplemente hay que pulsar sobre el botn Actualizar.

Subir Archivos al servidor

Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers subir los archivos al sitio que hayas contratado o conseguido gratuitamente. Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers ir subiendo uno a uno cada archivo y creando las carpetas t mismo. Este proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Sino los enlaces no funcionarn correctamente y es posible que algunas imgenes no se muestren. Para subir los archivos via web debers seguir las instrucciones que te proporcionar tu servidor. La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior. Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el Explorador de Windows) y, obviamente, nos es mucho ms til para subir los archivos. Uno de los programas gratuitos (si no es con fines comerciales) ms utilizados es SmartFTP, desdesu pgina web podrs descargarte el programa y su traduccin al espaol. Una vez instalado, abre el programa y haz clic en Archivo y luego en Nuevo Navegador Remoto para crear una nueva cuenta FTP.

Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus pginas: Host, Usuario y Contrasea. Rellena los campos y haz clic en OK. Se conectar automticamente y podrs ver una carpeta donde podrs copiar los archivos que hayas creado. Para ello, haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos de tu disco duro. Busca la carpeta que definiste como Sitio local y copia todos los archivos que quieras subir seleccionndolos a la vez y arrastrndolos a la carpeta (remota) del servidor.

Vers como el programa empieza a copiar la informacin de tu disco a Internet. Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer...) y vers el sitio en Internet!

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta public_html y sube tus archivos all.

Propiedades del documento

Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades de la pgina. Este cuadro se puede abrir de tres modos diferentes: Pulsar la combinacin de teclas Ctrl+J. Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men contextual la opcin Propiedades de la pgina. Se abrir el cuadro de dilogo siguiente:

Las propiedades estn organizadas en categoras. En la categora Aspecto, como ves en la imagen anterior, encontramos las propiedades: Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que segn los colores de la imagen ser necesario establecer unos u otros colores para el texto, as como que no es conveniente tener un gif animado como fondo. Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso de no haber establecido ninguna imagen de fondo. Tamao: permite definir el tamao de la letra. Color del texto: es el color de la fuente. Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de mrgen solo funcionan para Netscape Navigator. Ninguno de estos mrgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarn en los navegadores.

En la categora Ttulo/Codificacin encontramos la propiedad: Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de documento de Dreamweaver.

En la categora Vnculos encontramos las propiedades:

Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas. Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido visitados o no. Vnculos activos: es el color de los vnculos activos. Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado. En la categora Imagen de rastreo encontramos las propiedades:

Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se mostrar en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla grfica sobre la que crear el documento. Transparencia: permite establecer la opacidad de la imagen de rastreo.

Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador. Para ver cmo comprobar el tamao de los documentos, pulsa aqu .

Comprobar tamao para optimizar la carga

Si las pginas tienen muchos elementos (imgenes, tablas, etc.) y son muy grandes, posiblemente tarden mucho tiempo en mostrarse totalmente en el navegador. Esto no es nada recomendable, ya que los usuarios pueden perder la paciencia, y no visitar ms nuestra pgina. Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy elevado. Dreamweaver permite calcular automticamente el tiempo de descarga de las pginas. Para ello hay que dirigirse al men Edicin, a la opcin Preferencias.

En esta nueva ventana lo primero que hay que hacer es seleccionar una Categora. En este caso nos interesa la de Barra de estado. En ella habr que establecer una Velocidad de conexin. En Espaa 56,0 es la velocidad de los mdems normales, pero podemos elegir otra diferente, por ejemplo si pensamos que la mayora de nuestros posibles clientes tienen conexiones rpidas.

Una vez establecida una velocidad de conexin, y aceptados los cambios, Dreamweaver calcular el tamao y el tiempo de descarga de la pginas a partir de esa velocidad de conexin. Hay que tener en cuenta que el tamao de descarga de una pgina no solo se calcula a partir del tamao de esa pgina en disco, sino que hay que considerar tambin el tamao de las imgenes que aparecen en ella, y del resto de elementos. Cuando en la ventana de documento de Dreamweaver est abierta alguna pgina, se mostrarn su tamao y su tiempo de descarga en la barra de estado. Por ejemplo, esta pgina que ests viendo tiene un tamao de descarga de 19K, y se presupone un tiempo de descarga de 5 segundos, ya que en la barra de estado de la ventana de documento aparecen estos datos entre el tamao de la ventana de documento y el panel de propiedades , representados por 19K/5 s.

Los colores
Para asignar colores es posible desplegar una paleta de colores como sta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior. Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. Tambin es posible personalizar los colores a travs del botn parte superior de la paleta. de la

Los colores pueden asignarse a travs de los botones:

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la pgina, que tienes ms arriba. , lo que hace El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris que se despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero hexadecimal del color en el recuadro blanco. Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor #3399FF, el botn quedara del siguiente modo: .

Ejercicio 2 Web deportes

Enunciado Deportes. 1 Crear un sitio local con el nombre Deportes, cuya carpeta raz sea la carpeta deportes, que se encuentra dentro de la carpeta ejerciciossinresolver. 2 Abrir el documento menu.htm. 3 Modificar sus propiedades para que el color de los vnculos, sea cual sea su estado, sea #000000 y nunca se encuentren subrayados. 4 Asgnale el color de fondo #738099 y la imagen fondo5.gif que se encuentra en la carpeta imagenes del sitio aparezca como fondo sin repeticin. 5 Haz que la fuente del documento sea Verdana 18px Negrita. 6 Abre los archivos donde.htm, instalaciones.htm, quienes.htm y reservas.htm. 7 Establece el color de fondo como #999999, selecciona la imagen fondo.gif de la carpeta imagenes del sitio como fondo y que se repita sobre el eje de las x. 8 Haz que la fuente de estos documentos sea Arial. 9 Abrir el documento marcos.htm y darle el ttulo Tu Tienda de Deportes.

10 Guardar todos los cambios y cerrar los documentos. A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que aparece si pulsas aqu.

Carpeta archivos Carpeta solucion

Ejercicio 3 web animales

1 Crear un sitio local con el nombre Animales, cuya carpeta raz sea la carpeta animales, que se encuentra dentro de la carpeta ejerciciossinresolver. 2 Abrir el documento consultas.htm y modificar sus propiedades, para que su ttulo sea Consultas. 3 Abrir el documento gatos.htm y modificar sus propiedades, para que su ttulo sea Gatos. 4 Abrir el documento perros.htm y modificar sus propiedades, para que su ttulo sea Perros. 5 Abrir el documento inicio.htm y modificar sus propiedades, para que su ttulo sea Inicio. 6 Guardar los cambios y cerrar los documentos. A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que aparece si pulsas aqu.

Carpeta archivos Carpeta solucin

Unidad 4. El texto (I)

Pag 4.1

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto estilos creados por nosotros mismos, no predefinidos.

Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, aunque sean menos que las que se nos ofrecen a travs del men Texto.

Formato: Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o preformateado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetar que hayan varios espacios en lugar de solo uno. Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una nica fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se ver con la fuente Arial, pero si esta no existe se ver en Helvetica.

Tamao: Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, centmetros, etc... Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la pgina. Si no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto por defecto ser el negro. Estilo: Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs del men Texto tambin se puede, entre otras cosas, subrayar el texto. Esta opcin no aparece en el panel de Propiedades ya

que de normal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un vnculo. Alinear: A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Lista: Estos botones permiten crear listas con vietas o listas numeradas. Sangria: Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de mrgen que se establece a ambos lados del texto. En este caso caso los botones se refieren a sangra a la izquierda del texto.

Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades.

Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas. Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opcin de lista correspondiente, ya sea a travs del inspector de propiedades, o a travs del men Texto. La lista con vietas (desordenada) se selecciona a travs del botn , mientras que la lista numerada

(ordenada) se selecciona a travs del botn

Ejemplo de lista numerada (ordenada):

1. 2. 3. 4. Preparar la mochila 1. Sacar los libros de ese da 2. Introducir los libros del da siguiente Ponerme el pijama Lavarme los dientes Poner el despertador

Ejemplo de lista con vietas (desordenada):

Perro Gato Aves

o o
Hamster

Canario Loro

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario aadir una sangra en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. A travs del men Texto, opcin Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algn lugar de la lista para que se active este submen. En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipo de nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el que comenzar el recuento.

Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.

Unidad 4. El texto (II)

Caracteres Especiales

Pag 4.2

A veces necesitars introducir caracteres especiales en tus pginas. Debido al modo editor de Diseo de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como , , , , .. de forma rpida por si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los crear, debers introducirlo dos veces utilizando la opcin que vamos a ver a continuacin.

Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable de la imagen de la derecha. Slo coloca el puntero del ratn sobre Caracteres especiales y vers una lista rpida de los caracteres ms utilizados que no pueden ser introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la lista y aparecer en la vista de Diseo. Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir una ventana desde donde podrs seleccionar caracteres entre una lista bastante ms amplia:

Estilos CSS. Introduccin

En el men Texto, opcin Estilo, aparecen una serie de estilos predefinidos que pueden aplicarse al texto seleccionado.

Los estilos CSS estn en hojas de estilo de actualizacin automtica (tambin denominadas Hojas de Estilo en Cascada) se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamao, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignacin de esos mismos valores a otras partes del texto. Tambin algunas de sus opciones pueden utilizarse para definir atributos de imgenes y otras caractersticas que no permitan definir los estilos HTML en versiones anteriores, como el color de fondo para el texto, etc. Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo tipo, como puede ser la etiqueta A HREF, que corresponde a los hiperenlaces. De este modo, todos los hiperenlaces de la pgina adquiriran la apariencia definida en ese estilo. Un estilo CSS no es ms que un conjunto de reglas de formato que controlan el aspecto del contenido de una pgina Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una pgina, desde la posicin precisa de elementos hasta el diseo de fuentes y estilos concretos. Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualizacin; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automticamente.

Unidad 4. El texto (III)

Crear un Estilo Personalizado

Pag 4.3

Con Dreamweaver 8, las caractersticas que apliquemos a un texto crearn automticamente estilos CSS que se incrustarn en el documento actual y se aplicarn nicamente sobre l. Vemoslo: Para crear un Estilo CSS personalizado: 1. En el documento, se selecciona el texto al que se desea aplicar caractersticas concretas. 2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los atributos de la fuente y del prrafo que queramos.

Automticamente Dreamweaver crear un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... segn los nombres de los estilos ya creados. Aparecer el nombre Estilo1 en el cuadro Estilo del panel Propiedades.

Tambin se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qu tipo de texto se va a aplicar. Para ello desplegamos la lista de estilos y seleccionamos la opcin Cambiar nombre... Aparecer un cuadro de dilogo para que introduzcamos el nuevo nombre como la imagen inferior.

Si lo deseas, puedes aprender ms sobre el panel CSS aqu

El Panel CSS (I)

Veamos cmo funciona el panel CSS .

El Panel CSS
Hemos visto como Dreamweaver nos permite crear estilos de una forma muy rpida y sencilla, los estilos creados de esta manera se agrupan en una hoja de estilos que se encuentra incrustada en nuestro documento, pero tambin podemos utilizar estilos que se encuentren en hojas externas al documento. Este particularidad es muy til cuando diseamos un sitio web con varias pginas ya que permite definir una sla hoja de estilos que utilizarn todas las pginas del sitio y as facilitar el diseo. Vamos a ver cmo funcionan las hojas de estilo a travs del panel CSS pestaa Estilos CSS, que puede abrirse a travs del men Ventana, opcin Estilos CSS. Existen otras alternativas para abrir este panel, una es pulsando Mays+F11, o puedes hacer clic en el botn CSS que aparece en el Inspector de Propiedades. Para simplificar las explicaciones llamaremos panel Estilos CSS a la pestaa Estilos CSS del panel CSS. En este panel aparecen las hojas de estilos asociadas al documento, los estilos contenidos en cada hoja de estilos y unos botones en la parte inferior que nos permiten realizar cambios en los estilos.

Como puedes ver en la imagen, en la parte inferior del panel puedes ver una lista de las propiedades que forman parte del estilo, podrs editarlas con un slo clic y actualizarlas o aadir nuevas haciendo clic en el vnculo Aadir propiedad. Desde los botones podrs ordenar las propiedades de diferentes maneras. Con el primer botn mostrars todas las propiedades ordenadas por categoras (Fuente, Fondo, Bloque, Borde, etc..); tambin puedes mostrarlas ordendas de la A a la Z con el segundo botn. Como predeterminado se muestran nicamente las propiedades utilizadas (las cuales podrs mostrar haciendo clic en el tercer botn). Si la parte del pie del panel no fuese visible prueba a modificar su tamao colocando el cursor en el borde inferior y haciendo clic arrstralo hasta que sus dimensiones te dejen verlo.

El Panel CSS (II)

Crear un nuevo estilo

Para crear un nuevo estilo dentro de una hoja, seleccionamos la hoja en el panel CSS y pulsamos el botn que sirve para crear un nuevo estilo en la hoja de estilos seleccionada o en otra nueva. A continuacin aparece una ventana como sta:

En ella puede especificarse el Nombre: del estilo, (sin espacios y comenzando con un punto). Con la opcin Clase seleccionada es posible especificar si el estilo va a ser uno personal creado desde cero. Con Etiqueta se pueden modificar los atributos de una etiqueta ya existente, en este caso en Nombre: aparece la lista de etiquetas HTML que pueden ser redefinidas, como pueden ser BODY, A, FORM, TABLE, etc. Con Avanzadas se puede redefinir el formato de una combinacin de etiquetas. En Definir en: se determina si el estilo se aade a la hoja de estilo propia del documento (Slo este documento), si se aade a una nueva hoja de estilos ((Nuevo archivo de hojas de estilo)), o si se aade a la hoja de estilos seleccionada. Despus de pulsar sobre el botn Aceptar aparecer una ventana como la que aparece a continuacin y en la que definiremos el estilo:

Eligiendo una u otra categora es posible especificar diferentes propiedades, muchas de las cuales no se podan aplicar mediante el panel de Propiedades. Por ejemplo, a travs de la categora Fondo es posible especificar el color de fondo para un bloque de texto o para la pgina entera.

Gestionar estilos CSS

Para modificar un estilo ya existente, seleccionamos el estilo a modificar en la lista de estilos del panel y hacemos clic en el botn , se abrir la ventana descrita anteriormente donde se puede definir las caractersticas del estilo. Tambin podemos abrir esta ventana pulsando con el botn derecho sobre el estilo en el panel CCS, y seleccionar del men desplegable la opcin Editar. O incluso modificarlo directamente desde la lista de propiedades que se encuentra al pie del panel. Ten en cuenta que si modificas un estilo CSS que pertenezca a una hoja de estilos vinculada, es decir, a un archivo CSS externo, todas las pginas que contengan ese estilo sern actualizadas al instante.

Para borrar un estilo de una hoja de estilos, seleccionamos el estilo en la lista de estilos del panel y hacemos clic en el botn . Como puedes ver, es bastante sencillo trabajar con estilos CSS.

Aplicar un Estilo
Para aplicar un Estilo CSS personalizado: En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sita el punto de insercin del mouse en un prrafo para aplicar el estilo a todo el prrafo. Si seleccionas un rango de texto dentro de un prrafo, el Estilo CSS slo afectar al rango seleccionado. En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Estilo.

Para practicar puedes realizar el Ejercicio paso a paso Crear estilo de clase.

Hojas de Estilos
Podemos exportar estilos que se encuentren incrustados en la pgina HTML a una nueva hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar. Se abrir el cuadro de dilogo Exportar estilos como archivo CSS que te permitir guardar todos los estilos incrustados en un nuevo archivo CSS. Esta opcin es muy til si tienes los estilos incrustados en una pgina y queremos utilizarlos en otras tambin. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier pgina que queramos utilizarlos.

Para asignar una hoja de estilos a una pgina despliega el cuadro Estilo que se encuentra en el Inspector de Propiedades y selecciona Adjuntar hoja de estilos...

En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos. Elegimos si queremos Vincular o importar la hoja de estilos. Si elegimos Vincular la hoja no se incrusta en la pgina sino que se aade a la pgina una referencia a la hoja, esto permite que cualquier cambio realizado en la hoja quede reflejado de manera automtica en todas las pginas que utilizan la hoja. Esta es la opcin ms aconsejable si vamos a utilizar el estilo en ms de una pgina, de esta forma slo ser necesario vincular cada una de los archivos que quieras qeu se vean afectados a la hoja de estilos que hayas creado. Si elegimos Importar la hoja se incrusta en la pgina. La opcin Media te permitir seleccionar el tipo de medio al que se asociar la hoja de estilos, por ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirn crear hojas de estilos para soportes diferentes. Puedes crear una para screen, que ser la que se muestre cuando navegues por Internet, y otra para print que ser la que se utilice cuando se imprima el contenido del archivo. Despus de Aceptar, la hoja con sus estilos aparecer en el panel CSS.

Ejercicio 4 web Deportes continuacion

1 Abrir el sitio Deportes. 2 Abrir el documento menu.htm. 3 Asigna la propiedad margen a 0px para todos los lados y el fondo debe ser posicionado en el centro (en el eje horizontal) y en la parte superior (en el vertical) al documento. 4 Abre los archivos donde.htm, instalaciones.htm, quienes.htm y reservas.htm. 5 Haz que el fondo sea fijo para que no se mueva si utilizamos las barras de desplazamiento. 6 En el archivo instalaciones.htm convertir las seis lneas que hacen referencia a las instalaciones en una lista desordenada. 7 Aplicar dos sangras a la lista. 8 Guardar los cambios y cerrar el documento.
Carpeta solucin

Ejercicio 5 Web animales continuacion

1 Abrir el sitio Animales. 2 Abrir el documento perros.htm.

3 Al ttulo Perros asignarle un tamao de fuente de 36px, en cursiva y negrita. 4 Renombra el estilo a titulo. 5 Al ttulo Cuidados Postnatales asignarle un tamao de fuente de 16px, en cursiva y negrita. 6 Renombra el estilo a titulo2. 7 Cambia las propiedades del documento para que tenga la fuente Georgia a 16px y el fondo de color #CCCC99. 8 Exporta estos estilos y guardalos en una hoja que vincularsa este documento. Llmala estilo.css. 9 Abrir el documento inicio.htm y asignarle la hoja de estilos estilo.css. 10 Abrir el documento consultas.htm y asignarle la hoja de estilos estilo.css. 11 Al ttulo Consultas asignarle el estilo .titulo. 12 Abrir el documento gatos.htm y asignarle la hoja de estilos estilo.css. 13 Al ttulo Gatos asignarle el estilo .titulo. 14 Al ttulo Cmo Prevenir Los Problemas Dentales? asignarle el estilo .titulo2. 15 Convertir las cuatro ltimas lneas en un lista desordenada, aplica una sangra solamente a la segunda lnea. 16 Guardar los cambios y cerrar los documentos.
Carpeta solucin Ver ejemplo de dos estilos en un mismo documento (para ver y para imprimir)

Unidad 5. Hiperenlaces (I)

Pg 5.1

Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial para cualquier pgina web.

Introduccin
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra pgina o archivo. Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.

Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo. La ubicacin es en Internet, por http://www.misitio.com/pagina/pagina1.html. Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual. Si queremos referinos a carpetas que estn por encima del nivel donde nos encontramos deberemos utilizar ../ Por ejemplo, imagina que estamos en la siguiente direccin http://www.misitio.com/pagina/informacion/index.html. En esta pgina queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, cmo podemos hacerlo? Fcil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones. El resultado de la ruta sera el siguiente: ../secciones/seccion1.html. De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html. Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. ejemplo, http://www.aulaclic.com, o

En este mtodo los enlaces se crean indicando la ruta a partir de la raz del sitio. En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier pgina del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se creara como /pagina/secciones/seccion1.html. Como puedes ver ahora el vnculo a un archivo en todas las pginas es igual porque se define dependiendo del sitio raz y no de la ubicacin donde se encuentra. Puntos de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnvulo debe ser nombre_de_documento.extension#nombre_de_punto. El punto se define dentro de un documento a travs del men Insertar, opcin Anclaje con nombre. Podramos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2

Estos tipos de enlace que hemos visto son vlidos tanto para referenciar pginas (para crear hiperenlaces) o incluso imgenes u otro tipo de objetos (como veremos en temas posteriores). Debers tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto). Por ello, es muy recomendable que utilices siempre minsculas para evitar fallos en los enlaces. Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as no tendrs problemas a la hora de referenciar tus objetos.

Crear enlaces

La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es neces objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el inspector. Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://

Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. P en Vnculo nicamente una almohadilla #.

Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.

Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a continu en el lugar en el que estaba situado el cursor. Texto: es el texto que mostrar el enlace

Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers escrib HTTP://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defec enlace relativo al documento. Si quieres que los enlaces sean relativos al sitio visita este avanzado .

Personalizar nuevos enlaces

Crear vnculos relativos automticamente

Haciendo clic en el men Sitio y seleccionando la opcin Administrar sitios... podemos editar configuracin del sitio. Bastar con seleccionarlo en el cuadro de dilogo y pulsa Editar. Se abrir la ventana de Definicin del Sitio. All selecciona la pestaa Avanzadas y en la categora Da Locales podrs ver las siguientes opciones:

Estas opciones te ayudarn a crear los enlaces de forma relativa. Selecciona Documento o Raz del sitio Vnculos relativos a: para que se creen los enlaces relativos a el documento donde se haya situado el enlac desde la raz del sitio.

Si seleccionas la opcin Raz del sitio, los enlaces se estableceran respecto a la carpeta seleccionada en campo Carpeta raz local:.

Seleccionar estas opciones no cambiar los enlaces existentes, sino que aplicar esta configuracin a vnculos que se creen a partir de ese momento.

Destino: la pgina donde se abrir la pgina, este campo se explica en el siguiente apartado. Ttulo: se trata de la ayuda contextual del vnculo, es equivalente al atributo ALT de las imgenes.

Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace mediante ms la tecla de acceso indicada.

ndice de tabulador : Como habrs podido observar puedes saltar a travs de los enlaces pulsando la tecl podrs establecer un ndice indicando la prioridad del enlace y as configurar el modo en el que actuar el saltos.

Destino del enlace

El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que aparece a travs del men Insertar, opcin Hipervnculo.

_blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. _self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador. No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se volvern a ver en el tema de Marcos.

Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace.

Unidad 5. Hiperenlaces (II)

Formato del enlace

Pg 5.2

En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo tiempo, puede adquirir tres colores diferentes que pueden especificarse a travs de las propiedades de la pgina. Estos tres colores diferentes son los que se asignan como color de vnculo, de vnculo activo, y de vnculo visitado. Aqui tienes un vnculo de ejemplo: www.aulaclic.com

Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Aqui tienes dos vnculos similares de ejemplo:

Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto ocurre deb el campo Borde del inspector de propiedades de la imagen vale uno (1), mientras que para la primera ima (0).

El campo Borde sirve para ponerle un borde a la imagen, independientemente de si sta va a contener un v

Si se pone a cero (0), no aparece ningn borde, ya que esto indica que el tamao de las lneas que forman e cero (0). Puede hacerse un recuadro ms gordo incrementando el valor del campo Borde.

Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encim Suele adquirir la apariencia de una mano sealando.

Enlace a correo electrnico

Es posible especificar vnculos a direcciones de correo electrnico. Esto resulta til cuando se desea que los visitantes de la web puedan contactar con nosotros. La sintaxis del vnculo en este caso es mailto:direccindecorreo. Puede definirse el vnculo a travs de Vnculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados.

Tambin es posible a travs del men Insertar, opcin Vnculo de correo electrnico. En este caso no es posible asignar el vnculo a una imagen, solo permite introducir el texto que contendr el vnculo de correo.

Para practicar puedes realizar el Ejercicio paso a paso Crear vnculo de correo electrnico.

En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vnculos rotos. Si no sabes lo qu son o cmo solucionarlos, consltalo aqu .

Vnculos rotos
Comprobacin de vnculos rotos
Los Vnculos rotos son vnculos que no siguen una ruta vlida, o que enlazan a archivo que no existe. La existencia de estos vnculos en nuestras pginas no es nada recomendable, ya que no permite navegar correctamente a los usuarios por nuestro sitio, se producen errores. Los servidores de tipo UNIX/Linux distinguen entre maysculas y minsculas. Asi, por ejemplo, si enlazas a un archivo Perros.htm puede que el servidor no lo encuentre porque en realidad lo hayas llamado perros.htm (en minsculas). Trabajando con Windows este tipo de errores no se presentan porque no hace esta distincin. En el ejemplo anterior Dreamweaver considerara el enlace Perros.htm correcto aunque no lo fuese. Para evitar esto puedes activar la opcin Usar verificacin de vnculos entre maysculas y minsculas que se encuentra en la ventana de Definicin del Sitio, pestaa Avanzadas y categora Datos Locales. Para comprobar si nuestro sitio tiene Vnculos rotos hay que abrir el Verificador de vnculos. Una forma de abrirlo es a travs del panel Archivos. Ya sabes que el panel Archivos se puede abrir a travs del men Ventana, opcin Archivos. Tambin pulsando F8. Una vez abierto el panel Archivos, hay que dirigirse a y en el men desplegable seleccionar

Archivo, opcin Comprobar vnculos, o pulsar Mays+F8.

Entonces se muestra un nuevo panel, en el que ya es posible comprobar si existen vnculos rotos. Lo primero que hay que hacer es pulsar sobre el botn , a travs del cual se ofrece la posibilidad de elegir dnde se comprobarn los vnculos rotos. Puede ser en el documento actual, en todo el sitio, o en los archivos o carpetas del sitio seleccionados previamente. A travs de Ver hay que especificar si han de mostrarse los Vnculos rotos, los Vnculos externos o los Vnculos hurfanos. Los Vnculos rotos son los vnculos que no siguen una ruta vlida, o que enlazan a archivo que no existe. Los Vnculos externos son los vnculos a documentos que se encuentran fuera del sitio, pero que no necesariamente son vnculos errneos. No comprueba si estos vnculos son correctos o no, simplemente los enumera. A travs de Vnculos hurfanos se muestran todos aquellos documentos del sitio que no estn siendo vinculados por otros, a la vez que tampoco contienen vnculos a otros documentos. Estos documentos, en ocasiones, pueden no estar siendo utilizados para nada, por lo que simplemente estn ocupando espacio en disco innecesariamente.

De estos tres tipos de vnculos, el que ms nos interesa ahora es el de los Vnculos rotos. En el panel se mostrarn todos los documentos que tienen un vnculo roto, y el documento al que cada uno de esos vnculos hace referencia.

Reparacin de vnculos rotos

Podemos reparar los vnculos rotos de dos formas: Una de ellas es pulsando dos veces sobre el nombre del documento que aparece en la lista de archivos del panel. De este modo, dicho documento se abre. Entonces es posible buscar dentro del documento el vnculo errneo y modificarlo a travs del Inspector de propiedades. La otra forma es pulsando sobre el vnculo roto, en lugar de sobre el nombre del archivo. En este caso es posible modificar directamente el nombre del documento en el panel, o buscarlo a travs del icono con forma de carpeta que aparecer a su derecha.

Ejercicios del Tema 5.

Prueba evaluativa del Tema 5.

Ejercicio 6 Deportes Continuacin

1 Abrir el sito Deportes. 2 Abrir el documento menu.htm. 3 Crear un hiperenlace a quienes.htm en el texto Quines, escribiendo abajo como destino. 4 Crear un hiperenlace a donde.htm en el texto Dnde, escribiendo abajo como destino. 5 Crear un hiperenlace a instalaciones.htm en el texto Instalaciones, escribiendo abajo como destino. 6 Crear un hiperenlace a reservas.htm en el texto Reservas, escribiendo abajo como destino. 7 Guardar los cambios y cerrar el documento.

Ejercicio 7 Animales Continuacin

1 Abrir el sito Animales. 2 Abrir el documento inicio.htm. 3 Crear un hiperenlace a www.aulaclic.com en la imagen de aulaClic.

4 Hacer que el enlace se abra en una ventana nueva del navegador. 5 Guardar los cambios y cerrar el documento.

Unidad 6. Imgenes (I)

Pag 6.1

En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear algunas imgenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras pginas.

Introduccin
Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor informacin visual.

Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web. Esta informacin puedes consultarla aqu .

Tipos de imgenes para una web

Formatos de imagen
Las imgenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores. Los formatos ms utilizados son el GIF y el JPG, que a pesar de ser imgenes de menor calidad que las imgenes BMP, son ms recomendables debido a que ocupan menos memoria. Vamos a ver un poco ms sobre estos formatos: Formato GIF: Utilizan un mximo de 256 colores, y son recomendables para imgenes con grandes reas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animacin. Formato JPG: Las imgenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamao de la imagen es mayor y tarda ms en descargarse. Puedes incluir imgenes en otros formatos a travs de Dreamweaver, que podrn ser visualizadas en algunos navegadores. Este es el caso de las imgenes BMP y PNG.

Si introduces una imagen BMP en Dreamweaver, te aparecer un cuadrado gris La imagen solo se mostrar correctamente en el navegador.

en su lugar.

Puedes cambiar el formato de las imgenes mediante la utilizacin de algn programa de

tratamiento de imgenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Dependiendo del programa utilizado existir una mayor o menor cantidad de opciones a la hora de modificar las imgenes. Para realizar modificaciones sencillas, como la de recortar las imgenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.

Optimizacin de una imagen

Es posible optimizar una imagen insertada en un documento abierto en Dreamweaver, a travs de Fireworks. De este modo puede modificarse el formato de la imagen, la transparencia, la paleta de colores que utiliza, etc. Al modificar estos valores, lo que se pretende es que la imagen ocupe menos memoria. Para optimizar una imagen desde Dreamweaver hay que seleccionar la imagen, y seguidamente dirigirse al men Comandos, opcin Optimizar imagen en Fireworks. Desde la nueva ventana ser posible modificar los atributos de la imagen.

Transparencias
En ocasiones puede resultar til poder hacer invisibles algunos colores que forman parte de una imagen. Normalmente lo que se desea hacer transparente es el fondo.

Por ejemplo, en la imagen de la derecha el fondo puede desentonar con el fondo de la pgina, o hacer que su apariencia sea ms pobre. Lo primero que hay que hacer es establecer un color de fondo para la imagen, de modo que ste no coincida con el color de ningn otro elemento del dibujo, para que ste ltimo pueda seguir mostrndose correctamente despus de

aplicar la transparencia.

Despus podr aplicarse la transparencia sobre el color deseado, desde algn programa de tratamiento de imgenes, como puede ser Fireworks. Una forma de aplicar transparencia mediante Fireworks es a travs de los botones que puedes ver en la pantalla anterior (en optimizar imagen). Cuando se est optimizando la imagen, puede pulsarse uno de los dos primeros botones anteriores, de modo que el puntero adquiere la forma de un cuentagotas al situarse sobre la imagen o sobre la lista de colores de la imagen. Pulsando sobre un color, ste se volver transparente. La diferencia entre el primer y el segundo de estos botones, es que el primero solo permite asignar transparencia a un color, mientras que el otro permite aadirsela a varios. El ltimo botn se utiliza para quitar la transparencia de algn color.

En el caso de haber aplicado la transparencia al color azul que haca de fondo de la imagen, esta quedara como la de la derecha. La existencia de transparencia permite mejorar notablemente la esttica de nuestras pginas.

Insertar una imagen

Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es posible seleccionar una imagen a travs de la nueva ventana.

Si por algn motivo se desea insertar un BMP, este no aparecer a no ser que en Tipo se seleccione Todos los archivos.

En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicacin diferente, la imagen puede no verse al estar siendo buscada en la ubicacin anterior. Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.

La ruta en la que se encuentra la imagen aparecer representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raz del sitio o relativa al documento. Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes. En el caso de insertar la imagen como relativa al Documento la ruta sera: imagenes/aulaclic.jpg Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera: /imagenes/aulaclic.jpg

Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a la

carpeta raz del sitio. Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque s en el navegador. En Dreamweaver aparecer de la siguiente forma: Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que haba sido insertada. Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera de Dreamweaver. En ese caso, la imagen que aparecer en el navegador ser similar a esta: Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuacin.

Para practicar puedes realizar el Ejercicio paso a paso Insertar una imagen.

Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Desde aqu podrs acceder a distintas propiedades:

Desde el campo Alt podrs asignarle una ayuda contextual a la imagen, esta se mostrar cuando coloques ella, y es muy til de cara a hacer pginas accesibles ya que el texto que se escribe ser ledo por los progra para invidentes. Tambin es muy til, como ya hemos visto, si la imagen por alguna razn no puede mostrarse En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bor tamao con slo un clic.

Si le damos un valor al campo Vnculo convertiremos al imagen en un link a otra pgina. Para enlaces exte que debe empezar siempre por HTTP:// y si deseas crear un vnculo a un enlace electrnico deber empezar p

En caso de que le hayas asignado un vnculo podrs decidir en qu ventana quieres que se abra selecion en el campo Destino. Puedes asignarle un tamao de borde desde el campo Borde. Y puedes seleccionar su alineacin con respecto al texto desde el campo Alinear.

Por ltimo las opciones Espacio V y Espacio H te sern muy tiles para separar la imagen del texto y a

demasiado pegadas a l. Estos campos indican el espacio vertical y horizontal respectivamente entre la image

Cambiar el tamao de una imagen

Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen dentro de la pgina. Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola desde un editor externo, como Fireworks. Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamao de varias formas diferentes:

Imagen original

Imagen con tamao modificado

Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar til modificar el tamao de algunas imgenes aunque esto implique perder calidad. Existen dos formas de modificar el tamao.

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen.

La otra es a travs de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos aparecern en el inspector cuando est seleccionada alguna imagen. Si estos campos no contienen el tamao original de la imagen, el valor aparecer resaltado en negrita y aparecer a la derecha una flecha circular que permite volver al tamao original haciendo clic sobre ella.

Pueden crearse vnculos y comportamientos sobre partes de una imagen, sin la necesidad de que sea sob esto se le conoce como mapa de imagen. Esta informacin puedes consultarla aqu .

Mapas de imagen

Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algn tipo de com

Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que se desea crear e el inspector de propiedades de dicha imagen.

Estando seleccionada la imagen, ya es posible crear un mapa a travs de los botones del inspector de pro tienen el siguiente aspecto:

. Si no te aparecen despliega el panel Propiedades para verlo comp

Los tres ltimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden tener form circular, o libre, dependiendo del botn pulsado.

Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre la imagen. E posible dibujar el mapa sobre la imagen, pulsando sobre los lugares donde se desea que comience y finalice como sobre el resto de lugares (en orden) que se desea que recorra el mapa en el caso de forma libre.

Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un vnculo y un texto ese mapa como puedes ver a continuacin:

El primero de los botones, el de la flecha, debe pulsarse al finalizar la creacin de un mapa, para que el pun su forma original al situarse sobre una imagen. De este modo, es posible mover los puntos del mapa, en el c hayan sido creados en los sitios deseados, para ajustarlos mejor a la imagen.

Aqu tienes un ejemplo de mapa de imagen. Sita el puntero sobre la cabeza del perro, que es la que con

para ver qu es lo que ocurre.

Para practicar puedes realizar el Ejercicio paso a paso Crear mapas de imagen.

Ejercicio 8 Cocina Zonas interactivas

Objetivo.
Practicar las operaciones que hay que realizar para insertar mapas de imagen.

1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Administrar Archivos . 3 Selecciona el sitio Cocina en la ventana que se abre y presiona Listo. 4 Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 6 Selecciona la imagen, haciendo clic sobre ella. 7 Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn ms avanzadas. 8 Haz clic sobre el botn Herramienta Zona interactiva poligonal

para desplegar su

, del inspector de propiedades .

9 Pulsa, en el orden de las agujas del reloj, alrededor de la silueta del gorro de la izquierda. 10 Haz clic sobre el botn Herramienta Puntero de zona interactiva delimitar el mapa. 11 Haz clic sobre el botn Herramienta Zona interactiva poligonal

, del inspector de propiedades pa

, del inspector de propiedades .

12 Pulsa, en el orden de las agujas del reloj, alrededor de la silueta del gorro de la derecha. 13 Haz clic sobre el botn Herramienta Puntero de zona interactiva 14 Haz clic sobre el mapa del gorro de la izquierda. 15 En Vnculo, del inspector de propiedades , escribe platodelasemana.htm. 16 Haz clic sobre el mapa del gorro de la derecha. , del inspector de propiedades .

17 En Vnculo, del inspector de propiedades , escribe postredelasemana.htm. 18 Pulsa fuera del mapa para que deje de estar seleccionado y se le aplique el ltimo cambio.

19 Pulsa F12 para ver el resultado en tu navegador. Comprueba que cuando posicionas el puntero del ra gorros, en la barra de estado aparece el enlace a la pgina web correspondiente. 20 Cierra la ventana del navegador. 21 Haz clic sobre el botn Guardar Carpeta solucin de la barra de herramientas.

Unidad 6. Imgenes (II)

Imagen de sustitucin. Rollover

Pag 6.2

Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella. Este tipo de imagen suele utilizarse en los mens o en los botones para desplazarnos a travs de distintas pginas. Aqu tienes un ejemplo de rollover. Sita el puntero sobre l para ver qu es lo que ocurre.

Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen, a la opcin Imagen de sustitucin. En la nueva ventana hay que especificar la imagen original y la de sustitucin.

Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se activa, la imagen de sustitucin se carga cuando se carga la pgina, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca. El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecer en lugar de la imagen en el caso de que por algn motivo sta no pueda ser mostrada en el navegador. El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede hacerse a travs del campo Alt del inspector de propiedades de la imagen seleccionada. Para practicar puedes realizar el Ejercicio paso a paso Crear Rollover.

Botones Flash

Existen otra serie de imgenes especiales, similares a los rollovers, que suelen utilizarse para crear men pueden ser los botones Flash. Aqu tienes un ejemplo de botn Flash. Sita el puntero sobre l para ver qu es lo que ocurre.

Para insertar un botn Flash hay que dirigirse al men Insertar, Media, a la opcin Botn Flash, apar siguiente cuadro de dilogo:

A travs de Estilo: puede seleccionarse uno de los distintos formatos de botn que se ofrecen. En esta misma ventana hay que especificar tambin el Texto que mostrar el botn (Texto del botn:), as nombre con el que ser guardado (Guardar como:) y el vnculo asociado (Vinculo: y Destino:).

Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML, en lug carpeta destinada a almacenar imgenes, ya que de no ser as es posible que al intentar asignar un vnculo de propio sitio, Dreamweaver no permita guardar el botn con ese vnculo en una ubicacin diferente de la d documento. Recuerda que los botones deben guardarse con la extensin SWF. A travs del inspector de propiedades del botn Flash es posible editar de nuevo sus atributos:

Puede volver a abrirse el cuadro de dilogo anterior pulsando sobre el botn Editar, y a travs de Reproducir es posible probar el funcionamiento del botn Flash desde Dreamweaver, sin la necesidad de te abrir la pgina con algn navegador.

Despus de haber probado el funcionamiento del botn Flash, debe pulsarse de nuevo sobre el botn Rep (que habr cambiado por el botn Detener) .

Para practicar puedes realizar el Ejercicio paso a paso Crear botones Flash.

Unidad 6. Imgenes (III)

Texto Flash

Pag 6.3

El texto Flash es similar a un rollover, pero en lugar de intercambiar imgenes intercambia el color del texto. Para insertar texto Flash hay que dirigirse al men Insertar, Media, a la opcin Texto Flash. En la nueva ventana, adems del texto, el vnculo y el nombre con el que ser guardado el texto, hay que especificar el color original y el de sustitucin. Aqu tienes un ejemplo de texto Flash. Sita el puntero sobre l para ver qu es lo que ocurre.

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

Barra de navegacin
Una barra de navegacin es un conjunto de imgenes que se utilizan como opciones de men para navegar dentro de una web. Un pgina web solo puede contener una nica barra de navegacin. Para insertar una barra de navegacin hay que dirigirse al men Insertar, Objetos de imagen , a la opcin Barra de navegacin.

En la nueva ventana pueden especificarse cuatro imgenes diferentes para cada uno de los botones, el vnculo para cada uno de ellos, etc.

A travs de los botones superiores de la ventana es posible crear y eliminar botones de la barra de se crea un botn nuevo, con se elimina el botn navegacin, as como reordenarlos. Con seleccionado, y con se puede modificar la posicin del botn seleccionado. En Imagen Arriba pones la imagen que quieres mostrar inicialmente (cuando todava no se ha hecho clic). En Sobre imagen, pones la imagen que quieres mostrar cuando el usuario mueva el puntero sobre el botn y ste estaba mostrando la imagen asignada en Imagen Arriba. En Imagen abajo, pones la imagen que quieres mostrar despus de que el usuario haya hecho clic en la imagen. En Sobre mientras imagen abajo, pones la imagen que quieres mostrar cuando el usuario mueva el puntero sobre sobre el botn y ste estaba mostrando la imagen asignada en Imagen Abajo. De esta forma, si asignas imgenes distintas puedes saber cul es el ltimo botn que ha sido pulsado (el que tiene Imagen Abajo). Aqu tienes un ejemplo de barra de navegacin. Para su creacin se han utilizado las mismas imgenes para todos los botones, pero como puedes ver, en el botn del medio aparece inicialmente una imagen diferente de la de los otros dos. Esto se debe a que la opcin Mostrar "Imagen abajo" inicialmente estaba activa para este botn. Sita el puntero sobre los distintos botones, y pulsa

sobre alguno, para ver qu es lo que ocurre.

El que existan cuatro imgenes diferentes sirve para identificar cual de los vnculos est activo, cosa que con un simple rollover no puede hacerse. A travs de la opcin Insertar es posible especificar si los botones de la barra de navegacin van a aparecer de forma horizontal o vertical dentro de la pgina.

Ejercicios del Tema 6.

Prueba evaluativa del Tema 6.

Ejercicio 9 Web deportes continuacin

1 Abrir el sito Deportes. 2 Abrir el documento instalaciones.htm. 3 Insertar la imagen logodeportes.gif, que se encuentra dentro de la carpeta imagenes del sitio, a la derecha del texto Nuestras instalaciones. 4 Hacer que la alineacin de la imagen sea Medio absoluta. 5 Guardar los cambios y cerrar el documento.

Carpeta solucin

Ejercicio 10 Web animales continuacin

1 Abrir el sito Animales. 2 Abrir el documento inicio.htm.

3 Insertar un rollover al lado del ttulo Inicio, cuya imagen original sea esta: imagen de sustitucin esta: imagenes del sitio.

(pata1.gif), y la

(pata2.gif). Guardar previamente estas imagenes en la carpeta

4 La imagen de sustitucin no debe tener ninguna direccin web vinculada. 5 Guardar los cambios y cerrar el documento.

Carpeta solucin

Ejercicio 11 Barra de navegacin

Ver solucin (He copiado el cdigo fuente que crea la barra en las otras dos pginas y despus modifico la que se carga inicialmente.)

Ejercicio 12 Texto flash

Ver solucin

Unidad 7. Tablas (I)

Pag 7.1

En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamao del borde.

Introduccin
Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizar. Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseo. Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin tienes un ejemplo de tabla.

Insertar una tabla

Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.

En la nueva ventana habr que especificar el nmero de Filas y Columnas que tendr la tabla, as como el Ancho de la tabla . El Ancho puede ser definido como Pxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Pxeles es siempre el mismo, independientemente del tamao de la ventana del navegador en la que se visualice la pgina, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la pgina y se ajustar al tamao de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla. Grosor del Borde indica el grosor del borde de la tabla en pxeles, por defecto se le asigna uno (1). Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de stas. Espacio entre celdas indica la distancia entre las celdas de la tabla. Tambin se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. 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. Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de la tabla. En alinear texto indicamos dnde queremos alinear el ttulo con respecto a la tabla. En Resumen: indicamos una descripcin de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

Rellenar las celdas

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la interseccin entre una fila y una columna.

imagen y texto Texto dentro de una celda CELDA FILA

COLUMNA

Para poder insertar algn elemento en una celda, ya sea texto o imgenes, simplemente hay que situar el cursor previamente dentro de la celda deseada.

Para practicar puedes realizar el Ejercicio paso a paso Crear y rellenar una tabla.

Ejercicio 13 Insertar tabla

Practicar las operaciones que hay que reslizar para insertar una tabla y rellenar sus celdas.

1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3 Selecciona el sitio Cocina en el panel Archivos. 4 Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5 Sita el cursor en la lnea en blanco que se encuentra bajo el texto Tenemos sedes en: . 6 Haz clic sobre el men Insertar. 7 Elige la opcin Tabla. 8 En Filas: escribe 6. 9 En Columnas: escribe 4. 10 En Ancho: selecciona Pxeles y escribe 500. 11 En Borde: escribe 2. 12 Si en Relleno de celda: aparece algo escrito, brralo. 13 En Espacio entre celdas: escribe 2. 14 Haz clic sobre el botn Aceptar. 15 Rellena la tabla para que quede del siguiente modo:

Sedes de Cocina Ciudad Direccin Horario 20:30 00:00 Especialidad Reservas Casera y de Creacin S 20:30 00:30 Castellana y de Mercado No Creativa S Valencia Avda. Consitucin, 34 10:00 16:30 Gran Via, 162 12:00 17:00 20:30 01:00 Barcelona Avda. Diagonal, 23

16 Haz clic sobre el botn Guardar

de la barra de herramientas.

Ver solucin

Unidad 7. Tablas (II)

Seleccionar elementos de una tabla

Pag 7.2

Existen varias formas de seleccionar una tabla. Una de ellas es a travs del men Modificar estando el cursor en la tabla, o desplegando el men contextual de la tabla al pulsar con el botn derecho sobre ella. En ambos casos aparece la opcin Tabla, a travs de la cual se puede elegir la opcin Seleccionar tabla.

Tambin es posible seleccionar una tabla pulsando con el ratn sobre el borde que la rodea, o pulsando sobre la etiqueta <table> que aparece en la barra de estado de la ventana de documento.

Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de la tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cada columna. Junto a los anchos se encuentran unos mens desplegables (men de encabezado de la tabla y men de encabezado de la columna). Estos mens permiten acceder rpidamente a determinados comandos relacionados con la tabla.

Si tienes el cursor en la tabla y no te aparece esa zona verde puedes activar su visualizacin seleccionando la opcin Anchos de tablas del men Tabla o tambin desplegando de la barra de mens, el men Ver, Ayudas visuales, Anchos de tabla. De la misma forma se desactiva su visualizacin. Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un ancho especificado, si aparecen dos nmeros, el primer nmero corresponde al ancho especificado en las propiedades de la tabla o columna y el segundo nmero es el ancho el ancho visual que aparece en la vista de diseo, por ejemplo en la tabla anterior la primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 pxeles pero al contener una imagen que necesita ms espacio, la columna ocupar realmente 142 pxeles (ancho visual de la columna tal como aparece en la pantalla). Cuando ocurren estas diferencias podemos hacer que en el cdigo (propiedades) se cambie el ancho por el real, para ello slo tenemos que seleccionar la opcin Igualar todos los anchos del men desplegable de encabezado de tabla. En este men vemos que tambin tenemos la opcin Seleccionar tabla.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar filas, columnas o celdas. Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las distintas formas y elijas la que ms te gusta. Estas son las formas de seleccin: Puedes utilizar la opcin Seleccionar columna del men de encabezado de columna (zona verde de anchos) esto slo es vlido para seleccionar una columna. Manteniendo pulsado y arrastrando el ratn hasta seleccionar la columna/s o fila/s completamente. Tambin puede hacerse situando el cursor junto al borde superior o izquierdo de la columna o fila respectivamente, de modo que el cursor cambia a la forma de una flecha negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha flecha.

En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier sitio de la fila y sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para seleccionar la columna.

Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratn mientras se arrastra sobre las celdas deseadas. Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener pulsada la tecla Control mientras se hace clic sobre las celdas.

Formato de tabla
Las propiedades de la tabla se especifican a travs de su inspector de propiedades.

A travs del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha), el color de fondo (en Col. Fondo) o de borde de la tabla (en Col. borde ), o la imagen de fondo (en Im.). Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores.

La parte superior del inspector de propiedades en este caso sirve para especificar las propiedades del texto que se insertar dentro de la celda (o celdas) seleccionada. La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo diferentes de los especificados para la tabla global (en Fnd), el color del Borde de la celda, etc. Dos opciones que posiblemente necesites utilizar con frecuencia sern Horiz y Vert, que definen la alineacin del contenido de la celda de forma horizontal y vertical respectivamente.

Cambiar tamao de tabla y celdas

Como ya sabes, el Ancho de una tabla puede ser definido como Pxeles o como Porcentaje. El tamao de la tabla a travs del inspector de propiedades estar especificado por los valores de An (anchura) y Al (altura). Normalmente slo se especifica la anchura, no la altura.

Los valores An y Al de una celda siempre estn en Pxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamao, y no que se ajusten al contenido o al tamao de la ventana. No solo puede establecerse el tamao de las tablas y de las celdas a travs del inspector de propiedades. Tambin es posible hacerlo manteniendo pulsado el ratn sobre alguno de los bordes, arrastrndolo hacia la posicin deseada.

Ejercicio 14 Cocina ampliacin

Practicar cmo modificar las propiedades de una tabla y de sus celdas.

1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3 Selecciona el sitio Cocina en el panel Archivos. 4 Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5 Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 6 Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn desplegar sus propiedades ms avanzadas. para

7 Selecciona la tabla. Para ello puedes colocar el cursor en cualquier parte de la tabla, desplegar el desplegable del encabezado de tabla y seleccionar la opcin Seleccionar tabla. 8 En Im, del inspector de propiedades, busca la imagen fondo2.gif, que se encuentra dentro de la carpeta imagenes del sitio, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 9 Selecciona la primera fila de la tabla. Puedes hacerlo situando el cursor junto al borde izquierdo de la tabla, a la altura de la primera fila, y haciendo clic cuando el puntero adquiera la forma de flecha. 10 En Tam, del inspector de propiedades, selecciona 18. 11 En el botn Color de texto #926D38. , que se encuentra a la derecha de Tam, escribe

12 Selecciona Centro en el desplegable Horiz para centrar el texto en las celdas. 13 Pulsa el botn .

14 Selecciona la segunda y la tercera fila. Puedes hacerlo situando el cursor junto al borde izquierdo de la tabla, a la altura de la segunda fila, y haciendo clic cuando el puntero adquiera la forma de flecha. Despus debers hacer lo mismo con la tercera fila, mientras mantienes pulsada la tecla Ctrl (Control). 15 En Tam selecciona 12. 16 Selecciona Centro en el desplegable Horiz para centrar el texto en las celdas. 17 Selecciona las dos celdas que contienen el texto Valencia y Barcelona. Puedes hacerlo pulsando con el ratn sobre una de ellas, y luego pulsando Ctrl haz clic en la segunda. 18 Pulsa el botn 19 En Fnd . escribe #AEA484.

20 Selecciona las cuatro ltimas filas. 21 En Tam selecciona 10.

22 Selecciona Centro en el desplegable Horiz para centrar el texto en las celdas. 23 Pulsa el botn .

24 Pulsa fuera de la tabla para que las filas dejen de estar seleccionadas y se apliquen todos los cambios. 25 Selecciona la tabla. Para ello puedes colocar el cursor en cualquier parte de la tabla, desplegar el desplegable del encabezado de tabla y seleccionar la opcin Seleccionar tabla. 26 En Borde cambia el valor a 1. 27 Y dale el color #000000 al Borde 28 Haz clic sobre el botn Guardar . de la barra de herramientas.

Solucin

Unidad 7. Tablas (III)

Aadir y eliminar filas y columnas
Existen varias formas de aadir y eliminar filas y columnas a una tabla.

Pag 7.3

Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el men contextual de la tabla al pulsar con el botn derecho sobre ella, o bien abrir el men Modificar. En ambos casos aparece la opcin Tabla. Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn utilizar mientras que otras no. Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna. La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.

Tambin tenemos una opcin ms completa, la opcin Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarn sern filas o columnas, el nmero de ellas que se insertar, y la posicin donde se insertarn.

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opcin Eliminar fila o Eliminar columna del men Tabla.

Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr)

Para practicar puedes realizar el Ejercicio paso a paso Aadir y eliminar filas.

Anidar, dividir y combinar celdas

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas. A continuacin tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se ha insertado otra tabla.

Para anidar tablas slo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla como ya hemos visto. Combinar celdas consiste en convertir 2 o ms celdas en una sola por lo que dejar de haber borde de separacin entre una celda y otra ya que sern una sola. Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el ttulo de la tabla. En este caso habra que combinar todas las celdas de la primera fila en una sola Mientras que dividir celdas consiste en partir en dos una celda. Una de las formas de dividir y combinar celdas es a travs del inspector de propiedades.

del inspector de Si se seleccionan varias celdas pueden combinarse pulsando sobre el botn propiedades (lo encontrars en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opcin Combinar celdas de la opcin Tabla, que como ya has visto puedes dirigirte a ella a travs del men contextual de la tabla y a travs del men Modificar. Tienes que tener en cuenta que slo es posible combinar celdas contiguas, cuya combinacin pueda dar como resultado otra celda, es decir, que su combinacin d como resultado un recuadro. Por ejemplo, en la siguiente tabla no podran combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado una celda.
1 3 2 4

Para dividir una celda hay que pulsar sobre el botn del inspector de propiedades, o sobre la opcin Dividir celda de la opcin Tabla. En ambos casos, aparece una ventana como sta, en la que hay que especificar si la celda se va a dividir en filas o columnas, y el nmero de stas.

Para practicar puedes realizar el Ejercicio paso a paso Combinar celdas.

Modos de tabla
A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de visualizacin. Nosotros hemos trabajado en todo el tema con el modo estndar, y vamos a seguir trabajando con l, pero se puede pasar a los otros modos a travs del men Ver opcin Modo de tabla. Dentro de esta opcin podemos elegir entre Modo estndar, Modo de tablas expandidas, o modo de diseo.

El Modo de diseo se utiliza para dibujar pginas con un diseo determinado, basndose en tablas. Utilizando esta vista, las tablas no han de insertarse obligatoriamente en lneas de texto, como hemos hecho hasta el momento, sino que es posible insertarlas en cualquier punto de la pgina, y Dreamweaver se encargar de rellenar el espacio vaco, para que sea posible que la tabla aparezca en esa posicin. 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 facilitar la edicin. Este modo se puede utilizar para seleccionar elementos de las tablas o colocar el punto de insercin de forma precisa pero en este modo no vemos la pgina como quedar exactamente. En este curso nos limitaremos al modo estndar.

Unidad 7. Tablas (IV)

Adaptar webs a distintas resoluciones

Pag 7.4

Siempre que se crea una pgina web hay que tener en cuenta que va a ser visitada por usuarios con monitores de distintos tamaos y con distintas resoluciones. Es imposible hacer que una pgina se vea exactamente igual en todos los monitores de los usuarios que la visitan, pero hay que intentar que su visualizacin sea lo ms parecida posible. La resolucin usada de forma ms frecuente es la de 800x600, por lo que inicialmente habra que disear la pgina para dicha resolucin. Es decir, habra que crear la pgina en un monitor con dicha resolucin, para poder visualizar claramente cmo queda en el navegador, y distribuir el contenido de la pgina de la forma ms adecuada. Normalmente se utilizan tablas, ya que resultan muy tiles para distribuir el contenido de la pgina. Como recordars, el tamao de las tablas puede ser definido en pxeles o en porcentaje. Cuando el tamao de la tabla sea definido en pxeles, la tabla se ver del mismo modo independientemente del tamao de la ventana del navegador. En cambio, cuando el tamao de la tabla sea definido en porcentaje, la tabla se ajustar al tamao de la ventana del navegador, lo cual implica que el contenido de la tabla se descuadrar. Pulsa aqu para ver una pgina con tablas de tamao fijo, en pxeles. Imagina que la pgina ha sido diseada para visualizarse correctamente en un monitor pequeo de baja resolucin, cuyo tamao equivale al de la ventana del navegador que se ha abierto. Si modificas el tamao de la ventana, vers que las tablas son siempre del mismo tamao. Esto tiene un gran inconveniente, ya que si maximizas la ventana del navegador (lo que equivaldra a visualizar la pgina en un monitor grande con alta resolucin), a la derecha de las tablas aparecer un gran hueco vaco. Pulsa aqu para ver una pgina con tablas de tamao variable, en porcentaje. Si modificas el tamao de la ventana, vers que las tablas se ajustan a ella. Usar tablas con tamao variable tiene tambin un gran inconveniente, ya que si maximizas la ventana del navegador apreciars claramente cmo el contenido de las tablas se descuadra. En un principio puede parecer ms conveniente utilizar tablas con tamao fijo, aunque esto implique que aparezca el hueco vaco a la derecha, en el caso de los monitores con alta resolucin. Pero con un poco de prctica a la hora de manejar las tablas, puedes salvar el inconveniente del descuadre de la pgina y as definir pginas con tamao en porcentaje que aprovechen el ancho cuando el monitor de ms grande. No solo puede establecerse el tamao de la tabla, tambin es posible establecer el tamao de las celdas.

El tamao de la celda a travs del inspector de propiedades estar especificado por los valores de An (anchura) y Al (altura). Normalmente solo se especifica la anchura, no la altura. Los valores An y Al de una celda siempre estn en Pxeles. En la imagen anterior, la celda tiene una anchura de 208 pxeles. Para que, por ejemplo, la anchura fuera del 25 por ciento de la tabla, en An habra que escribir 25%. Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qu contiene cada una de ellas (imgenes, texto alineado a la derecha, texto alineado a la izquierda, texto de gran tamao, etc.), puede conseguirse que al visualizar la pgina en monitores de distintos tamaos y con distintas resoluciones, la apariencia sea bastante similar, o al menos que la distribucin del contenido de la pgina no se vea muy afectado por el cambio de tamao de la ventana del navegador.

Ejercicio 15 web deportes ampliacin tablas

1 Abrir el sitio Deportes. 2 Abrir el documento reservas.htm. 3 Modificar la segunda tabla de la pgina para que quede como la siguiente:
ACTIVIDAD AEROBIC STEP TARIFA/HORA 3

MUSCULACIN

4 Guardar los cambios y cerrar el documento.

Solucion

Ejercicio 16 web animales ampliacin tablas

1 Abrir el sitio Animales. 2 Abrir el documento inicio.htm. 3 Crea una tabla con las siguientes medidas:

4 Coloca la tabla en el centro de la pgina y asgnale a la tabla el color de fondo #666633. 5 A la celda de la esquina superior-derecha debers darle como fondo la imagen arriba_derecha.gif que encontrars en la carpeta imagenes. 6 A la celda de la esquina superior-izquierda debers darle como fondo la imagen arriba_izquierda.gif que encontrars en la carpeta imagenes. 7 A la celda de la esquina inferior-derecha debers darle como fondo la imagen abajo_derecha.gif que encontrars en la carpeta imagenes. 8 A la celda de la esquina inferior-izquierda debers darle como fondo la imagen abajo_izquierda.gif que encontrars en la carpeta imagenes. 9 Inserta la imagen logo_animales.gif en la segunda celda de la segunda fila. 10 Y define la alineacin de todas las celdas de la tabla como centro (en horizontal) y medio (en vertical). 11 Corta el texto que haba en el archivo antes de insertar la tabla y pgalo tal y como estaba en la segunda celda de la cuarta fila. 12 Abre el archivo botones.htm y copia los botones de navegacin, debers pegarlos en la tercera celda de la segunda fila.

13 Define el alineamiento de esa celda como derecha (en horizontal) e inferior (en vertical). 14 Guarda los cambios y cierra el documento. 15 Debers hacer lo mismo para los archivos consultas.htm, gatos.htm y perros.htm.

Solucin

Unidad 8. Marcos (I)

Pag 8.1

Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo insertar un marco sencillo en una pgina, y cmo trabajar con l.

Introduccin
Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una pgina con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la pgina de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la pgina que contiene los marcos agrupados.

Es posible editar los documentos contenidos en los marcos desde la pgina que contiene el grupo de marcos. Esto facilita el trabajo, ya que es ms fcil hacerse una idea de cmo quedar la pgina al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco. El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos bsicos y ejemplos sencillos.

Crear marcos

Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas. Para crear un marco, primero hay que abrir algn documento. Puede ser uno nuevo o uno ya existente. Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin puede elegirse el tipo de marco que va a crearse. Vamos a ver el marco a la Izquierda. Si pulsamos sobre Izquierda se crear un nuevo marco a la izquierda del documento actual.

Como puedes ver en la imagen, aparece una lnea que divide el documento en dos. El documento de partida era uno nuevo. En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que tenamos inicialmente, que est en el marco conocido como marco padre (MainFrame). Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la lnea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vaco aparecer a la derecha del documento original. En esta imagen puedes ver un ejemplo de marco a la derecha. Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha. Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. En este caso, el documento que tenamos inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este caso el marco padre ser el de la izquierda.

El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.

Ejercicio17 Deportes Ampliacin. Marcos

1 Abrir el sito Deportes. 2 Abrir el documento marcos.htm. 3 Modificar las propiedades del marco inferior, para que el documento que se cargue inicialmente en l sea el documento quienes.htm. 4 Modificar las propiedades del marco inferior, para que no se muestre su borde. 5 Guardar los cambios y cerrar el documento. Solucin

Unidad 9. Formularios (I)

Pag 9.1

Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno, qu elementos puede contener y cmo pueden validarse los datos introducidos en l.

Introduccin
Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc. Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que recibir los datos y har el tratamiento correspondiente. Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programacin, ya sea en VBScript, en JavaScript o en otro lenguaje de programacin, y esto no entra en los objetivos del curso. A la derecha tienes un ejemplo de formulario. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones.

Elementos de formulario
Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin Formulario. A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la pgina. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, as como algunas de sus propiedades. Campo de texto y rea de texto Permiten introducir texto. El Campo de texto solo permite al usuario escribir una lnea, mientras que el rea de texto permite escribir varias. Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades, marcando la opcin Una lnea o Multi lnea respectivamente.

Tambin es posible definirlo como Contrasea es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carcter como podrs ver en la imagen siguiente. A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.
Principio del formulario Principio del formulario Principio del formulario

Campo de text
Final del formulario

rea de texto
Final del formulario

Final del formulario

A travs del inspector de propiedades es posible asignar tambin el Ancho del cuadro de texto, el nmero mximo de lneas o caracteres, y el valor inicial del cuadro.

Botn Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).
Principio del formulario

Enviar
Final del formulario

Tambin es posible cambiar el texto del botn, a travs de la propiedad Etiqueta del inspector de propiedades.

Casilla de verificacin Es un cuadrito que se puede activar o desactivar.

Principio del formulario

Deseo recibir informacin

Final del formulario

Puede asignrsele el Estado inicial como Activado o como Desactivado.

Botn de opcin Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, slo puede haber uno activado. Cuando se activa uno, automticamente se desactivan los dems.
Principio del formulario

Superman

Spiderman
Final del formulario

Lista/Men Una lista o men es un elemento de formulario que lleva asociada una lista de opciones.
--- Elige opcin lista ----- Elige opcin men--Perro Gato

Los elementos se aaden a travs del botn Valores de lista... del inspector de propiedades. Cuando se trata de un men, solo es posible elegir uno de los elementos, pero si se trata de una lista, a travs de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultneamente.

Etiqueta Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qu datos ha de introducir en cada uno de ellos.

Unidad 9. Formularios (II)

Crear formularios
Puedes crear formularios a travs del men Insertar, opcin Formulario. Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un recuadro formado por lneas rojas discontinuas, similar al de la imagen de la derecha. Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya sabes puedes insertar a travs del men Insertar, opcin Formulario.

Pag 9.2

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita su comprensin y mejora su apariencia.

Validar formularios
La validacin de formularios sirve para hacer que Javascript valide el formulario antes de que se enve el formulario, para que en el caso de que hayan campos del formulario que sean obligatorios, tengan que rellenarse antes de poder enviarse. Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a travs del men Ventana, opcin Comportamientos, o pulsando Mays+F3. En este panel hay que desplegar el botn pulsando sobre l, y en Mostrar eventos para elegir una versin de las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el navegador IE 6.0. Despus de esto, hay que volver a desplegar el botn , y pulsar sobre la opcin Validar formulario, debers haber seleccionado el formulario previamente.

Entonces se mostrar una ventana como la siguiente, donde aparecen todos los elementos del formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir. Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numrico (Nmero), una Direccin de correo electrnico, etc.

Para practicar puedes realizar el Ejercicio paso a paso Insertar elementos de formulario.

Ejercicio 18 web deportes Formulario

1 Abrir el sito Deportes. 2 Abrir el documento reservas.htm. 3 Insertar un campo de texto a la derecha del texto Hora:, que tenga 5 como ancho de caracteres. 4 Insertar un men a la derecha del texto Centro:, cuyos elementos sean: Don Benito Madrid Silla 5 Seleccionar inicialmente el elemento Don Benito del men. 6 Insertar un botn para restablecer el formulario, a la izquierda del botn Enviar. 7 Guardar los cambios y cerrar el documento.

Solucin

Ejercicio 19 web animales Formulario

1 Abrir el sito Animales. 2 Abrir el documento consultas.htm. 3 Insertar un men a la derecha del texto Animal:, en la celda vaca, cuyos elementos sean: --- Elige opcin --Perro Gato Otros 4 Seleccionar inicialmente el elemento --- Elige opcin --- del men. 5 Insertar un rea de texto a la derecha del texto Consulta:, en la celda vaca, que tenga 50 como ancho de caracteres, 10 como nmero de lneas, y que su valor inicial sea Escribe aqu tu consulta. 6 Insertar un botn de Enviar, a la derecha del botn Restablecer. 7 Guardar los cambios y cerrar el documento.

Solucin

Unidad 10. Multimedia (I)

Pag 10.1

Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una animacin Flash, un sonido y un vdeo.

Pelculas Flash
Las pelculas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la extensin SWF. Es frecuente verlas en las pginas iniciales de los sitios web, a modo de presentacin hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de animacin. Estas pelculas pueden crearse mediante el programa Flash de Macromeda, y necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas.

Las pelculas Flash pueden insertarse en una pgina a travs del men Insertar, Media, opcin Flash, o pulsando Ctrl+Alt+F. Tambin pueden insertarse pulsando sobre la opcin del panel Insertar, botn Media. Flash que aparece en la pestaa Comn

El inspector de propiedades de las pelculas Flash es prcticamente igual que el de los botones y el texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualizacin de la pelcula.

La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio. La otra es la opcin Rep. autom. (reproduccin automtica), que al estar marcada indica que nada ms cargarse la pgina comenzar a reproducirse la pelcula Flash. Si esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la pelcula. Interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn comportamiento.

Sonido
No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar escuchando su propia msica cuando navegan en Internet, por lo que el escuchar tambin sonido en cada pgina que se visita puede resultar algo molesto. A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina, puede hacerla ms atractiva. Muchas de las pginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la pgina puedan desactivarlo. Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. Para insertar un archivo de audio en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in.

A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles (recuerda encender los altavoces, si los tienes).

En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son insertados como plug-in aparecen representadas dentro de Dreamweaver por una imagen como la de la izquierda.

En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarn los controles de audio, mediante Al y An. En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la pgina, pero que no se muestren los controles de audio, los campos Al y An deben valer cero. Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores no pueden definirse a travs del inspector de propiedades, pero s a travs del cdigo. Una vez definidos los podremos cambiar desde el inspector de propiedades con el botn Parmetros... Por ejemplo, el archivo anterior apareca en el cdigo como <embed src="varios/audio.mid"></embed>. Pero para que no se reproduzca automticamente se ha aadido autostart="false", y para que se reproduzca continuamente se ha aadido loop="true". La lnea de cdigo del archivo de audio ha quedado del siguiente modo: <embed src="varios/audio.mid" autostart="false" loop="true"></embed> En el Inspector de propiedades del sonido, el botn Parmetros... abre un cuadro de dilogo donde podemos cambiar esos valores una vez introducidos. Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es necesario insertar una serie de comportamientos que se encarguen de esa tarea. Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio, puedes escribir este cdigo directamente en la vista Cdigo. <bgsound src="cancion1.wav" loop="-1"> Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuntas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).

Unidad 10. Multimedia (II)

Vdeos

Pag 10.2

En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV. Para insertar un archivo de vdeo en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in. A la derecha tienes un ejemplo de un archivo de vdeo, para el que se muestran los controles de vdeo. Puedes reproducirlo pulsando sobre los controles.

El inspector de propiedades para los archivos de vdeo insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.

Los vdeos tambin se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores pueden cambiarse a travs del cdigo, del mismo modo que en el caso de los archivos de audio, aadiendo autostart="false" y loop="true". Todos los objetos insertados a travs de la opcin Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vdeo) que ha de reproducirse. En el caso de que el usuario no tenga instalado ningn plug-in adecuado, puede establecerse en el campo URL plg una pgina en la que pueda encontrarlo.

Para practicar puedes realizar el Ejercicio paso a paso Insertar un archivo de audio.

Unidad 11. Las plantillas (I)

Pag 11.1

En este tema vamos a ver qu son las plantillas, cmo crearlas y cmo basar documentos en ellas.

Introduccin
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las pginas deben seguir un formato uniforme. La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias, modificando simplemente su contenido. Esta es la forma ms sencilla de tener pginas con una estructura basada en la estructura de otras ya creadas previamente. Las plantillas son una especie de copia de la pgina en la que van a estar basadas el resto de pginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que sern fijas, que no podrn ser modificadas. No es posible modificar las propiedades de una pgina que est basada en una plantilla, a excepcin del ttulo. Cuando se desea que existan pginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las pginas en una u otra plantilla, segn el color de fondo que se desee para cada una. Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas basadas en ella. Las plantillas son archivos con la extensin DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates.

Crear plantillas
Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente.

Una forma de crear una plantilla desde cero es a travs del panel Archivos, pestaa Activos. La pestaa Activos se puede abrir a travs del men Ventana, opcin Activos. Tambin pulsando F11. Una vez abierto el panel hay que seleccionar el botn para poder trabajar con las plantillas. Los botones inferiores del panel Activos similares a los del panel Estilos CSS. ,

son

El nico botn diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla. Para crear una nueva plantilla hay que pulsar sobre el botn pulsa con el botn derecho del ratn y elige Nueva Plantilla). (Si este botn no est activado,

Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre l. Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn Paraeliminar una plantilla la seleccionamos de la lista y pulsamos el botn . .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automticamente.

Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y despus guardarlo como plantilla a travs del men Archivo, opcin Guardar como plantilla. Cuando se pulsa dicha opcin, aparece una ventana como la de la derecha. En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a travs del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar.

Unidad 11. Las plantillas (II)

Establecer regiones editables en una plantilla

Pag 11.2

Todos los elementos de una plantilla estn bloqueados por defecto, no se pueden modificar. Es necesario establecer las zonas que s podrn ser editadas en las pginas que se basen en dicha plantilla. Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a travs del panel Activos, pulsando dos veces sobre ella, o estando seleccionada pulsando sobre el botn como ya hemos visto. Una vez abierta la plantilla es posible establecer sus propiedades a travs de la ventana Propiedades de la pgina. Como recordars, para abrir esta ventana puedes: Pulsar la combinacin de teclas Ctrl+J. Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Pulsar con el botn derecho sobre el documento abierto en Dreamweaver, y en el men contextual que aparece seleccionar la opcin Propiedades de la pgina.

Para insertar una regin editable hay que situar el puntero en el lugar en el que se desea insertar, y despus dirigirse al men Insertar, Objetos de plantilla, opcin Regin editable, o pulsar la combinacin de teclas Ctrl+Alt+V. En la nueva ventana hay que establecer un Nombre para la regin editable. Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre. Posteriormente puede modificarse el nombre a travs del inspector de propiedades de la regin editable.

La zonas editables aparecen representadas en Dreamweaver como un recuadro con una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona editable. Dentro del recuadro es posible insertar objetos, que aparecern por defecto en aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro de la zona editable, podrn ser modificados en las pginas. Todos los objetos que se encuentren fuera de estas zonas editables aparecern tambin en las pginas, pero no podrn ser modificados. En este caso, la imagen con el logotipo de aulaclic aparecera en todas las pginas que se basaran en esta plantilla, mientras que todo lo que insertramos dentro de la zona editable FormularioCorreoElectronico podra ser modificado.

Unidad 11. Las plantillas (III)

Basar pginas en una plantilla

Pag 11.3

El uso de las plantillas puede resultar un poco complicado al principio. Vamos a ver cmo basar una pgina vaca en una plantilla, ya que por el hecho de estar vaca resulta ms sencillo. Una vez abierto el documento, hay que dirigirse al men Modificar, Plantillas, opcin Aplicar plantilla a pgina.

Es preferible que antes de hacer esto nos aseguremos de que el sitio que se encuentra abierto en Dreamweaver es el mismo en el que vamos a guardar el documento, y el mismo en el que se encuentra la plantilla en la que queremos basarlo. Despus de pulsar sobre la opcin Aplicar plantilla a pgina aparece una ventana como la de la derecha, en la que hay que seleccionar una de las plantillas de la lista Plantillas: del sitio. Es recomendable activar la casilla Actualizar pgina cuando cambie la plantilla, para que la pgina se actualice automticamente en el caso de modificar la plantilla en la que se basa.

A pesar de estar trabajando sobre un documento vaco, es posible que al aplicar la plantilla aparezcan nombres de regiones no coincidentes entre el documento en blanco y la plantilla. En ese caso se muestra una ventana como la siguiente.

En ella hay que establecer una correspondencia entre el nombre de la regin del documento vaco con el nombre de alguna regin de la plantilla. En este ejemplo, la regin del documento vaco que no coincida con el nombre de ninguna regin de la plantilla era la regin Document head. A travs de Mover contenido a la nueva regin: se ha seleccionado la regin head de la plantilla, para establecer as la correspondencia que se necesitaba.

Despus de establecer las correspondencias necesarias, se carga la plantilla en el documento vaco.

En este caso no es posible cambiar el color de fondo, que est definido en la plantilla, pero s es posible cambiar todos los elementos de la tabla y el formulario, ya que se encuentran dentro de una zona definida en la plantilla como editable. En este caso se podra cambiar el estilo del texto, el color de las celdas, combinarlas, etc. Para que una pgina deje de estar basada en una plantilla hay que dirigirse al men Modificar, Plantillas, opcin Separar de plantilla. Cuando se separa una pgina de una plantilla, el contenido de la pgina sigue siendo el mismo que el que tena cuando an estaba basada en la plantilla, pero sin las restricciones establecidas por la plantilla.

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Crear una plantilla.

Unidad 12. HTML desde Dreamweaver (I)

12. 1

En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio cdigo HTML, y no nicamente sobre el editor grfico de la vista diseo. En este tema no se pretende ensearos el lenguaje HTML sino cmo poder realizar algunos reajustes directamente en el cdigo estando dentro de Dreamweaver.

Etiquetas
Ya sabes que el lenguaje HTML est basado en etiquetas que marcan el inicio y fin de cada elemento de la pgina Web. En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el cdigo HTML de una pgina para darle un ttulo. Consista simplemente en escribir el ttulo deseado entre las etiquetas <TITLE> y </TITLE>. Las etiquetas consisten en poner un mismo comando entre los smbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el smbolo /, indica final y se suele denominar etiqueta de cierre. Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan, incluyendo cierto cdigo dentro de la etiqueta. Por ejemplo, un prrafo se inserta entre las etiquetas <P> y </P>, pero es posible cambiar sus caractersticas predeterminadas, como puede ser alinearlo a la derecha. Para ello, en lugar de introducir el texto del prrafo entre las etiquetas anteriores, ha de insertarse entre las etiquetas <P align="right"> y </P>.

Tambin hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May+INTRO dentro del cdigo HTML equivale a la etiqueta <BR>. Tambin podrs ver la etiqueta <br /> en las pginas que sigan el estndar XHTML. ste obliga a que todas las etiquetas se cierren, incluso aquellas que no tienen etiqueta final, por lo que <BR> pasa a ser <br /> o <HR> a <hr />.

Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el editor grfico, pero tambin ofrece otras posibilidades para trabajar directamente sobre el cdigo.

Entidades HTML
HTML tambin dispone de cdigos especiales para representar carceteres especiales como pueden ser letras con acentos o no pertenecientes al alfabeto latino internacional, signos de puntuacin o tipogrficos y smbolos especiales que presenten un problema en HTML como < >, que podran malinterpretarse por el inicio de una etiqueta.

Estos cdigos pueden mostrarse como un cdigo numrico o con un nombre de entidad. Ambos mtodos son igualmente aceptables, pero ambos debern ir encerrados entre los smbolos & y ;. De este modo, < se escribir como &lt; o &#60; Usar este mtodo es muy aconsejable, de esta forma los navegadores que estn configurados para visualizar juegos de caracteres que no contengan letras como la o la podrn ver el sitio correctamente. En caso contrario estos caracteres se mostraran de forma extraa.

En el tema 4 vimos que podamos escribir estos caracteres utilizando el men Insertar. Ahora te mostraremos otra forma para escribir caracteres que no se incluan en el listado de Dreamweaver y que podrs insertar escribiendo sus entidades en la vista de Cdigo. Aqu tienes una tabla de los caracteres ms utilizados con sus Entidades HTML numrica y de nombre de entidad: Carcter Entidad con nombre &aacute; &eacute; &iacute; &oacute; &uacute; &uuml; &ntide; Entidad numrica &#225; &#233; &#237; &#243; &#250; &#252; &#241; Carcter Entidad con nombre &Aacute; &Eacute; &Iacute; &Oacute; &Uacute; &Uuml; &Ntilde; Entidad numrica &#193; &#201; &#205; &#211; &#218; &#220; &#209;

&iquest; &iexc; &ndash; &rarr; &larr;

&#191; &#161; &#8211; &#8594; &#8592;

&alpha; &beta; &copy; &reg; &euro;

&#945; &#946; &#169; &#174; &#8364;

< > &

&lt; &gt; &amp;

&#60; &#62; &#38;

espacio

&nbsp;

&#160;

Si escribes ms de un espacio en Dreamweaver, cuando lo visualices en un Navegador slo veras uno. Esto es debido a que en HTML las palabras separadas por ms de un espacio se visualizan sapradas de uno. Para saltarte esta norma puedes escribir tantas veces como quieras &nbsp; y se visualizarn tantos espacios como elementos de entidad hayas introducido.

Si quieres ver una tabla con el listado de todos los caracteres especiales visita el avanzado de Listado de Entidades HTML

Listado de Entidades HTML (I)

Caracteres Alfabticos Propios y Alfabeto Griego

Smbolos
Carcter Entidad con Entidad numrica

Otros Smbolos
Carcter

Caracteres Tipogrficos
Entidad con nombre Entidad numrica
&prod; &#8719;

Carcter

Entidad con

Entidad numrica

nombre
&bull; &hellip; &prime; &Prime; &oline; &frasl; &euro; &#8226; &#8230; &#8242; &#8243; &#8254; &#8260; &#8364;

&sum; &minus; &lowast; &radic; &prop; &infin; &ang; &and; &or; &cap; &cup; &int; &there4; &sim; &cong; &asymp; &ne; &equiv; &le; &ge; &sub; &sup; &nsub; &sube; &supe; &oplus;

&#8721; &#8722; &#8727; &#8730; &#8733; &#8734; &#8736; &#8743; &#8744; &#8745; &#8746; &#8747; &#8756; &#8764; &#8773; &#8776; &#8800; &#8801; &#8804; &#8805; &#8834; &#8835; &#8836; &#8838; &#8839; &#8853; espacio

nombre
&nbsp; &iexcl; &cent; &pound; &curren; &yen; &brvbar; &sect; &uml; &copy; &ordf; &laquo; &not; &shy; &reg; &macr; &deg; &sup2; &sup3; &acute; &micro; &para; &cedil; &sup1; &#160; &#161; &#162; &#163; &#164; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#173; &#174; &#175; &#176; &#178; &#179; &#180; &#181; &#182; &#184; &#185;

&weierp; &#8472; &image; &real; &trade; &larr; &uarr; &rarr; &darr; &harr; &crarr; &lArr; &uArr; &rArr; &dArr; &hArr; &forall; &part; &#8465; &#8476; &#8482; &#8592; &#8593; &#8594; &#8595; &#8596; &#8629; &#8656; &#8657; &#8658; &#8659; &#8660; &#8704; &#8706;

&alefsym; &#8501;

&plusmn; &#177;

&middot; &#183;

&exist; &empty; &nabla; &isin; &notin; &ni;

&#8707; &#8709; &#8711; &#8712; &#8713; &#8715;

&otimes; &perp; &sdot; &lceil; &rceil; &lfloor; &rfloor; &lang; &rang; &loz; &spades; &clubs; &hearts; &diams;

&#8855; &#8869; &#8901; &#8968; &#8969; &#8970; &#8971; &#9001; &#9002; &#9674; &#9824; &#9827; &#9829; &#9830;

&ordm; &raquo; &frac14; &frac12; &frac34; &iquest;

&#186; &#187; &#188; &#189; &#190; &#191;

Caracteres Alfabticos Maysculas

Carcter

Caracteres Alfabticos Minsculas

Carcter

Alfabeto Griego
Carcter

Entidad con nombre

Entidad numrica

Entidad con nombre

Entidad numrica

Entidad con Entidad nombre numrica

&fnof; &Alpha; &Beta; &Gamma; &Delta; &Epsilon; &#402; &#913; &#914; &#915; &#916; &#917;

&Agrave; &#192; &Aacute; &#193; &Acirc; &Atilde; &Auml; &#194; &#195; &#196;

&agrave; &#224; &aacute; &#225; &acirc; &atilde; &auml; &#226; &#227; &#228;

&Aring; &AElig; &Ccedil; &Eacute; &Ecirc; &Euml; &Igrave; &Iacute; &Icirc; &Iuml; &ETH; &Ntilde;

&#197; &#198; &#199; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &#208; &#209;

&aring; &aelig; &ccedil;

&#229; &#230; &#231;

&Zeta; &Eta; &Theta; &Iota; &Kappa; &Lambda; &Mu; &Nu; &Xi; &Omicron; &Pi; &Rho; &Sigma; &Tau; &Upsilon; &Phi; &Chi; &Psi; &Omega; &alpha; &beta; &gamma; &delta; &epsilon; &zeta; &eta; &theta;

&#918; &#919; &#920; &#921; &#922; &#923; &#924; &#925; &#926; &#927; &#928; &#929; &#931; &#932; &#933; &#934; &#935; &#936; &#937; &#945; &#946; &#947; &#948; &#949; &#950; &#951; &#952;

&Egrave; &#200;

&egrave; &#232; &eacute; &#233; &ecirc; &euml; &igrave; &iacute; &icirc; &iuml; &eth; &ntilde; &#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241;

&Ograve; &#210; &Oacute; &#211; &Ocirc; &Otilde; &Ouml; &times; &Oslash; &#212; &#213; &#214; &#215; &#216;

&ograve; &#242; &oacute; &#243; &ocirc; &otilde; &ouml; &divide; &oslash; &#244; &#245; &#246; &#247; &#248;

&Ugrave; &#217; &Uacute; &#218; &Ucirc; &Uuml; &Yacute; &szlig; &#219; &#220; &#221; &#223;

&ugrave; &#249; &uacute; &#250; &ucirc; &uuml; &thorn; &yuml; &#251; &#252; &#254; &#255;

&yacute; &#253;

&THORN; &#222;

&iota; &kappa; &lambda; &mu; &nu; &xi; &omicron; &pi; &rho; &sigmaf; &sigma; &tau; &upsilon; &phi; &chi; &psi; &omega;

&#953; &#954; &#955; &#956; &#957; &#958; &#959; &#960; &#961; &#962; &#963; &#964; &#965; &#966; &#967; &#968; &#969;

&thetasym; &#977; &upsih; &piv; &#978; &#982;

Unidad 12. HTML desde Dreamweaver (II)

El inspector de cdigo

12.2

Recordars que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista Diseo, vista Cdigo y vista Dividir (Cdigo y Diseo). Todas estas vistas se aplican directamente sobre la ventana del documento.

Pero existe un panel que permite visualizar el cdigo independientemente de la vista aplicada en el documento. Este panel es el llamado Inspector de cdigo y puede abrirse a travs del men Ventana. Si la opcin Inspector de cdigo no te aparece directamente en este men, posiblemente est dentro de la opcin Otros. Tambin puedes abrir el Inspector de cdigo pulsando F10.

El Inspector de cdigo muestra el cdigo HTML de la misma forma que lo hacen la vista Cdigo y la vista Dividir (Cdigo y Diseo), pero puede resultar ms cmodo trabajar con el panel, ya que puede situarse en cualquier parte de la pantalla, y no se limita slo al espacio del documento.

Unidad 12. HTML desde Dreamweaver (III)

Completar las etiquetas

12.3

Una de las posibilidades que ofrece Dreamweaver a la hora de trabajar directamente sobre el cdigo HTML es la de completar las etiquetas mientras se van introduciendo. Esto se produce tanto en el Inspector de cdigo como en las vistas de cdigo. Imaginemos que deseamos introducir en nuestra pgina un enlace a la pgina de aulaclic, que ha de abrirse en una ventana nueva. En este caso deberamos introducir la etiqueta <a href="http://www.aulaclic.com">pulsa aqu para visitar aulaclic</a>, con lo que obtendramos el siguiente enlace: pulsa aqu para visitar aulaclic

Vamos a ver cmo funciona el mecanismo de completar etiquetas a travs de este ejemplo.

Las etiquetas se completan siempre de izquierda a derecha, por lo que lo primero que debemos insertar es el smbolo < . Despus de escribir nosotros este smbolo, Dreamweaver mostrar una lista con todos los comandos que pueden aparecer despus l. Para elegir uno de ellos hay que pulsar dos veces sobre l con el puntero del ratn, o bien, estando seleccionado, pulsar INTRO. En este caso tenemos que elegir a, despus de lo cual desaparecer la lista. En el cdigo tendremos .

Despus de <a hay que introducir un espacio en blanco. Nada ms teclear el espacio en blanco aparecer otra lista de elementos, que son los que pueden escribirse despus de la a, los atributos de la etiqueta. Tenemos que elegir href. Una vez seleccionado, el cdigo quedar como .

Entonces el cursor aparecer entre las comillas dobles, y se mostrar una nueva lista en la que es posible elegir el tipo de vnculo a insertar. En este caso el vnculo ha de ser de tipo HTTP, aunque tambin sera posible insertar un vnculo a un archivo (FILE), un vnculo de correo electrnico (MAILTO), o un vnculo de cualquiera de los tipos que aparecen en la lista. Nosotros tenemos que seleccionar http://.

En lugar de cerrar ya la etiqueta con el smbolo >, queremos primero indicar que el vnculo ha de abrirse en una ventana nueva. Para ello tenemos que introducir un nuevo espacio, para que se nos muestre otra lista. En ella hay que elegir . target. El cdigo quedar como

Entonces el cursor aparecer entre las nuevas comillas dobles, y se mostrar una lista en la que es posible elegir el destino del enlace. Como queremos que el enlace se abra en una ventana nueva, hay que seleccionar _blank.

Despus de introducir el smbolo > para cerrar la etiqueta, se insertar automticamente la de final del enlace, es decir, se insertar </a>, y tendremos . Ahora podemos completar la etiqueta con la direccin del enlace y el texto que servir como enlace, para que quede del siguiente modo: <a href="http://www.aulaclic.com">pulsa aqu para visitar aulaclic</a>

Unidad 12. HTML desde Dreamweaver (IV)

Contraer y expandir cdigo
Una de las mejoras de la versin 8 de Dreamweaver es la posibilidad de seleccionar fragmentos de cdigo y contraerlos para facilitar la legibilidad del cdigo. Por ejemplo, podemos seleccionar el trozo de cdigo correspondiente a una tabla, tal y como se ve en la figura de la derecha. Para ello basta con colocar el cursor en la zona que queremos contraer, por ejemplo en la lnea 318, y pulsar el icono de la barra de herramientas de programacin, veremos como automticamente se selecciona el cdigo entre las etiquetas mas prximas, en este caso <font> y </font> , si seguimos haciendo clic se ir seleccionando cdigo entre las siguientes etiquetas, <div> <td> <tr> y <table>. De forma que con cinco clics en el icono tendremos seleccionado el cdigo de la etiqueta <table> tal y como vemos en la figura.

12.4

Ahora, para contraer el cdigo seleccionado basta hacer clic en el icono y obtendremos el resultado que vemos a la derecha. De esta forma podramos ocultar el cdigo que no nos interesa y dejar el resto del cdigo ms legible. Para volver a la situacin inicial basta hacer clic en el icono , o en el signo + que expandir aparece al lado del cdigo contraido.

Unidad 12. HTML desde Dreamweaver (V)

Errores en el cdigo
A travs del editor grfico es posible ver si hay algunos errores en el cdigo HTML, como puede ser una etiqueta incompleta. En el caso de haber un error de este tipo, el fragmento de cdigo que contiene el error se mostrar resaltado en amarillo en la ventana de diseo de la pgina. Esto nos permite darnos cuenta de la lnea concreta en la que se encuentra el error. Si en el ejemplo de completar las etiquetas hubiramos dejado sin terminar la lnea de cdigo, habiendo escrito nicamente <a href="", aparecera reflejado en el editor grfico tal y como muestra la imagen de la derecha.

12.5

Otra forma de detectar errores en nuestra pgina es a travs del men Comprobar navegadores de destino en la barra de herramientas Documento. Si nuestra pgina no contiene errores, el icono de este men tiene esta apariencia que si tenemos errores adoptar esta apariencia . , mientras

Para ver los errores que tiene nuestra pgina, desplegamos el men y elegimos la opcin Mostrar todos los errores. A continuacin se abrir el panel Resultados con las lista de los errores encontrados.

A continuacin se abrir el panel Resultados con las lista de los errores encontrados.

En esta lista aparece el grado de importancia del error representado mediante un icono, el globo de palabras indica un mensaje informativo (seala cdigo que no es compatible con un navegador pero que no tiene ningn efecto visible), el icono de signo de exclamacin con fondo rojo indica error (indica cdigo que puede causar un problema visible grave en un navegador concreto, como hacer desaparecer partes de una pgina) y el icono de signo de exclamacin con fondo amarillo indica advertencia (seala una parte de cdigo que no se visualizar correctamente en un navegador concreto, pero eso no causar ningn problema grave de visualizacin). A continuacin tenemos la pgina y nmero de lnea donde est el error y una descripcin del mismo. A veces la descripcin es un texto largo que no se puede visualizar completamente para ello . puedes utilizar el botn Ms info Como ya sabrs los distintos navegadores y sus distintas versiones hacen que un error lo sea o no, debemos realizar la comprobacin eligiendo las versiones de los navegadores que consideremos sean las ms utilizadas entre nuestros navegantes. Para seleccionar los navegadores para que Dreamweaver los compruebe debemos desplegar el men Comprobar navegadores de destino y seleccionar la opcin Configuracin... Aparecer el cuadro de dilogo Comprobar navegadores de destino donde seleccionamos los navegadores que queramos comprobar y la versin mnima de la lista desplegable a la derecha del nombre del navegador.

Unidad 12. HTML desde Dreamweaver (VI)

Buscar y reemplazar

12.6

En ocasiones es posible querer buscar dentro de un sitio web todas aquellas pginas que contengan un texto en concreto, una etiqueta en concreto, o parte de estos elementos. Tal vez los queramos buscar porque deseemos trabajar sobre esas pginas y no recordbamos cual de ellas era, o tal vez porque queramos cambiar ese texto o etiqueta por otros. Imaginemos que una persona ha creado un sitio web, en el que la mayora de las pginas tiene al comienzo un texto que hace referencia al nombre del sitio, por ejemplo, todas esas pginas comienzan con PerrosGatos, y tiene la seguridad de que no existe ese texto en ninguna parte de las pginas que no sea al comienzo. Ahora imaginemos que esta persona ha creado una imagen de un perro y un gato, y que quiere cambiar en todas las pginas que contienen el texto PerrosGatos dicho texto por la imagen. En este caso no es necesario que abra una por una todas las pginas que contienen dicho texto, ni tampoco que modifique una por una dichas pginas para cambiar el texto por la imagen. Para realizar esta tarea resulta ms sencillo utilizar la herramienta de Buscar y reemplazar. Puedes abrirla a travs del men Edicin, opcin Buscar y reemplazar, o pulsando Ctrl+F.

Mediante Buscar en puede especificarse si se va a buscar en el documento actual, en todo el sitio, o en los archivos seleccionados del sitio (habiendo seleccionado dichos archivos previamente). A travs de Buscar se especifica si hay que buscarlo en el texto (en la ventana diseo), o en el cdigo HTML (cdigo fuente). Junto a la lista de opciones de Buscar, aparece un cuadro de texto en el que hay que indicar el texto o el cdigo que se desea buscar.

En Reemplazar con hay que especificar el texto o el cdigo por el que se desea cambiar el texto o cdigo buscado. El reemplazo puede hacerse de varias formas, siempre a travs de los botones de la derecha de la

ventana. Una de ellas es buscar uno por uno cada uno de los documentos que contengan el cdigo o texto a buscar, y reemplazar cuando se desee. Para ello se utilizan los botones Buscar sig. y Reemplazar. Si se desean buscar todos los documentos que contengan dicho texto o cdigo, y reemplazar en todos ellos, se utilizan los botones Buscar todos y Reemp. todos. Cuando se utiliza la opcin Buscar sig., se abre la pgina en la que se encuentra el texto coincidente, resaltando en el cdigo fuente la lnea en la que este se encuentra. De este modo podemos decidir uno por uno los cambios a realizar. Cuando estemos seguros de querer reemplazar pulsaremos sobre Reemplazar, y cuando no deseemos reemplazar volveremos a pulsar sobre Buscar sig..

Cuando se utiliza la opcin Buscar todos se cierra la ventana de Buscar y reemplazar y se abre un nuevo panel como el de la derecha, en el que aparecen todos los documentos en el que coincide el texto o el cdigo buscado. Pulsando sobre el botn vuelve a abrirse la ventana de Buscar y reemplazar. Desde dicha ventana podemos reemplazar en los documentos encontrados, uno por uno, con el botn Reemplazar, o bien reemplazar directamente en todos los documento encontrados, pulsando sobre el botn Reemp. todos. En el panel, cuando se haya reemplazado en algn documento, ste volver a aparecer en la lista junto con un crculo verde, que indica que ya ha sufrido reemplazo.

En ocasiones podemos equivocarnos, al buscar y reemplazar texto o cdigo errneos. Hay que tener mucho cuidado al utilizar esta herramienta, ya que no es posible deshacer los cambios en los documentos que estn cerrados durante la bsqueda y el reemplazo. En el ejemplo anterior, la persona quera buscar el texto PerrosGatos, y reemplazarlo por una imagen. En este caso concreto, lo que se desea sustituir es texto por una imagen, por lo que en Buscar no podramos elegir la opcin Texto, habra que elegir la opcin Cdigo fuente. En Reemplazar con, habra que especificar la etiqueta HTML completa para insertar la imagen. En este caso la etiqueta sera <img scr="imagenes/logo_animales.gif">, teniendo en cuenta que la imagen se llama logo_animales.gif y que se encuentra dentro del sitio en la carpeta imagenes.

Existen mtodos de bsqueda mucho ms precisos que los que hemos visto, si quieres conocerlos visita el avanzado de Expresiones Regulares .

Expresiones Regulares (I)

Las Expresiones Regulares son un conjunto de smbolos que unidos pueden definir un patrn para identificar una cadena de caracteres. Antes de comenzar a verlas deberamos tener bien claro cmo acta la bsqueda normal.

Por ejemplo, si buscamos la cadena aula, los resultados que encontrasemos podran ser aulaclic, miaula, aula, etc...

Utilizaremos las Expresiones Regulares para decidir cuales sern el resto de los caracteres. Para utilizar estos smbolos especiales tendremos quemarcar la casilla Utilizar expresin regular en el cuadro de dilogo de Buscar y Remplazar:

Una vez tengamos la casilla marcada, todo lo que escribamos en el cuadro de bsqueda se tomar como una expresin regular, as que empecemos a ver los smbolos que podemos utilizar:

Smbolo

Significado

Utiliza este smbolo para buscar cadenas al principio de un documento. Esta expresin regular no es muy til, pues normalmente los documentos HTML empiezan con la especificacin de las cabeceras lo que, normalmente, no pertenece a nuestro objetivo de bsqueda. Utilizando este smbolo podramos encontrar documentos buscando por ^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Esto nos dara como resultados los documentos que empiecen por <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML, por lo que los documentos que empiecen por <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML no apareceran.

En este ejemplo se estan buscando archivos que sigan el formato XHTML, los documentos despreciados seran aquellos

que sigan HTML.

Utiliza este smbolo para buscar cadenas al final de un documento. Igual que la anterior, esta expresin regular no nos ser de mucha ayuda cuando utilicemos la herramienta Buscar y Reemplazar. Slo podremos buscar documentos que terminen de determinada manera. Por ejemplo, podemos buscar archivos que terminen con </html>$ Esta bsqueda nos devolvera todos aquellos documentos que se han cerrado correctamente, los que terminen, por ejemplo en </body> no se mostraran.

Ahora ya entramos con expresiones regulares mucho ms tiles. El asterisco te ayudar a buscar un carcter que aparezca una vez, varias o ninguna. Veamos un ejemplo, si hacemos la busqueda por a*u Los resultados que podemos encontrar seran aula, aaula, aaaaula o incluso uno o cuello, porque el asterisco implica que el carcter no tiene porque aparecer.

Casi ocurre lo mismo con esta expresin regular. El signo + buscar conicidencias de un caracter una vez o varas. En este caso se despreciarn aquellas en las que no aparezca. Por ejemplo, si buscamos a+u Los resultados podran ser aula, aaula o aaaula, pero no ni uno ni cuello porque este smbolo obliga a que el caracter se encuentre al menos una vez.

Veamos ahora qu ocurre con el signo de interrogacin. Este smbolo es el contrario del anterior, slo busca coincidencias una sla vez o ninguna, de modo que buscando

au?la Podemos encontrar aula, ala, aulaclic o alameda, pero nunca auula ni auuulaclic. Es decir, este smbolo nos sirve para marcar caracteres opcionales.

El punto es un smbolo muy til. Podemos utilizarlo para sustituir cualquier carcter, por ejemplo, en la bsqueda de de.a Podramos encontrar resultados como dela, desa, deia, dera, de9a... pero nunca dea (aunque s deaa). En definitiva, este smbolo sustituye a un carcter ni ms ni menos.

Llegados a este punto podras realizar bsquedas ms complejas combinando varias expresiones que hemos visto, por ejemplo, de.?a Encontrara dela, desa, deia, dera, de9a e incluso dea pues al escribir ? a la derecha del punto hemos indicado que ese carcter puede aparecer o no.

uno|otro

El smbolo | se utiliza para representar la conjuncin lgica OR, es decir, uno u otro. Podemos buscar 99|ade Y encontraramos resultados tan variados como adecuado, cadena, 1099, 9900, etc... Piensa que ahora podemos complicar mucho ms las bsquedas combinando todos los smbolos vistos, con esta bsqueda: de.?a|de?a Encontaramos resultados como dela, desarmado, dea (que cumple ambas condiciones) o da (que cumple la segunda).

{n}

Los smbolos de llave indican repeticin. Nos ayudarn a estabecer el nmero de veces que se repite el

carcter al cual precede. Por ejemplo, buscando cas{2}a Encontrara nicamente las palabras que contengan cassa (como cassa, micassa, ocassa7a, recassaa...). Sin embargo, la bsqueda de cas{2} Podra encontrar cassa, casssa, micassssa, etc... Pues buscar una cadena que contenga ca seguida de 2 eses.

{n,m}

Este sera otro caso de smbolo de llave, pero en este caso introduciremos dos nmeros. Estos nmeros indicarn la repeticin que puede tener el caracter al cual preceden. Por ejemplo, la bsqueda: m{2,4} Encontrara coincidencias con cadenas que conteniesen al menos 2 m o hasta como mximo 4. Posibles resultados seran mm, mmm o mmmm. La cadena ummmm s que se encontrara, mientras que en ummmmm slo encontrara las 4 primeras emes.

En esta expresin regular podemos obviar la segunda parte para conseguir algo como esto: m{2,} El resultado ahora sera cuanquier cadena que contenga al menos 2 m y sin mximo de repeticin. Las cadenas umm, ummmmmmm o ummmmmmmmmmm se encontraran sin problemas.

Expresiones Regulares (II)

Hasta ahora hemos visto expresiones regulares simples. Estos smbolos pueden combinarse para formar bsquedas ms complejas. Pero si los combinamos con los siguientes podremos buscar prcticamente cualquier cosa.

Smbolo

Significado

()

Los parntesis nos sern de gran ayuda cuando realicemos bsquedas con expresiones regulares. Con los parntesis podemos agrupar caracteres y aplcarles una regla de regularidad. Por ejemplo: (au)+la Dara como resultados aula, auaula, auauaula, pero no la.

El uso de estos smbolos nos ayudar muchsimo cuando trabajemos con Expresiones Regulares.

[abc]

Los corchetes se utilizarn para establecer rangos o conjuntos de caracteres que sern incluidos en la busqueda. De este modo imagen_[abc] Encontrar resultados como imagen_a, imagen_b o imagen_c.

Tambin podemos establecer un rango para evitar tener que introducir todos los componentes del conjunto: imagen_[c-f] Que mostrar los resultados que contengan imagen_c, imagen_d, imagen_e o imagen_f.

Esta expresin es muy til, imagina la siguiente bsqueda: [a-zA-Z]+ Buscar cualquier cadena formada por maysculas o minsculas (o incluso ambas mezcladas). Al aadirle el smbolo + hacemos que los caracteres indicados a la izquierda (el rango de maysculas o minsculas) deban aparecer por lo menos una vez, as encontraremos cualquier tipo de palabra que no contenga caracteres numricos. Esta bsqueda encontrara, por ejemplo, las palabras Esta, cadena, SI, qUe, sE o EncuEntrA pero no sera capaz de encontrar sie7e o cancin porque ni los nmeros ni las letras acentuadas se encuentran en el rango [a-zA-Z].

La siguiente bsqueda incluira nmeros y acentos: imagen_[a-z0-9] Esta vez podramos encontrar imagen_casa, imagen_07a, imagen_ladrn o imagen_f5gh. Pero no imagen_A porque esta vez las maysculas no se han incluido.

[^abc]

Utiliza este smbolo eliminar caracteres de las bsquedas. Por ejemplo: imagen_[^0-9] Slo encontrar cadenas que empiecen por imagen_ y el siguiente carcter no sea numrico. Como por ejemplo, imagen_casa, imagen_ladrn o imagen_sie7e. En este caso imagen_0casa no se encontrara.

Este es un smbolo muy especial, pues te permitir buscar caracteres reservados como pueden ser +, ^, * o $ sin que se confundan como expresiones regulares. Imagina que queremos buscar en concreto la cadena imagen_123* y la cadena imagen_456*, cmo lo hacemos? Fcil, escribiendo: imagen_(123|456)\*

Como puedes ver, buscar calquier cadena que contenga imagen_123 o imagen_456 seguida de un astersco. Si no hubiesemos aadido la barra de escape (imagen_(123|456)*) significara que lo que se encuentra entre parntesis podra repetirse varas veces o incluso ni aparecer.

Ahora veremos smbolos que nos ayudarn a reproducir estados especiales, como espacios, principios de palabra, tabulaciones, etc...

\b

Este smbolo representa un lmite en una cadena de texto ya bien sea crado por un espacio o un retorno de carro. Esto no sayudar a encontrar principios y finales de palabras.

Con la bsqueda: \bs Encontraramos salida pero no cosa porque en este caso la s no se encuenta al principio de la palabra.

Del mismo modo, s\b Encontrara camas pero no salida.

\B

Este smbolo indica que el caracter se encuentra dentro de una cadena de texto y no en los lmites. Podramos decir que esta expresin es contraria a la anterior. Con la bsqueda: \Bc Encontraramos ocaso pero no cama.

\d

Este smbolo sustituye a cualquier carcter numrico, es equivalente a la expresin [0-9]. La bsqueda: sie\de Encontrara sie7e pero no siete.

\D

Al contrario que el anterior, esta expresin equivale a un carcter no numrico, es equivalente a la expresin [^0-9]. La bsqueda: sie\De Encontrara siete pero no sie7e.

\w

Este smbolo sustituye a cualquier carcter alfanumrico incluyendo el subrayado, es equivalente a la expresin [a-ZA-Z09_].

\W

Al contrario que el anterior, esta expresin equivale a cualquier carcter que no sea alfanumrico ni el subrayado, es equivalente a la expresin [^a-zA-Z0-9_].

\s

Este smbolo representa un espacio en blanco.

\r

Este smbolo representa un retorno de carro.

\t

Este smbolo representa un salto de tabulador.

Expresiones Regulares (III)

Muy bien, ahora ya sabemos cmo buscar utilizando expresiones que nos permitirn realizar bsquedas complejas y encontrar fragmentos de cadenas que nos son interesantes. Pero ahora viene la gran cuestin. Aprenderemos a utilizar todo lo que hemos aprendido para reemplazar un texto por otro.

Hasta ahora somos capaces de encontrar cadenas con gran precisin, por ejemplo la siguiente: <strong>[^<]*</strong> Esta expresin busca cualquier texto que est encerrado entre las etiquetas <strong> y </strong> y no contenga <. Este ejemplo no sera vlido si hubiese una etiqueta anidada dentro de <strong> y </strong>. La expresin [^<]* busca cualquier carcter diferente de < n veces o ninguna (por lo que tambin encontrara la cadena <strong></strong>).

Puedes hacer la prueba en el siguiente texto (cpialo y pgalo en vista de cdigo en una nueva pgina): <p>Podemos encontrar texto encerrado <strong>entre etiquetas de &lt;strong&gt;</strong> aunque contengan car&aacute;cteres especiales como estos ejemplos:</p> <p>El gato <strong>&quot;corr&iacute;a&quot;</strong> por la casa.</p> <p>Hace <strong>7 semanas</strong> que no te veo.</p> <p>La operaci&oacute;n <strong>(8/2)+4</strong> da como resultado 8.</p> <p>Tengo que ir a la consulta los <strong>lunes, mi&eacute;rcoles y viernes</strong>.</p>

<p>No <strong>podremos ir. Tengo que</strong> regar las plantas.</p>

El texto que vers en la vista de Diseo es el siguiente: Podemos encontrar texto encerrado entre etiquetas de <strong> aunque contengan caracteres especiales como estos ejemplos: El gato "corra" por la casa. Hace 7 semanas que no te veo. La operacin (8/2)+4 da como resultado 8. Tengo que ir a la consulta los lunes, mircoles y viernes. No podremos ir. Tengo que regar las plantas.

Ahora aprenderemos una valiosa utilidad. La herramienta Reemplazar busca subexpresiones en la cadena introducida en el cuadro Buscar, por lo que si tenemos: (a)(b)(c) Los equivalentes en la caja de texto de Reemplazar seran: $1 $2 $3

Parece un poco complicado, pero en realidad no lo es. Tomemos el ejemplo anterior, tenamos la expresin: <strong>[^<]*</strong> La podramos transformar para tener tres subexpresiones distintas de esta forma: (<strong>)([^<]*)(</strong>)

Ahora en la caja de Reemplazar cada subexpresin equivaldra a lo siguiente: $1 = (<strong>) $2 = ([^<]*) $3 = (</strong>) Por lo que si realizamos esa bsqueda y la reemplazamos por: <b>$2</b>

Habremos conseguido cambiar las etiquetas de <strong> y </strong> por <b> y </b> sin modificar el texto que estaba dentro.

Fcil, verdad?

Bsqueda en Etiquetas
En el cuadro de dilogo Buscar y Reemplazar podrs encontrar otros tipos de bsqueda que todava no hemos visto. Para ello debers seleccionarlos en el desplegable Buscar: El primer mtodo que veremos ser la opcin Texto (avanzado).

Como puedes ver en la imagen, este cuadro de bsqueda es muy similar al que estamos acostumbrados a utilizar, slo que tiene un espacio entre los campos Buscar y Reemplazar que nos darn la oportunidad de trabajar con etiquetas. Selecciona en el segundo desplegable la etiqueta en la que quieres que se encuentre tu texto (o no, segn hayas seleccionado en el primero). Ahora estars listo para realizar bsquedas en etiquetas especificas.

Pero an hay ms. Puedes hacer clic en el botn

para ver cmo aparecen ms opciones:

Puedes incluir ms opciones sobre el tipo de atributos que tenga (e incluso en los desplegables de la derecha incluir un valor para el atributo) o seguir buscando por otras opciones. Vers que en seguida te hars con el mtodo de bsqueda.

Lo que tenemos que destacar es que esta forma te ayudar a modificar el texto que se encuentre dentro de una etiqueta. Pero qu pasa si lo que queremos es buscar o modificar una etiqueta especifica con unas circunstancias igual de especificas? Muy sencillo, en el desplegable Buscar: seleccionaremos Etiqueta especfica. Vers el siguiente cuadro de dilogo:

En este caso tenemos dos secciones Buscar: y Accin:.

Obviamente para realizar la segunda tendremos que rellenar los datos correctos en la primera. As que veamos qu nos podemos encontrar. En el desplegable de al lado de Etiqueta especifica deberemos indicar el tipo de etiqueta que estamos buscando. Luego en la lnea siguiente podremos indicar si tiene algun tipo de atributo (y con qu valor) o si se encuentra dentro de otra etiqueta.. Estas ltimas opciones son muy parecidas a las que se utilizaron en el mtodo de Texto (avanzado).

Recuerda que puedes usar el botn

para seguir aadiendo condiciones.

Finalmente y cuando la bsqueda funcione correctamente podremos utilizar la opcin Accin:

Como puedes ver, puedes escoger entre varias acciones a aplicar, entre reemplazar la etiqueta con otra o cambiar alguno de sus atributos como aadir algo antes o despus de sta.

Por ejemplo, si quisiesemos quitar todos los enlaces de una pgina podramos utilizar la opcin Estiqueta especifica para ello, bastar con que indiques las opciones que puedes ver en la siguiente imagen:

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Buscar y reemplazar.

Si quieres ver otros mtodos de bsqueda relacionados con las etiquetas del cdigo visita el avanzado de Bsqueda en Etiquetas .

Ejercicios del Tema 12.

Prueba evaluativa del Tema 12.

Unidad 13. Otros elementos (I)

13.1

Vamos a ver una serie de elementos que suelen aparecer en las pginas web, como pueden ser las marquesinas, las reglas horizontales y la fecha.

Marquesinas
Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que pueden desplazarse de un lado a otro de la ventana en forma de lnea. A continuacin tienes un ejemplo de marquesina.

Las marquesinas no se pueden insertar a travs del editor grfico de Dreamweaver, es necesario hacerlo a travs del cdigo. Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina. Tambin es posible especificar algunas caractersticas de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen. Por ejemplo, si pones <marquee behavior="slide">, la marquesina har el desplazamiento una sola vez y se detendr. Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazar de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo cdigo puedes ver a continuacin: <marquee behavior="alternate"> Bienvenid@s a PerrosGatos <img src="imagenes/logo_animales.gif"> </marquee>

Unidad 13. Otros elementos (II)

Fecha

13.2

Dreamweaver permite insertar fcilmente la fecha de ltima modificacin de las pginas. Cuando se modifica una pgina en la que se ha insertado este tipo de fecha, se actualizar automticamente con la fecha del sistema. Conviene insertar la fecha de modificacin cuando la pgina ha de contener informacin actualizada cada poco tiempo, para que los usuarios puedan saber cuando fue la ltima vez que se actualizaron los datos. Pero en el caso de que la pgina no se actualice hasta que pase cierto tiempo, es preferible no incluir la fecha de modificacin. Para insertar la fecha hay que dirigirse al men Insertar, a la opcin Fecha. En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea que se actualice o no automticamente al modificar y guardar la pgina de nuevo.

Para practicar puedes realizar el Ejercicio paso a paso Insertar fecha .

Regla horizontal

El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla horizontal. Una regla horizontal no es ms que una lnea horizontal. Para insertar una regla hay que dirigirse al men Insertar, opcin HTML, luego la opcin Regla horizontal. El inspector de propiedades para las reglas es el siguiente.

A travs de sus campos es posible modificar en cierta medida la apariencia de las reglas. A continuacin tienes cuatro ejemplos de reglas horizontales.

Estas reglas slo se diferencian en las opciones Al (altura) y Sombreado. Las dos primeras, por ejemplo, no tienen activada la opcin Sombreado, mientras que las otras dos s.

Unidad 13. Otros elementos (III)

Cdigo de otras pginas

13.3

En ocasiones nos gustara incluir en nuestras pginas cosas que hemos visto en otras pginas que estn publicadas en Internet. Puedes visualizar el cdigo fuente de dichas pginas a travs del men Ver del navegador Internet Explorer, opcin Cdigo fuente, o bien mostrar el men contextual de la pgina pulsando con el botn derecho sobre ella, y pulsando despus sobre la opcin Ver cdigo fuente. De este modo puedes consultar el cdigo que se ha utilizado para realizar la pgina, y utilizar dicho cdigo en las tuyas. Visualizar el cdigo fuente resulta til para ver cmo se ha estructurado la pgina, el uso de los comportamientos (que aparecen programados en cdigo JavaScript), y otra serie de rutinas JavaScript. Por ejemplo, pulsa aqu para abrir una pgina en la que aparece un efecto en la barra de estado del navegador, que muestra una marquesina, cuyo texto es CODIGO JAVASCRIPT - CURSO Dreamweaver 8 - AULACLIC.

Si miras el cdigo fuente de esa pgina podrs ver el cdigo javascript que utiliza para conseguir ese efecto en la barra de estado. El cdigo es el siguiente: <SCRIPT language=JavaScript> <!-strcnt=0; mensaje=" CODIGO JAVASCRIPT - CURSO Dreamweaver 8 - AULACLIC "; function scroller() { window.status=mensaje.substring(strcnt++,mensaje.length+1); if(strcnt>mensaje.length) strcnt=0; setTimeout("scroller()",200); } //--> </SCRIPT>

Dicho cdigo tiene que ir entre las etiquetas <HEAD> y </HEAD>, y aadir onload="scroller()" dentro de la etiqueta <BODY>, de modo que sta queda del siguiente modo: <BODY onload="scroller()"> Este cdigo no es demasiado complicado, y podras casi sin problemas aadirlo a tus pginas, para que mostrasen los mensajes que quisieras. Pero en muchas ocasiones puede costar entender el cdigo, sobretodo si no se tienen nociones de ningn lenguaje de programacin. Si no entiendes el cdigo, puedes cometer el error de copiar cdigo JavaScript errneo, copiarlo de forma incompleta, insertarlo en una zona incorrecta del cdigo html, etc. Lo importante que tienes que saber en este momento sobre las funciones JavaScript es que aparecen entre las lneas <HEAD> ... <SCRIPT language=JavaScript> <!-y //--> </SCRIPT> ... </HEAD>

Ejercicios del Tema 13.

Prueba evaluativa del Tema 13.

Unidad 14. Capas

14.1

Vamos a ver algunas de las caractersticas bsicas sobre las capas, para luego poder trabajar con ellas y aplicarles algn comportamiento.

Introduccin
Las capas no son ms que unos recuadros, que pueden situarse en cualquier parte de la pgina, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre s, lo que proporciona grandes posibilidades de diseo.

Las capas pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratn, arrastrndola hacia la nueva posicin. Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrndolos hasta conseguir el tamao deseado.

Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, animaciones flash, y todos los elementos que puede contener un documento HTML. Este icono capa. sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo se elimina tambin la

Insertar una capa

Las capas pueden insertarse en una pgina a travs del men Insertar, opcin Objeto de diseo, Capa. Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero. Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono correspondiente, pero esto no resulta til cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a esta, y no es fcil seleccionar la deseada a la primera.

Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a travs de la pestaa Capas del panel Diseo, que puede abrirse a travs del men Ventana opcin Capas. Si la opcin Capas no te aparece directamente en este men, posiblemente est dentro de la opcin Otros. Tambin puedes abrir el panel pulsando F2. En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel.

Formato de una capa

Las propiedades de la capa se especifican a travs de su inspector de propiedades.

ID de capa es el nombre de la capa. Tambin puede ser cambiado a travs del panel Capas, haciendo doble clic sobre l. Iz y Sup indican la distancia en pxeles que hay entre los lmites izquierdo y superior del documento y la capa. An y Al indican la anchura y la altura de la capa. ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs del panel Capas. Una capa ser solapada por aquellas capas cuyo ndice Z sea mayor que el suyo. Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: Default (visibilidad segn el navegador), Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando), Visible (muestra la capa, aunque la pgina no se est viendo) y Hidden (la capa est oculta). La visibilidad tambin puede cambiarse a travs del panel Capas, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden. A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa. Desb. (Desbordamiento) controla cmo aparecen las capas en un navegador cuando el contenido excede el tamao especificado de la capa. Visible indica que el contenido adicional aparece en la capa. La capa se ampla para darle cabida.

Hidden (oculto) especifica que el contenido adicional no se mostrar en el navegador. Scroll (desplazamiento) especifica que el navegador deber aadir barras de desplazamiento a la capa tanto si se necesitan como si no. Auto (automtico) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus lmites).

Para practicar puedes realizar el Ejercicio paso a paso Insertar una capa.

Ejercicios del Tema 14.

Prueba evaluativa del Tema 14.

Unidad 15. Comportamientos (I)

15.1

En este tema vamos a ver las caractersticas bsicas de los comportamientos, as como un par de ejemplos de entre sus posibles aplicaciones.

Introduccin
Los comportamientos son acciones que suceden cuando los usuarios realizan algn evento sobre un objeto, como puede ser mover el ratn sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc. Los comportamientos no existen como cdigo HTML, se programan en JavaScript. Dreamweaver permite insertarlos a travs del panel Comportamientos, por lo que no es necesario escribir ninguna lnea de cdigo JavaScript para programarlos. La imagen que aparece a continuacin tiene asociado un comportamiento. Sita el puntero sobre ella para ver qu es lo que ocurre.

Ests visualizando una capa que estaba oculta. Si dejas de situar el puntero sobre la imagen, la capa volver a ocultarse.

La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de comportamiento lo veremos ms adelante. Otros comportamientos que ya has visto son los que se aplican sobre las imgenes de sustitucin y las barras de navegacin, que ya estn predefinidos, por lo que no es necesario introducir este conjunto de comportamientos a travs del panel Comportamientos. Para validar formularios ya viste algunas caractersticas del panel Comportamientos. Vamos a recordar las que necesitamos para poder insertar comportamientos ms tarde. El panel Comportamientos se puede abrir a travs del men Ventana, opcin

Comportamientos. Tambin pulsando Mays+F3.

En este panel hay que desplegar el botn pulsando sobre l, y en Mostrar eventos para elegir una versin de la lista de navegadores. Algunos comportamientos no funcionan para algunos navegadores, por lo que dependiendo del navegador elegido aparecern unos u otros comportamientos posibles. Existen comportamientos que funcionan en Internet Explorer pero no en Netscape. Debido a que la mayora de usuarios utiliza Internet Explorer, vamos a seleccionar este navegador. Puedes seleccionar alguna de sus ltimas versiones: IE 5.5 o IE 6.0. Una vez elegido un navegador ya no es necesario volver a elegirlo las siguientes veces que se desee insertar algn comportamiento.

Insertar un comportamiento
Cuando ya hay establecido algn navegador, ya se pueden insertar comportamientos. Lo primero que hay que hacer es seleccionar el objeto sobre el que se ha de aplicar el comportamiento, como puede ser una imagen, un fragmento de texto, etc. Al desplegar el botn del panel Comportamientos aparece la opcin Mostrar eventos para, a travs de la cual se haba elegido el navegador. Tambin aparece la lista de todas las acciones posibles para el navegador elegido previamente, de entre las que se puede seleccionar una. Segn el elemento sobre el que se desee aplicar el comportamiento, se podrn elegir unas acciones, mientras que otras no.

En este caso la accin Validar formulario no puede seleccionarse porque no existe ningn formulario en la pgina. Despus de elegir alguna accin, el comportamiento correspondiente aparece en el panel Comportamientos. En este caso se han insertado dos comportamientos. Como puedes ver, cada comportamiento tiene asociados un evento y una accin. Las acciones son las que se han elegido en la lista anterior y el evento indica cundo se debe de realizar la accin.

Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el botn . Tambin es posible cambiar el orden de los comportamientos aplicados a un . objeto, seleccionndolos y ordenndolos mediante los botones

Unidad 15. Comportamientos (II)

Mostrar-Ocultar capas

15.2

Uno de los comportamientos ms habitual e interesante es el de Mostrar-Ocultar capas. Resulta obvio que para poder aplicar este comportamiento han de existir capas en el documento.

En la pgina anterior tenas un ejemplo de este tipo. Vamos a ver qu eventos y acciones hay que establecer para que se produzca dicho comportamiento. Despus de seleccionar la imagen hay que seleccionar una accin de la lista, pulsando sobre el botn . En este caso la accin tiene que ser la de Mostrar-Ocultar capas. Tras elegir la accin, hay que especificar qu capas han de mostrarse u ocultarse para el evento. Para ello hay que pulsar dos veces sobre la accin, en el panel Comportamientos. Entonces aparece una nueva ventana, con la lista de todas las capas que hay en la pgina, en la que puede indicarse la variacin que se va a producir sobre la visibilidad de cada una de las capas.

Puede indicarse si se van a Mostrar, si se van a Ocultar, o si van a adquirir la visibilidad inicial (Predeterminada). Para determinar la visibilidad de cada una de las capas es necesario seleccionarlas una por una, indicando su visibilidad a travs de los botones inferiores de la ventana.

No es necesario aplicar una visibilidad diferente a todas las capas de la pgina, solamente a las que se desea que cambien al producirse el evento. Por ejemplo, en este caso a la capa gatomes no se le ha aplicado ninguna visibilidad diferente, ya que no se desea que vare al producirse el evento. Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente hay que volver a pulsar sobre el botn correspondiente a la visibilidad que ya tiene aplicada. Por ejemplo, para eliminar la visibilidad aplicada a la capa gatosemana habra que volver a pulsar sobre el botn Mostrar. Hay que tener en cuenta en este caso que lo que se desea es que al situar el puntero sobre la imagen, se muestre la capa, y que cuando el puntero deje de estar sobre la imagen, la capa se vuelva a ocultar. Para ello es necesario insertar dos comportamientos con la accin Mostrar-Ocultar capas. Uno de ellos mostrar la capa para el evento onMouseOver (cuando el ratn est sobre),

mientras que el otro la ocultar para el evento onMouseOut (cuando el ratn est fuera).

Llamar JavaScript
Otro de los comportamientos que puede aplicarse sobre algn objeto es el de Llamar Javascript. Este comportamiento permite insertar cdigo JavaScript dentro del cdigo del documento. Por ejemplo, es posible hacer que se cierre la ventana del navegador al pulsar sobre un objeto. Para ello hay que insertar la lnea JavaScript "window.close();". Al igual que para el ejemplo de las capas, lo primero que hay que hacer es seleccionar el objeto sobre el que se desea aplicar el comportamiento. Seguidamente hay que seleccionar la accin . Llamar Javascript a travs del botn Entonces aparece una nueva ventana en la que hay que introducir la lnea JavaScript.

Una vez insertado el comportamiento, en el panel Comportamientos hay que establecer el evento onclick (al hacer clic) para que la llamada a JavaScript se produzca al pulsar una vez sobre el objeto. Pulsando dos veces sobre la accin vuelve a abrirse la ventana anterior, y es posible modificar la lnea de cdigo.

Para practicar puedes realizar el Ejercicio paso a paso Crear comportamiento.

Ejercicios del Tema 15.

Prueba evaluativa del Tema 15

Unidad 16. Comportamientos Avanzados (I)

16.1

En el tema anterior vimos algunos de los comportamientos bsicos, en este tema veremos otros comportamientos y veremos cmo utilizarlos y aprovecharnos de esta caracterstica de Dreamweaver para crear diversas funcionalidades automticamente.

Mensajes emergentes
Este comportamiento te permitir crear avisos emergentes como en el siguiente ejemplo.
Haz clic aqu.

Este comportamiento es til para poder enviar mensajes al usuario. Ten en cuenta que no debers abusar de ellos, pues a la larga pueden resultar un poco incmodos, utilzalos con un objetivo concreto y no porque quieras atraer la atencin del usuario.

Para crear un mensaje emergente debers seleccionar el elemento al cual ir asociado el mensaje, en el ejemplo es un texto. Una vez seleccionado ves al panel Comportamientos (Mayus+F4) pulsa el botn la opcin Mensaje emergente. Se abrir el siguiente cuadro de dilogo: y selecciona

Aqu debers introducir el Mensaje que quieras que se muestre. Pulsa Aceptar cuando hayas acabado y estar listo.

Es aconsejable que asocies este comportamiento al evento onClick (cuando el usuario hace clic). Es ms intuitivo para el usuario, por ejemplo, si asocias el mensaje a un evento onMouseOver (cuando se pase el ratn por encima) el usuario no sabr muy bien porque se ha generado el mensaje de aviso. En realidad no habr hecho ningn movimiento voluntario para recibir ese tipo de respuesta. Debido a esto (el estimulo-respuesta que espera el usuario), el evento onClick es el ms indicado para este caso.

Texto de la Barra de Estado

El Texto de la Barra de Estado es un elemento muy utilizado a la hora de personalizar una pgina web. Aunque no funciona en algunos navegadores. Si observas esta barra cuando navegas vers que va cambiando su texto segn te encuentres sobre un enlace o no. Normalmente, las pginas que no tratan la Barra de Estado (por ejemplo, esta) no muestran ninguna informacin. nicamente cuando posicionas el puntero sobre un enlace el texto de la Barra cambia para mostrar la direccin a la que este se dirige.
Observa este ejemplo, si haces clic sobre l te llevar a la pgina principal de aulaClic.

Cambiar el Texto de la Barra de Estado significara modificar el texto que aparece en ese momento cuando realizamos un evento sobre un elemento en particular. Por ejemplo:
aulaClic.es

Este comportamiento es muy til para personalizar mucho ms tu pgina y mostrar informacin que de otra forma no sera posible. Aunque no todos los navegadores son capaces de responder a este comportamiento.

Para crear este comportamiento selecciona el elemento al cual quieres asociar este comportamiento. Abre el panel Comportamientos (Mayus+F4) y pulsa el botn . Luego selecciona la opcin Definir texto y haz clic en Establecer texto de la barra de estado.

Aqu debers escribir el texto que quieres que aparezca en el cuadro Mensaje, luego pulsa Aceptar y listos.

Dnde y cmo asociar el texto en una pgina? es sencillo. Una de las opciones que te da este comportamiento es poder asociar un texto en concreto a la pgina en s. Es decir, que cuando abras una pgina se muestre inmediatamente (y permanentemente) un texto en la barra de estado. Eso es posible creando el mensaje asociado al body de la pgina (para ello tendrs que insertar el comportamiento sin seleccionar ningn elemento para que se asocie con toda la pgina) y lanzndolo en el evento onLoad (en la carga del documento). De esta forma cuando se abra la pgina se mostrar el mensaje en la barra de estado y permanecer all hasta que se produzca un cambio (por ejemplo, que se posicione el cursor sobre un enlace).

Ahora veamos cmo debemos actuar al establecer texto para los enlaces. En este caso ser necesario que introduzcamos dos comportamientos.

El primero, asociado al evento onMouseOver (cuando el ratn se encuentra encima) que mostrar el mensaje que queramos. El segundo deber ir asociado al evento onMouseOut (cuando el ratn deja de estar encima) que deber limpiar la barra de estado para que recupere su estado anterior. En el caso de que hubisemos establecido un mensaje para el body de la pgina, al salir de un enlace (en el onMouseOut) deberemos volver a escribir ese mensaje para que siga mostrndose. En el caso de que la pgina no tuviese un mensaje personalizado, deja el cuadro Mensaje en blanco para que la barra de estado recupere su estado natural.

Observa que si no estableces el segundo comportamiento, cuando posiciones el ratn sobre el enlace (o imagen, prrafo..., da igual) el texto de la barra de estado cambiar. Pero cuando el ratn deje de estar sobre el elemento no habr ninguna orden para que el texto vuelva a cambiar y se mantendr fijo con el mensaje del anterior comportamiento.

Unidad 16. Comportamientos Avanzados (II)

Carga Previa de Imgenes

16.2

Este comportamiento te ser muy til para mejorar la visualizacin de tus pginas web. Al cargar previamente las imgenes contenidas en la pgina obligamos al navegador a descargar las imgenes con prioridad sobre el resto del documento. As cuando la pgina finalmente se visualiza (porque ha terminado la carga) el usuario ver la estructura completa de la pgina con las imgenes incluidas ya cargadas y mostrndose.

Este mtodo se diferencia del tradicional en que si no establecemos este comportamiento, la pgina se carga (slo texto) y se visualiza. Una vez terminada esta carga, el navegador empieza la descarga de las imgenes. Por lo que hay unos momentos en los que la pgina no se muestra tal y como fue concebida, e incluso su estructura puede verse afectada si no se introdujeron los valores de altura y anchura de las imgenes contenidas (el texto se dispondra sin tenerlas en cuenta hasta que se descargasen).

Para evitar esto utilizaremos la Carga Previa de Imgenes. Para ello deberemos abrir el panel Comportamientos (Mayus+F4) y hacer clic sobre el botn selecciona, entonces, la opcin Carga previa de imgenes. Se abrir el siguiente cuadro de dilogo: ,

Aqu debers incluir las imgenes que quieras que se carguen utilizando los botones podrs indicar su ubicacin pulsando el botn Examinar.

Respecto a este comportamiento debers de tener en cuenta dos cosas. La primera y ms obvia es que no cargues imgenes que no vayas a utilizar. No tiene sentido que desaproveches tiempo de descarga y visualizacin en cargar una imagen que no vas a utilizar.

El segundo consejo es que no abuses de este comportamiento. Es verdad que es muy til, pero slo cuando las imgenes a cargar no son muchas y adems son bastantes ligeras. Si cargas previamente imgenes muy pesadas, o demasiadas como para que el navegador se detenga durante unos segundos mientras realiza la carga, es posible que el usuario al ver que tu pgina tarda demasiado en cargarse la abandone.

Unidad 16. Comportamientos Avanzados (III)

Abrir Ventana del Navegador

16.3

Este comportamiento, aunque a primera vista creas que no sirva para mucho, te ayudar a crear enlaces mucho ms personalizados. Asociaremos este comportamiento normalmente a un enlace, o como mucho a una imagen o un botn. Pero siempre lo haremos asociado al evento onClick de estos elementos. Otra opcin es asociarlo al evento onLoad del body para que cuando se cargue el documento abra al mismo tiempo una nueva ventana que dirigiremos a la URL que queramos.

En esencia este comportamiento es un creador de pop-ups o ventanas emergentes, as que si el usuario dispone de un bloqueador es posible que no se pueda llevar a cabo la apertura de la nueva ventana. Pero veamos qu debemos hacer para poder abrir una ventana de este modo. Primero seleccionaremos elemento asociado al comportamiento, si lo que queremos es que se asocie al body de la pgina haremos clic en una rea vaca del documento. Luego abre el panel Comportamientos (Mayus+F4) y pulsa el botn para desplegar la lista.

Selecciona la opcin Abrir ventana del navegador y vers el siguiente cuadro de dilogo:

Veamos las opciones que podemos seleccionar aqu. En Mostrar URL: escribiremos la URL de la pgina que queremos abrir. En los cuadros de texto de Ancho de la ventana: y Alto de la ventana: podremos especificar su tamao en pxeles. El cuadro Nombre de la ventana: te permitir darle un nombre a la nueva ventana. As, ms tarde, utilizando JavaScript, podramos referenciarnos a ella utilizando este nombre.

En Atributos: marca las casillas para que los elementos como la barra de estado o la barra de mens aparezcan en la nueva ventana. Si dejas todos desmarcados, la ventana se abrir sin ningn elemento y aparecer nicamente rodeada de un marco de pgina.

Unidad 16. Comportamientos Avanzados (IV)

Comprobar Navegador

16.4

Podemos utilizar este comportamiento para crear dos pginas diferentes dependiendo del navegador que est utilizando el usuario. Esta opcin existe debido a que Internet Explorer suele comportarse de forma diferente al resto de navegadores. Su poltica de seguimiento de los estndares vara un poco respecto a las dems. Por lo que una pgina se puede ver diferente en IE y en Firefox siendo que tiene el mismo cdigo!

Para saltarnos este error entre los navegadores aparece este comportamiento que utilizaremos para evaluar el navegador que est utilizando el usuario y mostrando una pgina u otra utilizando redireccionamientos. Veamos el cuadro de dilogo que se muestra al seleccionar Comprobar navegador al hacer clic en el botn del panel Comportamientos:

Como puedes ver hay dos bloques importantes en esta ventana Netscape Navigator e Internet Explorer, esto es debido a que son los ms utilizados. Podemos seleccionar la versin a partir de la cual el cambio de URL se realice, si no tienes muy claro qu valores debes escribir djalo como est. Los valores por defectos son bastante acertados. Luego debers seleccionar qu quieres hacer en cada uno de los casos (que se cumpla la versin o no). Para ello debers rellenar las dos cajas de texto que se encuentran al pie de la ventana URL y Alt URL (URL alternativa). En los desplegables encontrars tambin la opcin Permanecer en esta pgina cuyo uso es bastante aconsejable, as evitars saltos de URLs innecesarios.

Finalmente el tercer bloque Otros navegadores te permite exactamente las mismas opciones que las anteriores. Esto, en realidad, se debe a que las versiones antiguas de Netscape e IE son las ms problemticas y por ello se dedican pginas especiales para ellos.

Un consejo que te podramos dar es que te instales diferentes navegadores en tu PC y hagas pruebas del visionado de las pginas antes de publicarlas. As te asegurars de que el resultado sea ptimo en todos los casos.

Este comportamiento debe ir asociado al evento onLoad de la etiqueta body para que se ejecute en la carga de la pgina.

Comprobar Plug-ins
Otro comportamiento que tiene que ver con la comprobacin de las caractersticas del navegador del usuario es la opcin Comprobar Plug-ins. Si haces clic sobre ella vers el siguiente cuadro de dilogo:

Este comportamiento nos dar la posibilidad de comprobar si el navegador tiene instalados los plug-ins (o aadidos) necesarios para que pueda ver archivos de tipo Flash, Quicktime, Shockwave, RealPlayer, etc... Para ello deberemos seleccionar el tipo de plug-in que requerimos para que nuestra pgina se visualice correctamente, en el caso de que no se encuentre en el desplegable Seleccionar: deberemos escribir su nombre en el cuadro de texto Introducir: (aunque esto ocurrir en contadas ocasiones).

Rellena los campos de URL siguientes. El primero indicar la ruta de la pgina que quieres que se muestre si el plug-in existe en el navegador del usuario. Djalo en blanco si quieres que se quede en la pgina en la que est. Y en el campo De lo contrario, ir a URL: escribe la ruta a la que debe redirigirse el navegador en caso de que no tuviese el plug-in instalado. Aqu tienes dos opciones, o bien redirigir al usuario a la pgina donde descargarse el plug-in para poder visualizar la tuya correctamente, o redirigirlo a una pgina que hayas creado para aquellos que no cumplan los requisitos mnimos del sitio.

Este comportamiento tambin deber ir asociado al evento onLoad del body para que pueda ejecutarse en la carga de la pgina.

Normalmente este comportamiento slo tendr un uso prctico en Internet Explorer, ya que la mayora del resto de los navegadores soportan por s solos la deteccin de plug-ins instalados y redireccionan a la fuente del plug-in directamente.

Unidad 16. Comportamientos Avanzados (V)

Mens de Salto
Principio del formulario

16.5

Seccin 1
Final del formulario

Aunque este comportamiento se encuentra en el listado del panel Comportamientos vamos a aprender a insertarlo desde otro lugar ya que te ser ms fcil. Un men de salto no es ms que un men desplegable desde el que puedes saltar de una pgina a otra con slo seleccionar la opcin correspondiente en el men. Justo al principio del apartado tienes un ejemplo (no es funcional pero puedes desplegarlo para hacerte una idea) que ilustra el aspecto que tendra este tipo de mens.

Insertarlo es muy sencillo, slo tienes que hacer clic en Insertar, seleccionar la opcin Formulario y en el desplegable elegir Men de salto. Se abrir este cuadro de dilogo:

Para crear el men debers introducir los elementos (opciones) que lo forman. Para ello escribe en Texto el ttulo de la pgina y en Al seleccionarse, ir a URL la ruta de la pgina que se tiene que abrir si el usuario selecciona esta opcin del men. Una vez rellenados estos campos, haz clic en el botn .

Luego repite el proceso tantas veces como elementos en el men quieras insertar. Cuando hayas acabado decide en qu ventana quieres abrir los enlaces en Abrir URL en: y dale un nombre al men (para reconocerlo mejor ms tarde) en Nombre del men.

Luego puedes marcar la opcin Seleccionar primer elemento tras el cambio de URL para que cuando se abra la ventana el elemento del men que se muestre sea el primero. Djalo desmarcado si quieres que se muestre el de la pgina que se est visualizando.

Principio del formulario

Seccin 1
Final del formulario

Luego marca la opcin Insertar botn Ir tras el men para que se aada un botn al formulario. Si escoges esta opcin vers que se crea un men como el que tienes justo sobre este prrafo. El funcionamiento de este men de salto es muy parecido al anterior, slo que una vez seleccionada la pgina que mostrar hay que pulsar el botn para que se efecte el salto.

Unidad 16. Comportamientos Avanzados (VI)

Mens Emergentes

16.6

Esta es una de las herramientas ms utiles en cuanto al uso de JavaScript en Dreamweaver. Como puedes ver en la parte superior izquierda de este apartado hemos creado tres mens emergentes de una forma sencilla y con una apariencia fenomenal, cada uno de los mens lo hemos asociado a una imagen. Lo nico que debers tener en cuenta es que estos mens slo se pueden asociar a enlaces o a imgenes. Si no quieres utilizar imgenes, simplemente coje el texto (colcalo en la parte superior de la pgina) y dale como vnculo #, se convertir en un enlace vaco. El enlace no har nada pero estar listo para que le asignes el men.

Ms adelante veremos que crear enlaces vistosos para utilizar en estos mens es muy fcil con CSS.

La alternativa de las imgenes es muy socorrida, puedes utilizarla en cualquier posicin dentro de la pgina y son un poco ms elegantes.

Para crear uno de estos mens selecciona la imagen o el enlace que hayas creado para tal efecto y selecciona Mostrar men emergente en el panel Comportamientos haciendo clic en el botn . Se abrir el siguiente cuadro de dilogo:

Rellenar este men es igual de fcil que el anterior. Solo introduce el Texto del enlace, la ruta del Vnculo y su Destino, es decir, dnde se abrir. Cuando lo tengas haz clic en el botn . para

Hazlo tantas veces como sea necesario y luego reordnalos utilizando las flechas moverlos de arriba a abajo y viceversa.

podrs crear los diferentes niveles dentro del men, con el primer colocas Con los botones el elemento seleccionado al mismo nivel que el anterior, con el segundo botn colocars el elemento seleccionado dentro del anterior.

Luego puedes visitar el resto de las pestaas para mejorar su aspecto del men. Realiza el ejercicio paso o paso de Mens Emergentes para practicar el resto de opciones.

Ejercicios del Tema 16.

Prueba evaluativa del Tema 16.

Unidad 17. Estilos CSS Avanzado (I)

17.1

En temas anteriores vimos cmo funcionaba el Panel CSS y cmo crear hojas de estilos para poder utilizarlas en tus pginas web. En este tema aprenderemos ms sobre CSS, pero orientndonos ms a qu es CSS y cmo crear estilos CSS para crear pginas que sigan los fundamentos y reglas marcadas por el W3C (Word Wide Web Consortium). Esta metodologa exige que el archivo HTML solamente muestre datos organizados y estructurados con etiquetas de marcacin HTML, mientras que la parte de formato recaera sobre los estilos CSS nica y exclusivamente. Para poder lograr esto deberemos dominar en profundidad CSS para poder posicionar, modificar o adornar la pgina de un modo eficiente. En este tema aprenderemos controles que nos ayudarn a presentar el texto e imgenes de nuestras pginas de una forma mucho ms limpia y cmoda.

Aplicar estilos CSS

Hasta ahora, si has entrado un poco en el cdigo de las pginas, habrs visto etiquetas que introducan estilos CSS en ellas. La forma ms habitual de presentarse es en la seccin head de la pgina de esta forma: <style type="text/css"> <!-body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; background: url('imagenes/fondo.gif') repeat-x bottom; } //-> </style>

Este mtodo lo utilizaremos para incrustar el cdigo directamente sobre el archivo HTML.

Tambin es posible importar archivos de hojas de estilos (de extensin .css) que hayamos creado. Como ya hemos visto esta opcin es mucho mejor porque as podemos aplicarla sobre varias pginas a la vez sin la necesidad de escribir el cdigo en cada una de ellas. En este caso deberemos crear un archivo CSS (Archivo Nuevo y seleccionando CSS) donde escribiremos las reglas de estilo del mismo modo en el que hemos visto ms arriba pero eliminado el componente HTML: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; background: url('imagenes/fondo.gif') repeat-x bottom; } Luego deberamos vincularlo en la pgina HTML utilizando la etiqueta link: <link rel="stylesheet" href="ruta/del/estilo/nombre.css" />

Una pgina puede contener ambos tipos de estilos CSS, como por ejemplo, tener un archivo vinculado y luego un bloque de estilo incrustado. O incluso tener varias hojas de estilo asociadas. La organizacin de los estilos debes decidirla t. Pero recuerda que cuanto menos cdigo repitas en tus pginas, ms fcil ser luego de modificar o exportar.

Tambin es posible declarar el estilo en lnea. Es decir, tal y como se van creando las etiquetas HTML, para ello debers utilizar el atributo style: <p style="color: red; font-size: 30px;">Este texto est en rojo y con un tamao de 30 pxeles</p> El estilo en lnea es ms desaconsejado porque es ms difcil de modificar al tener que buscarlo por el texto y modificndolo uno a uno.

Para practicar realiza el Ejercicio Paso a Paso de Creacin de una Hoja de Estilo.

Unidad 17. Estilos CSS Avanzado (II)

Estructura CSS

17.2

Un archivo CSS (por suerte) tiene una estructura muy bien definida, por lo que bastar con que nos aprendamos unas cuantas reglas para poder empezar a familiarizarnos con su creacin. Su estructura siempre es la siguiente: selector { propiedad:valor; }

Esto es lo que podramos llamar una regla CSS. Podemos escribir tantas reglas CSS como queramos, siempre una despus de otra. Entre llaves se encierra la definicin del estilo, que viene dada por una lista de propiedades y sus valores separados por puntos y comas.

Los selectores son aquellos sobre los que se aplica la definicin del estilo CSS. Hay 3 tipos de selectores: Etiqueta HTML Clase Identidad Cualquier etiqueta HTML es un selector (eliminando los < y >). Por lo que cualquier elemento de una pgina puede ser modificado genricamente para que tome un mismo aspecto, por ejemplo: p {font: 13px bold Arial;} Hace que todos los prrafos (la etiqueta P) tendrn la fuente de un tamao de 13 pxeles, estar en negrita y ser del tipo Arial.

Una clase es un selector que afectar slo a aquellas etiquetas que nosotros decidamos, por ejemplo: .rojo {color: red;} Hemos creado una clase que hace que el color de la letra que tenga asociada esta clase sea rojo. Como puedes ver, la clase se define porque tiene un punto delante. Ahora podramos aplicar este estilo sobre cualquier etiqueta que queramos. <p class="rojo">Este es un texto en rojo</p>

<div class="rojo">Este es un bloque con el texto rojo</div> En este ejemplo estaramos creando un prrafo o un bloque y ambos tendran el texto de color rojo por habrseles aplicado la misma regla CSS. Los selectores de clase deben estar siempre escritos con carcteres alfanumricos y sin utilizar espacios (utiliza el subrayado _ para separar palabras).

Por ltimo encontraramos los selectores de identidad. Estos slo se aplican una vez y se asocian a una etiqueta. #contenedor {width: 600px;} Ms tarde en el cdigo podremos encontrar: <div id="contenedor">Este es un bloque que contiene texto</div> Las clases de identidad se identifican por empezar el selector con un signo #. En el cdigo deber establecerse la regla CSS asocindosela al atributo ID. Este atribudo (id) recoge el nombre del elemento que se ha creado con la etiqueta HTML. A partir de ese momento se podra referenciar a ese cuadro de texto como contenedor utilizando JavaScript.

Unidad 17. Estilos CSS Avanzado (III)

Selectores CSS

17.3

Aunque slo hay tres tipos de selectores diferentes hay diversas formas de combinarlos para producir hojas de estilo ms complejas. Ahora veremos estos tipos de combinacin: Agrupacin: Los selectores se pueden agrupar separados por comas, por lo que: p { background-color: #000033; } .azul_oscuro { background-color : #000033; } #cabecera { background-color: #000033; } Puede escribirse como: p, .azul_oscuro, #cabecera { background-color: #000033; }

Descendencia: Podemos obligar que un estilo slo se aplique sobre un elemento que est dentro de otro. Por ejemplo: h1 { color: #0000FF; font-weight: bold; } b { color: #0000FF; } Esto har que todos los encabezados H1 de la pgina sean de color azul y en negrita, y que los textos en negrita se muestren azules. Pero, qu pasa si queremos resaltar texto en los encabezados, no podremos utilizar la negrita? <h1>Ttulo: El uso de la <b>Negrita</b></h1> En este caso deberemos hacer uso de la descendencia: h1 b { color: red; } Ahora los textos marcados con la etiqueta B en los encabezados H1 sern de color rojo.

Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar dentro del anterior.

Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por ejemplo: #contenedor p .derecha { float: right; } En este caso todas las etiquetas con la clase derecha que se encuentren dentro de un prrafo del elemento definido como contenedor flotarn a la derecha.

Selectores de Atributo
Hasta ahora hemos visto que los selectores se pueden combinar de bastantes formas. Veamos que el poder de CSS no slo se queda ah sino que avanza un poco ms para ayudarnos a establecer estilos segn el tipo de atributos que tenga una etiqueta.

Un atributo es una parte de la descripcin de un selector HTML. Por ejemplo, en: <a href="http://www.aulaclic.es" target="_blank">Enlace</a> A es el selector de la etiqueta, mientras que href y target son atributos.

CSS permite entrar en el contenido de las etiquetas para cambiar sus estilos. Veamos cmo hacerlo: Nombre de Atributo: Podemos establecer estilos para etiquetas con determinados atributos definidos, por ejemplo: a[href] { font-family: Arial, Helvetica; } En esta lnea estamos estableciendo que cualquier etiqueta a que tenga el atributo href cambie su tipo de letra a Arial o Helvtica.

Valor de Atributo: Podemos aplicar estilos a etiquetas que tengan determinado valor en un atributo, por ejemplo: a[target="_blank"] { font-weight: bold; } Esta lnea har que se convierta en negrita cualquier enlace que abra una nueva ventana al hacer clic. Interesante, verdad?.

Unidad 17. Estilos CSS Avanzado (IV)

Pseudo-clases y Pseudoelementos CSS

17.4

Por ltimo, y para terminar con los selectores veremos las pseudo-clases, elementos que aadiremos a los selectores para evidenciar algn estado. Y los pseudo-elementos, que aplicaremos sobre los selectores en dos casos muy sencillos.

Primero veremos 4 tipos diferentes de pseudo-clases, que hasta ahora slo pueden aplicarse sin ningn problema sobre la etiqueta A (que utilizamos para crear vnculos). Son: :link, :visited, :hover y :active. Incluyendo estas pseudo-clases en nuestros estilos CSS podremos modificar el modo en el que se visualizarn los enlaces. Veamos el siguiente ejemplo: a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; } Esto har que los enlaces se muesten de color rojo (red) en nuestra pgina. Es el estado link. Cuando ya hayan sido visitados por el usuario se quedarn de color azul (blue). Es el estado visited. Este estado se renovar dependiendo del navegador utilizado y se mostrar durante un tiempo determinado (una sesin, etc...). En el momento en que coloques el ratn sobre l se mostrar de color verde (green). Es el estado hover. Y finalmente en el momento que se haga clic sobre l, y mientras se mantenga pulsado el botn se ver de color amarillo (yellow). Es el estado active.
Prueba este enlace

Puedes aplicar estas pseudo-clases de cualquier forma de las anteriores. a.menu:hover { text-decoration: none; } Esta lnea har que los elementos A de la clase menu no muestren subrayado (ni ningn tipo de decoracin) cuando se coloque el ratn sobre l.

Puedes utilizarlas todas a la vez o descartar los estados que no quieras tratar. Pero recuerda, debern estar declaradas en el estilo CSS en este orden para que funcionen correctamente. Si los cambias de orden es posible que no te funcionen.

Luego tenemos dos pseudo-elementos que actuarn sobre el texto del documento, son: :firstletter y :first-line (primera letra y primera lnea respectivamente). p:first-letter { font-size: 26px; } p:first-line { font-variant: small-caps; } Puedes ver un ejemplo de cmo actuaran estos pseudo-elementos en la siguiente lnea:
Esto es una Prueba, la primera lnea esta en versales y la primera letra tiene un tamao de 26px.

Para practicar los pseudo-elementos y clases realiza el Ejercicio Paso a Paso de Pseudoelementos y clases.

Unidad 17. Estilos CSS Avanzado (V)

Controles de fuente

17.5

Ya hemos visto cmo manejarnos con los selectores, ahora veremos cmo deberemos crear las definiciones de los estilos. Empezaremos viendo los controles de modificacin de fuentes:

font-family: indica la familia de fuente en la que se mostrar el texto, puede tomar los valores serif, sans-serif, cursive, fantasy y monospace:

serif, sans-serif, cursive, FANTASY, monospace...

Aunque esta propiedad tambin soporta que nombres un listado de diferentes fuentes. El navegador las buscar en el equipo del usuario y si la encuentra la mostrar. El orden en este caso tambin es importante, pues mostrar la que primero encuentre. Es recomendable, aun as, indicar siempre una familia en el caso de que no se encontrase ninguna de las fuentes instaladas, ejemplo: p { font-family: Arial, Helvetica, sans-serif; }

font-style: indica el estilo de la fuente, puede tomar los valores italic y oblique.

italic, oblique
Algunas fuentes estn hechas especialmente para tener una variante en italic (cursiva), para aquellas que no lo tengan implementado utiliza el atributo oblique que hace que el navegador incline automticamente la fuente para mostrarla en cursiva.

font-variant: establece la variante de la fuente. Puede tomar el valor small-caps (versales). El valor normal har que se muestre el estado por defecto de la fuente.

SMALL-CAPS, Normal
font-weight: indica el peso de la fuente. Los valores ms utilizados son: bolder, bold y lighter. Tambin puedes utilizar valores del 100 al 900, siendo el primero la fuente ms ligera y el ltimo el ms pesado.

bolder, bold, lighter

font-size: establece el tamao de la fuente. Puedes utilizar lo valores predefinidos smaller, larger, xx-small, x-small, small, medium, large, x-large y xx-large. Los dos primeros valores establecen el tamao de la fuente en comparacin a la definida en el elemento padre donde se encuentra, as se mostrar ms pequea (smaller) o ms grande (larger).

xx-small, x-small,

small, medium,

large, x-large,

xx-large

Tambin es posible establecer el tamao del texto utilizando porcentajes. Que tambin mostrar el texto en relacin a su elemento padre. Pero, de lejos, la forma ms utilizada es especificando expresamente el tamao de la fuente en una cifra. Las unidades utilizadas son varias, ems, puntos, pxeles... El sistema de puntos (pt) vara un poco segn los sistemas operativos, por lo que es aconsejable utilizar alguno de los restantes: a { font-size: 12em; } p { font-size: 14px; }

Es posible definir todos estos estilos que hemos visto en una sola definicin. Para ello utilizaremos font:. As una retala de reglas como esta: p { font-style: italic; } p { font-variant: small-caps; } p { font-weight: bold; } p { font-size: large; } p { font-family: monospace; } Puede escribirse como: p{ font: italic small-caps bold large monospace; } Recuerda que el orden debe ser siempre el mismo: style, variant, weight, size y family. Si no vas a utilizar una de las definiciones puedes omitirla como en este ejemplo: p{ font: bold sans-serif; }

Unidad 17. Estilos CSS Avanzado (VI)

Espaciado

17.6

Continuando con los controles de texto tenemos la propiedad word-spacing que establece la separacin entre las palabras de un texto. Este texto tiene una separacin de 18 pxeles entre sus palabras. Este, sin embargo, tiene una separacin de -5 pxeles.

Tambin podemos utilizar la propiedad letter-spacing para establecer la distancia aplicada entre los caracteres del texto: Este texto tiene sus palabras. una separacin de 5 pxeles entre

Este,sinembargo,tieneunaseparacinde-2pxeles.

vertical-align establece la alineacin vertical del texto. Puede tomar los valores baseline, sub, super, top, text-top, middle, bottom, text-botom. baseline,
sub, super,

top,

text-top,

middle,

bottom,

text-bottom

Observa como los valores sub, super, text-bottom y text-top toman como referencia el tamao del texto, mientras que top, middle y bottom toman como referencia el alto del prrafo completo (en este caso lo marca la imagen de aulaClic).

line-height indica el alto de lnea del texto, igual que el resto de propiedades puedes establecer esta altura en pxeles, ems o puntos.

Este texto tiene un alto de lnea de 30 pxeles. Puedes ver que la separacin entres estas lneas es mayor que la definida por defecto. Este texto tiene un alto de lnea de 10 pxeles. Puedes ver que la separacin entres estas lneas es menor que la definida por defecto.

Si estableces simplemente valores numricos podrs indicar el alto respecto a su tamao normal. Por ejemplo: p { line-height: 2; }

Esta lnea muestra el texto con un interlineado doble. Si hubiesemos escrito 1.5 el interlineado sera un 50% ms alto de lo normal.

text-align establece la alineacin horizontal del texto. Sus valores ya te deben ser familiares: left, right, center y justify.
Este texto est alineado a la izquierda con left. Este texto est alineado a la derecha con right. Este texto est alineado al centro con center. Este texto est justificado, ambos mrgenes del texto tocarn los bordes. Si es necesario estirar las lneas se har.

text-indent indica el tamao de identacin (o sangra) del texto. Tomar valores en puntos, pxeles o ems, como prefieras. Texto identado 24px Texto identado 48px Texto identado 72px

white-space, esta propiedad es muy til para evitar que el ancho del navegador modifique el ancho de las lneas del texto. Puede tomar el valor nowrap para que el texto se muestre en una sla lnea sin insertar saltos no deseados: Este texto no tiene saltos de lnea, as que se mostrar en toda su anchura aunque el navegador sea ms estrecho. Haz ms pequea la ventana para probarlo.

Tambin puedes establecer esta propiedad al valor pre. En este caso todos los espacios insertados en el texto se mostrarn y no se convertirn en uno slo como ocurre normalmente: En este texto podemos introducir tantos espacios como queramos. Da igual si son ms de uno, se mostrarn igualmente. Este ltimo valor no funciona correctamente en Internet Explorer as que es recomendable utilizar la entidad HTML ( ) para mostrar ms de un espacio.

Unidad 17. Estilos CSS Avanzado (VII)

Aspecto del texto

17.7

text-decoration establece si el texto llevar decoracin o no. Esta propiedad es muy til para modificar el estilo de los enlaces. Los valores que puede tomar esta propiedad son none, underline, overline, line-through, blink.

none, underline, overline, line-through, blink

El valor blink hace que el texto parpadee. Este valor slo funciona en determinados navegadores (no en Internet Explorer).

Con la propiedad text-transform puedes indicar la transformacin del texto de la siguiente forma. Capitalize cambia la primera letra de cada palabra a maysculas. Uppercase y lowercase cambian el texto a maysculas o minsculas respectivamente.

Este texto tiene el valor capitalize, las primeras letras sern en maysculas, el resto se mostrar en minsculas automticamente ESTE TEXTO TIENE EL VALOR UPPERCASE, AUNQUE ESTE ESCRITO EN MINSCULAS SE CAMBIAR A MAYSCULAS Este texto tiene el valor lowercase, aunque este escrito en maysculas se cambiar a minsculas

Por ltimo veremos la propiedad color que establece el color del texto. Esta propiedad puede tomar un valor hexadecimal (como vimos en el apartado de colores del tema 3). De modo que simplemente hara falta especificar el color de este modo: p { color: #006600; } Unos ejemplos seran los siguientes:
#006600 #990000 #00FF00 #999900 #003399 #FF9933 #33CC99 #996699 #66CCFF #CCFF33 #00CCCC #CCFF99

Tambin existe la posibilidad de utilizar unas palabras reservadas para nombrar unos cuantos colores bsicos.

El modo en el que se definira el estilo sera el mismo: p { color: red; } Aunque en este caso en vez de introducir su equivalente hexadecimal, referenciaramos directamente su nombre. Puedes encontrar el listado de los nombres de color que puedes utilizar en el sitio de la W3C.

Para practicar realiza el Ejercicio Paso a Paso de Controles de Fuente.

Controles de ratn
Hemos decidido dedicar este apartado a la propiedad cursor que modifica la apariencia del ratn cuando se sita sobre una etiqueta afectada por esta propiedad CSS. Puedes aplicarla sobre prrafos, enlaces o incluso sobre el body mismo (as el cursor tendr una forma personalizada en toda la pgina!).

El modo en el que se utiliza es igual que el resto: p{ cursor: pointer; } Y puede tomar los valores auto, crosshair, pointer, move, n-resize, ne-resize, e-resize, seresize, sw-resize, w-resize, nw-resize, text, wait y help.

Aqu tienes un ejemplo de cada uno de los cursores. Sita el ratn sobre ellos para ver el efecto:
auto enlace nresize enlace crosshair enlace neresize enlace pointer enlace eresize enlace move enlace seresize enlace text enlace swresize enlace wait enlace wresize enlace help enlace nwresize enlace

Para practicar realiza el Ejercicio Paso a Paso de Controles de Ratn.

Unidad 17. Estilos CSS Avanzado (VIII)

Controles de lista

17.8

Hemos visto muchas propiedades que afectan al modo en el que se muestran los textos de nuestras pginas. Ahora haremos un alto para ver unas cuantas propiedades que utilizaremos para dar estilo a nuestras listas.

list-style-type permite establecer el tipo de vieta utilizada en las listas, puede tomar los valores disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha y none.
disc 1 disc 2 disc 3 o o o circle 1 circle 2 circle 3 square 1 square 2 square 3

1. decimal 1 2. decimal 2 3. decimal 3

i. ii. iii.

lower-roman 1 lower-roman 2 lower-roman 3

I. II. III.

upper-roman 1 upper-roman 2 upper-roman 3

a. lower-alpha 1 b. lower-alpha 2 c. lower-alpha 3

A. upper-alpha 1 B. upper-alpha 2 C. upper-alpha 3

none 1 none 2 none 3

Este estilo debe ir asociado a la etiqueta li, ul o ol.

list-style-image permite mostrar una imagen en lugar de una vieta. La forma en la que lo haremos ser la siguiente: ul { list-style-image: url(graficos/lista.gif); } As declararemos el estilo. Luego bastar con escribir una lista desordenada, pues hemos utilizado el selector ul para marcar el estilo.
elemento 1 elemento 2 elemento 3 elemento 4

Observa que hemos utilizado una URL. Esta ruta debe ser o bien absoluta, o relativa a la hoja de estilos. Nunca al documento donde se aplica!

list-style-position sirve para establecer sangrados colgantes. Puede tomar dos valores outside (fuera) e inside (dentro). Veamos un ejemplo que lo ilustrar perfectamente:
elemento 1 elemento 2 con valor outside elemento 3 elemento 4 con valor inside elemento 5

Como puedes ver el valor inside alinea la vieta con el principio del texto del elemento anterior. Outside alinea la vieta del elemento en la posicin predefinida. Utiliza este ltimo valor para destacar listas definidas como inside.

Por ltimo, como en los controles de fuente, existe un modo en el que podemos escribir todas estas reglas sin tener que escribirlas una a una. Para ello utilizaremos la propiedad list-style. De este modo el siguiente bloque: ol { list-style-type: upper-alpha; list-style-position: outside; list-style-image: url(imagenes/bullet.gif); } Puede escribirse como: ol { list-style: upper-alpha outside url(imagenes/bullet.gif); }

Ten en cuenta siempre el orden type, position e image. Si no quieres utilizar alguna de ellas, simplemente omtela.

Unidad 17. Estilos CSS Avanzado (IX)

Controles de fondo
En este apartado veremos las propiedades que pueden aplicarse sobre el fondo.

17.9

Estas propiedades se pueden aplicar sobre muchos de los elementos, tanto celdas, prrafos o el body de la pgina.

background-color permite establecer el color de fondo. Utiliza los mismos cdigos hexadecimales o los nombres de color que vimos en la propiedad color del texto. La sintaxis es igual a la que hemos visto hasta ahora: td.rojo { background-color: red; }

background-image establece una imagen de fondo para el elemento. body { background-image: url(imagenes/fondo.jpg); } Por defecto, las imgenes se posicionarn en la esquina superior izquierda y en mosaico.

background-repeat indica el modo de repeticin de la imagen establecida para el fondo. Puede tomar los siguientes valores: repeat: la imagen se repite a modo de mosaico hasta ocupar la pgina completa. repeat-x: la imagen se repite a lo largo del eje horizontal. repeat-y: la imagen se repite a lo largo del eje vertical. no-repeat: la imagen no se repite. Por omisin, el valor que se toma es repeat, por lo que se genera un mosaico con la imagen del fondo. Debers declarar la URL de la imagen para poder utilizar esta propiedad:

#menu { background-image: url(imagenes/menu.gif); background-repeat: repeat-x; }

texto texto texto texto texto texto texto texto texto texto texto texto texto
background-attachment se utiliza para indicar si la imagen de pantalla es fija o se desplaza con el movimiento de las barras de desplazamiento. Esta opcin se usa sobre todo para las imgenes del body. Puede tomar los valores fixed y scroll. El primer valor dejar la imagen fija, el segundo har que la imagen se desplace junto con las barras (como el fondo de esta pgina).

background-position permite el posicionamiento de la imagen de fondo. Selecciona entre los valores top, center, bottom y left, center, right. En este caso podremos combinar dos de los valores, por ejemplo: .cita { background-image: url(imagenes/quote.gif); background-repeat: no-repeat; background-position: right top; }

Aunque puedes omitirlos, pero recuerda que si lo haces por omision los valores sern top y left.

Igual que en algunos de los apartados anteriores puedes utilizar la propiedad background para resumir las reglas CSS. As el siguiente bloque: .cita { background-color: gray; background-image: url(imagenes/quote.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; } Puede ser escrito de la siguiente forma: .cita { background: gray url(imagenes/quote.gif) no-repeat scroll right top; } Recuerda mantener el orden color, image, repeat, attachment y position. Y ya sabes, si no quieres alguno, sltatelo.

Para practicar realiza el Ejercicio Paso a Paso de Controles de Fondo.

Unidad 17. Estilos CSS Avanzado (X)

Controles de margen

17.10

Ahora veremos unas cuantas reglas que afectarn a los bordes y mrgenes de los elementos. Para ello utilizaremos el mismo ejemplo: dos cajas, una dentro de la otra.
margen texto margen

margin-top, margin-right, margin-bottom y margin-left establecen la distancia de los bordes del elemento al elemento padre. Puedes utilizar pxeles o porcentajes para indicar estas distancias. Por ejemplo, en la siguente caja se le ha dado al bloque interior la siguiente clase: .bloque_interior { margin-top: 20px; margin-right: 0px; margin-bottom: 5px; margin-left: -10px; }
margen texto margen

Los mrgenes superiores e inferiores se pueden ver en la distancia que hay de la caja interior a las palabras margen. Observa cmo el margen 0 del lado derecho hace que los bordes queden pegados, mientras que un valor negativo hace que el bloque salga de la caja.

La propiedad margin te permite unificar varias propiedades en una sola: .bloque_interior { margin-top: 20px; margin-right: 0px; margin-bottom: 5px;

margin-left: -10px; } Este bloque se podra reescribir como: .bloque_interior { margin: 20px 0px 5px -10px; } Recuerda que debers seguir el orden top, right, bottom y left.

En el caso de que los valores arriba y abajo (top y bottom) e izquierda y derecha (left y right) sean iguales entre s se puede escribir en dos valores, como: .bloque_interior { margin: 20px 5px; } En este caso los mrgenes superior e inferior sern de 20px y los de los lados de 5.

En caso de que quieras que todos los margenes tengan la misma distancia puedes escribirlo slo una vez: .bloque_interior { margin: 20px; } Ahora todos los mrgenes sern de 20 pxeles.

Tambin se pueden establecer estas propiedades a auto. Dejando que los bordes del elemento sean determinados por el navegador. Esta opcin, sin embargo, no se trata del mismo modo en todos los navegadores. Internet Explorer no sigue los estndares y no la maneja de un modo correcto. Por lo que cuando con otros navegadores centrar un elemento es muy sencillo con el valor auto, para IE hay que hacer una pequea trampa. Veamos el siguiente ejemplo:
margen texto margen

El cdigo CSS de la caja interior es:

.bloque_interior { margin-right: auto; margin-left: auto; } Si intentas hacerlo sobre el body, en IE no funcionar. Los mrgenes auto no centrarn el bloque. Debers darle la siguiente propiedad al body para que funcione: text-align: center; Esto simplemente alinear el texto al centro en el resto de navegadores (donde deberemos seguir utilizando el valor auto para los mrgenes) y har que los bloques se alineen en el centro de la pantalla.

padding-top, padding-left, padding-bottom y padding-right establecern la distancia del borde de un elemento con sus etiquetas interiores. Lo entenders mucho mejor con el siguiente ejemplo:
texto

A esta caja le hemos aplicado el siguiente estilo: .bloque { padding-top: 20px; padding-right: 5px; padding-bottom: 5px; padding-left: 10px; } Como puedes ver la distancia de la palabra texto a los bordes derecho e inferior es de 5px. Y lo mismo pasa con los mrgenes superior (20px) e izquierdo (10px).

Igual que con los mrgenes podemos abreviar las reglas CSS utilizando la propiedad margin. As, el bloque anterior: .bloque { padding-top: 20px; padding-right: 5px;

padding-bottom: 5px; padding-left: 10px; } Se podr reescribir como: .bloque { padding: 20px 5px 5px 10px; } Recuerda, tambin, mantener el orden top, left, bottom, right.

Los casos de repeticin se aplican igual que en los mrgenes, por lo que podrs escribir los siguientes casos: .bloque1 { padding: 20px 5px 5px 10px; } .bloque2 { padding: 20px 7px; } .bloque3 { padding: 5px; }

Unidad 17. Estilos CSS Avanzado (XI)

Bordes
Tambin tenemos las propiedades de borde. La primera es border-width que indica el ancho de un borde.

17.11

Puede tomar los valores medium, thin y thick. Aunque tambin se aceptan valores en pxeles y porcentajes que son ms fciles de manejar a la hora de crear bordes con una anchura exacta.
texto texto

En este caso hemos utilizado: .borde1 { border-width: 1px; } .borde2 { border-width: 5px; }

border-style muestra el borde del elemento de una forma determinada, existen varios tipos:
none dotted dashed solid

double

groove

ridge

inset

outset

border-color establece en forma hexadecimal o con nombre el color del borde de un elemento.
texto

En este caso ha sido: .borde { border-color: #FFFF00;

Como en el resto de propiedades, utilizaremos la propiedad border para resumir estas tres ltimas. De modo que el siguiente bloque: .borde { border-width: 10px; border-style: groove; border-color: black; } Podra escribirse ms fcilmente: .borde { border: 10px groove black; }

Debes mantener el orden width, style y color, y en este caso debers especificar cada uno de los valores para que la regla se comporte normalmente.

Tambin para los bordes es posible utilizar las mismas propiedades pero indicando a qu lado nos referimos: .borde { border-top-width: 10px; border-top-style: groove; border-top-color: black;

border-left-width: 10px; border-left-style: groove; border-left-color: black;

border-bottom-width: 10px; border-bottom-style: groove; border-bottom-color: black;

border-right-width: 10px; border-right-style: groove; border-right-color: black; } Que a su vez podra reescribirse como: .borde { border-top: 10px groove black; border-left: 10px groove black; border-bottom: 10px groove black; border-right: 10px groove black; } Y si todos los valores son iguales para cada uno de los bordes, volvemos a utilizar la propiedad border: .borde { border: 10px groove black; }

Para practicar realiza el Ejercicio Paso a Paso de Controles de Mrgenes y Bordes.

Unidad 17. Estilos CSS Avanzado (XII)

Controles de elementos de bloque y en lnea

17.12

Ahora veremos cmo posicionar los elementos y darles el tamao que nos convenga para representarlos. Antes de empezar deberamos hacer una distincin entre las etiquetas HTML. Las hay de 2 tipos: de bloque o en lnea.

Las etiquetas de bloque son aquellas que causan un salto de lnea antes y despus de ellos, como por ejemplo las etiquetas p, div, table, br, etc... Sin embargo luego encontramos otro tipo de etiquetas (en lnea) que no producen saltos en el flujo de la pgina, como pueden ser las etiquetas a, b, i, span, etc...

Teniendo esto siempre en mente vers que es ms sencillo trabajar y moldear las pginas utilizando CSS.

Primero veremos las propiedades de tamao height (altura) y width (anchura). Puedes especificarlas en cualquier elemento de bloque y establecern su alto y su ancho en pxeles o porcentaje.
300x50

#contenedor { width: 300px; height: 50px; }

Luego encontramos la propiedad float, que permite que cualquier elemento flote en un lado determinado de la pantalla mientras el resto sigue el flujo natural. Observa estos ejemplos:

Este texto tiene un elemento flotante a la izquierda.

Adems le hemos dado un tamao de fuente mayor para que se note mejor el efecto.

Este texto tiene un elemento flotante a la derecha. Adems le hemos dado un tamao de fuente mayor para que se note mejor el efecto.

Hemos utilizado los valores left y right respectivamente. En estos casos a los prrafos que contienen el smbolo de copyright se les han aplicado la propiedad CSS float: <p style="float:left; font-size: 25px; border: 1px solid black;">&copy;</p> <p style="float:right; font-size: 25px; border: 1px solid black;">&copy;</p>

Pero si vemos detenidamente esta propiedad veremos que encontramos un problema:

Este texto tiene un elemento flotante a la derecha. Pero quiero que este prrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a l. Como este prrafo que ocupa toda la anchura del bloque div padre.

Cmo solucionamos este problema?

Para ello deberemos utilizar la propiedad clear. Esta propiedad permite romper el ajuste que se est realizando por una etiqueta anterior marcada con float. Clear puede tomar 3 valores: left, right o both, para romper el float de izquierda, derecha o ambos respectivamente.

Por lo que si le aplicamos un clear: right; al segundo prrafo este se mostrar sin verse afectado por el float:

Este texto tiene un elemento flotante a la derecha. Pero quiero que este prrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a l. Como este prrafo que ocupa toda la anchura del bloque div padre.

El cdigo que hemos utilizado es el siguiente: <p style="clear: right;">Pero quiero que este p&aacute;rrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a &eacute;l.</p>

Del mismo modo esta propiedad nos ayudar en este caso:

Este texto tiene dos elementos flotantes a la izquierda.

Queremos que los dos bloques estn flotando a la izquierda pero uno debajo del otro. Para ello deberemos aplicarle al segundo elemento un clear: left; para que elimine el comportamiento del primer elemento que ya estaba flotando.

Por ello, el segundo elemento lo escribiramos as: <div style="float: left; clear: left; font-size: 25px; border: 1px solid black;">&copy;<br />&copy;</div> Y obtendramos lo siguiente:

Este texto tiene dos elementos flotantes a la izquierda. Ahora uno se encuentra debajo del otro, y el texto fluye tenindolos en cuenta a ambos. Aunque puede llegar un prrafo que deje de verse afectado. Como este!

Ahora combinando los mrgenes y los elementos flotantes podemos crear columnas de una forma muy sencilla:
cabecera menu menu menu

menu menu contenido contenido contenido contenido contenido pie

La forma es la siguiente:
1. Creamos una cabecera. No hace falta que se le aplique ningn estilo en especial, pero hemos preferido aadir unos bordes y paddings para que se vea mejor el ejemplo (igual que en resto de los elementos).

cabecera

2. Luego creamos otro bloque (nosotros hemos utilizado divs aunque puedes utilizar prrafos, tablas o cualquier elemento de bloque).

cabecera

menu menu menu menu menu

3. A este ltimo bloque le asignamos la propiedad float: left; para que se encuentre flotando a la izquierda y le damos una anchura (en nuestro caso un 30%).

cabecera

menu menu

4. Luego creamos un tercer elemento que contendr la segunda columna.

cabecera

menu menu

contenido contenido contenido contenido contenido

5. A este elemento deberemos darle un margin-left del mismo tamao que la anchura de la primera columna. As nos aseguramos de que se encuentren en el mismo nivel (porque el elemento de la izquierda est flotando) pero no vuelva a tomar el flujo normal cuando el bloque de la izquierda haya acabado.

cabecera

menu menu

contenido contenido contenido contenido contenido

6. Finalmente aadimos un nuevo bloque que utilizaremos como pie de pgina.

cabecera

menu menu menu menu menu

contenido contenido

pie

7. A este bloque deberemos asignarle la propiedad clear: both; para que el elemento flotante no le afecte en caso de que el contenido fuese demasiado corto.

cabecera

menu menu menu menu menu

contenido contenido

pie

Finalmente tenemos la propiedad display, que establece el tipo de elemento con el que estamos tratando. Esta propiedad es muy til porque transforma las etiquetas de bloque a en lnea y viceversa. Puede tomar los valores block, inline o list-item.

Los dos primeros valores hablan por s mismos. Puedes asociarle el estilo display: block; a una etiqueta A para que cree un salto de lnea antes y despus de ella. Del mismo modo, podrs hacer que una etiqueta de bloque (como p o div) se convierta en un elemento en lnea utilizando display: inline; y puedan ser mostradas una al lado de otra:
1 6 24 23 22 18 1 6 24 23 5 21 19 17 2 16 3 7 9 12 10 20 5 2 3 7 9 12 13 14 15 4 8 11 25 25 10 4 8 11

22 18 1 6 24 23 22 18

21 19 17 2 5

20 16 3

13 14 15 4 7 9 12 10 8 11

21 19 17

20 16

13 14 15

25

En este ejemplo podemos ver tres tablas que se muestran una al lado de la otra. Simplemente les hemos dado el estilo: .tabla { display: inline; } Aunque si disminuyes el ancho de la ventana vers que al tratarse de elementos en lnea se adaptan a su tamao.

Para saltarnos este inconveniente (si lo fuera), podemos utilizar la propiedad que vimos en el apartado de Controles de texto: white-space. Introduciendo estas tres tablas en un elemento de bloque como un p o un div y asignndole la propiedad white-space: nowrap; conseguiramos que las tres tablas permaneciesen en lnea sin saltos de pantalla a pesar de la anchura de la ventana.
1 6 24 23 22 18 1 6 24 23 22 18 21 19 17 16 20 5 21 19 17 2 16 3 7 9 12 13 14 15 25 10 20 5 2 3 7 9 12 13 14 15 4 8 11 25 10 4 8 11

1 6 24 23 22 18

2 5

3 7 9 12 20 16 13 14 15

4 8 10 11

21 19 17

25

Finalmente, comentaremos que esta propiedad tambin puede tomar el valor list-item. De este modo, los elementos que se vean afectados por el estilo display: list-item; se mostrar como si formasen parte de una lista. Observa el siguiente ejemplo: p.lista { display: list-item; list-style-type: square; } Si aplicamos este estilo sobre unos prrafos veremos esto:
Esto es un prrafo que se muestra en forma de elemento de lista. Esto es un prrafo que se muestra en forma de elemento de lista. Esto es un prrafo que se muestra en forma de elemento de lista. Esto es un prrafo que se muestra en forma de elemento de lista.

Para practicar realiza el Ejercicio Paso a Paso de Controles de Bloque.

Unidad 17. Estilos CSS Avanzado (XIII)

Controles de posicin

17.13

En este apartado veremos cmo posicionar el contenido de la pgina web utilizando nicamente estilos CSS.

Existen unas propiedades CSS que combinadas con las siguientes nos ayudarn a mover el contenido de la pgina. Estas son top, left, bottom y right. Con estas propiedades podremos establecer la distancia a los bordes de la ventana del navegador. Recordemos que top equivale a la parte superior. Left al lado izquierdo. Bottom al borde inferior. Y finalmente right al derecho. Normalmente daremos valores a estas propiedades utilizando pxeles o porcentajes.

Veamos ahora cmo las utilizaremos para ello deberemos declarar tambin la propiedad position. Esta es sin duda la ms compleja de este apartado as que la veremos con detenimiento. Esta propiedad puede aceptar 4 valores: static, absolute, relative y fixed. Vayamos uno a uno.

El valor static es el valor por defecto de un elemento, ocupa su lugar en el flujo de la pgina y no puede ser modificado utilizando las propiedades top/bottom y left/right. p{ position: static; }

Con el valor absolute puedes colocar un elemento en cualquier parte de la ventana con slo darle las coordenadas.

As deberamos declarar la posicin utilizando un par de propiedades top/bottom y left/right. Un ejemplo podra ser este: #capa_flotante { position: absolute; top: 100px; left: 300px;

width: 30px; height: 125px; } Esta declaracin de estilos es muy habitual en las capas. Se posiciona absolutamente el objeto y luego se le da un ancho y un alto.

El valor relative tambin nos permite mover el elemento. Este, en principio, ocupa su lugar en el flujo normal de la pgina y utilizaremos las propiedadeas top/bottom y left/right para desplazarlo tomando como referencia ese lugar y no los bordes de la pgina. Por ejemplo: p.especial { position: relative; top: 20px; } Esta regla har que los prrafos marcados con la clase especial se desplacen 20 pxeles hacia abajo de su positin normal en el flujo de la pgina. Piensa que lo que estamos diciendo en la definicin de la regla es que va a haber una desfase de 20 pxeles desde la parte superior de donde se encontraba en un principio, por lo que el elemento se ver desplazado hacia abajo.

Finalmente encontramos el valor fixed. Este valor, desgraciadamente, no funciona en algunas versiones de Internet Explorer por lo que no te ser de mucho uso aunque sea una muy buena regla de estilo. Asignndole este valor a la propiedad position podemos hacer que un elemento se quede fijo en la ventana aunque se muevan las barras de desplazamiento. Un comportamiento muy til para los mens o algunos grficos que queramos que permanezcan siempre a la vista. Tambin acepta los pares top/bottom y left/right para definir la posicin en la que se mostar fijo.

Por ejemplo: #menu { position: fixed; top: 0px; right: 0px; } Esta regla de estilo posicionara un elemento con identidad menu en la esquina superior derecha de la ventana y aunque utilicemos el scroll (las barras de desplazamiento) permanecer all fijo. Claro est, este valor no funciona en IE 6, aunque es posible que en futuras versiones puedan arreglar este problema.

Unidad 17. Estilos CSS Avanzado (XIV)

Controles de visibilidad

17.14

Por ltimo en este apartado veremos unas cuantas propiedades que tienen que ver con la forma en la que se visualizan los elementos en pantalla.

La primera propiedad que veremos ser z-index. Esta propiedad decide el orden de profundidad de los elementos que se encuentran solapados. En el apartado anterior vimos cmo mover los elementos en la pantalla. Imagina, ahora, que al mover dos capas una nos queda por encima de la otra. Cmo podemos decidir cul quedar por detrs? Y al frente? Utilizaremos esta propiedad para ello. Z-index acepta nmeros positivos o negativos, y establece que el elemento con un valor mayor se mostrar por delante del resto. Veamos un ejemplo:
z-index: 0 z-index: 2 z-index: 1 z-index: 2

z-index: 0 z-index: 1

Para utilizar esta propiedad basta con declararla: .rojo { position: relative; top: 100px; left: 20px; z-index: 0; }

Otra propiedad muy valiosa a la hora de jugar con la visibilidad es visibility. Puede tomar los valores visible y hidden (visible y escondida respectivamente).

Asigna el valor hidden a todos aquellos elementos que quieras que no aparezcan en la pantalla. Muy til para ocultar estadsticas o para crear animaciones complejas combinando esta propiedad con JavaScript. #estadisticas { visible: hidden; }

Finalmente nos encontramos con otra propiedad llamada overflow. Esta propiedad establece como ha de tratarse el contenido dentro de un elemento. El overflow en realidad se hace cargo del desbordamiento de contenido. Por lo que slo acta en aquellos casos en los que el continente se queda demasiado pequeo para mostarlo todo. Puede tomar los valores visible, hidden, scroll y auto. El valor visible hace que se ignore el tamao del continente para mostrar todo el contenido. Es el valor por omisin en la mayora de los navegadores. Utilizando hidden se oculta el contenido que no cabe y no muestra barras de desplazamiento. El tamao del continente no se ver afectado. Si le das el valor scroll se introducirn las barras de desplazamiento necesarias para que el contenido pueda visualizarse correctamente. El tamao del continente no se ver afectado. Finalmente, con el valor auto dejamos que sea el explorador del usuario el que decida qu hacer con el sobrante del contenido.

Veamos unos ejemplos:

visible

hidden

scroll

auto

En este ejemplo hemos introducido 4 etiquetas div que contienen una imagen ms ancha que ellas. El bloque marcado con overflow: visible; ignora su tamao y muestra la imagen completa. Al contrario que el que est definido como hidden que esconde (o recorta) el resto de la imagen. El valor scroll muestra las 2 barras de desplazamiento aunque la vertical no sea necesaria, y auto hace que el navegador introduzca nicamente la horizontal pues es la que es necesaria en este caso.

Ejercicios del Tema 17.

Prueba evaluativa del Tema 17.

Unidad 18. Sitios Remotos (I)

En el tema 3 vimos cmo crear y trabajar con un sitio local.

18.1

Esta unidad est dedicada a los Sitios Remotos, veremos cmo crearlos y cmo utilizarlos. Definir un sitio remoto significa establecer una configuracin de modo que Dreamweaver sea capaz de comunicarse directamente con un servidor en Internet (por eso se llama remoto) y as poder trabajar a la vez con tus archivos en el sitio local, es decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados en el servidor, en Internet. El modo en el que veremos que el programa se comunica con tu servidor ser FTP, ya que es prcticamente el ms utilizado y muy pocos utilizan otras alternativas.

Configurar un Sitio Remoto

Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las opciones y que Dreamweaver se pueda conectar con nuestro servidor. Para ello deberemos modificar la especificacin que creamos en su da del sitio con el que estamos trabajando. As que haz clic en Sitio y selecciona Administrar sitios. Selecciona el sitio con el que quieras establecer comunicacin remota (o crea uno nuevo para el caso) y pulsa Editar. Vers que se abre el cuadro de dilogo de Definicin del Sitio. Ahora podremos escoger entre trabajar en modo bsico o avanzado. Vamos a seleccionar la pestaa Avanzado para poder ver con ms detenimiento las opciones que se nos ofrecen. Una vez ests en el nuevo modo, selecciona la Categora Datos remotos en el listado de la izquierda.

Ahora en el desplegable Acceso selecciona el mtodo de acceso que deber utilizar Dreamweaver para conectarse con el servidor. Como ya hemos dicho nosotros explicaremos la opcin FTP. Se mostrarn las siguientes opciones:

Aqu debers rellenar los datos que te facilit el servicio de hosting que contrataste. Si no recuerdas los datos o has perdido el correo electrnico que seguramente te enviaron, pdeles de nuevo la informacin. Los datos que necesitrs son los siguientes: Servidor FTP o host es la direccin a la que se dirigir Dreamweaver para conectarse a tu servidor ser del tipo ftp.servidor.com o tambin podrs encontrar algunas que estn formadas en forma de direccin IP (como por ejemplo, 192.186.1.1) En el campo Directorio del Servidor podremos establecer una carpeta contenida en el servidor donde queramos subir las pginas. Imagina que dentro de la estructura de carpetas del servidor romoto tienes una que se llama pagina y dentro de esta otra que se llame principal. Podramos indicar la ruta pagina/principal para que los archivos se subiesen directamente a esa ubicacin. En Usuario y Contrasea escribe el nombre de usuario y el password para poder conectar con el servidor. Marca la casilla Guardar si quieres que el programa recuerde la contrasea. Una vez introducidos estos datos puedes pulsar el botn Probar para ver si son correctos y Dreamweaver puede crear una conexin con el servidor remoto.

Finalmente comentaremos la opcin Permitir desproteger y proteger archivo. Esta casilla es til cuando ms de una persona est utilizando el mismo servidor y las mismas pginas. De esta forma (como veremos ms adelante) podrs bloquear diversos archivos para evitar que se vean modificados por otra persona (que tambin tenga acceso al servidor) mientras t trabajas con ellos.

Si seleccionas la opcin Cargar archivos en el servidor automticamente al guardar forzars a que Deamweaver suba los archivos cada vez que los guardes. Una opcin bastante til para no olvidar subir pequeos retoques que se vayan haciendo en el tiempo. Aunque es una opcin un poco peligrosa porque si modificas la versin en local y te equivocas no podrs recuperar la versin anterior que estaba almacenada en el remoto porque se habr sobreescrito. Esta opcin tampoco es recomendable si no tienes conexin permanente y rpida a Internet.

Una vez hayas terminado Acepta todas las pantallas hasta volver a la vista de trabajo y estaremos listos.

Unidad 18. Sitios Remotos (II)

El Panel Archivos

18.2

Desde el panel Archivos seremos capaces de controlar nuestro sitio local y remoto de forma fcil y rpida. En este apartado veremos qu pasos debemos seguir para completar unas cuantas acciones que nos sern bastante tiles.

A primera vista el panel Archivos muestra este aspecto:

Su uso es bastante sencillo. Observa los dos desplegables de la parte superior. El primero te permite seleccionar el sitio con el que estamos trabajando. El segundo te permite cambiar la vista de ese sitio. Esta ltima opcin es muy til para ver el contenido que se encuentra subido en Internet. Una vez hayas configurado las opciones del Servidor Remoto podrs desplegar esta opcin y seleccionar Vista remota, se mostrarn todos los archivos que en ese momento se encuentran en el servidor.

Ahora veremos para qu sirven los botones: El botn Conectar te permitir establecer una conexin con el servidor. De forma predeterminada Dreamweaver se desconecta del servidor cada 30 minutos.

El botn Actualizar actualiza las listas de las vistas local y remota. As podrs ver el contenido exacto en cada momento de cada uno de los sitios, se utiliza sobre todo cuando varias personas tienen acceso al sitio remoto para cambiar las pginas. Utiliza el botn Obtener para descargar al servidor local archivos que hayas seleccionado en el panel Archivos en la vista remota. Estos archivos se copiarn en tu sitio local, y en caso de ya existir se sobreescribirn. El botn Colocar acta de forma contraria. Sube los archivos seleccionados en la vista local al servidor, se copiarn y si existen se sobreescribirn.

Luego los dos siguientes botones podrn ser utilizados si has seleccionado la opcin Permitir desproteger y proteger archivo en el cuadro de dilogo Definicin del Sitio anterior. Utiliza el botn Proteger para realizar la accin anterior de Obtener pero protegiendo el archivo que se encuentra en el servidor convirtindolo en slo lectura. De esta forma si alguien con acceso al servidor intenta modificar el archivo le ser imposible hasta que lo desprotejas. Del mismo modo, el botn Desproteger acta del mismo modo que el botn Colocar pero cuando sube el archivo al servidor lo desprotege para que pueda ser modificado por otras personas.

Si activaste la opcin Permitir desproteger y proteger archivo y subes un archivo nuevo al servidor (uno que an no se encuentre en la vista remota) automticamente se proteger. Para evitar esto debers subir los archivos nuevos utilizando el botn Desproteger.

Unidad 18. Sitios Remotos (III)

Sincronizar Sitios
Esta es una de las opciones ms tiles en cuanto a Sitios Remotos.

18.3

Esta opcin permite hacer un estudio de los archivos situados en el sitio local y remoto y establecer el modo en el que se debern copiar, borrar y sobreescribir los archivos para conseguir un objetivo: al final de la sincronizacin, los archivos en el sitio remoto y el sitio local deben ser iguales. Para realizar una sincronizacin haz clic derecho sobre cualquier zona en el panel Archivos y selecciona la opcin Sincronizar....

Vers que aparece un cuadro de dilogo como este:

Este es el paso ms importante en la sincronizacin, pues decidiremos de qu modo se va a realizar.

En el desplegable Sincronizar: seleccionaremos una de las dos opciones, Archivos locales seleccionados solamente o Todo el sitio. Dependiendo de qu opcin elijas se copiarn slo unos archivos o todos los que forman el sitio.

En el desplegable Direccin: estableceremos las pautas que se deben seguir durante la sincronizacin. Si seleccionas Colocar archivos ms nuevos en remoto cuando se comparen ambos sitios, se sobreescribirn aquellos en el sitio remoto que tengan una fecha de modificacin menor a la que exista en el local. De esta forma copiars en direccin Local a Remoto. Si seleccionas la opcin Obtener archivos ms nuevos de remoto se copiarn aquellos archivos que se encuentren en el sitio remoto que tengan una fecha de modificacin mayor que la del local. En este caso estaremos copiando en direccin Remoto a Local. La ltima opcin, Obtener y colocar archivos ms nuevos, se refiere a la sincronizacin como tal. Evala los archivos en el sitio remoto y local y copia los ms nuevos en el que contiene los ms viejos. En este caso la Sincronizacin es Bidireccional.

Marca la opcin Eliminar archivos remotos no existentes en la unidad local si quieres que los archivos que se encuentren en el remoto que no estn en el local se borren. Al pulsar Vista previa... aparece un listado con los cambios que se van a realizar, slo nos quedar aceptarlo.

Debido a que no todos los servidores tienen acceso FTP y que no tienes porqu tener acceso a un servidor remoto no realizaremos ningn ejercicio sobre este tema. Si quieres establecer una conexin con tu servidor remoto slo tendrs que seguir los pasos explicados en la teora.

Prueba evaluativa del Tema 18.