el tutorial de Dreamweaver
el tutorial de Dreamweaver
el tutorial de Dreamweaver
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
CURSO DE DISEÑO DE PÁGINAS WEBUnidad 1. Conceptos básicos <strong>de</strong> <strong>Dreamweaver</strong> 8 (I).......................................................................................3Unidad 1. Conceptos básicos <strong>de</strong> <strong>Dreamweaver</strong> 8 (II) .....................................................................................7Unidad 1. Conceptos básicos <strong>de</strong> <strong>Dreamweaver</strong> 8 (III)..................................................................................10Unidad 1. Conceptos básicos <strong>de</strong> <strong>Dreamweaver</strong> 8 (IV)..................................................................................13Ejercicio 1: Mi primera página..............................................................................................................14Unidad 2. El entorno <strong>de</strong> trabajo (I)................................................................................................................15Unidad 2. El entorno <strong>de</strong> trabajo (II)...............................................................................................................21Unidad 3. Configuración <strong>de</strong> un sitio local (I)................................................................................................24Unidad 3. Configuración <strong>de</strong> un sitio local (II)...............................................................................................27Ejercicio 2 Web <strong>de</strong>portes.......................................................................................................................34Ejercicio 3 web animales .......................................................................................................................35Unidad 4. El texto (I).....................................................................................................................................36Unidad 4. El texto (II)....................................................................................................................................39Unidad 4. El texto (III) ..................................................................................................................................41Ejercicio 4 web Deportes continuacion ................................................................................................46Ejercicio 5 Web animales continuacion ...............................................................................................46Unidad 5. Hiperenlaces (I).............................................................................................................................48Unidad 5. Hiperenlaces (II) ...........................................................................................................................53Ejercicio 6 Deportes Continuación........................................................................................................56Ejercicio 7 Animales Continuación.......................................................................................................56Unidad 6. Imágenes (I) ..................................................................................................................................58Ejercicio 8 Cocina Zonas interactivas ..................................................................................................66Unidad 6. Imágenes (II).................................................................................................................................68Ejercicio 9 Web <strong>de</strong>portes continuación .................................................................................................73Ejercicio 10 Web animales continuación ..............................................................................................73Ejercicio 11 Barra <strong>de</strong> navegación..........................................................................................................74Ejercicio 12 Texto flash........................................................................................................................74Unidad 7. Tablas (I).......................................................................................................................................75Ejercicio 13 Insertar tabla......................................................................................................................77Unidad 7. Tablas (II)......................................................................................................................................79Ejercicio 14 Cocina ampliación.............................................................................................................82Unidad 7. Tablas (III) ....................................................................................................................................85Unidad 7. Tablas (IV)....................................................................................................................................89Ejercicio 15 web <strong>de</strong>portes ampliación tablas.........................................................................................90Ejercicio 16 web animales ampliación tablas........................................................................................91Unidad 8. Marcos (I)......................................................................................................................................93Ejercicio17 Deportes Ampliación. Marcos...........................................................................................95Unidad 9. Formularios (I)..............................................................................................................................96Unidad 9. Formularios (II).............................................................................................................................99Ejercicio 18 web <strong>de</strong>portes Formulario.................................................................................................100Ejercicio 19 web animales Formulario................................................................................................101Unidad 10. Multimedia (I)...........................................................................................................................102Unidad 10. Multimedia (II)..........................................................................................................................105Unidad 11. Las plantillas (I) ........................................................................................................................106Unidad 11. Las plantillas (II).......................................................................................................................108Unidad 11. Las plantillas (III) .....................................................................................................................110Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (I).................................................................................................112Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (II) ...............................................................................................119Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (III) ..............................................................................................121Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (IV)..............................................................................................123Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (V) ...............................................................................................124Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (VI)..............................................................................................126Unidad 13. Otros <strong>el</strong>ementos (I) ...................................................................................................................141
Unidad 13. Otros <strong>el</strong>ementos (II) ..................................................................................................................142Unidad 13. Otros <strong>el</strong>ementos (III).................................................................................................................144Unidad 14. Capas.........................................................................................................................................146Unidad 15. Comportamientos (I).................................................................................................................149Unidad 15. Comportamientos (II)................................................................................................................152Unidad 16. Comportamientos Avanzados (I) ..............................................................................................154Unidad 16. Comportamientos Avanzados (II).............................................................................................157Unidad 16. Comportamientos Avanzados (III) ...........................................................................................159Unidad 16. Comportamientos Avanzados (IV) ...........................................................................................161Unidad 16. Comportamientos Avanzados (V).............................................................................................164Unidad 16. Comportamientos Avanzados (VI) ...........................................................................................166Unidad 17. Estilos CSS Avanzado (I) .........................................................................................................168Unidad 17. Estilos CSS Avanzado (II)........................................................................................................170Unidad 17. Estilos CSS Avanzado (III).......................................................................................................172Unidad 17. Estilos CSS Avanzado (IV) ......................................................................................................174Unidad 17. Estilos CSS Avanzado (V)........................................................................................................176Unidad 17. Estilos CSS Avanzado (VI) ......................................................................................................178Unidad 17. Estilos CSS Avanzado (VII) .....................................................................................................180Unidad 17. Estilos CSS Avanzado (VIII)....................................................................................................182Unidad 17. Estilos CSS Avanzado (IX) ......................................................................................................184Unidad 17. Estilos CSS Avanzado (X)........................................................................................................187Unidad 17. Estilos CSS Avanzado (XI) ......................................................................................................191Unidad 17. Estilos CSS Avanzado (XII) .....................................................................................................194Unidad 17. Estilos CSS Avanzado (XIII)....................................................................................................202Unidad 17. Estilos CSS Avanzado (XIV)....................................................................................................205Unidad 18. Sitios Remotos (I) .....................................................................................................................208Unidad 18. Sitios Remotos (II)....................................................................................................................211Unidad 18. Sitios Remotos (III)...................................................................................................................213
Unidad 1. Conceptos básicos <strong>de</strong> <strong>Dreamweaver</strong>8 (I)Pág. 1.1Qué es <strong>Dreamweaver</strong> 8<strong>Dreamweaver</strong> 8 es un software fácil <strong>de</strong> usar que permite crear páginas web profesionales.Las funciones <strong>de</strong> edición visual <strong>de</strong> <strong>Dreamweaver</strong> 8 permiten agregar rápidamente diseño y funcionalidad alas páginas, sin la necesidad <strong>de</strong> programar manualmente <strong>el</strong> código HTML.Se pue<strong>de</strong> crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., <strong>de</strong> unaforma muy sencilla y visual.A<strong>de</strong>más incluye un software <strong>de</strong> cliente FTP completo, permitiendo entre otras cosas trabajar con mapasvisuales <strong>de</strong> los sitios web, actualizando <strong>el</strong> sitio web en <strong>el</strong> servidor sin salir d<strong>el</strong> programa.Para seguir este curso te pue<strong>de</strong>s <strong>de</strong>scargar la versión gratuita <strong>de</strong> <strong>Dreamweaver</strong> <strong>de</strong>s<strong>de</strong> la página <strong>de</strong> Adobe, laversión caduca al cabo <strong>de</strong> 30 días, pero seguro que te animas a comprar la versión <strong>de</strong> pago <strong>de</strong> este estupendoprograma.Si no conoces las características básicas <strong>de</strong> HTML pue<strong>de</strong>s verlas aquí.HTML básicoLas páginas que vemos en Internet están escritas utilizando <strong>el</strong> lenguaje HTML (Hyper Text MarkupLanguage). Este lenguaje está basado en etiquetas que marcan <strong>el</strong> inicio y fin <strong>de</strong> cada <strong>el</strong>emento <strong>de</strong> la páginaWeb.Por ejemplo, <strong>el</strong> título <strong>de</strong> la página Web se escribe entre las etiquetas y . Como ves,ambas etiquetas consisten en poner un mismo comando entre los símbolos "". La primera etiquetaindica inicio, y la segunda, que incluye <strong>el</strong> símbolo "/", indica final.Las etiquetas disponen <strong>de</strong> atributos que permiten <strong>de</strong>finir características d<strong>el</strong> <strong>el</strong>emento sobre <strong>el</strong> que actúan. Porejemplo, indica que la tabla tendrá un bor<strong>de</strong> <strong>de</strong> tipo 1.Una página HTML básica tendría <strong>el</strong> siguiente aspecto: Mi primera página web Haz clic aquí para ir a aulaClicresto <strong>de</strong> la página web
Las etiquetas que se introducen en un documento HTML no son visibles cuando <strong>el</strong> documento se muestraen un navegador (IExplorer, Netscape, etc). Cuando un usuario <strong>de</strong>s<strong>de</strong> Internet solicita ver una página <strong>el</strong>servidor Web envía la página al navegador y este interpreta las etiquetas para dar <strong>el</strong> formato a la página.Cuando utilizamos <strong>Dreamweaver</strong> para crear una página Web no tenemos que preocuparnos <strong>de</strong> todoesto. <strong>Dreamweaver</strong> inserta automáticamente las etiquetas necesarias para construir la página con laapariencia y contenido <strong>de</strong>finidos en <strong>el</strong> editor gráfico.Noveda<strong>de</strong>s <strong>de</strong> <strong>Dreamweaver</strong> 8En este punto comentaremos las características que aporta esta nueva versión sobre la anterior,<strong>Dreamweaver</strong> MX 2004.Integración <strong>de</strong> RSS: con <strong>Dreamweaver</strong> 8 podrás integrar entradas RSS provinientes <strong>de</strong> otras páginas consólo introducir la fuente y arrastrar y colocar los campos. De esta forma podrás introducir datos en forato XMLfácil y cómodamente.Mejoras CSS: esta última versión ha mejorado mucho respecto a la compatibilidad y manejo <strong>de</strong> estilos <strong>de</strong>cascada. De esta forma se ha mejorado <strong>el</strong> pan<strong>el</strong> <strong>de</strong> estilos CSS, don<strong>de</strong> ahora podrás acce<strong>de</strong>r a la configuración<strong>de</strong> cada uno <strong>de</strong> los estilos <strong>de</strong>s<strong>de</strong> una lista mucho mejor dotado <strong>de</strong> una cuadrícula editable <strong>de</strong>s<strong>de</strong> don<strong>de</strong> podrásmodificar sus propieda<strong>de</strong>s. A<strong>de</strong>más, <strong>Dreamweaver</strong> 8, aña<strong>de</strong> una nueva barra <strong>de</strong> herramientas que proporcionala reprodución inmediata <strong>de</strong> los estilos para diferentes medios (pantalla, impresora, webTV, PDAs...).Accesibilidad: <strong>Dreamweaver</strong> 8 incorpora las normas <strong>de</strong> accesibilidad <strong>de</strong> prioridad 2 marcadas por laWCAG/W3C.Transferencia <strong>de</strong> archivos: Ahora con <strong>Dreamweaver</strong> 8 podrás seguir trabajando con tus archivos mientras<strong>el</strong> programa se comunica con tu servidor e incluye los archivos creados o modificados recientemente. Susincronización ha mejorado notablemente siendo posible una mejor gestión <strong>de</strong> cambios, a<strong>de</strong>más <strong>de</strong> pemitir enuso <strong>de</strong> bolqueo/<strong>de</strong>sbloqueo <strong>de</strong> archivos para que estos no se sobreescriban.Interfaz mejorada: Los usuarios con problemas visuales podrán acce<strong>de</strong>r auna opción <strong>de</strong> Aumento <strong>de</strong> lapantaña en vista <strong>de</strong> diseño para analizar o trabajar con difícles anidamientos <strong>de</strong> tablas. A<strong>de</strong>más <strong>de</strong> la inclusión<strong>de</strong> información visual gracias a las guías que permitirán la medición píx<strong>el</strong> a píx<strong>el</strong> <strong>de</strong> todos los <strong>el</strong>ementos.Nueva barra <strong>de</strong> herramientas: Se ha añadido una barra <strong>de</strong> herramientas a <strong>Dreamweaver</strong> 8, podrásencontrarla en la parte lateral izquierda d<strong>el</strong> modo <strong>de</strong> Código, esta barra hace mucho más accesible <strong>el</strong> código alpermitirnos la navegación por etiquetas y su contracción. Una <strong>de</strong> las nuevas noveda<strong>de</strong>s es la posibilidad <strong>de</strong>añadir comentarios con un sólo clic.Compatibilidad: Comentaremos, a<strong>de</strong>más, la compatibilidad añadida en esta versión con PHP5, ColdfusionMX 7 y Vi<strong>de</strong>o Flash.Editar páginas web
Cualquier editor <strong>de</strong> texto permite crear páginas web. Para<strong>el</strong>lo sólo es necesario crear los documentos con la extensiónHTML o HTM, e incluir como contenido d<strong>el</strong> documento <strong>el</strong>código HTML <strong>de</strong>seado. Pue<strong>de</strong> utilizarse incluso <strong>el</strong> Bloc <strong>de</strong>notas para hacerlo.Pero crear páginas web mediante <strong>el</strong> código HTML es máscostoso que hacerlo utilizando un editor gráfico. Al no utilizar uneditor gráfico cuesta mucho más insertar cada uno <strong>de</strong> los<strong>el</strong>ementos <strong>de</strong> la página, al mismo tiempo que es máscomplicado crear una apariencia profesional para la página.<strong>Dreamweaver</strong>.Hoy en día existe una amplia gama <strong>de</strong> editores <strong>de</strong> páginasweb. Uno <strong>de</strong> los más utilizados, y que <strong>de</strong>staca por su sencillezy por las numerosas funciones que incluye, es MacromedíaA<strong>de</strong>más <strong>de</strong> <strong>Dreamweaver</strong>, existen otra serie <strong>de</strong> buenos editores <strong>de</strong> páginas web, como pue<strong>de</strong>n ser MicrosoftFrontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, NetscapeComposer y Arachnophilia, algunos <strong>de</strong> los cuales tienen la ventaja <strong>de</strong> ser gratuitos.Cómo tener una página en InternetPara po<strong>de</strong>r poner una página web en Internet, es necesario contratar a alguna empresa con servidores quepueda alojarla y hacerla accesible <strong>de</strong>s<strong>de</strong> Internet las 24 horas d<strong>el</strong> día. El precio por disponer <strong>de</strong> espacio propioen <strong>el</strong> servidor <strong>de</strong>pen<strong>de</strong>rá <strong>de</strong> la empresa, d<strong>el</strong> espacio en disco, volumen <strong>de</strong> transferencia y otras opciones quepodamos contratar.Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio <strong>de</strong> disco,lentitud y nombre <strong>de</strong> nuestra página precedido por <strong>el</strong> <strong>de</strong> la suya. Hay que tener también en cuenta que estasempresas <strong>de</strong>ben generar ingresos <strong>de</strong> alguna forma, por lo que se <strong>de</strong>dican a ven<strong>de</strong>r espacios publicitarios<strong>de</strong>ntro <strong>de</strong> nuestras páginas, publicidad que no podremos negarnos a incluir en <strong>el</strong>las.Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página <strong>de</strong> una empresa, aunque sí esaceptable para una página personal.Cuando se va a contratar un servicio <strong>de</strong> hospedaje es necesario contratar también un dominio, tarea <strong>de</strong> laque se su<strong>el</strong>e encargar la propia empresa <strong>de</strong> hospedaje. Registrar un dominio consiste en registrar un nombrepara nuestra página. Este nombre no pue<strong>de</strong> estar repetido en Internet, ha <strong>de</strong> ser único, al igual que ocurre conlos nombres <strong>de</strong> las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como porejemplo, .net, .org, .es o .com.En <strong>el</strong> caso <strong>de</strong> los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página noserá más que un archivo <strong>de</strong>ntro <strong>de</strong> la <strong>de</strong> la empresa contratada.A la hora <strong>de</strong> contratar un servicio <strong>de</strong> hospedaje también hay que tener en cuenta <strong>el</strong> número <strong>de</strong> cuentas <strong>de</strong>correo <strong>el</strong>ectrónico propias que pue<strong>de</strong>n habilitarse y si disponemos <strong>de</strong> una base <strong>de</strong> datos para po<strong>de</strong>r acce<strong>de</strong>r a<strong>el</strong>la a través <strong>de</strong> programación vía Web, aunque esto último será útil sólo para usuarios avanzados.Si piensas contratar un servicio <strong>de</strong> hospedaje te recomendamos Alojalia.comEn cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.<strong>Dreamweaver</strong> te permite crear una copia local (en tu or<strong>de</strong>nador) d<strong>el</strong> sitio web que luego querrás que seencuentre a disposición <strong>de</strong> todo <strong>el</strong> mundo en Internet.Por tanto, una vez hayas terminado <strong>de</strong> diseñarla en modo local sólo tendrás que subirla a tu servidor
manteniendo la estructura d<strong>el</strong> local. Es <strong>de</strong>cir, <strong>de</strong>berás subir todos los archivos tal y como aparecen en tudisco duro, respetando <strong>el</strong> nombre <strong>de</strong> los archivos y la organización <strong>de</strong> las carpetas. Si no lo haces <strong>de</strong>este modo, tu sitio experimentará fallos y enlaces que no funcionarán.Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios enblanco. De esta forma te asegurarás <strong>de</strong> que <strong>el</strong> servidor pue<strong>de</strong> reconocer sin ningún tipo <strong>de</strong> problemas losnombres <strong>de</strong> los archivos que alojes en él.Para evitar errores <strong>de</strong> enlaces rotos o imágenes que no se muestran intenta escribir, también, losnombres en minúscula. Algunos servidores distinguen entrre mayúsculas y minúsculas, por lo que si en tupágina quieres mostrar la imágen foto1.jpg <strong>de</strong>berás guardarla con ese nombre y no como Foto1.jpg. Evitaráshoras perdidas buscando fallos.
Unidad 1. Conceptos básicos <strong>de</strong> <strong>Dreamweaver</strong>8 (II)Pág. 1.2Arrancar y cerrar <strong>Dreamweaver</strong> 8Veamos las dos formas básicas <strong>de</strong> arrancar <strong>Dreamweaver</strong> 8.Des<strong>de</strong> <strong>el</strong> botón Iniciosituado, normalmente, en la esquina inferior izquierda <strong>de</strong> la pantalla.Colocar <strong>el</strong> cursor y hacer clic sobre <strong>el</strong> botón Inicio, se <strong>de</strong>spliega un menú; al colocar <strong>el</strong> cursor sobre Todos losprogramas aparece otra lista con los programas que hay instalados en tu or<strong>de</strong>nador, buscar Macromedia (oAdobe si tienes las últimas versiones), seguidamente <strong>Dreamweaver</strong> 8, hacer clic sobre él, y se arrancará <strong>el</strong>programa.Des<strong>de</strong> <strong>el</strong> icono <strong>de</strong> <strong>Dreamweaver</strong> 8 d<strong>el</strong> escritorio .Pue<strong>de</strong>s arrancar <strong>Dreamweaver</strong> 8 ahora para ir probando todo lo que te explicamos. Cuando realices losejercicios también pue<strong>de</strong>s compaginar dos sesiones <strong>de</strong> la forma que te explicamos aquí.Compaginar dos sesionesAquí te explicaremos cómo conseguir tener la pantalla dividida en dos partes, una con <strong>el</strong> curso y otra con<strong>Dreamweaver</strong> 8.1 Abrir la sesión con <strong>el</strong> curso en Internet Explorer.2 Abrir la sesión <strong>de</strong> <strong>Dreamweaver</strong> 8.3 Pulsar con <strong>el</strong> botón <strong>de</strong>recho sobre cualquier parte vacía <strong>de</strong> la barra <strong>de</strong> tareas, en la parte inferior <strong>de</strong> laventana <strong>de</strong> Windows (d<strong>el</strong> escritorio). Es la barra en la que se encuentra <strong>el</strong> botón Inicio.4 Elegir la opción Mosaico vertical.Observa como la pantalla ha quedado dividida en dos partes, como en la figura:
5 Una vez tenemos las dos sesiones con <strong>el</strong> tamaño a<strong>de</strong>cuado, basta hacer clic con <strong>el</strong> ratón para pasar <strong>de</strong> launa a la otra.Para volver a <strong>de</strong>jar las ventanas con su tamaño normal, hacer clic en <strong>el</strong> botón Maximizar .Esto va bien con monitores gran<strong>de</strong>s ( <strong>de</strong> 17" o más), con monitores pequeños quizás prefieras <strong>de</strong>jar lasventanas con su tamaño normal e ir pasando <strong>de</strong> una a otra presionando las teclas Alt + tabulador(manteniendo pulsada Alt, presionar la tecla tabulador) o pulsando <strong>el</strong> botón correspondiente a la sesión en labarra <strong>de</strong> tareas en la última línea <strong>de</strong> la pantalla.Para cerrar <strong>Dreamweaver</strong> MX 2004, pue<strong>de</strong>s utilizar cualquiera <strong>de</strong> las siguientes operaciones:Hacer clic en <strong>el</strong> botón cerrarPulsar la combinación <strong>de</strong> teclas ALT+F4.Hacer clic sobre <strong>el</strong> menú Archivo y <strong>el</strong>egir la opción Salir.Si existe algún documento modificado que no ha sido guardado antes <strong>de</strong> cerrar <strong>Dreamweaver</strong>, se te pediráconfirmación para guardar o no cada uno <strong>de</strong> <strong>el</strong>los.Abrir y guardar documentosPara abrir un documento, pue<strong>de</strong>s utilizar cualquiera <strong>de</strong> las siguientes operaciones.Hacer clic en <strong>el</strong> botón abrir<strong>de</strong> la barra <strong>de</strong> herramientas estándar.Pulsar la combinación <strong>de</strong> teclas Ctrl+O.Hacer clic sobre <strong>el</strong> menú Archivo y <strong>el</strong>egir la opción Abrir.Hacer doble clic sobre <strong>el</strong> archivo en la ventana d<strong>el</strong> sitio.
Para abrir un documento nuevo, pue<strong>de</strong>s utilizar cualquiera <strong>de</strong> las siguientes operaciones.Hacer clic en <strong>el</strong> botón abrir<strong>de</strong> la barra <strong>de</strong> herramientas estándar.Pulsar la combinación <strong>de</strong> teclas Ctrl+N.Hacer clic sobre <strong>el</strong> menú Archivo y <strong>el</strong>egir la opción Nuevo.Hacer doble clic sobre <strong>el</strong> archivo en la ventana d<strong>el</strong> sitio.Después <strong>de</strong> esto aparecerá una nueva ventana, en la que <strong>de</strong>berás <strong>el</strong>egir la Categoría Página básica,HTML.Para guardar un documento, pue<strong>de</strong>s utilizar cualquiera <strong>de</strong> las siguientes operaciones.Hacer clic en <strong>el</strong> botón guardar<strong>de</strong> la barra <strong>de</strong> herramientas estándar.Pulsar la combinación <strong>de</strong> teclas Ctrl+S.Hacer clic sobre <strong>el</strong> menú Archivo y <strong>el</strong>egir la opción Guardar.<strong>Dreamweaver</strong> incluye la posibilidad <strong>de</strong>, en <strong>el</strong> caso <strong>de</strong> estar trabajando simultáneamente con variosdocumentos, po<strong>de</strong>r guardar todos <strong>de</strong> golpe, sin la necesidad <strong>de</strong> hacerlo uno por uno. Para guardar todopue<strong>de</strong>s realizar cualquiera <strong>de</strong> las siguientes operaciones.Hacer clic en <strong>el</strong> botón guardar todo<strong>de</strong> la barra <strong>de</strong> herramientas estándar.Hacer clic sobre <strong>el</strong> menú Archivo y <strong>el</strong>egir la opción Guardar todo.Al tener varios documentos abiertos es fácil olvidarse <strong>de</strong> todos las modificaciones hechas en cada uno <strong>de</strong><strong>el</strong>los. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no <strong>de</strong>searguardar los cambios en todos los documentos modificados. Por <strong>el</strong>lo es conveniente que al principio no utilicesesta opción, al menos hasta que te hayas habituado a manejar <strong>el</strong> programa.
Unidad 1. Conceptos básicos <strong>de</strong> <strong>Dreamweaver</strong>8 (III)PAG 1.3Para que te vayas haciendo una i<strong>de</strong>a <strong>de</strong> cómo funciona <strong>Dreamweaver</strong>, vamos a crear una página websencilla, con varios estilos <strong>de</strong> texto, una imagen y un enlace a otra página. Crear esta página solo te llevaráunos pocos minutos, y sabrás cómo trabajar con los <strong>el</strong>ementos básicos con los que están hechas la mayoría d<strong>el</strong>as páginas web. Si nunca has hecho una página web, este es <strong>el</strong> momento para <strong>de</strong>scubrir lo fácil que es.Mi primera páginaLo primero que tienes que hacer es abrir <strong>Dreamweaver</strong>. Ya has visto en la página anterior como pue<strong>de</strong>hacerse. Abres un documento nuevo y s<strong>el</strong>eccionas la Categoría Página básica, HTML.Seguidamente introduce, en <strong>el</strong> documento en blanco, <strong>el</strong> texto que aparece en la imagen siguiente.Una vez introducido <strong>el</strong> texto, vas a modificar <strong>el</strong> título y <strong>el</strong> color <strong>de</strong> fondo d<strong>el</strong> documento.Para <strong>el</strong>lo <strong>de</strong>bes hacer clic sobre <strong>el</strong> menú Modificar y <strong>el</strong>egir la opción Propieda<strong>de</strong>s <strong>de</strong> la página.Entonces se abrirá una ventana como la que aparece más abajo.
Cambia <strong>el</strong> Título por Mi primera página.En Color <strong>de</strong> Fondo escribe #CCCCFF, <strong>de</strong> este modo <strong>el</strong> fondo d<strong>el</strong> documento pasará a ser <strong>de</strong> color azul.Seguidamente pulsa sobre <strong>el</strong> botón Aceptar.Ahora vas a insertar una imagen. Para insertar la imagen, ha <strong>de</strong> estar accesible para nosotros. Para <strong>el</strong>lo<strong>de</strong>be encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en <strong>el</strong> disco duro.Muchas <strong>de</strong> las imágenes que vemos en Internet se pue<strong>de</strong>n copiar al disco duro. Al hacer clic con <strong>el</strong> botón<strong>de</strong>recho d<strong>el</strong> ratón sobre la imagen que queremos traer <strong>de</strong> Internet, se abre una ventana con una opción similara Guardar imagen como... (<strong>de</strong>pendiendo d<strong>el</strong> navegador que utilices) que permite grabar dicha imagen en unfichero <strong>de</strong> nuestro disco duro.En los navegadores más mo<strong>de</strong>rnos al colocar <strong>el</strong> cursor sobre una imagen aparecen estos iconosen una esquina <strong>de</strong> la imagen, si haces clic en <strong>el</strong> icono d<strong>el</strong> disquete aparecerá <strong>el</strong> mismo menúGuardar imagen como... a que hacíamos referencia anteriormente.Copia la imagen que aparece a continuación, para luego po<strong>de</strong>r insertarla en la página web que estamoscreando. Pue<strong>de</strong>s guardarla, por ejemplo, en la carpeta Mis Documentos.
Ahora tienes que insertar la imagen <strong>de</strong>bajo <strong>de</strong> la segunda línea <strong>de</strong>texto. En primer lugar <strong>de</strong>bes situar <strong>el</strong> cursor al final <strong>de</strong> la segundalínea y pulsar un intro (Enter) para ir a una nueva línea. Después<strong>de</strong>bes dirigirte al menú Insertar, a la opción Imagen.En la nueva ventana que aparece, <strong>de</strong>berás buscar la imagen en lacarpeta en la que la habías guardado, y <strong>de</strong>spués s<strong>el</strong>eccionarla.
Unidad 1. Conceptos básicos <strong>de</strong> <strong>Dreamweaver</strong>8 (IV)PAG 1.4Ahora vas a pasar a cambiar <strong>el</strong> formato d<strong>el</strong> texto. Para <strong>el</strong>lo necesitas visualizar <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s quese encuentra normalmente en la parte inferior <strong>de</strong> la ventana, y que tiene <strong>el</strong> siguiente aspecto:Si no te aparece, pue<strong>de</strong>s mostrarlo a través d<strong>el</strong> menú Ventana,con la opción Propieda<strong>de</strong>s.Si lo que te ocurre es que únicamente te aparece <strong>el</strong> título d<strong>el</strong>pan<strong>el</strong>, es porque está contraido. Para que te aparezca <strong>de</strong>splegado <strong>de</strong>bes pulsar sobre <strong>el</strong> botón , que aparecejunto al nombre.S<strong>el</strong>ecciona la primera línea <strong>de</strong> texto y cambia <strong>el</strong> Formato por Encabezado 1 y <strong>el</strong> color por #000066, tal y comose muestra en la siguiente imagen.Después <strong>de</strong> esto, la apariencia <strong>de</strong> la primera línea habrá cambiado. S<strong>el</strong>ecciona la imagen y las dos útimaslíneas <strong>de</strong> texto. Pulsa sobre <strong>el</strong> botón para centrarlos.Una vez hayas centrado la imagen y las otras dos líneas siguientes, s<strong>el</strong>ecciona la segunda línea <strong>de</strong> texto,que aún no ha sido modificada. Cambia <strong>el</strong> Formato por Encabezado 3, pulsa una vez sobre <strong>el</strong> botón ypulsa tres veces sobre <strong>el</strong> botón .S<strong>el</strong>ecciona <strong>de</strong> nuevo la última línea, y en Vínculo introduce http://www.<strong>el</strong>pais.es, para crear un enlace aesa otra página:
Después <strong>de</strong> todos estos pasos, pue<strong>de</strong>s ver cómo ha quedado <strong>el</strong>documento pulsando la tecla F12.Por último guarda <strong>el</strong> documento. Ya sabes que pue<strong>de</strong>s hacerlo através d<strong>el</strong> menú Archivo, <strong>de</strong>s<strong>de</strong> la opción Guardar.Pue<strong>de</strong>s llamar al documento como lo <strong>de</strong>sees, pero siempreteniendo en cuenta que la extensión ha <strong>de</strong> ser htm o html.Por ejemplo, pue<strong>de</strong>s llamarlo prueba1.htm.Si pulsas aquí podrás ver cómo <strong>de</strong>bería haber quedado la página <strong>de</strong>spués <strong>de</strong> haber seguido todos los pasosanteriores. Compara esta página con la tuya, para ver si lo has hecho todo bien.Ejercicio 1: Mi primera página.Sin resolver Resu<strong>el</strong>to
Unidad 2. El entorno <strong>de</strong> trabajo (I)Pag 2.1Vamos a ver cuáles son los <strong>el</strong>ementos básicos <strong>de</strong> <strong>Dreamweaver</strong> 8 , la pantalla, las barras, los pan<strong>el</strong>es,etc, para saber diferenciar entre cada uno <strong>de</strong> <strong>el</strong>los. Apren<strong>de</strong>remos cómo se llaman, dón<strong>de</strong> están y para quésirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando.Cuando conozcamos todo esto estaremos en disposición <strong>de</strong> empezar a crear páginas web.La pantalla inicialAl arrancar <strong>Dreamweaver</strong> aparece una pantalla inicial como ésta, vamos a ver sus componentesfundamentales. Así conoceremos los nombres <strong>de</strong> los diferentes <strong>el</strong>ementos y será más fácil enten<strong>de</strong>r <strong>el</strong> restod<strong>el</strong> curso. La pantalla que se muestra a continuación (y en general todas las <strong>de</strong> este curso) pue<strong>de</strong> no coincidirexactamente con la que ves en tu or<strong>de</strong>nador, ya que cada usuario pue<strong>de</strong> <strong>de</strong>cidir qué <strong>el</strong>ementos quiere que sevean en cada momento, como veremos más ad<strong>el</strong>ante.Las barrasLa barra <strong>de</strong> título
La barra <strong>de</strong> título contiene <strong>el</strong> nombre d<strong>el</strong> programa (Marcromedia <strong>Dreamweaver</strong> 8) y seguidamente <strong>el</strong>nombre d<strong>el</strong> documento que aparecerá en <strong>el</strong> explorador y entre paréntesis, su ubicación y <strong>el</strong> nombre d<strong>el</strong> archivoen formato html. En <strong>el</strong> extremo <strong>de</strong> la <strong>de</strong>recha están los botones para minimizar, maximizar/restaurar y cerrar.La barra <strong>de</strong> menúsLa barra <strong>de</strong> menús contiene las operaciones <strong>de</strong> <strong>Dreamweaver</strong>, agrupadas en menús <strong>de</strong>splegables. Al hacerclic en Insertar, por ejemplo, veremos las operaciones r<strong>el</strong>acionadas con los diferentes <strong>el</strong>ementos que sepue<strong>de</strong>n insertar en <strong>Dreamweaver</strong>.Muchas <strong>de</strong> las operaciones se pue<strong>de</strong>n hacer a partir <strong>de</strong> estos menús, pero para algunas es preferible oindispensable hacerlas <strong>de</strong>s<strong>de</strong> los pan<strong>el</strong>es.La barra <strong>de</strong> herramientas estándarLa barra <strong>de</strong> herramientas estándar contiene iconos para ejecutar <strong>de</strong> forma inmediata algunas <strong>de</strong> lasoperaciones más habituales, como Abrir , Guardar , etc.La barra <strong>de</strong> herramientas <strong>de</strong> documentoLa barra <strong>de</strong> herramientas <strong>de</strong> documento contiene iconos para ejecutar <strong>de</strong> forma inmediata algunas otrasoperaciones habituales que no incluye la barra <strong>de</strong> herramientas estándar. Estas operaciones son las <strong>de</strong> cambio<strong>de</strong> vista d<strong>el</strong> documento, vista previa, etc.La barra <strong>de</strong> estadoLa barra <strong>de</strong> estado nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen alencontrarnos en un documento en blanco estamos directamente sobre la etiqueta ).También nos es posible alternar entre los modos <strong>de</strong> s<strong>el</strong>ección, mano (para arrastrar la página), o zoom. Encualquier momento pue<strong>de</strong>s s<strong>el</strong>eccionar <strong>el</strong> zoom preferido <strong>de</strong>s<strong>de</strong> <strong>el</strong> <strong>de</strong>splegable zoom y ajustar la vista alporcentaje preferido (por <strong>de</strong>fecto siempre viene al 100%).Los pan<strong>el</strong>es e inspectores
<strong>Dreamweaver</strong> utiliza ventanas flotantes similares a las barras <strong>de</strong> herramientas, que se conocen comopan<strong>el</strong>es o inspectores. La diferencia entre pan<strong>el</strong> e inspector es que, en general, la apariencia y opciones <strong>de</strong> uninspector cambian <strong>de</strong>pendiendo d<strong>el</strong> objeto s<strong>el</strong>eccionado.A través <strong>de</strong> la opción Ventana, <strong>de</strong> la barra <strong>de</strong> menús, es posible mostrar u ocultar cada uno <strong>de</strong> los pan<strong>el</strong>es oinspectores. Vamos a ver los más importantes.El inspector <strong>de</strong> Propieda<strong>de</strong>sEl inspector <strong>de</strong> Propieda<strong>de</strong>s muestra y permite modificar las propieda<strong>de</strong>s d<strong>el</strong> <strong>el</strong>emento s<strong>el</strong>eccionado queson usadas <strong>de</strong> forma más frecuente. Por ejemplo, cuando <strong>el</strong> <strong>el</strong>emento s<strong>el</strong>eccionado sea texto mostrará <strong>el</strong> tipo<strong>de</strong> fuente, la alineación, si está en negrita o cursiva, etc.Pulsando sobre <strong>el</strong> botóninferior-<strong>de</strong>recha.se <strong>de</strong>spliega para mostrar más opciones. Este botón se encuentra en la esquinaSeguramente será la herramienta <strong>de</strong> <strong>Dreamweaver</strong> que más vayas a utilizar.La barra <strong>de</strong> herramientas Insertar o pan<strong>el</strong> <strong>de</strong> objetosLa barra <strong>de</strong> herramientas Insertar o pan<strong>el</strong> <strong>de</strong> objetos permite insertar <strong>el</strong>ementos en un documento sin lanecesidad <strong>de</strong> recurrir al menú Insertar. Los <strong>el</strong>ementos están clasificados según su categoría: tablas, texto,objetos <strong>de</strong> formulario, etc.Es posible configurar este pan<strong>el</strong> para que en los botones se muestren los iconos <strong>de</strong> los objetos (como ocurreen la imagen anterior), para que se muestren los nombres <strong>de</strong> los objetos, o para que se muestren ambos a lavez.Si lo <strong>de</strong>seas pue<strong>de</strong>s personalizar <strong>el</strong> área <strong>de</strong> trabajo, te explicamos cómo hacerlo aquí .Personalizar <strong>el</strong> área <strong>de</strong> trabajo (I)
Cambiar <strong>el</strong> aspecto d<strong>el</strong> Pan<strong>el</strong> <strong>de</strong> objetosEs posible cambiar <strong>el</strong> aspecto d<strong>el</strong> pan<strong>el</strong> <strong>de</strong> objetos, se pue<strong>de</strong> visualizar a modo<strong>de</strong> fichas, tal como aparece en la siguiente imagen:También pue<strong>de</strong> tener este otro aspecto:Para pasar d<strong>el</strong> aspecto Fichas al otro hay que hacer clic sobre <strong>el</strong> botóncomo menú., y s<strong>el</strong>eccionar la opción MostrarPara volver al aspecto Fichas, <strong>de</strong>splegamos <strong>el</strong> menú Diseño (o <strong>el</strong> que esté en esemomento) y s<strong>el</strong>eccionamos la opción Mostrar como fichas.Cambiar <strong>el</strong> nombre <strong>de</strong> un grupo <strong>de</strong> pan<strong>el</strong>esEs posible cambiar <strong>el</strong> nombre <strong>de</strong> un grupo <strong>de</strong> pan<strong>el</strong>es <strong>de</strong> forma sencilla. Vamos a ver como ejemplo <strong>el</strong>cambio <strong>de</strong> nombre d<strong>el</strong> pan<strong>el</strong> <strong>de</strong> objetos.En estos momentos <strong>el</strong> pan<strong>el</strong> se llama "Insertar", pero queremos renombrarlo como "Insert". Para <strong>el</strong>lo loprimero que hay que hacer es pulsar con <strong>el</strong> botón <strong>de</strong>recho sobre la zona d<strong>el</strong> nombreo hacer clicsobre <strong>el</strong> botón con <strong>el</strong> siguiente aspecto , ambos situados a los extremos superiores d<strong>el</strong> pan<strong>el</strong>.Entonces se mostrará <strong>el</strong> siguiente menú, en <strong>el</strong> que habrá que <strong>el</strong>egirla opción Cambiar nombre <strong>de</strong> grupo <strong>de</strong> pan<strong>el</strong>es....Después <strong>de</strong> esto se mostrará una ventana en la que se podráintroducir <strong>el</strong> nuevo nombre d<strong>el</strong> pan<strong>el</strong>
Cambiar la agrupación <strong>de</strong> los pan<strong>el</strong>esLa mayoría <strong>de</strong> los pan<strong>el</strong>es y los inspectores aparecen agrupados junto a otros en una misma ventanaflotante.Para cambiar la agrupación <strong>de</strong> un pan<strong>el</strong> o <strong>de</strong> alguna <strong>de</strong> sus pestañas es necesario, en primer lugar,s<strong>el</strong>eccionar <strong>el</strong> pan<strong>el</strong> y la pestaña <strong>de</strong>seados.Por ejemplo, vamos a ver cómo cambiar la agrupación <strong>de</strong> la pestañaCapas d<strong>el</strong> pan<strong>el</strong> Diseño.Como pue<strong>de</strong> apreciarse en la imagen, la pestaña Capas ya está activa.Seguidamente hay que hacer clic sobre <strong>el</strong> botón con <strong>el</strong> siguienteaspecto , o pulsar con <strong>el</strong> botón <strong>de</strong>recho sobre la zona d<strong>el</strong> nombre d<strong>el</strong>pan<strong>el</strong> o <strong>de</strong> la pestaña.Para cambiar la agrupación d<strong>el</strong> pan<strong>el</strong> a otro grupo diferente esnecesario dirigirse a Agrupar Capas con, <strong>de</strong>spués <strong>de</strong> lo cual <strong>de</strong>bemostrarse una lista <strong>de</strong> todos los pan<strong>el</strong>es, pudiendo s<strong>el</strong>eccionar uno <strong>de</strong><strong>el</strong>los.De este modo Capas <strong>de</strong>jaría <strong>de</strong> estar incluida en <strong>el</strong> pan<strong>el</strong> Diseño, yaparecería en ese otro pan<strong>el</strong>.Personalizar <strong>el</strong> área <strong>de</strong> trabajo (II)Cambiar los métodos abreviados <strong>de</strong> tecladoLos métodos abreviados <strong>de</strong> teclado son las combinaciones <strong>de</strong> teclas que permiten acce<strong>de</strong>r a algunasopciones sin la necesidad <strong>de</strong> moverse a través <strong>de</strong> los menús. Para modificar las combinaciones <strong>de</strong> teclas hayque dirigirse al menú Edición, a la opción Métodos abreviados <strong>de</strong> teclado.En esta nueva ventana es necesario s<strong>el</strong>eccionar un comando y una <strong>de</strong> las combinaciones <strong>de</strong> la lista <strong>de</strong>Métodos abreviados, situar <strong>el</strong> cursor en <strong>el</strong> campo Pulse tecla, seguidamente pulsar la combinación <strong>de</strong> teclas<strong>de</strong>seada, y por último hacer clic sobre <strong>el</strong> botón Cambiar.Es posible que no se permita modificar las combinaciones <strong>de</strong> teclas d<strong>el</strong> conjunto s<strong>el</strong>eccionado, por sercombinaciones que provienen <strong>de</strong> fábrica, por lo que se pedirá confirmación para crear una copia modificable d<strong>el</strong>conjunto.Hay que tener también en cuenta que no se permite asignar a un comando una combinación <strong>de</strong> teclas que yaestá asignada a otro diferente.
Acoplar y <strong>de</strong>sacoplar grupos <strong>de</strong> pan<strong>el</strong>esPara facilitar la organización <strong>de</strong> los pan<strong>el</strong>es flotantes es posibleacoplarlos a la <strong>de</strong>recha o izquierda d<strong>el</strong> área <strong>de</strong> trabajo, en un grupo<strong>de</strong> pan<strong>el</strong>es.Para mover un pan<strong>el</strong>, ya sea para acoplarlo o <strong>de</strong>sacoplarlo <strong>de</strong> ungrupo <strong>de</strong> pan<strong>el</strong>es, simplemente hay que pulsar sobre la zona <strong>de</strong>puntos que se encuentra junto al nombre d<strong>el</strong> pan<strong>el</strong>, y mantenerpulsado <strong>el</strong> ratón mientras se arrastra <strong>el</strong> pan<strong>el</strong> hacia <strong>el</strong> lugar <strong>de</strong>seado.Los grupos <strong>de</strong> pan<strong>el</strong>es pue<strong>de</strong>n mostrarse y ocultarse pulsandosobre <strong>el</strong> botón que tiene <strong>el</strong> siguiente aspecto .También pue<strong>de</strong>n mostrarse y ocultarse todos los pan<strong>el</strong>es pulsandola tecla F4, o a través <strong>de</strong> una opción d<strong>el</strong> menú Ventana.Al ocultar los pan<strong>el</strong>es la ventana <strong>de</strong> trabajo queda más gran<strong>de</strong>, porlo que estas opciones son <strong>de</strong> gran utilidad.
Unidad 2. El entorno <strong>de</strong> trabajo (II)Pag 2.2Vistas <strong>de</strong> un documentoPue<strong>de</strong>s cambiar la vista d<strong>el</strong> documento a través <strong>de</strong> la barra <strong>de</strong> herramientas <strong>de</strong> documento.La vista DiseñoLa vista Diseño permite trabajar con <strong>el</strong> editor visual. Es la vista pre<strong>de</strong>terminada <strong>de</strong> <strong>Dreamweaver</strong> y la que sesu<strong>el</strong>e utilizar habitualmente.La vista CódigoLa vista Código se utiliza para po<strong>de</strong>r trabajar en un entorno totalmente <strong>de</strong> programación, <strong>de</strong> código fuente.No permite tener directamente una referencia visual <strong>de</strong> cómo va quedando <strong>el</strong> documento según se vamodificando <strong>el</strong> código.
La vista Código y DiseñoLa vista Código y Diseño permite dividir la ventana en dos zonas. La zona superior muestra <strong>el</strong> códigofuente, y la inferior <strong>el</strong> editor visual. Cuando se realiza un cambio en alguna <strong>de</strong> las zonas, este cambio se aplicadirectamente sobre la otra.
La ayudaA través d<strong>el</strong> menú Ayuda pue<strong>de</strong>s:Acce<strong>de</strong>r al cuadro <strong>de</strong> diálogo <strong>de</strong> ayuda muysimilar al <strong>de</strong> Windows don<strong>de</strong> pue<strong>de</strong>s buscar portemas, por índice o por contenido, si s<strong>el</strong>eccionasla opción Utilización <strong>de</strong> <strong>Dreamweaver</strong> osimplemente pulsando F1.Acce<strong>de</strong>r a <strong>tutorial</strong>es (opción Primerospasos con <strong>Dreamweaver</strong>).encontrarás la sintaxis y <strong>de</strong>scripción <strong>de</strong> las etiquetas HTML.Abrir <strong>el</strong> pan<strong>el</strong> Referencia en <strong>el</strong> queAcce<strong>de</strong>r al Centro <strong>de</strong> servicio técnico <strong>de</strong> <strong>Dreamweaver</strong> en la web.Acce<strong>de</strong>r al Foros en línea <strong>de</strong> <strong>Dreamweaver</strong>.
Unidad 3. Configuración <strong>de</strong> un sitio local (I)Pag 3.1En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar laspropieda<strong>de</strong>s <strong>de</strong> los documentos, como pue<strong>de</strong> ser <strong>el</strong> color <strong>de</strong> fondo.IntroducciónUn sitio web es un conjunto <strong>de</strong> archivos y carpetas, r<strong>el</strong>acionados entre sí, con un diseño similar o unobjetivo común. Es necesario diseñar y planificar <strong>el</strong> sitio web antes <strong>de</strong> crear las páginas que va a contener.La forma habitual <strong>de</strong> crear un sitio consiste en crear una carpeta en <strong>el</strong> disco local. Los documentos HTMLnormalmente se crean <strong>de</strong>ntro <strong>de</strong> dicha carpeta, mientras que para contener las imágenes, las animaciones, lashojas <strong>de</strong> estilo, etc., se <strong>de</strong>ben crear nuevas carpetas <strong>de</strong>ntro <strong>de</strong> ésta, con <strong>el</strong> objetivo <strong>de</strong> tener una mejororganización <strong>de</strong> los archivos a la hora <strong>de</strong> trabajar. Esto es lo que se conoce como sitio local.Después se podrán copiar los archivos en un servidor web, en <strong>el</strong> <strong>de</strong>nominado sitio remoto, lo que equivale apublicar <strong>el</strong> sitio, <strong>de</strong> modo que la gente podrá verlo en Internet.La organización <strong>de</strong> los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos <strong>de</strong>forma automática, utilizar FTP para cargar <strong>el</strong> sitio local en <strong>el</strong> servidor, etc.Es conveniente que la página inicial d<strong>el</strong> sitio tenga <strong>el</strong> nombre in<strong>de</strong>x.htm o in<strong>de</strong>x.html, ya que losnavegadores buscan una página con ese nombre cuando se intenta acce<strong>de</strong>r a una URL genérica.Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.com en <strong>el</strong> navegador, éste intentaríacargar la página http://www.aulaclic.com/in<strong>de</strong>x.htm, por lo que se produciría un error en <strong>el</strong> caso <strong>de</strong> que noexistiera ninguna página con <strong>el</strong> nombre in<strong>de</strong>x.htm.Crear o editar un sitio web sin conexión a InternetUna vez creadas las carpetas que formarán un sitio local,ya es posible <strong>de</strong>finir <strong>el</strong> sitio en <strong>Dreamweaver</strong>.Para <strong>el</strong>lo hay que dirigirse al menú Sitio, a la opciónAdministrar sitios....Recuerda que a través d<strong>el</strong> pan<strong>el</strong> Archivos, pestañaArchivos, se pue<strong>de</strong> acce<strong>de</strong>r a cada uno <strong>de</strong> los sitioscreados y a la opción Administrar sitio.
En <strong>el</strong> caso <strong>de</strong> haber s<strong>el</strong>eccionado la opción Administrarsitios, aparece una ventana que contiene la lista <strong>de</strong> sitioslocales <strong>de</strong>finidos con anterioridad.Por supuesto, pue<strong>de</strong>n existir varios sitios locales en unmismo or<strong>de</strong>nador.Tanto si se <strong>el</strong>ige la opción Nuevo..., como si se <strong>el</strong>ige laopción Editar..., se mostrará la misma ventana en la que<strong>de</strong>finir las características d<strong>el</strong> sitio.Las características d<strong>el</strong> sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.Para visualizar las características <strong>de</strong> una categoría basta con s<strong>el</strong>eccionarla <strong>de</strong> la lista haciendo clic en<strong>el</strong>la.Vamos a ver los datos que hay que editar para la categoría Datos locales.Debe <strong>de</strong>finirse <strong>el</strong> Nombre d<strong>el</strong> sitio y la Carpeta raíz local, que es en la que se encuentra <strong>el</strong> sitio <strong>de</strong>ntro d<strong>el</strong>disco duro local.Después, si se <strong>de</strong>sea, a través <strong>de</strong> la categoría Mapa <strong>de</strong> diseño d<strong>el</strong> sitio pue<strong>de</strong> <strong>de</strong>finirse la página principald<strong>el</strong> sitio, <strong>de</strong> la que colgarán <strong>el</strong> resto <strong>de</strong> documentos HTML <strong>de</strong>ntro d<strong>el</strong> sitio, si en la carpeta raíz d<strong>el</strong> sitio existeuna página con <strong>el</strong> nombre in<strong>de</strong>x.htm, <strong>Dreamweaver</strong> la cogerá por <strong>de</strong>fecto.Estas tres características son las imprescindibles para <strong>de</strong>finir un sitio local.Las <strong>de</strong>más opciones en este momento no nos interesan, ya que estamos <strong>de</strong>finiendo <strong>el</strong> sitio local, y no es
necesario establecer los datos d<strong>el</strong> servidor en <strong>el</strong> que estará <strong>el</strong> sitio remoto.Después <strong>de</strong> r<strong>el</strong>lenar los datos pulsamos <strong>el</strong> botón Aceptar y abrimos <strong>el</strong> sitio.Si preferimos utilizar un asistente para crear <strong>el</strong> sitio web sólo tenemos que s<strong>el</strong>eccionar la pestaña Básicas,en vez <strong>de</strong> la pestaña Avanzadas.Abrir un sitioPara abrir un sitio ya <strong>de</strong>finido hay que dirigirse al menú Sitio, a la opción Administrarsitios.... s<strong>el</strong>eccionar <strong>el</strong> sitio <strong>de</strong> la lista <strong>de</strong> sitios y pulsar sobre <strong>el</strong> botón Listo.También po<strong>de</strong>mos utilizar <strong>el</strong> pan<strong>el</strong> Archivos, buscar y s<strong>el</strong>eccionar <strong>el</strong> sitio a abrir en <strong>el</strong>menú <strong>de</strong>splegable <strong>de</strong> la pestaña Archivos.
Unidad 3. Configuración <strong>de</strong> un sitio local (II)Pag 3.2Vistas d<strong>el</strong> sitioEs posible visualizar un sitio en <strong>el</strong> pan<strong>el</strong> Archivos o en una ventana.El pan<strong>el</strong> Archivos se pue<strong>de</strong> abrir a través d<strong>el</strong> menú Ventana, opción Archivos. También pulsando F8.Para cambiar <strong>de</strong> una vista a otra hay que pulsar sobre <strong>el</strong> botóny <strong>de</strong> la ventana.que aparece en la parte superior d<strong>el</strong> pan<strong>el</strong>Al mismo tiempo, es posible visualizar <strong>el</strong> sitio local, <strong>el</strong> sitio remoto, <strong>el</strong> servidor remoto <strong>de</strong> prueba o <strong>el</strong> mapad<strong>el</strong> sitio.En esta imagen se visualizan <strong>el</strong> mapa d<strong>el</strong> sitio y <strong>el</strong> sitio local.En este caso los documentos prueba1.htm y prueba2.htm cu<strong>el</strong>gan d<strong>el</strong> documento indice.htm, ya que ésteha sido <strong>de</strong>finido como página principal d<strong>el</strong> sitio y contiene vínculos hacia los otros dos.Si los archivos se mueven <strong>de</strong> una carpeta a otra, o se cambian <strong>de</strong> nombre, <strong>de</strong>s<strong>de</strong> fuera <strong>de</strong> <strong>Dreamweaver</strong>, laspáginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc.
En cambio, si estas modificaciones sehacen <strong>de</strong>s<strong>de</strong> <strong>de</strong>ntro <strong>de</strong> <strong>Dreamweaver</strong>, através d<strong>el</strong> sitio, es posible actualizarautomáticamente las páginas para que sihacen referencia a un objeto que hacambiado, <strong>de</strong>spués no se produzcanproblemas al visualizarlas.Al modificar algún objeto que esreferenciado por algún otro documento, semuestra una ventana similar a esta, queindica los documentos que hacenreferencia a dicho objeto, y que pue<strong>de</strong>n seractualizados para que no se produzcan losproblemas antes mencionados.Simplemente hay que pulsar sobre <strong>el</strong>botón Actualizar.Subir Archivos al servidorCuando quieras visualizar <strong>el</strong> sitio en Internet (al terminar <strong>el</strong> curso o para hacer pruebas) <strong>de</strong>berás subir los archivosal sitio que hayas contratado o conseguido gratuitamente.Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que <strong>de</strong>berás ir subiendo uno a uno cadaarchivo y creando las carpetas tú mismo. Este proceso pue<strong>de</strong> hacerse muy largo y <strong>de</strong>bes tener mucho cuidado enmantener la estructura tal y como se encuentra en tu carpeta d<strong>el</strong> disco duro. Sino los enlaces no funcionaráncorrectamente y es posible que algunas imágenes no se muestren.Para subir los archivos via web <strong>de</strong>berás seguir las instrucciones que te proporcionará tu servidor.La alternativa es un servidor FTP, que se utiliza en todos los sitios <strong>de</strong> pago y en algunos gratuitos. Esta forma es,<strong>de</strong> lejos, mucho mejor que la anterior.Vía FTP pue<strong>de</strong>s ver <strong>el</strong> contenido <strong>de</strong> tu sitio como una carpeta más (igual que en <strong>el</strong> Explorador <strong>de</strong> Windows) y,obviamente, nos es mucho más útil para subir los archivos.Uno <strong>de</strong> los programas gratuitos (si no es con fines comerciales) más utilizados es SmartFTP, <strong>de</strong>s<strong>de</strong>su página webpodrás <strong>de</strong>scargarte <strong>el</strong> programa y su traducción al español.Una vez instalado, abre <strong>el</strong> programa y haz clic en Archivo y luego en Nuevo Navegador Remoto para crear unanueva cuenta FTP.
Aquí <strong>de</strong>berás introducir los datos que te facilitó <strong>el</strong> servidor don<strong>de</strong> vas a alojar tus páginas: Host, Usuario yContraseña.R<strong>el</strong>lena los campos y haz clic en OK. Se conectará automáticamente y podrás ver una carpeta don<strong>de</strong> podrás copiarlos archivos que hayas creado.Para <strong>el</strong>lo, haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador <strong>de</strong> los archivos <strong>de</strong> tu discoduro. Busca la carpeta que <strong>de</strong>finiste como Sitio local y copia todos los archivos que quieras subir s<strong>el</strong>eccionándolos ala vez y arrastrándolos a la carpeta (remota) d<strong>el</strong> servidor.
Verás como <strong>el</strong> programa empieza a copiar la información <strong>de</strong> tu disco a Internet.Cuando haya finalizado, sólo tendrás que introducir tu dirección <strong>de</strong> Internet en la barra <strong>de</strong> direcciones <strong>de</strong> tunavegador (Firefox, Internet Explorer...) y verás <strong>el</strong> sitio en Internet!Los servidores <strong>de</strong> pago, normalmente su<strong>el</strong>en mostrar varias carpetas al conectar con <strong>el</strong> servidor. Busca lacarpeta public_html y sube tus archivos allí.Propieda<strong>de</strong>s d<strong>el</strong> documentoEs conveniente <strong>de</strong>finir sitios homogéneos, que todas las páginas <strong>de</strong> un sitio sigan un mismo formato, es<strong>de</strong>cir, que tengan <strong>el</strong> mismo color <strong>de</strong> fondo, <strong>de</strong> fuente, etc.Pue<strong>de</strong> <strong>de</strong>finirse <strong>el</strong> formato <strong>de</strong> cada una <strong>de</strong> las páginas a través d<strong>el</strong> cuadro <strong>de</strong> diálogo Propieda<strong>de</strong>s <strong>de</strong> lapágina.Este cuadro se pue<strong>de</strong> abrir <strong>de</strong> tres modos diferentes:Pulsar la combinación <strong>de</strong> teclas Ctrl+J.Hacer clic sobre <strong>el</strong> menú Modificar y <strong>el</strong>egir la opción Propieda<strong>de</strong>s <strong>de</strong> la página.Hacer clic con <strong>el</strong> botón <strong>de</strong>recho d<strong>el</strong> ratón sobre <strong>el</strong> fondo <strong>de</strong> la página. Aparecerá al final d<strong>el</strong> menúcontextual la opción Propieda<strong>de</strong>s <strong>de</strong> la página. Se abrirá <strong>el</strong> cuadro <strong>de</strong> diálogo siguiente:
Las propieda<strong>de</strong>s están organizadas en categorías.En la categoría Aspecto, como ves en la imagen anterior, encontramos las propieda<strong>de</strong>s:Imagen <strong>de</strong> fondo: permite especificar una imagen <strong>de</strong> fondo para <strong>el</strong> documento. Dicha imagen se muestra enmosaico. Es importante al <strong>el</strong>egir una imagen <strong>de</strong> fondo tener en cuenta que según los colores <strong>de</strong> la imagen seránecesario establecer unos u otros colores para <strong>el</strong> texto, así como que no es conveniente tener un gif animadocomo fondo.Color <strong>de</strong> fondo: permite especificar un color <strong>de</strong> fondo para <strong>el</strong> documento, pero dicho color solo se mostraráen <strong>el</strong> caso <strong>de</strong> no haber establecido ninguna imagen <strong>de</strong> fondo.Tamaño: permite <strong>de</strong>finir <strong>el</strong> tamaño <strong>de</strong> la letra.Color d<strong>el</strong> texto: es <strong>el</strong> color <strong>de</strong> la fuente.Márgenes: permiten establecer márgenes en <strong>el</strong> documento. Los márgenes izquierdo y superior solofuncionan en Microsoft Internet Explorer, mientras que <strong>el</strong> ancho y <strong>el</strong> alto <strong>de</strong> márgen solo funcionan paraNetscape Navigator. Ninguno <strong>de</strong> estos márgenes aparece en la ventana <strong>de</strong> documento <strong>de</strong> <strong>Dreamweaver</strong>, solose mostrarán en los navegadores.En la categoría Título/Codificación encontramos la propiedad:Título: es <strong>el</strong> título d<strong>el</strong> documento, que aparecerá en la barra <strong>de</strong> título d<strong>el</strong> navegador y <strong>de</strong> la ventana <strong>de</strong>documento <strong>de</strong> <strong>Dreamweaver</strong>.En la categoría Vínculos encontramos las propieda<strong>de</strong>s:Color <strong>de</strong> vínculo: es <strong>el</strong> color <strong>de</strong> los vínculos, que ayuda al usuario a distinguir entre <strong>el</strong> texto normal y losvínculos que sirven <strong>de</strong> enlace a otras páginas.Vínculos visitados: es <strong>el</strong> color <strong>de</strong> los vínculos visitados, que permite distinguir al usuario si unos vínculos yahan sido visitados o no.Vínculos activos: es <strong>el</strong> color <strong>de</strong> los vínculos activos.Estilo subrayado: por <strong>de</strong>fecto, cuando tenemos un texto con un vínculo asociado, <strong>el</strong> texto aparecesubrayado, con esta opción po<strong>de</strong>mos <strong>el</strong>egir otro tipo <strong>de</strong> estilo por ejemplo para que no aparezca subrayado.En la categoría Imagen <strong>de</strong> rastreo encontramos las propieda<strong>de</strong>s:
Imagen <strong>de</strong> rastreo: permite establecer una imagen como fondo d<strong>el</strong> documento, pero que sólo se mostraráen la ventana <strong>de</strong> documento <strong>de</strong> <strong>Dreamweaver</strong>, y nunca en un navegador. Dicha imagen se utiliza como plantillagráfica sobre la que crear <strong>el</strong> documento.Transparencia: permite establecer la opacidad <strong>de</strong> la imagen <strong>de</strong> rastreo.Hay que tener cuidado <strong>de</strong> no crear páginas que tar<strong>de</strong>n mucho tiempo en cargarse en <strong>el</strong> navegador. Para vercómo comprobar <strong>el</strong> tamaño <strong>de</strong> los documentos, pulsa aquí .Comprobar tamaño para optimizar lacargaSi las páginas tienen muchos <strong>el</strong>ementos (imágenes, tablas, etc.) y son muy gran<strong>de</strong>s, posiblemente tar<strong>de</strong>nmucho tiempo en mostrarse totalmente en <strong>el</strong> navegador. Esto no es nada recomendable, ya que los usuariospue<strong>de</strong>n per<strong>de</strong>r la paciencia, y no visitar más nuestra página.Siempre hay que intentar que <strong>el</strong> tiempo <strong>de</strong> <strong>de</strong>scarga en <strong>el</strong> navegador no sea muy <strong>el</strong>evado.<strong>Dreamweaver</strong> permite calcular automáticamente <strong>el</strong> tiempo <strong>de</strong> <strong>de</strong>scarga <strong>de</strong> las páginas. Para <strong>el</strong>lo hay quedirigirse al menú Edición, a la opción Preferencias.
En esta nueva ventana lo primero que hay que hacer es s<strong>el</strong>eccionar una Categoría. En este caso nosinteresa la <strong>de</strong> Barra <strong>de</strong> estado.En <strong>el</strong>la habrá que establecer una V<strong>el</strong>ocidad <strong>de</strong> conexión.En España 56,0 es la v<strong>el</strong>ocidad <strong>de</strong> los mó<strong>de</strong>ms normales, pero po<strong>de</strong>mos <strong>el</strong>egir otra diferente, por ejemplo sipensamos que la mayoría <strong>de</strong> nuestros posibles clientes tienen conexiones rápidas.Una vez establecida una v<strong>el</strong>ocidad <strong>de</strong> conexión, y aceptados los cambios, <strong>Dreamweaver</strong> calculará <strong>el</strong> tamañoy <strong>el</strong> tiempo <strong>de</strong> <strong>de</strong>scarga <strong>de</strong> la páginas a partir <strong>de</strong> esa v<strong>el</strong>ocidad <strong>de</strong> conexión.Hay que tener en cuenta que <strong>el</strong> tamaño <strong>de</strong> <strong>de</strong>scarga <strong>de</strong> una página no solo se calcula a partir d<strong>el</strong> tamaño <strong>de</strong>esa página en disco, sino que hay que consi<strong>de</strong>rar también <strong>el</strong> tamaño <strong>de</strong> las imágenes que aparecen en <strong>el</strong>la, yd<strong>el</strong> resto <strong>de</strong> <strong>el</strong>ementos.Cuando en la ventana <strong>de</strong> documento <strong>de</strong> <strong>Dreamweaver</strong> esté abierta alguna página, se mostrarán su tamaño ysu tiempo <strong>de</strong> <strong>de</strong>scarga en la barra <strong>de</strong> estado.Por ejemplo, esta página que estás viendo tiene un tamaño <strong>de</strong> <strong>de</strong>scarga <strong>de</strong> 19K, y se presupone un tiempo<strong>de</strong> <strong>de</strong>scarga <strong>de</strong> 5 segundos, ya que en la barra <strong>de</strong> estado <strong>de</strong> la ventana <strong>de</strong> documento aparecen estos datosentre <strong>el</strong> tamaño <strong>de</strong> la ventana <strong>de</strong> documento y <strong>el</strong> pan<strong>el</strong> <strong>de</strong> propieda<strong>de</strong>s , representados por 19K/5 s.
Los coloresPara asignar colores es posible <strong>de</strong>splegar una paleta <strong>de</strong> colores comoésta. Al s<strong>el</strong>eccionar un color <strong>de</strong> estas paletas, se muestra <strong>el</strong> valorhexa<strong>de</strong>cimal d<strong>el</strong> color en la parte superior.Las paletas <strong>de</strong> colores <strong>de</strong> <strong>Dreamweaver</strong> utilizan la paleta <strong>de</strong> 216 coloresseguros para web. Éstos son los colores que se muestran <strong>de</strong> la mismaforma en Microsoft Internet Explorer y en Netscape Navigator, tanto enWindows como en Macintosh.También es posible personalizar los colores a través d<strong>el</strong> botónparte superior <strong>de</strong> la paleta.<strong>de</strong> laLos colores pue<strong>de</strong>n asignarse a través <strong>de</strong> los botones: .Estos botones su<strong>el</strong>en aparecer en <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s <strong>de</strong> muchos objetos, y también en algunasventanas que permiten especificar propieda<strong>de</strong>s (sobre todo propieda<strong>de</strong>s <strong>de</strong> texto, fondo, o tablas), como es <strong>el</strong>caso <strong>de</strong> la ventana <strong>de</strong> Propieda<strong>de</strong>s <strong>de</strong> la página, que tienes más arriba.El color pue<strong>de</strong> insertarse <strong>de</strong> dos modos. Uno <strong>de</strong> <strong>el</strong>los es pulsando sobre <strong>el</strong> recuadro gris , lo que haceque se <strong>de</strong>spliegue la paleta <strong>de</strong> colores. El otro modo es introduciendo directamente <strong>el</strong> número hexa<strong>de</strong>cimal d<strong>el</strong>color en <strong>el</strong> recuadro blanco.Por ejemplo, si en la paleta <strong>de</strong> colores que aparece más arriba se s<strong>el</strong>eccionara <strong>el</strong> color azul con valor#3399FF, <strong>el</strong> botón quedaría d<strong>el</strong> siguiente modo: .Ejercicio 2 Web <strong>de</strong>portesEnunciadoDeportes.1 Crear un sitio local con <strong>el</strong> nombre Deportes, cuya carpeta raíz sea la carpeta <strong>de</strong>portes, que se encuentra<strong>de</strong>ntro <strong>de</strong> la carpeta ejerciciossinresolver.2 Abrir <strong>el</strong> documento menu.htm.3 Modificar sus propieda<strong>de</strong>s para que <strong>el</strong> color <strong>de</strong> los vínculos, sea cual sea su estado, sea #000000 y nuncase encuentren subrayados.4 Asígnale <strong>el</strong> color <strong>de</strong> fondo #738099 y la imagen fondo5.gif que se encuentra en la carpeta imagenes d<strong>el</strong>sitio aparezca como fondo sin repetición.5 Haz que la fuente d<strong>el</strong> documento sea Verdana 18px Negrita.6 Abre los archivos don<strong>de</strong>.htm, instalaciones.htm, quienes.htm y reservas.htm.7 Establece <strong>el</strong> color <strong>de</strong> fondo como #999999, s<strong>el</strong>ecciona la imagen fondo.gif <strong>de</strong> la carpeta imagenes d<strong>el</strong>sitio como fondo y que se repita sobre <strong>el</strong> eje <strong>de</strong> las x.8 Haz que la fuente <strong>de</strong> estos documentos sea Arial.9 Abrir <strong>el</strong> documento marcos.htm y darle <strong>el</strong> título Tu Tienda <strong>de</strong> Deportes.
10 Guardar todos los cambios y cerrar los documentos.A partir <strong>de</strong> este momento, realizando los ejercicios propuestos, vamos a crear una página como la queaparece si pulsas aquí.Carpeta archivos Carpeta solucionEjercicio 3 web animales1 Crear un sitio local con <strong>el</strong> nombre Animales, cuya carpeta raíz sea la carpeta animales, que se encuentra<strong>de</strong>ntro <strong>de</strong> la carpeta ejerciciossinresolver.2 Abrir <strong>el</strong> documento consultas.htm y modificar sus propieda<strong>de</strong>s, para que su título sea Consultas.3 Abrir <strong>el</strong> documento gatos.htm y modificar sus propieda<strong>de</strong>s, para que su título sea Gatos.4 Abrir <strong>el</strong> documento perros.htm y modificar sus propieda<strong>de</strong>s, para que su título sea Perros.5 Abrir <strong>el</strong> documento inicio.htm y modificar sus propieda<strong>de</strong>s, para que su título sea Inicio.6 Guardar los cambios y cerrar los documentos.A partir <strong>de</strong> este momento, realizando los ejercicios propuestos, vamos a crear una página como la queaparece si pulsas aquí.Carpeta archivos Carpeta solución
Unidad 4. El texto (I)Pag 4.1A lo largo <strong>de</strong> este tema vamos a apren<strong>de</strong>r a cambiar las propieda<strong>de</strong>s d<strong>el</strong> texto y a crear estilos CSS, quepermiten asignar al texto estilos creados por nosotros mismos, no pre<strong>de</strong>finidos.Características d<strong>el</strong> textoLas características d<strong>el</strong> texto s<strong>el</strong>eccionado pue<strong>de</strong>n ser <strong>de</strong>finidas a través d<strong>el</strong> menú Texto, y a través d<strong>el</strong>inspector <strong>de</strong> propieda<strong>de</strong>s. Vamos a ver las posibilida<strong>de</strong>s que se nos ofrecen a través d<strong>el</strong> inspector <strong>de</strong>propieda<strong>de</strong>s, aunque sean menos que las que se nos ofrecen a través d<strong>el</strong> menú Texto.Formato:Permite s<strong>el</strong>eccionar un formato <strong>de</strong> párrafo ya <strong>de</strong>finido para HTML, que pue<strong>de</strong> ser encabezado, párrafo opreformateado. Los encabezados se utilizan para establecer títulos <strong>de</strong>ntro <strong>de</strong> un documento. El formatopreformateado sirve para que <strong>el</strong> texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras seintroducen varios espacios solo se consi<strong>de</strong>ra uno, pero al establecer <strong>el</strong> formato preformateado se respetará quehayan varios espacios en lugar <strong>de</strong> solo uno.Fuente: Permite s<strong>el</strong>eccionar un conjunto <strong>de</strong> fuentes. Aparecenconjuntos <strong>de</strong> fuentes en lugar <strong>de</strong> una sola, ya que es posible que alestablecer una única fuente <strong>el</strong> usuario no la tenga en su or<strong>de</strong>nador.El s<strong>el</strong>eccionar un conjunto <strong>de</strong> fuentes posibilita que en <strong>el</strong> caso <strong>de</strong>que <strong>el</strong> usuario no tenga una fuente se aplique otra d<strong>el</strong> conjunto. Porejemplo, si s<strong>el</strong>eccionamos Arial, H<strong>el</strong>vetica, Sans-serif, <strong>el</strong> texto severá con la fuente Arial, pero si esta no existe se verá en H<strong>el</strong>vetica.Tamaño:Permite cambiar <strong>el</strong> tamaño d<strong>el</strong> texto. El tamaño lo po<strong>de</strong>mos indicar en diversas unida<strong>de</strong>s, en píx<strong>el</strong>es,centímetros, etc...Color:Permite s<strong>el</strong>eccionar <strong>el</strong> color <strong>de</strong> la fuente, ignorando <strong>el</strong> color que se haya <strong>de</strong>finido en las propieda<strong>de</strong>s <strong>de</strong> lapágina. Si no se ha establecido ningún color en las propieda<strong>de</strong>s <strong>de</strong> la página ni aquí, <strong>el</strong> color d<strong>el</strong> texto por<strong>de</strong>fecto será <strong>el</strong> negro.Estilo:Estos botones permiten establecer si <strong>el</strong> texto aparecerá en negrita o en cursiva. A través d<strong>el</strong> menú Textotambién se pue<strong>de</strong>, entre otras cosas, subrayar <strong>el</strong> texto. Esta opción no aparece en <strong>el</strong> pan<strong>el</strong> <strong>de</strong> Propieda<strong>de</strong>s ya
que <strong>de</strong> normal no su<strong>el</strong>e utilizarse, <strong>de</strong>bido a que los vínculos aparecen subrayados y <strong>el</strong> subrayar texto normalpodría hacer que <strong>el</strong> usuario pensara que se trata <strong>de</strong> un vínculo.Alinear:A través <strong>de</strong> estos botones es posible establecer la alineación d<strong>el</strong> texto <strong>de</strong> una <strong>de</strong> estas cuatro formasdistintas: izquierda, centrada, <strong>de</strong>recha y justificada.Lista:Estos botones permiten crear listas con viñetas o listas numeradas.Sangria:Estos dos botones permiten sangrar <strong>el</strong> texto y anular la sangría. La sangría es una especie <strong>de</strong> márgen que seestablece a ambos lados d<strong>el</strong> texto. En este caso caso los botones se refieren a sangría a la izquierda d<strong>el</strong> texto.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Insertar texto y modificar sus propieda<strong>de</strong>s.ListasEs posible insertar texto a modo <strong>de</strong> lista. A su vez, la lista pue<strong>de</strong> ser numerada o con viñetas.Para que un texto que ya ha sido introducido en <strong>el</strong> documento se convierta en una lista, simplemente hay ques<strong>el</strong>eccionarlo y pulsar sobre la opción <strong>de</strong> lista correspondiente, ya sea a través d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s,o a través d<strong>el</strong> menú Texto.La lista con viñetas (<strong>de</strong>sor<strong>de</strong>nada) se s<strong>el</strong>ecciona a través d<strong>el</strong> botón, mientras que la lista numerada
(or<strong>de</strong>nada) se s<strong>el</strong>ecciona a través d<strong>el</strong> botón .Ejemplo <strong>de</strong> lista numerada (or<strong>de</strong>nada):1. Preparar la mochila1. Sacar los libros <strong>de</strong> ese día2. Introducir los libros d<strong>el</strong> día siguiente2. Ponerme <strong>el</strong> pijama3. Lavarme los dientes4. Poner <strong>el</strong> <strong>de</strong>spertadorEjemplo <strong>de</strong> lista con viñetas (<strong>de</strong>sor<strong>de</strong>nada):• Perro• Gato• Avesoo• HamsterCanarioLoroPara establecer listas anidadas <strong>de</strong>ntro <strong>de</strong> otras como en los ejemplos anteriores, es necesario añadir unasangría en los <strong>el</strong>ementos <strong>de</strong> la lista que se <strong>de</strong>see que pasen a formar parte <strong>de</strong> la lista anidada.A través d<strong>el</strong> menú Texto, opción Lista, es posible acce<strong>de</strong>r a las propieda<strong>de</strong>s <strong>de</strong> la lista s<strong>el</strong>eccionada. Se<strong>de</strong>be s<strong>el</strong>eccionar <strong>el</strong> texto <strong>de</strong> la lista previamente o tener <strong>el</strong> cursor en algún lugar <strong>de</strong> la lista para que se activeeste submenú.En la ventana Propieda<strong>de</strong>s <strong>de</strong> lista se pue<strong>de</strong> especificar <strong>el</strong> tipo <strong>de</strong> lista (con números o con viñetas), <strong>el</strong> tipo<strong>de</strong> números o viñetas que se utilizarán (en la propiedad Estilo:), y en <strong>el</strong> caso <strong>de</strong> las listas or<strong>de</strong>nadas, <strong>el</strong> númeropor <strong>el</strong> que comenzará <strong>el</strong> recuento.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Convertir texto en una lista.
Unidad 4. El texto (II)Pag 4.2CaracteresEspecialesA veces necesitarás introducir caracteresespeciales en tus páginas. Debido al modoeditor <strong>de</strong> Diseño <strong>de</strong> <strong>Dreamweaver</strong> esta tareaes muy sencilla utilizando <strong>el</strong> teclado, po<strong>de</strong>mosincluir caracteres como á, ê, ì, ö, ç.. <strong>de</strong> formarápida por si quieres poner dos espacios enblanco y los introduces por teclado,<strong>Dreamweaver</strong> no los creará, <strong>de</strong>berásintroducirlo dos veces utilizando la opción quevamos a ver a continuación.Haz clic en <strong>el</strong> menú Insertar y s<strong>el</strong>ecciona laopción HTML verás <strong>el</strong> <strong>de</strong>splegable <strong>de</strong> laimagen <strong>de</strong> la <strong>de</strong>recha.Sólo coloca <strong>el</strong> puntero d<strong>el</strong> ratón sobreCaracteres especiales y verás una lista rápida<strong>de</strong> los caracteres más utilizados que no pue<strong>de</strong>n ser introducidos mediante teclado.Para introducir alguno <strong>de</strong> estos caracteres en tus textos sólo s<strong>el</strong>ecciónalo en la lista y aparecerá en la vista<strong>de</strong> Diseño.Si <strong>el</strong> carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana <strong>de</strong>s<strong>de</strong> don<strong>de</strong>podrás s<strong>el</strong>eccionar caracteres entre una lista bastante más amplia:
Estilos CSS.IntroducciónEn <strong>el</strong> menú Texto, opción Estilo, aparecen una serie <strong>de</strong> estilos pre<strong>de</strong>finidos que pue<strong>de</strong>n aplicarse al textos<strong>el</strong>eccionado.Los estilos CSS están en hojas <strong>de</strong> estilo <strong>de</strong> actualización automática (también <strong>de</strong>nominadas Hojas <strong>de</strong>Estilo en Cascada) se utilizan para combinar una serie <strong>de</strong> atributos d<strong>el</strong> texto, como pue<strong>de</strong>n ser <strong>el</strong> color o <strong>el</strong>tamaño, <strong>de</strong> modo que no sea necesario asignar estos atributos uno a uno cada vez que se <strong>de</strong>see repetir laasignación <strong>de</strong> esos mismos valores a otras partes d<strong>el</strong> texto. También algunas <strong>de</strong> sus opciones pue<strong>de</strong>n utilizarsepara <strong>de</strong>finir atributos <strong>de</strong> imágenes y otras características que no permitían <strong>de</strong>finir los estilos HTML en versionesanteriores, como <strong>el</strong> color <strong>de</strong> fondo para <strong>el</strong> texto, etc.Incluso permiten aplicar un estilo sobre todas las etiquetas HTML <strong>de</strong> un mismo tipo, como pue<strong>de</strong> ser laetiqueta A HREF, que correspon<strong>de</strong> a los hiperenlaces. De este modo, todos los hiperenlaces <strong>de</strong> la páginaadquirirían la apariencia <strong>de</strong>finida en ese estilo.Un estilo CSS no es más que un conjunto <strong>de</strong> reglas <strong>de</strong> formato que controlan <strong>el</strong> aspecto d<strong>el</strong> contenido <strong>de</strong> unapágina Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página,<strong>de</strong>s<strong>de</strong> la posición precisa <strong>de</strong> <strong>el</strong>ementos hasta <strong>el</strong> diseño <strong>de</strong> fuentes y estilos concretos.Una <strong>de</strong> las gran<strong>de</strong>s ventajas <strong>de</strong> los estilos CSS resi<strong>de</strong> en que cuentan con una capacidad simple <strong>de</strong>actualización; cuando actualiza un estilo CSS, <strong>el</strong> formato <strong>de</strong> todos los documentos que usan ese estilo seactualiza automáticamente.
Unidad 4. El texto (III)Pag 4.3Crear un Estilo PersonalizadoCon <strong>Dreamweaver</strong> 8, las características que apliquemos a un texto crearán automáticamente estilos CSS que seincrustarán en <strong>el</strong> documento actual y se aplicarán únicamente sobre él.Veámoslo:Para crear un Estilo CSS personalizado:1. En <strong>el</strong> documento, se s<strong>el</strong>ecciona <strong>el</strong> texto al que se <strong>de</strong>sea aplicar características concretas.2. En <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s se modifican todas las propieda<strong>de</strong>s <strong>de</strong> formato <strong>de</strong> texto, se establecen losatributos <strong>de</strong> la fuente y d<strong>el</strong> párrafo que queramos.Automáticamente <strong>Dreamweaver</strong> creará un nuevo estilo con <strong>el</strong> nombre Estilo1 o Estilo2 o Estilo3,... según losnombres <strong>de</strong> los estilos ya creados.Aparecerá <strong>el</strong> nombre Estilo1 en <strong>el</strong> cuadro Estilo d<strong>el</strong> pan<strong>el</strong> Propieda<strong>de</strong>s.También se pue<strong>de</strong> cambiar <strong>el</strong> nombre d<strong>el</strong> estilo, es mejor que <strong>el</strong> estilo tenga unnombre que indique a qué tipo <strong>de</strong> texto se va a aplicar. Para <strong>el</strong>lo <strong>de</strong>splegamos la lista<strong>de</strong> estilos y s<strong>el</strong>eccionamos la opción Cambiar nombre... Aparecerá un cuadro <strong>de</strong>diálogo para que introduzcamos <strong>el</strong> nuevo nombre como la imagen inferior.
Si lo <strong>de</strong>seas, pue<strong>de</strong>s apren<strong>de</strong>r más sobre <strong>el</strong> pan<strong>el</strong> CSS aquí .El Pan<strong>el</strong> CSS (I)Veamos cómo funciona <strong>el</strong> pan<strong>el</strong> CSS .El Pan<strong>el</strong> CSSHemos visto como <strong>Dreamweaver</strong> nos permite crear estilos <strong>de</strong> una forma muy rápida y sencilla, los estiloscreados <strong>de</strong> esta manera se agrupan en una hoja <strong>de</strong> estilos que se encuentra incrustada en nuestrodocumento, pero también po<strong>de</strong>mos utilizar estilos que se encuentren en hojas externas al documento. Esteparticularidad es muy útil cuando diseñamos un sitio web con varias páginas ya que permite <strong>de</strong>finir una sólahoja <strong>de</strong> estilos que utilizarán todas las páginas d<strong>el</strong> sitio y así facilitar <strong>el</strong> diseño.Vamos a ver cómo funcionan las hojas <strong>de</strong> estilo a través d<strong>el</strong> pan<strong>el</strong> CSS pestaña Estilos CSS, que pue<strong>de</strong>abrirse a través d<strong>el</strong> menú Ventana, opción Estilos CSS. Existen otras alternativas para abrir este pan<strong>el</strong>, unaes pulsando Mayús+F11, o pue<strong>de</strong>s hacer clic en <strong>el</strong> botón CSS que aparece en <strong>el</strong> Inspector <strong>de</strong>Propieda<strong>de</strong>s.Para simplificar las explicaciones llamaremos pan<strong>el</strong> Estilos CSS a la pestaña Estilos CSS d<strong>el</strong> pan<strong>el</strong> CSS.En este pan<strong>el</strong> aparecen las hojas <strong>de</strong> estilos asociadas al documento, los estilos contenidos en cada hoja<strong>de</strong> estilos y unos botones en la parte inferiorque nos permiten realizar cambios en los estilos.Como pue<strong>de</strong>s ver en la imagen, en la parte inferior d<strong>el</strong> pan<strong>el</strong> pue<strong>de</strong>s ver una lista <strong>de</strong> las propieda<strong>de</strong>s queforman parte d<strong>el</strong> estilo, podrás editarlas con un sólo clic y actualizarlas o añadir nuevas haciendo clic en <strong>el</strong>vínculo Añadir propiedad.Des<strong>de</strong> los botonespodrás or<strong>de</strong>nar las propieda<strong>de</strong>s <strong>de</strong> diferentes maneras. Con <strong>el</strong> primer botónmostrarás todas las propieda<strong>de</strong>s or<strong>de</strong>nadas por categorías (Fuente, Fondo, Bloque, Bor<strong>de</strong>, etc..); tambiénpue<strong>de</strong>s mostrarlas or<strong>de</strong>ndas <strong>de</strong> la A a la Z con <strong>el</strong> segundo botón.Como pre<strong>de</strong>terminado se muestran únicamente las propieda<strong>de</strong>s utilizadas (las cuales podrás mostrarhaciendo clic en <strong>el</strong> tercer botón).Si la parte d<strong>el</strong> pie d<strong>el</strong> pan<strong>el</strong> no fuese visible prueba a modificar su tamaño colocando <strong>el</strong> cursor en <strong>el</strong> bor<strong>de</strong>inferior y haciendo clic arrástralo hasta que sus dimensiones te <strong>de</strong>jen verlo.El Pan<strong>el</strong> CSS (II)Crear un nuevo estilo
Para crear un nuevo estilo <strong>de</strong>ntro <strong>de</strong> una hoja, s<strong>el</strong>eccionamos la hoja en <strong>el</strong> pan<strong>el</strong> CSS y pulsamos <strong>el</strong> botónque sirve para crear un nuevo estilo en la hoja <strong>de</strong> estilos s<strong>el</strong>eccionada o en otra nueva.A continuación aparece una ventana como ésta:En <strong>el</strong>la pue<strong>de</strong> especificarse <strong>el</strong> Nombre: d<strong>el</strong> estilo, (sin espacios y comenzando con un punto).Con la opción Clase s<strong>el</strong>eccionada es posible especificar si <strong>el</strong> estilo va a ser uno personal creado <strong>de</strong>s<strong>de</strong> cero.Con Etiqueta se pue<strong>de</strong>n modificar los atributos <strong>de</strong> una etiqueta ya existente, en este caso en Nombre:aparece la lista <strong>de</strong> etiquetas HTML que pue<strong>de</strong>n ser re<strong>de</strong>finidas, como pue<strong>de</strong>n ser BODY, A, FORM, TABLE,etc.Con Avanzadas se pue<strong>de</strong> re<strong>de</strong>finir <strong>el</strong> formato <strong>de</strong> una combinación <strong>de</strong> etiquetas.En Definir en: se <strong>de</strong>termina si <strong>el</strong> estilo se aña<strong>de</strong> a la hoja <strong>de</strong> estilo propia d<strong>el</strong> documento (Sólo estedocumento), si se aña<strong>de</strong> a una nueva hoja <strong>de</strong> estilos ((Nuevo archivo <strong>de</strong> hojas <strong>de</strong> estilo)), o si se aña<strong>de</strong> a lahoja <strong>de</strong> estilos s<strong>el</strong>eccionada.Después <strong>de</strong> pulsar sobre <strong>el</strong> botón Aceptar aparecerá una ventana como la que aparece a continuación y enla que <strong>de</strong>finiremos <strong>el</strong> estilo:
Eligiendo una u otra categoría es posible especificar diferentes propieda<strong>de</strong>s, muchas <strong>de</strong> las cuales no sepodían aplicar mediante <strong>el</strong> pan<strong>el</strong> <strong>de</strong> Propieda<strong>de</strong>s. Por ejemplo, a través <strong>de</strong> la categoría Fondo es posibleespecificar <strong>el</strong> color <strong>de</strong> fondo para un bloque <strong>de</strong> texto o para la página entera.Gestionar estilos CSS
Para modificar un estilo ya existente, s<strong>el</strong>eccionamos <strong>el</strong> estilo a modificar en la lista <strong>de</strong> estilos d<strong>el</strong> pan<strong>el</strong> yhacemos clic en <strong>el</strong> botóncaracterísticas d<strong>el</strong> estilo., se abrirá la ventana <strong>de</strong>scrita anteriormente don<strong>de</strong> se pue<strong>de</strong> <strong>de</strong>finir lasTambién po<strong>de</strong>mos abrir esta ventana pulsando con <strong>el</strong> botón <strong>de</strong>recho sobre <strong>el</strong> estilo en <strong>el</strong> pan<strong>el</strong> CCS, ys<strong>el</strong>eccionar d<strong>el</strong> menú <strong>de</strong>splegable la opción Editar. O incluso modificarlo directamente <strong>de</strong>s<strong>de</strong> la lista <strong>de</strong>propieda<strong>de</strong>s que se encuentra al pie d<strong>el</strong> pan<strong>el</strong>.Ten en cuenta que si modificas un estilo CSS que pertenezca a una hoja <strong>de</strong> estilos vinculada, es <strong>de</strong>cir, a unarchivo CSS externo, todas las páginas que contengan ese estilo serán actualizadas al instante.Para borrar un estilo <strong>de</strong> una hoja <strong>de</strong> estilos, s<strong>el</strong>eccionamos <strong>el</strong> estilo en la lista <strong>de</strong> estilos d<strong>el</strong> pan<strong>el</strong> yhacemos clic en <strong>el</strong> botón .Como pue<strong>de</strong>s ver, es bastante sencillo trabajar con estilos CSS.Aplicar un EstiloPara aplicar un Estilo CSS personalizado:En <strong>el</strong> documento, s<strong>el</strong>ecciona <strong>el</strong> texto al que <strong>de</strong>seas aplicar <strong>el</strong> estilo CSS, o sitúa <strong>el</strong> punto <strong>de</strong> inserción d<strong>el</strong>mouse en un párrafo para aplicar <strong>el</strong> estilo a todo <strong>el</strong> párrafo. Si s<strong>el</strong>eccionas un rango <strong>de</strong> texto <strong>de</strong>ntro <strong>de</strong> unpárrafo, <strong>el</strong> Estilo CSS sólo afectará al rango s<strong>el</strong>eccionado.En <strong>el</strong> inspector <strong>de</strong> Propieda<strong>de</strong>s se s<strong>el</strong>ecciona <strong>el</strong> estilo creado por nosotros <strong>de</strong> la lista que aparece al<strong>de</strong>splegar <strong>el</strong> cuadro Estilo.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Crear estilo <strong>de</strong> clase.Hojas <strong>de</strong> EstilosPo<strong>de</strong>mos exportar estilos que se encuentren incrustados en la página HTML a una nueva hoja <strong>de</strong> estiloshaciendo clic <strong>de</strong>recho sobre <strong>el</strong> estilo en <strong>el</strong> Pan<strong>el</strong> CSS y s<strong>el</strong>eccionando Exportar.Se abrirá <strong>el</strong> cuadro <strong>de</strong> diálogo Exportar estilos como archivo CSS que te permitirá guardar todos los estilosincrustados en un nuevo archivo CSS.Esta opción es muy útil si tienes los estilos incrustados en una página y queremos utilizarlos en otrastambién. Simplemente pasamos los estilos incrustados a una hoja <strong>de</strong> estilos y luego la adjuntamos encualquier página que queramos utilizarlos.Para asignar una hoja <strong>de</strong> estilos a una página <strong>de</strong>spliega <strong>el</strong> cuadro Estilo que se encuentra en <strong>el</strong> Inspector<strong>de</strong> Propieda<strong>de</strong>s y s<strong>el</strong>ecciona Adjuntar hoja <strong>de</strong> estilos...
En Arch./URL <strong>de</strong>be especificarse la ruta y <strong>el</strong> nombre <strong>de</strong> la hoja <strong>de</strong> estilos.Elegimos si queremos Vincular o importar la hoja <strong>de</strong> estilos.Si <strong>el</strong>egimos Vincular la hoja no se incrusta en la página sino que se aña<strong>de</strong> a la página una referencia a lahoja, esto permite que cualquier cambio realizado en la hoja que<strong>de</strong> reflejado <strong>de</strong> manera automática en todas laspáginas que utilizan la hoja. Esta es la opción más aconsejable si vamos a utilizar <strong>el</strong> estilo en más <strong>de</strong> unapágina, <strong>de</strong> esta forma sólo será necesario vincular cada una <strong>de</strong> los archivos que quieras qeu se vean afectadosa la hoja <strong>de</strong> estilos que hayas creado.Si <strong>el</strong>egimos Importar la hoja se incrusta en la página.La opción Media te permitirá s<strong>el</strong>eccionar <strong>el</strong> tipo <strong>de</strong> medio al que se asociará la hoja <strong>de</strong> estilos, por ejemplo,screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirán crear hojas <strong>de</strong> estilos parasoportes diferentes. Pue<strong>de</strong>s 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 <strong>el</strong> contenido d<strong>el</strong> archivo.Después <strong>de</strong> Aceptar, la hoja con sus estilos aparecerá en <strong>el</strong> pan<strong>el</strong> CSS.Ejercicio 4 web Deportes continuacion1 Abrir <strong>el</strong> sitio Deportes.2 Abrir <strong>el</strong> documento menu.htm.3 Asigna la propiedad margen a 0px para todos los lados y <strong>el</strong> fondo <strong>de</strong>be ser posicionado en <strong>el</strong> centro(en <strong>el</strong> eje horizontal) y en la parte superior (en <strong>el</strong> vertical) al documento.4 Abre los archivos don<strong>de</strong>.htm, instalaciones.htm, quienes.htm y reservas.htm.5 Haz que <strong>el</strong> fondo sea fijo para que no se mueva si utilizamos las barras <strong>de</strong> <strong>de</strong>splazamiento.6 En <strong>el</strong> archivo instalaciones.htm convertir las seis líneas que hacen referencia a las instalaciones enuna lista <strong>de</strong>sor<strong>de</strong>nada.7 Aplicar dos sangrías a la lista.8 Guardar los cambios y cerrar <strong>el</strong> documento.Carpeta soluciónEjercicio 5 Web animales continuacion1 Abrir <strong>el</strong> sitio Animales.2 Abrir <strong>el</strong> documento perros.htm.
3 Al título Perros asignarle un tamaño <strong>de</strong> fuente <strong>de</strong> 36px, en cursiva y negrita.4 Renombra <strong>el</strong> estilo a titulo.5 Al título Cuidados Postnatales asignarle un tamaño <strong>de</strong> fuente <strong>de</strong> 16px, en cursiva y negrita.6 Renombra <strong>el</strong> estilo a titulo2.7 Cambia las propieda<strong>de</strong>s d<strong>el</strong> documento para que tenga la fuente Georgia a 16px y <strong>el</strong> fondo <strong>de</strong> color#CCCC99.8 Exporta estos estilos y guardalos en una hoja que vincularása este documento. Llámala estilo.css.9 Abrir <strong>el</strong> documento inicio.htm y asignarle la hoja <strong>de</strong> estilos estilo.css.10 Abrir <strong>el</strong> documento consultas.htm y asignarle la hoja <strong>de</strong> estilos estilo.css.11 Al título Consultas asignarle <strong>el</strong> estilo .titulo.12 Abrir <strong>el</strong> documento gatos.htm y asignarle la hoja <strong>de</strong> estilos estilo.css.13 Al título Gatos asignarle <strong>el</strong> estilo .titulo.14 Al título ¿Cómo Prevenir Los Problemas Dentales? asignarle <strong>el</strong> estilo .titulo2.15 Convertir las cuatro últimas líneas en un lista <strong>de</strong>sor<strong>de</strong>nada, aplica una sangría solamente a la segundalínea.16 Guardar los cambios y cerrar los documentos.Carpeta soluciónVer ejemplo <strong>de</strong> dos estilos en un mismo documento (para ver y para imprimir)
Unidad 5. Hiperenlaces (I)Pág 5.1Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un <strong>el</strong>ementoesencial para cualquier página web.IntroducciónUn hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva <strong>de</strong> unapágina o archivo a otra página o archivo.Es posible asignar un vínculo a un texto, a una imagen, o a parte <strong>de</strong> una imagen.Tipos <strong>de</strong> enlacesExisten diferentes clases <strong>de</strong> rutas <strong>de</strong> acceso a la hora <strong>de</strong> <strong>de</strong>finir los vínculos.Referencia absoluta:Conduce al sitio en <strong>el</strong> que se encuentra <strong>el</strong> documento utilizando la ruta completa d<strong>el</strong> archivo.La ubicación es en Internet, por ejemplo, http://www.aulaclic.com, ohttp://www.misitio.com/pagina/pagina1.html.Referencia r<strong>el</strong>ativa al documento:Conduce a un documento situado <strong>de</strong>ntro d<strong>el</strong> mismo sitio que <strong>el</strong> documento actual, pero partiendod<strong>el</strong> directorio en <strong>el</strong> que se encuentra <strong>el</strong> documento actual.Si queremos referinos a carpetas que están por encima d<strong>el</strong> niv<strong>el</strong> don<strong>de</strong> nos encontramos<strong>de</strong>beremos utilizar ../Por ejemplo, imagina que estamos en la siguiente direcciónhttp://www.misitio.com/pagina/informacion/in<strong>de</strong>x.html. En esta página queremos mostrar unaimagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html,¿cómo po<strong>de</strong>mos hacerlo? Fácil. Deberemos llamarla haciendo referencia al niv<strong>el</strong> superior(http://www.misito.com/pagina/) para po<strong>de</strong>r ir luego a la carpeta secciones.El resultado <strong>de</strong> la ruta sería <strong>el</strong> siguiente: ../secciones/seccion1.html.De esta forma, mientras nos encontramos en la carpeta informacion, subimos un niv<strong>el</strong> y luegonos movemos <strong>de</strong>ntro <strong>de</strong> la carpeta secciones para mostrar <strong>el</strong> archivo seccion1.html.Referencia r<strong>el</strong>ativa al sitio:Conduce a un documento situado <strong>de</strong>ntro d<strong>el</strong> mismo sitio que <strong>el</strong> documento actual.
En este método los enlaces se crean indicando la ruta a partir <strong>de</strong> la raíz d<strong>el</strong> sitio.En <strong>el</strong> ejemplo anterior si tuviesemos <strong>de</strong>finido como sitio la carpeta http://www.misitio.com/, unenlace en cualquier página d<strong>el</strong> sitio a http://www.misitio.com/pagina/secciones/seccion1.html secrearía como /pagina/secciones/seccion1.html.Como pue<strong>de</strong>s ver ahora <strong>el</strong> vínculo a un archivo en todas las páginas es igual porque se <strong>de</strong>fine<strong>de</strong>pendiendo d<strong>el</strong> sitio raíz y no <strong>de</strong> la ubicación don<strong>de</strong> se encuentra.Puntos <strong>de</strong> fijación:Conduce a un punto <strong>de</strong>ntro <strong>de</strong> un documento, ya sea <strong>de</strong>ntro d<strong>el</strong> actual o <strong>de</strong> otro diferente. Para<strong>el</strong>lo <strong>el</strong> vínvulo <strong>de</strong>be ser nombre_<strong>de</strong>_documento.extension#nombre_<strong>de</strong>_punto.El punto se <strong>de</strong>fine <strong>de</strong>ntro <strong>de</strong> un documento a través d<strong>el</strong> menú Insertar, opción Anclaje connombre.Podríamos referenciar <strong>de</strong> este modo a un anclaje llamado parte2 <strong>de</strong> la siguiente forma:../secciones/seccion1.html#parte2Estos tipos <strong>de</strong> enlace que hemos visto son válidos tanto para referenciar páginas (para crearhiperenlaces) o incluso imágenes u otro tipo <strong>de</strong> objetos (como veremos en temas posteriores).Deberás tener siempre en cuenta que los nombres <strong>de</strong> las rutas se correspondanperfectamente a los nombres <strong>de</strong> los archivos y carpetas en <strong>el</strong> servidor (local o remoto).Por <strong>el</strong>lo, es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces.También <strong>de</strong>berás evitar utilizar caracteres especiales como acentos o espacios, así notendrás problemas a la hora <strong>de</strong> referenciar tus objetos.Crear enlacesLa forma más sencilla <strong>de</strong> crear un enlace es a través d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s. Para <strong>el</strong>lo es necesobjeto que va a servir <strong>de</strong> enlace, y seguidamente establecer <strong>el</strong> Vínculo en <strong>el</strong> inspector.Por ejemplo, aquí hay un enlace a www.<strong>el</strong>pais.es, que es <strong>de</strong> referencia absoluta, por eso contiene HTTP://Es posible crear también vínculos vacíos, que pue<strong>de</strong>n ser útiles cuando se utilizan comportamientos, etc. Pen Vínculo únicamente una almohadilla #.
Otra forma <strong>de</strong> crear un enlace es a través d<strong>el</strong> menú Insertar, opción Hipervínculo.Crear vínculos <strong>de</strong> esta forma es muy sencillo, sólo <strong>de</strong>berás r<strong>el</strong>lenar los campos que explicaremos a continuen <strong>el</strong> lugar en <strong>el</strong> que estaba situado <strong>el</strong> cursor.Texto: es <strong>el</strong> texto que mostrará <strong>el</strong> enlaceVínculo: es la página a la que irá redirigida <strong>el</strong> enlace, si se trata <strong>de</strong> un enlace externo <strong>de</strong>berás escribHTTP://. Haz clic sobre <strong>el</strong> icono <strong>de</strong> carpeta para buscar los archivos que existan <strong>de</strong>ntro d<strong>el</strong> sitio. Por <strong>de</strong>fecenlace r<strong>el</strong>ativo al documento. Si quieres que los enlaces sean r<strong>el</strong>ativos al sitio visita este avanzado .Personalizar nuevos enlacesCrear vínculos r<strong>el</strong>ativos automáticamenteHaciendo clic en <strong>el</strong> menú Sitio y s<strong>el</strong>eccionando la opción Administrar sitios... po<strong>de</strong>mos editarconfiguración d<strong>el</strong> sitio. Bastará con s<strong>el</strong>eccionarlo en <strong>el</strong> cuadro <strong>de</strong> diálogo y pulsa Editar.Se abrirá la ventana <strong>de</strong> Definición d<strong>el</strong> Sitio. Allí s<strong>el</strong>ecciona la pestaña Avanzadas y en la categoría DaLocales podrás ver las siguientes opciones:
Estas opciones te ayudarán a crear los enlaces <strong>de</strong> forma r<strong>el</strong>ativa. S<strong>el</strong>ecciona Documento o Raíz d<strong>el</strong> sitioVínculos r<strong>el</strong>ativos a: para que se creen los enlaces r<strong>el</strong>ativos a <strong>el</strong> documento don<strong>de</strong> se haya situado <strong>el</strong> enlac<strong>de</strong>s<strong>de</strong> la raíz d<strong>el</strong> sitio.Si s<strong>el</strong>eccionas la opción Raíz d<strong>el</strong> sitio, los enlaces se estableceran respecto a la carpeta s<strong>el</strong>eccionada encampo Carpeta raíz local:.S<strong>el</strong>eccionar estas opciones no cambiará los enlaces existentes, sino que aplicará esta configuración avínculos que se creen a partir <strong>de</strong> ese momento.Destino: la página don<strong>de</strong> se abrirá la página, este campo se explica en <strong>el</strong> siguiente apartado.Título: se trata <strong>de</strong> la ayuda contextual d<strong>el</strong> vínculo, es equivalente al atributo ALT <strong>de</strong> las imágenes.Tecla <strong>de</strong> acceso: atributo que facilita la accesibilidad a las páginas, habilita <strong>el</strong> acceso al enlace mediantemás la tecla <strong>de</strong> acceso indicada.Índice <strong>de</strong> tabulador : Como habrás podido observar pue<strong>de</strong>s saltar a través <strong>de</strong> los enlaces pulsando la teclpodrás establecer un índice indicando la prioridad d<strong>el</strong> enlace y así configurar <strong>el</strong> modo en <strong>el</strong> que actuará <strong>el</strong>saltos.Destino d<strong>el</strong> enlaceEl <strong>de</strong>stino d<strong>el</strong> enlace <strong>de</strong>termina en qué ventana va a ser abierta la página vinculada, pue<strong>de</strong> variar<strong>de</strong>pendiendo <strong>de</strong> los marcos <strong>de</strong> que disponga <strong>el</strong> documento actual.Pue<strong>de</strong> especificarse en <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s a través <strong>de</strong> Dest, o en la ventana queaparece a través d<strong>el</strong> menú Insertar, opción Hipervínculo.
_blank:Abre <strong>el</strong> documento vinculado en una ventana nueva d<strong>el</strong> navegador._parent:Abre <strong>el</strong> documento vinculado en la ventana d<strong>el</strong> marco que contiene <strong>el</strong> vínculo o en <strong>el</strong> conjunto <strong>de</strong>marcos padre._s<strong>el</strong>f:Es la opción pre<strong>de</strong>terminada. Abre <strong>el</strong> documento vinculado en <strong>el</strong> mismo marco o ventana que <strong>el</strong>vínculo._top:Abre <strong>el</strong> documento vinculado en la ventana completa d<strong>el</strong> navegador.No te preocupes si no te queda d<strong>el</strong> todo claro para qué sirve cada una <strong>de</strong> estas opciones <strong>de</strong><strong>de</strong>stino, ya que se volverán a ver en <strong>el</strong> tema <strong>de</strong> Marcos.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Crear un hiperenlace.
Unidad 5. Hiperenlaces (II)Pág 5.2Formato d<strong>el</strong> enlaceEn general, un texto que tiene asociado un vínculo su<strong>el</strong>e aparecer subrayado. Al mismo tiempo,pue<strong>de</strong> adquirir tres colores diferentes que pue<strong>de</strong>n especificarse a través <strong>de</strong> las propieda<strong>de</strong>s <strong>de</strong> lapágina. Estos tres colores diferentes son los que se asignan como color <strong>de</strong> vínculo, <strong>de</strong> vínculo activo,y <strong>de</strong> vínculo visitado.Aqui tienes un vínculo <strong>de</strong> ejemplo:www.aulaclic.comCuando <strong>el</strong> vínculo está <strong>de</strong>finido sobre una imagen, en <strong>el</strong> bor<strong>de</strong> aparecen una serie <strong>de</strong> puntitos alpulsar sobre <strong>el</strong>la. Cuando <strong>el</strong> vínculo está <strong>de</strong>finido sobre una zona <strong>de</strong> una imagen (un mapa), aparece<strong>el</strong> contorno <strong>de</strong> esa zona.Aqui tienes dos vínculos similares <strong>de</strong> ejemplo:Como pue<strong>de</strong>s ver, la segunda imagen que hace <strong>de</strong> vínculo contiene un recuadro alre<strong>de</strong>dor. Esto ocurre <strong>de</strong>b<strong>el</strong> campo Bor<strong>de</strong> d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s <strong>de</strong> la imagen vale uno (1), mientras que para la primera ima(0).El campo Bor<strong>de</strong> sirve para ponerle un bor<strong>de</strong> a la imagen, in<strong>de</strong>pendientemente <strong>de</strong> si ésta va a contener un vSi se pone a cero (0), no aparece ningún bor<strong>de</strong>, ya que esto indica que <strong>el</strong> tamaño <strong>de</strong> las líneas que forman ecero (0). Pue<strong>de</strong> hacerse un recuadro más gordo incrementando <strong>el</strong> valor d<strong>el</strong> campo Bor<strong>de</strong>.Tanto si <strong>el</strong> vínculo se asigna a un texto como a una imagen, <strong>el</strong> cursor cambia <strong>de</strong> forma al situarse encimSu<strong>el</strong>e adquirir la apariencia <strong>de</strong> una mano señalando.Enlace a correo <strong>el</strong>ectrónico
Es posible especificar vínculos a direcciones <strong>de</strong> correo <strong>el</strong>ectrónico. Esto resulta útil cuando se<strong>de</strong>sea que los visitantes <strong>de</strong> la web puedan contactar con nosotros.La sintaxis d<strong>el</strong> vínculo en este caso es mailto:dirección<strong>de</strong>correo.Pue<strong>de</strong> <strong>de</strong>finirse <strong>el</strong> vínculo a través <strong>de</strong> Vínculo, d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s, s<strong>el</strong>eccionandopreviamente <strong>el</strong> texto o la imagen <strong>de</strong>seados.También es posible a través d<strong>el</strong>menú Insertar, opción Vínculo <strong>de</strong>correo <strong>el</strong>ectrónico.En este caso no es posibleasignar <strong>el</strong> vínculo a una imagen,solo permite introducir <strong>el</strong> texto quecontendrá <strong>el</strong> vínculo <strong>de</strong> correo.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Crear vínculo <strong>de</strong> correo <strong>el</strong>ectrónico.En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vínculos rotos. Si nosabes lo qué son o cómo solucionarlos, consúltalo aquí .Vínculos rotosComprobación <strong>de</strong> vínculos rotosLos Vínculos rotos son vínculos que no siguen una ruta válida, o que enlazan a archivo que noexiste.La existencia <strong>de</strong> estos vínculos en nuestras páginas no es nada recomendable, ya que no permitenavegar correctamente a los usuarios por nuestro sitio, se producen errores.Los servidores <strong>de</strong> tipo UNIX/Linux distinguen entre mayúsculas y minúsculas. Asi, por ejemplo, sienlazas a un archivo Perros.htm pue<strong>de</strong> que <strong>el</strong> servidor no lo encuentre porque en realidad lo hayasllamado perros.htm (en minúsculas).Trabajando con Windows este tipo <strong>de</strong> errores no se presentan porque no hace esta distinción. En<strong>el</strong> ejemplo anterior <strong>Dreamweaver</strong> consi<strong>de</strong>raría <strong>el</strong> enlace Perros.htm correcto aunque no lo fuese.Para evitar esto pue<strong>de</strong>s activar la opción Usar verificación <strong>de</strong> vínculos entre mayúsculas yminúsculas que se encuentra en la ventana <strong>de</strong> Definición d<strong>el</strong> Sitio, pestaña Avanzadas ycategoría Datos Locales.Para comprobar si nuestro sitio tiene Vínculos rotos hay que abrir <strong>el</strong> Verificador <strong>de</strong> vínculos.Una forma <strong>de</strong> abrirlo es a través d<strong>el</strong> pan<strong>el</strong> Archivos. Ya sabes que <strong>el</strong> pan<strong>el</strong> Archivos se pue<strong>de</strong>abrir a través d<strong>el</strong> menú Ventana, opción Archivos. También pulsando F8.Una vez abierto <strong>el</strong> pan<strong>el</strong> Archivos, hay que dirigirse ay en <strong>el</strong> menú <strong>de</strong>splegable s<strong>el</strong>eccionar
Archivo, opción Comprobar vínculos, o pulsar Mayús+F8.Entonces se muestra un nuevo pan<strong>el</strong>, en <strong>el</strong> que ya esposible comprobar si existen vínculos rotos.Lo primero que hay que hacer es pulsar sobre <strong>el</strong> botón ,a través d<strong>el</strong> cual se ofrece la posibilidad <strong>de</strong> <strong>el</strong>egir dón<strong>de</strong> secomprobarán los vínculos rotos. Pue<strong>de</strong> ser en <strong>el</strong> documentoactual, en todo <strong>el</strong> sitio, o en los archivos o carpetas d<strong>el</strong>sitio s<strong>el</strong>eccionados previamente.A través <strong>de</strong> Ver hay que especificar si han <strong>de</strong> mostrarse losVínculos rotos, los Vínculos externos o los Vínculoshuérfanos.Los Vínculos rotos son los vínculos que no siguen una ruta válida, o que enlazan a archivo queno existe.Los Vínculos externos son los vínculos a documentos que se encuentran fuera d<strong>el</strong> sitio, peroque no necesariamente son vínculos erróneos. No comprueba si estos vínculos son correctos o no,simplemente los enumera.A través <strong>de</strong> Vínculos huérfanos se muestran todos aqu<strong>el</strong>los documentos d<strong>el</strong> sitio que no estánsiendo vinculados por otros, a la vez que tampoco contienen vínculos a otros documentos. Estosdocumentos, en ocasiones, pue<strong>de</strong>n no estar siendo utilizados para nada, por lo que simplementeestán ocupando espacio en disco innecesariamente.
De estos tres tipos <strong>de</strong> vínculos, <strong>el</strong> que más nos interesa ahora es <strong>el</strong> <strong>de</strong> los Vínculos rotos. En <strong>el</strong>pan<strong>el</strong> se mostrarán todos los documentos que tienen un vínculo roto, y <strong>el</strong> documento al que cadauno <strong>de</strong> esos vínculos hace referencia.Reparación <strong>de</strong> vínculos rotosPo<strong>de</strong>mos reparar los vínculos rotos <strong>de</strong> dos formas:Una <strong>de</strong> <strong>el</strong>las es pulsando dos veces sobre <strong>el</strong> nombre d<strong>el</strong>documento que aparece en la lista <strong>de</strong> archivos d<strong>el</strong> pan<strong>el</strong>. Deeste modo, dicho documento se abre. Entonces es posiblebuscar <strong>de</strong>ntro d<strong>el</strong> documento <strong>el</strong> vínculo erróneo y modificarloa través d<strong>el</strong> Inspector <strong>de</strong> propieda<strong>de</strong>s.aparecerá a su <strong>de</strong>recha.La otra forma es pulsando sobre <strong>el</strong> vínculo roto, en lugar<strong>de</strong> sobre <strong>el</strong> nombre d<strong>el</strong> archivo. En este caso es posiblemodificar directamente <strong>el</strong> nombre d<strong>el</strong> documento en <strong>el</strong> pan<strong>el</strong>,o buscarlo a través d<strong>el</strong> icono con forma <strong>de</strong> carpeta queEjercicios d<strong>el</strong> Tema 5. Prueba evaluativa d<strong>el</strong> Tema 5.Ejercicio 6 Deportes Continuación1 Abrir <strong>el</strong> sito Deportes.2 Abrir <strong>el</strong> documento menu.htm.3 Crear un hiperenlace a quienes.htm en <strong>el</strong> texto Quiénes, escribiendo abajo como <strong>de</strong>stino.4 Crear un hiperenlace a don<strong>de</strong>.htm en <strong>el</strong> texto Dón<strong>de</strong>, escribiendo abajo como <strong>de</strong>stino.5 Crear un hiperenlace a instalaciones.htm en <strong>el</strong> texto Instalaciones, escribiendo abajo como<strong>de</strong>stino.6 Crear un hiperenlace a reservas.htm en <strong>el</strong> texto Reservas, escribiendo abajo como <strong>de</strong>stino.7 Guardar los cambios y cerrar <strong>el</strong> documento.Ejercicio 7 Animales Continuación1 Abrir <strong>el</strong> sito Animales.2 Abrir <strong>el</strong> documento inicio.htm.3 Crear un hiperenlace a www.aulaclic.com en la imagen <strong>de</strong> aulaClic.
4 Hacer que <strong>el</strong> enlace se abra en una ventana nueva d<strong>el</strong> navegador.5 Guardar los cambios y cerrar <strong>el</strong> documento.
Unidad 6. Imágenes (I)Pag 6.1En este tema vamos a ver cómo insertar imágenes en un documento. También veremos cómocrear algunas imágenes especiales, como es <strong>el</strong> caso <strong>de</strong> los Rollovers y los botones flash, queayudan a mejorar la apariencia <strong>de</strong> nuestras páginas.IntroducciónTodas las páginas web acostumbran a tener un cierto número <strong>de</strong> imágenes, que permiten mejorarsu apariencia, o dotarla <strong>de</strong> una mayor información visual.Existen una serie <strong>de</strong> formatos <strong>de</strong> imagen más recomendables que otros para ser introducidos enuna página web. Esta información pue<strong>de</strong>s consultarla aquí .Tipos <strong>de</strong> imágenes para una webFormatos <strong>de</strong>imagenLas imágenes pue<strong>de</strong>n ser <strong>de</strong> muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estosformatos son a<strong>de</strong>cuados para una web, <strong>de</strong>bido a que pue<strong>de</strong>n ocupar mucha memoria o a que noson compatibles con algunos navegadores.Los formatos más utilizados son <strong>el</strong> GIF y <strong>el</strong> JPG, que a pesar <strong>de</strong> ser imágenes <strong>de</strong> menor calidadque las imágenes BMP, son más recomendables <strong>de</strong>bido a que ocupan menos memoria. Vamos aver un poco más sobre estos formatos:Formato GIF:Utilizan un máximo <strong>de</strong> 256 colores, y son recomendables para imágenes con gran<strong>de</strong>s áreas <strong>de</strong> unmismo color o <strong>de</strong> tonos no continuos. Su<strong>el</strong>en utilizarse con gran frecuencia, ya que permitencontener transparencias y animación.Formato JPG:Las imágenes son <strong>de</strong> mayor calidad que las GIF, al po<strong>de</strong>r contener millones <strong>de</strong> colores, pero <strong>el</strong>tamaño <strong>de</strong> la imagen es mayor y tarda más en <strong>de</strong>scargarse.Pue<strong>de</strong>s incluir imágenes en otros formatos a través <strong>de</strong> <strong>Dreamweaver</strong>, que podrán servisualizadas en algunos navegadores. Este es <strong>el</strong> caso <strong>de</strong> las imágenes BMP y PNG.Si introduces una imagen BMP en <strong>Dreamweaver</strong>, te aparecerá un cuadrado grisLa imagen solo se mostrará correctamente en <strong>el</strong> navegador.en su lugar.Pue<strong>de</strong>s cambiar <strong>el</strong> formato <strong>de</strong> las imágenes mediante la utilización <strong>de</strong> algún programa <strong>de</strong>
tratamiento <strong>de</strong> imágenes, como pue<strong>de</strong>n ser Fireworks, Photoshop, Cor<strong>el</strong> Draw, etc.Dependiendo d<strong>el</strong> programa utilizado existirá una mayor o menor cantidad <strong>de</strong> opciones a la hora<strong>de</strong> modificar las imágenes. Para realizar modificaciones sencillas, como la <strong>de</strong> recortar las imágenesy cambiar los colores, pue<strong>de</strong>s utilizar incluso <strong>el</strong> programa Paint <strong>de</strong> Windows.Optimización <strong>de</strong> unaimagen
Es posible optimizar una imagen insertada en un documento abierto en <strong>Dreamweaver</strong>, a través <strong>de</strong>Fireworks. De este modo pue<strong>de</strong> modificarse <strong>el</strong> formato <strong>de</strong> la imagen, la transparencia, la paleta <strong>de</strong>colores que utiliza, etc.Al modificar estos valores, lo que se preten<strong>de</strong> es que la imagen ocupe menos memoria.Para optimizar una imagen <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> hay que s<strong>el</strong>eccionar la imagen, y seguidamentedirigirse al menú Comandos, opción Optimizar imagen en Fireworks.Des<strong>de</strong> la nueva ventana será posible modificar los atributos <strong>de</strong> la imagen.TransparenciasEn ocasiones pue<strong>de</strong> resultar útil po<strong>de</strong>r hacer invisibles algunos colores que forman parte <strong>de</strong> unaimagen. Normalmente lo que se <strong>de</strong>sea hacer transparente es <strong>el</strong> fondo.Por ejemplo, en la imagen <strong>de</strong> la <strong>de</strong>recha <strong>el</strong> fondo pue<strong>de</strong> <strong>de</strong>sentonar con <strong>el</strong>fondo <strong>de</strong> la página, o hacer que su apariencia sea más pobre.Lo primero que hay que hacer es establecer un color <strong>de</strong> fondo para la imagen,<strong>de</strong> modo que éste no coincida con <strong>el</strong> color <strong>de</strong> ningún otro <strong>el</strong>emento d<strong>el</strong> dibujo,para que éste último pueda seguir mostrándose correctamente <strong>de</strong>spués <strong>de</strong>
aplicar la transparencia.Después podrá aplicarse la transparencia sobre <strong>el</strong> color <strong>de</strong>seado, <strong>de</strong>s<strong>de</strong> algún programa <strong>de</strong>tratamiento <strong>de</strong> imágenes, como pue<strong>de</strong> ser Fireworks.Una forma <strong>de</strong> aplicar transparencia mediante Fireworks es a través <strong>de</strong> los botonesque pue<strong>de</strong>s ver en la pantalla anterior (en optimizar imagen).Cuando se está optimizando la imagen, pue<strong>de</strong> pulsarse uno <strong>de</strong> los dos primeros botonesanteriores, <strong>de</strong> modo que <strong>el</strong> puntero adquiere la forma <strong>de</strong> un cuentagotas al situarse sobre la imageno sobre la lista <strong>de</strong> colores <strong>de</strong> la imagen. Pulsando sobre un color, éste se volverá transparente.La diferencia entre <strong>el</strong> primer y <strong>el</strong> segundo <strong>de</strong> estos botones, es que <strong>el</strong> primero solo permiteasignar transparencia a un color, mientras que <strong>el</strong> otro permite añadirs<strong>el</strong>a a varios. El último botón seutiliza para quitar la transparencia <strong>de</strong> algún color.En <strong>el</strong> caso <strong>de</strong> haber aplicado la transparencia al color azul que hacía <strong>de</strong> fondo<strong>de</strong> la imagen, esta quedaría como la <strong>de</strong> la <strong>de</strong>recha.La existencia <strong>de</strong> transparencia permite mejorar notablemente la estética <strong>de</strong>nuestras páginas.Insertar unaimagenPara insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después <strong>de</strong>esto, ya es posible s<strong>el</strong>eccionar una imagen a través <strong>de</strong> la nueva ventana.
Si por algún motivo se <strong>de</strong>sea insertar un BMP, este no aparecerá a no ser que en Tipo ses<strong>el</strong>eccione Todos los archivos.En R<strong>el</strong>ativa a es posible especificar si la imagen será r<strong>el</strong>ativa al documento o a la carpeta raíz d<strong>el</strong>sitio. Es preferible que sea r<strong>el</strong>ativa al Documento, ya que si se mueve todo <strong>el</strong> sitio a una ubicacióndiferente, la imagen pue<strong>de</strong> no verse al estar siendo buscada en la ubicación anterior.Lo mismo ocurre cuando se s<strong>el</strong>ecciona un documento para crear un vínculo.La ruta en la que se encuentra la imagen aparecerá representada <strong>de</strong> una u otra forma en <strong>el</strong> campoURL <strong>de</strong> la ventana y en <strong>el</strong> campo Origen d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s, <strong>de</strong>pendiendo <strong>de</strong> si ha sidoinsertada como r<strong>el</strong>ativa a la carpeta raíz d<strong>el</strong> sitio o r<strong>el</strong>ativa al documento.Por ejemplo, imagina que <strong>de</strong>ntro <strong>de</strong> la carpeta raíz d<strong>el</strong> sitio (la carpeta d<strong>el</strong> sitio) se encuentran lacarpeta imagenes y <strong>el</strong> documento en <strong>el</strong> que <strong>de</strong>seamos insertar la imagen. Dicha imagen, llamadaaulaclic.jpg, se encuentra <strong>de</strong>ntro <strong>de</strong> la carpeta imagenes.En <strong>el</strong> caso <strong>de</strong> insertar la imagen como r<strong>el</strong>ativa al Documento la ruta sería:imagenes/aulaclic.jpgMientras que en <strong>el</strong> caso <strong>de</strong> ser insertada como r<strong>el</strong>ativa a la Raíz d<strong>el</strong> sitio la ruta sería:/imagenes/aulaclic.jpgOcurre lo mismo que cuando se crea un hipervínculo a un documento r<strong>el</strong>ativo al documento o a la
carpeta raíz d<strong>el</strong> sitio.Si se inserta un BMP en un documento, este no aparece correctamente en <strong>Dreamweaver</strong>, aunquesí en <strong>el</strong> navegador. En <strong>Dreamweaver</strong> aparecerá <strong>de</strong> la siguiente forma:Esa misma imagen es la que aparece en <strong>Dreamweaver</strong> cuando no se encuentra una imagen quehabía sido insertada. Esto pue<strong>de</strong> ocurrir si se ha modificado <strong>el</strong> nombre <strong>de</strong> la imagen, o si se hamovido <strong>de</strong> directorio, <strong>de</strong>s<strong>de</strong> fuera <strong>de</strong> <strong>Dreamweaver</strong>. En ese caso, la imagen que aparecerá en <strong>el</strong>navegador será similar a esta:Aparece un recuadro blanco con una X roja, junto con <strong>el</strong> nombre <strong>de</strong> la imagen o <strong>el</strong> contenido d<strong>el</strong>campo Alt d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s, que explicaremos a continuación.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Insertar una imagen.Propieda<strong>de</strong>s <strong>de</strong> una imagenCuando s<strong>el</strong>eccionamos una imagen <strong>el</strong> Inspector <strong>de</strong> propieda<strong>de</strong>s muestra esta apariencia:Des<strong>de</strong> aquí podrás acce<strong>de</strong>r a distintas propieda<strong>de</strong>s:Des<strong>de</strong> <strong>el</strong> campo Alt podrás asignarle una ayuda contextual a la imagen, esta se mostrará cuando coloques<strong>el</strong>la, y es muy útil <strong>de</strong> cara a hacer páginas accesibles ya que <strong>el</strong> texto que se escribe será leído por los prograpara invi<strong>de</strong>ntes. También es muy útil, como ya hemos visto, si la imagen por alguna razón no pue<strong>de</strong> mostrarseEn Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bortamaño con sólo un clic.Si le damos un valor al campo Vínculo convertiremos al imagen en un link a otra página. Para enlaces exteque <strong>de</strong>be empezar siempre por HTTP:// y si <strong>de</strong>seas crear un vínculo a un enlace <strong>el</strong>ectrónico <strong>de</strong>berá empezar pEn caso <strong>de</strong> que le hayas asignado un vínculo podrás <strong>de</strong>cidir en qué ventana quieres que se abra s<strong>el</strong>ecionen <strong>el</strong> campo Destino.Pue<strong>de</strong>s asignarle un tamaño <strong>de</strong> bor<strong>de</strong> <strong>de</strong>s<strong>de</strong> <strong>el</strong> campo Bor<strong>de</strong>.Y pue<strong>de</strong>s s<strong>el</strong>eccionar su alineación con respecto al texto <strong>de</strong>s<strong>de</strong> <strong>el</strong> campo Alinear.Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen d<strong>el</strong> texto y a
<strong>de</strong>masiado pegadas a él. Estos campos indican <strong>el</strong> espacio vertical y horizontal respectivamente entre la imageCambiar <strong>el</strong> tamaño <strong>de</strong> unaimagenDentro <strong>de</strong> <strong>Dreamweaver</strong> pue<strong>de</strong> modificarse <strong>el</strong> tamaño <strong>de</strong> las imágenes. Dicho cambio <strong>de</strong> tamañono se aplica directamente sobre <strong>el</strong> archivo <strong>de</strong> imagen, sino que lo que varía es la visualización <strong>de</strong> laimagen <strong>de</strong>ntro <strong>de</strong> la página.Es muy probable que la imagen resultante no sea <strong>de</strong> buena calidad, en comparación <strong>de</strong> cómopodría quedar modificándola <strong>de</strong>s<strong>de</strong> un editor externo, como Fireworks.Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa <strong>el</strong> icono <strong>de</strong><strong>Dreamweaver</strong> y modificamos su tamaño <strong>de</strong> varias formas diferentes:Imagen originalImagen con tamaño modificadoPue<strong>de</strong> apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasionespue<strong>de</strong> resultar útil modificar <strong>el</strong> tamaño <strong>de</strong> algunas imágenes aunque esto implique per<strong>de</strong>r calidad.Existen dos formas <strong>de</strong> modificar <strong>el</strong> tamaño.Una <strong>de</strong> <strong>el</strong>las es, una vez s<strong>el</strong>eccionada la imagen, arrastrar con <strong>el</strong> puntero alguno <strong>de</strong> losrecuadros negros que aparecen alre<strong>de</strong>dor <strong>de</strong> la imagen.La otra es a través <strong>de</strong> inspector <strong>de</strong> propieda<strong>de</strong>s, cambiando los campos An (anchura) o Al(altura). Estos campos aparecerán en <strong>el</strong> inspector cuando esté s<strong>el</strong>eccionada alguna imagen.Si estos campos no contienen <strong>el</strong> tamaño original <strong>de</strong> la imagen, <strong>el</strong> valor aparecerá resaltado ennegrita y aparecerá a la <strong>de</strong>recha una flecha circular que permite volver al tamaño original haciendoclic sobre <strong>el</strong>la.
Pue<strong>de</strong>n crearse vínculos y comportamientos sobre partes <strong>de</strong> una imagen, sin la necesidad <strong>de</strong> que sea sobesto se le conoce como mapa <strong>de</strong> imagen. Esta información pue<strong>de</strong>s consultarla aquí .Mapas <strong>de</strong> imagenLos mapas <strong>de</strong> imagen son partes <strong>de</strong> una imagen que pue<strong>de</strong>n ser utilizadas para asignarle algún tipo <strong>de</strong> comPara crear un mapa <strong>de</strong> imagen es necesario s<strong>el</strong>eccionar previamente la imagen en la que se <strong>de</strong>sea crear e<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s <strong>de</strong> dicha imagen.Estando s<strong>el</strong>eccionada la imagen, ya es posible crear un mapa a través <strong>de</strong> los botones d<strong>el</strong> inspector <strong>de</strong> protienen <strong>el</strong> siguiente aspecto:. Si no te aparecen <strong>de</strong>spliega <strong>el</strong> pan<strong>el</strong> Propieda<strong>de</strong>s para verlo compLos tres últimos botones son los que se utilizan para crear los mapas. Dichos mapas pue<strong>de</strong>n tener formcircular, o libre, <strong>de</strong>pendiendo d<strong>el</strong> botón pulsado.Al pulsar alguno <strong>de</strong> estos tres botones, cambia la apariencia d<strong>el</strong> puntero al situarlo sobre la imagen. Eposible dibujar <strong>el</strong> mapa sobre la imagen, pulsando sobre los lugares don<strong>de</strong> se <strong>de</strong>sea que comience y finalicecomo sobre <strong>el</strong> resto <strong>de</strong> lugares (en or<strong>de</strong>n) que se <strong>de</strong>sea que recorra <strong>el</strong> mapa en <strong>el</strong> caso <strong>de</strong> forma libre.Al estar s<strong>el</strong>eccionado un mapa <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s cambia. Permite asignar un vínculo y un textoese mapa como pue<strong>de</strong>s ver a continuación:El primero <strong>de</strong> los botones, <strong>el</strong> <strong>de</strong> la flecha, <strong>de</strong>be pulsarse al finalizar la creación <strong>de</strong> un mapa, para que <strong>el</strong> punsu forma original al situarse sobre una imagen. De este modo, es posible mover los puntos d<strong>el</strong> mapa, en <strong>el</strong> chayan sido creados en los sitios <strong>de</strong>seados, para ajustarlos mejor a la imagen.Aquí tienes un ejemplo <strong>de</strong> mapa <strong>de</strong> imagen. Sitúa <strong>el</strong> puntero sobre la cabeza d<strong>el</strong> perro, que es la que con
para ver qué es lo que ocurre.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Crear mapas <strong>de</strong> imagen.Ejercicio 8 Cocina Zonas interactivasObjetivo.Practicar las operaciones que hay que realizar para insertar mapas <strong>de</strong> imagen.1 Si no tienes abierto <strong>Dreamweaver</strong>, ábr<strong>el</strong>o para realizar <strong>el</strong> ejercicio.2 Si no aparece <strong>el</strong> pan<strong>el</strong> Archivos, ábr<strong>el</strong>o a través d<strong>el</strong> menú Ventana, opción Administrar Archivos .3 S<strong>el</strong>ecciona <strong>el</strong> sitio Cocina en la ventana que se abre y presiona Listo.4 Haz doble clic sobre <strong>el</strong> documento menu.htm, que aparece en <strong>el</strong> pan<strong>el</strong> Archivos.Se abrirá <strong>el</strong> documento en <strong>Dreamweaver</strong>.5 Si no aparece <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s, ábr<strong>el</strong>o a través d<strong>el</strong> menú Ventana, opción Propieda<strong>de</strong>s.6 S<strong>el</strong>ecciona la imagen, haciendo clic sobre <strong>el</strong>la.7 Si <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s no se muestra en su totalidad, pulsa sobre <strong>el</strong> botón para <strong>de</strong>splegar sumás avanzadas.8 Haz clic sobre <strong>el</strong> botón Herramienta Zona interactiva poligonal , d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s .9 Pulsa, en <strong>el</strong> or<strong>de</strong>n <strong>de</strong> las agujas d<strong>el</strong> r<strong>el</strong>oj, alre<strong>de</strong>dor <strong>de</strong> la silueta d<strong>el</strong> gorro <strong>de</strong> la izquierda.10 Haz clic sobre <strong>el</strong> botón Herramienta Puntero <strong>de</strong> zona interactiva , d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s pad<strong>el</strong>imitar <strong>el</strong> mapa.11 Haz clic sobre <strong>el</strong> botón Herramienta Zona interactiva poligonal , d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s .12 Pulsa, en <strong>el</strong> or<strong>de</strong>n <strong>de</strong> las agujas d<strong>el</strong> r<strong>el</strong>oj, alre<strong>de</strong>dor <strong>de</strong> la silueta d<strong>el</strong> gorro <strong>de</strong> la <strong>de</strong>recha.13 Haz clic sobre <strong>el</strong> botón Herramienta Puntero <strong>de</strong> zona interactiva , d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s .14 Haz clic sobre <strong>el</strong> mapa d<strong>el</strong> gorro <strong>de</strong> la izquierda.15 En Vínculo, d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s , escribe platod<strong>el</strong>asemana.htm.16 Haz clic sobre <strong>el</strong> mapa d<strong>el</strong> gorro <strong>de</strong> la <strong>de</strong>recha.
17 En Vínculo, d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s , escribe postred<strong>el</strong>asemana.htm.18 Pulsa fuera d<strong>el</strong> mapa para que <strong>de</strong>je <strong>de</strong> estar s<strong>el</strong>eccionado y se le aplique <strong>el</strong> último cambio.19 Pulsa F12 para ver <strong>el</strong> resultado en tu navegador. Comprueba que cuando posicionas <strong>el</strong> puntero d<strong>el</strong> ragorros, en la barra <strong>de</strong> estado aparece <strong>el</strong> enlace a la página web correspondiente.20 Cierra la ventana d<strong>el</strong> navegador.21 Haz clic sobre <strong>el</strong> botón Guardar <strong>de</strong> la barra <strong>de</strong> herramientas.Carpeta solución
Unidad 6. Imágenes (II)Pag 6.2Imagen <strong>de</strong> sustitución.RolloverUn rollover es una imagen que cambia por otra cuando <strong>el</strong> puntero se sitúa sobre <strong>el</strong>la. Este tipo <strong>de</strong>imagen su<strong>el</strong>e utilizarse en los menús o en los botones para <strong>de</strong>splazarnos a través <strong>de</strong> distintaspáginas.Aquí tienes un ejemplo <strong>de</strong> rollover. Sitúa <strong>el</strong> puntero sobre él para ver qué es lo que ocurre.Para insertar un rollover hay que dirigirse al menú Insertar, Objetos <strong>de</strong> Imagen, a la opciónImagen <strong>de</strong> sustitución. En la nueva ventana hay que especificar la imagen original y la <strong>de</strong>sustitución.Es preferible que la opción Carga previa <strong>de</strong> imagen <strong>de</strong> sustitución esté activa. Si se activa, laimagen <strong>de</strong> sustitución se carga cuando se carga la página, <strong>de</strong> este modo se evitan las <strong>de</strong>moras<strong>de</strong>bidas a la <strong>de</strong>scarga <strong>de</strong> la imagen cuando llega <strong>el</strong> momento <strong>de</strong> que aparezca.El Texto alternativo es <strong>el</strong> texto que aparece al situar <strong>el</strong> puntero sobre una imagen, o <strong>el</strong> queaparecerá en lugar <strong>de</strong> la imagen en <strong>el</strong> caso <strong>de</strong> que por algún motivo ésta no pueda ser mostrada en<strong>el</strong> navegador.El texto alternativo pue<strong>de</strong> asignarse a todas las imágenes, no sólo a los rollovers. Pue<strong>de</strong> hacerse através d<strong>el</strong> campo Alt d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s <strong>de</strong> la imagen s<strong>el</strong>eccionada.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Crear Rollover.Botones Flash
Existen otra serie <strong>de</strong> imágenes especiales, similares a los rollovers, que su<strong>el</strong>en utilizarse para crear menúpue<strong>de</strong>n ser los botones Flash.Aquí tienes un ejemplo <strong>de</strong> botón Flash. Sitúa <strong>el</strong> puntero sobre él para ver qué es lo que ocurre.Para insertar un botón Flash hay que dirigirse al menú Insertar, Media, a la opción Botón Flash, aparsiguiente cuadro <strong>de</strong> diálogo:A través <strong>de</strong> Estilo: pue<strong>de</strong> s<strong>el</strong>eccionarse uno <strong>de</strong> los distintos formatos <strong>de</strong> botón que se ofrecen.En esta misma ventana hay que especificar también <strong>el</strong> Texto que mostrará <strong>el</strong> botón (Texto d<strong>el</strong> botón:), asínombre con <strong>el</strong> que será guardado (Guardar como:) y <strong>el</strong> vínculo asociado (Vinculo: y Destino:).Es preferible guardar los botones Flash en <strong>el</strong> mismo directorio que los documentos HTML, en lugcarpeta <strong>de</strong>stinada a almacenar imágenes, ya que <strong>de</strong> no ser así es posible que al intentar asignar un vínculo <strong>de</strong>propio sitio, <strong>Dreamweaver</strong> no permita guardar <strong>el</strong> botón con ese vínculo en una ubicación diferente <strong>de</strong> la ddocumento.Recuerda que los botones <strong>de</strong>ben guardarse con la extensión SWF.A través d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s d<strong>el</strong> botón Flash es posible editar <strong>de</strong> nuevo sus atributos:
Pue<strong>de</strong> volver a abrirse <strong>el</strong> cuadro <strong>de</strong> diálogo anterior pulsando sobre <strong>el</strong> botón Editar, y a través <strong>de</strong>Reproducir es posible probar <strong>el</strong> funcionamiento d<strong>el</strong> botón Flash <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong>, sin la necesidad <strong>de</strong> teabrir la página con algún navegador.Después <strong>de</strong> haber probado <strong>el</strong> funcionamiento d<strong>el</strong> botón Flash, <strong>de</strong>be pulsarse <strong>de</strong> nuevo sobre <strong>el</strong> botón Rep(que habrá cambiado por <strong>el</strong> botón Detener) .Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Crear botones Flash.
Unidad 6. Imágenes (III) Pag 6.3Texto FlashEl texto Flash es similar a un rollover, pero en lugar <strong>de</strong> intercambiar imágenes intercambia <strong>el</strong> colord<strong>el</strong> texto.Para insertar texto Flash hay que dirigirse al menú Insertar, Media, a la opción Texto Flash.En la nueva ventana, a<strong>de</strong>más d<strong>el</strong> texto, <strong>el</strong> vínculo y <strong>el</strong> nombre con <strong>el</strong> que será guardado <strong>el</strong> texto,hay que especificar <strong>el</strong> color original y <strong>el</strong> <strong>de</strong> sustitución.Aquí tienes un ejemplo <strong>de</strong> texto Flash. Sitúa <strong>el</strong> puntero sobre él para ver qué es lo que ocurre.El inspector <strong>de</strong> propieda<strong>de</strong>s d<strong>el</strong> texto Flash es igual que <strong>el</strong> <strong>de</strong> un botón Flash.Barra <strong>de</strong> navegaciónUna barra <strong>de</strong> navegación es un conjunto <strong>de</strong> imágenes que se utilizan como opciones <strong>de</strong> menúpara navegar <strong>de</strong>ntro <strong>de</strong> una web. Un página web solo pue<strong>de</strong> contener una única barra <strong>de</strong>navegación.Para insertar una barra <strong>de</strong> navegación hay que dirigirse al menú Insertar, Objetos <strong>de</strong> imagen , ala opción Barra <strong>de</strong> navegación.
En la nueva ventana pue<strong>de</strong>n especificarse cuatro imágenes diferentes para cada uno <strong>de</strong> losbotones, <strong>el</strong> vínculo para cada uno <strong>de</strong> <strong>el</strong>los, etc.A través <strong>de</strong> los botones superiores <strong>de</strong> la ventana es posible crear y <strong>el</strong>iminar botones <strong>de</strong> la barra <strong>de</strong>navegación, así como reor<strong>de</strong>narlos. Con se crea un botón nuevo, con se <strong>el</strong>imina <strong>el</strong> botóns<strong>el</strong>eccionado, y con se pue<strong>de</strong> modificar la posición d<strong>el</strong> botón s<strong>el</strong>eccionado.En Imagen Arriba pones la imagen que quieres mostrar inicialmente (cuando todavía no se hahecho clic).En Sobre imagen, pones la imagen que quieres mostrar cuando <strong>el</strong> usuario mueva <strong>el</strong> punterosobre <strong>el</strong> botón y éste estaba mostrando laimagen asignada en Imagen Arriba.En Imagen abajo, pones la imagen que quieres mostrar <strong>de</strong>spués <strong>de</strong> que <strong>el</strong> usuario haya hechoclic en la imagen.En Sobre mientras imagen abajo, pones la imagen que quieres mostrar cuando <strong>el</strong> usuario mueva<strong>el</strong> puntero sobre sobre <strong>el</strong> botón y éste estabamostrando la imagen asignada en Imagen Abajo.De esta forma, si asignas imágenes distintas pue<strong>de</strong>s saber cuál es <strong>el</strong> último botón que ha sidopulsado (<strong>el</strong> que tiene Imagen Abajo).Aquí tienes un ejemplo <strong>de</strong> barra <strong>de</strong> navegación. Para su creación se han utilizado las mismasimágenes para todos los botones, pero como pue<strong>de</strong>s ver, en <strong>el</strong> botón d<strong>el</strong> medio aparece inicialmenteuna imagen diferente <strong>de</strong> la <strong>de</strong> los otros dos. Esto se <strong>de</strong>be a que la opción Mostrar "Imagen abajo"inicialmente estaba activa para este botón. Sitúa <strong>el</strong> puntero sobre los distintos botones, y pulsa
sobre alguno, para ver qué es lo que ocurre.El que existan cuatro imágenes diferentes sirve para i<strong>de</strong>ntificar cual <strong>de</strong> los vínculos está activo,cosa que con un simple rollover no pue<strong>de</strong> hacerse.A través <strong>de</strong> la opción Insertar es posible especificar si los botones <strong>de</strong> la barra <strong>de</strong> navegación vana aparecer <strong>de</strong> forma horizontal o vertical <strong>de</strong>ntro <strong>de</strong> la página.Ejercicios d<strong>el</strong> Tema 6. Prueba evaluativa d<strong>el</strong> Tema 6.Ejercicio 9 Web <strong>de</strong>portes continuación1 Abrir <strong>el</strong> sito Deportes.2 Abrir <strong>el</strong> documento instalaciones.htm.3 Insertar la imagen logo<strong>de</strong>portes.gif, que se encuentra <strong>de</strong>ntro <strong>de</strong> la carpeta imagenes d<strong>el</strong> sitio,a la <strong>de</strong>recha d<strong>el</strong> texto Nuestras instalaciones.4 Hacer que la alineación <strong>de</strong> la imagen sea Medio absoluta.5 Guardar los cambios y cerrar <strong>el</strong> documento.Carpeta soluciónEjercicio 10 Web animales continuación1 Abrir <strong>el</strong> sito Animales.2 Abrir <strong>el</strong> documento inicio.htm.3 Insertar un rollover al lado d<strong>el</strong> título Inicio, cuya imagen original sea esta: (pata1.gif), y laimagen <strong>de</strong> sustitución esta:imagenes d<strong>el</strong> sitio.(pata2.gif). Guardar previamente estas imagenes en la carpeta4 La imagen <strong>de</strong> sustitución no <strong>de</strong>be tener ninguna dirección web vinculada.5 Guardar los cambios y cerrar <strong>el</strong> documento.Carpeta solución
Ejercicio 11 Barra <strong>de</strong> navegaciónVer solución (He copiado <strong>el</strong> código fuente que crea la barra en las otras dos páginas y <strong>de</strong>spués modifico laque se carga inicialmente.)Ejercicio 12 Texto flashVer solución
Unidad 7. Tablas (I)Pag 7.1En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas, insertar tablas,combinar c<strong>el</strong>das, insertar filas o columnas y cambiar <strong>el</strong> tamaño d<strong>el</strong> bor<strong>de</strong>.IntroducciónTodos los objetos se alinean por <strong>de</strong>fecto a la izquierda <strong>de</strong> las páginas web, pero gracias a lastablas es posible distribuir <strong>el</strong> texto en columnas, colocar imágenes al lado <strong>de</strong> un bloque <strong>de</strong> texto, yotra serie <strong>de</strong> cosas que sin las tablas serían imposibles <strong>de</strong> realizar.Hoy en día, la mayoría <strong>de</strong> las páginas web se basan en tablas, ya que resultan <strong>de</strong> gran utilidad almejorar notablemente las opciones <strong>de</strong> diseño.Las tablas están formadas por un conjunto <strong>de</strong> c<strong>el</strong>das, distribuidas en filas y columnas. Acontinuación tienes un ejemplo <strong>de</strong> tabla.Insertar una tablaPara insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.
En la nueva ventana habrá queespecificar <strong>el</strong> número <strong>de</strong> Filas yColumnas que tendrá la tabla, asícomo <strong>el</strong> Ancho <strong>de</strong> la tabla .El Ancho pue<strong>de</strong> ser <strong>de</strong>finido comoPíx<strong>el</strong>es o como Porcentaje. Ladiferencia <strong>de</strong> uno y otro es que <strong>el</strong>ancho en Píx<strong>el</strong>es es siempre <strong>el</strong>mismo, in<strong>de</strong>pendientemente d<strong>el</strong>tamaño <strong>de</strong> la ventana d<strong>el</strong> navegadoren la que se visualice la página, encambio, <strong>el</strong> ancho en Porcentaje indica<strong>el</strong> porcentaje que va a ocupar la tabla<strong>de</strong>ntro <strong>de</strong> la página y se ajustará altamaño <strong>de</strong> la ventana d<strong>el</strong> navegador,esto permite que los usuarios quetengan pantallas gran<strong>de</strong>s, aprovechentodo <strong>el</strong> ancho <strong>de</strong> pantalla.Grosor d<strong>el</strong> Bor<strong>de</strong> indica <strong>el</strong> grosord<strong>el</strong> bor<strong>de</strong> <strong>de</strong> la tabla en píx<strong>el</strong>es, por<strong>de</strong>fecto se le asigna uno (1).bor<strong>de</strong>s <strong>de</strong> éstas.R<strong>el</strong>leno <strong>de</strong> c<strong>el</strong>da indica la distanciaentre <strong>el</strong> contenido <strong>de</strong> las c<strong>el</strong>das y losEspacio entre c<strong>el</strong>das indica la distancia entre las c<strong>el</strong>das <strong>de</strong> la tabla.También se pue<strong>de</strong> establecer si se quiere un encabezado para la tabla es recomendable utilizarencabezados en <strong>el</strong> caso <strong>de</strong> que los usuarios utilicen lectores <strong>de</strong> pantalla. Los lectores <strong>de</strong> pantallaleen los encabezados <strong>de</strong> tabla y ayudan a los usuarios <strong>de</strong> los mismos a mantener un seguimiento d<strong>el</strong>a información <strong>de</strong> la tabla.Si queremos incluir un título, lo indicamos en Texto, <strong>el</strong> título aparecerá fuera <strong>de</strong> la tabla.En alinear texto indicamos dón<strong>de</strong> queremos alinear <strong>el</strong> título con respecto a la tabla.En Resumen: indicamos una <strong>de</strong>scripción <strong>de</strong> la tabla, los lectores <strong>de</strong> pantalla leen <strong>el</strong> texto d<strong>el</strong>resumen pero dicho texto no aparece en <strong>el</strong> navegador d<strong>el</strong> usuario.R<strong>el</strong>lenar las c<strong>el</strong>das
Las c<strong>el</strong>das son cada uno <strong>de</strong> los recuadros que forman una tabla, resultan <strong>de</strong> la intersección entreuna fila y una columna.imagen y textoCOLUMNATexto <strong>de</strong>ntro <strong>de</strong>una c<strong>el</strong>daCELDAFILAPara po<strong>de</strong>r insertar algún <strong>el</strong>emento en una c<strong>el</strong>da, ya sea texto o imágenes, simplemente hay quesituar <strong>el</strong> cursor previamente <strong>de</strong>ntro <strong>de</strong> la c<strong>el</strong>da <strong>de</strong>seada.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Crear y r<strong>el</strong>lenar una tabla.Ejercicio 13 Insertar tablaPracticar las operaciones que hay que reslizar para insertar una tabla y r<strong>el</strong>lenar sus c<strong>el</strong>das.
1 Si no tienes abierto <strong>Dreamweaver</strong>, ábr<strong>el</strong>o para realizar <strong>el</strong> ejercicio.2 Si no aparece <strong>el</strong> pan<strong>el</strong> Archivos, ábr<strong>el</strong>o a través d<strong>el</strong> menú Ventana, opción Archivos.3 S<strong>el</strong>ecciona <strong>el</strong> sitio Cocina en <strong>el</strong> pan<strong>el</strong> Archivos.4 Haz doble clic sobre <strong>el</strong> documento quienes.htm, que aparece en <strong>el</strong> pan<strong>el</strong> Archivos.Se abrirá <strong>el</strong> documento en <strong>Dreamweaver</strong>.5 Sitúa <strong>el</strong> cursor en la línea en blanco que se encuentra bajo <strong>el</strong> texto Tenemos se<strong>de</strong>s en: .6 Haz clic sobre <strong>el</strong> menú Insertar.7 Elige la opción Tabla.8 En Filas: escribe 6.9 En Columnas: escribe 4.10 En Ancho: s<strong>el</strong>ecciona Píx<strong>el</strong>es y escribe 500.11 En Bor<strong>de</strong>: escribe 2.12 Si en R<strong>el</strong>leno <strong>de</strong> c<strong>el</strong>da: aparece algo escrito, bórralo.13 En Espacio entre c<strong>el</strong>das: escribe 2.14 Haz clic sobre <strong>el</strong> botón Aceptar.15 R<strong>el</strong>lena la tabla para que que<strong>de</strong> d<strong>el</strong> siguiente modo:Se<strong>de</strong>s <strong>de</strong>CocinaCiudad Valencia Barc<strong>el</strong>onaDirecciónHorarioEspecialidadAvda. Consitución,3410:00 – 16:3020:30 – 00:00Casera y <strong>de</strong>CreaciónGran Via, 16212:00 – 17:0020:30 – 00:30Cast<strong>el</strong>lana y <strong>de</strong>MercadoReservas Sí No SíAvda. Diagonal,2320:30 – 01:00Creativa16 Haz clic sobre <strong>el</strong> botón Guardar <strong>de</strong> la barra <strong>de</strong> herramientas.Ver solución
Unidad 7. Tablas (II)Pag 7.2S<strong>el</strong>eccionar <strong>el</strong>ementos <strong>de</strong> una tablaExisten varias formas <strong>de</strong> s<strong>el</strong>eccionar una tabla. Una <strong>de</strong> <strong>el</strong>las es a través d<strong>el</strong> menú Modificarestando <strong>el</strong> cursor en la tabla, o <strong>de</strong>splegando <strong>el</strong> menú contextual <strong>de</strong> la tabla al pulsar con <strong>el</strong> botón<strong>de</strong>recho sobre <strong>el</strong>la. En ambos casos aparece la opción Tabla, a través <strong>de</strong> la cual se pue<strong>de</strong> <strong>el</strong>egir laopción S<strong>el</strong>eccionar tabla.También es posible s<strong>el</strong>eccionar una tabla pulsando con <strong>el</strong> ratón sobre <strong>el</strong> bor<strong>de</strong> que la ro<strong>de</strong>a, opulsando sobre la etiqueta que aparece en la barra <strong>de</strong> estado <strong>de</strong> la ventana <strong>de</strong> documento.Cuando se s<strong>el</strong>ecciona una tabla o cuando se coloca <strong>el</strong> cursor sobre cualquier parte <strong>de</strong> la tabla,<strong>Dreamweaver</strong> muestra en una zona ver<strong>de</strong> <strong>el</strong> ancho <strong>de</strong> la tabla y <strong>de</strong> cada columna. Junto a losanchos se encuentran unos menús <strong>de</strong>splegables (menú <strong>de</strong> encabezado <strong>de</strong> la tabla y menú <strong>de</strong>encabezado <strong>de</strong> la columna). Estos menús permiten acce<strong>de</strong>r rápidamente a <strong>de</strong>terminados comandosr<strong>el</strong>acionados con la tabla.
Si tienes <strong>el</strong> cursor en la tabla y no te aparece esa zona ver<strong>de</strong>pue<strong>de</strong>s activar su visualización s<strong>el</strong>eccionando la opción Anchos <strong>de</strong>tablas d<strong>el</strong> menú Tabla o también <strong>de</strong>splegando <strong>de</strong> la barra <strong>de</strong> menús,<strong>el</strong> menú Ver, Ayudas visuales, Anchos <strong>de</strong> tabla. De la misma formase <strong>de</strong>sactiva su visualización.Si no aparece <strong>el</strong> ancho <strong>de</strong> la tabla o <strong>de</strong> una columna, la tabla o la columna no tiene un anchoespecificado, si aparecen dos números, <strong>el</strong> primer número correspon<strong>de</strong> al ancho especificado en laspropieda<strong>de</strong>s <strong>de</strong> la tabla o columna y <strong>el</strong> segundo número es <strong>el</strong> ancho <strong>el</strong> ancho visual que aparece enla vista <strong>de</strong> diseño, por ejemplo en la tabla anterior la primera columna tiene 139 (142), en laspropieda<strong>de</strong>s <strong>de</strong> la c<strong>el</strong>da tenemos <strong>el</strong> ancho 139 píx<strong>el</strong>es pero al contener una imagen que necesitamás espacio, la columna ocupará realmente 142 píx<strong>el</strong>es (ancho visual <strong>de</strong> la columna tal comoaparece en la pantalla).Cuando ocurren estas diferencias po<strong>de</strong>mos hacer que en <strong>el</strong> código (propieda<strong>de</strong>s) se cambie <strong>el</strong>ancho por <strong>el</strong> real, para <strong>el</strong>lo sólo tenemos que s<strong>el</strong>eccionar la opción Igualar todos los anchos d<strong>el</strong>menú <strong>de</strong>splegable <strong>de</strong> encabezado <strong>de</strong> tabla.En este menú vemos que también tenemos la opción S<strong>el</strong>eccionar tabla.No siempre se <strong>de</strong>sea s<strong>el</strong>eccionar toda una tabla, en ocasiones se <strong>de</strong>sea s<strong>el</strong>eccionar filas,columnas o c<strong>el</strong>das.Pue<strong>de</strong> s<strong>el</strong>eccionarse una fila o columna <strong>de</strong> varias formas, lo mejor es que pruebes las distintasformas y <strong>el</strong>ijas la que más te gusta. Estas son las formas <strong>de</strong> s<strong>el</strong>ección:Pue<strong>de</strong>s utilizar la opción S<strong>el</strong>eccionar columna d<strong>el</strong> menú <strong>de</strong> encabezado <strong>de</strong> columna (zonaver<strong>de</strong> <strong>de</strong> anchos) esto sólo es válido para s<strong>el</strong>eccionar una columna.Manteniendo pulsado y arrastrando <strong>el</strong> ratón hasta s<strong>el</strong>eccionar la columna/s o fila/scompletamente.También pue<strong>de</strong> hacerse situando <strong>el</strong> cursor junto al bor<strong>de</strong> superior o izquierdo <strong>de</strong> la columna ofila respectivamente, <strong>de</strong> modo que <strong>el</strong> cursor cambia a la forma <strong>de</strong> una flecha negra. Al hacer clic ses<strong>el</strong>ecciona la columna o fila a la que apunta dicha flecha.
En cualquier momento, para s<strong>el</strong>eccionar una fila posicionar <strong>el</strong> cursor en cualquier sitio <strong>de</strong> la fila ysobre la etiqueta <strong>de</strong> la barra <strong>de</strong> estado o sobre la etiqueta para s<strong>el</strong>eccionar la columna.Para s<strong>el</strong>eccionar varias c<strong>el</strong>das contiguas, basta con mantener pulsado <strong>el</strong> ratón mientras searrastra sobre las c<strong>el</strong>das <strong>de</strong>seadas.Para s<strong>el</strong>eccionar una sola c<strong>el</strong>da o varias c<strong>el</strong>das no contiguas, hay que mantener pulsada latecla Control mientras se hace clic sobre las c<strong>el</strong>das.Formato <strong>de</strong> tablaLas propieda<strong>de</strong>s <strong>de</strong> la tabla se especifican a través <strong>de</strong> su inspector <strong>de</strong> propieda<strong>de</strong>s.A través d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s se pue<strong>de</strong>n modificar los valores que se especificaron alinsertar la tabla. Al mismo tiempo, pue<strong>de</strong>n indicarse otros como pue<strong>de</strong>n ser <strong>el</strong> valor Alinear (quepermite alinear la tabla a la izquierda, al centro o a la <strong>de</strong>recha), <strong>el</strong> color <strong>de</strong> fondo (en Col. Fondo) o<strong>de</strong> bor<strong>de</strong> <strong>de</strong> la tabla (en Col. bor<strong>de</strong> ), o la imagen <strong>de</strong> fondo (en Im.).Si lo que se s<strong>el</strong>ecciona es una c<strong>el</strong>da, o un conjunto <strong>de</strong> c<strong>el</strong>das, <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s cambia,para permitir especificar otros valores.La parte superior d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s en este caso sirve para especificar las propieda<strong>de</strong>sd<strong>el</strong> texto que se insertará <strong>de</strong>ntro <strong>de</strong> la c<strong>el</strong>da (o c<strong>el</strong>das) s<strong>el</strong>eccionada.La parte inferior sirve para especificar valores propios <strong>de</strong> la c<strong>el</strong>da, como pue<strong>de</strong> ser <strong>el</strong> color oimagen <strong>de</strong> fondo diferentes <strong>de</strong> los especificados para la tabla global (en Fnd), <strong>el</strong> color d<strong>el</strong> Bor<strong>de</strong> d<strong>el</strong>a c<strong>el</strong>da, etc.Dos opciones que posiblemente necesites utilizar con frecuencia serán Horiz y Vert, que <strong>de</strong>finenla alineación d<strong>el</strong> contenido <strong>de</strong> la c<strong>el</strong>da <strong>de</strong> forma horizontal y vertical respectivamente.
Cambiar tamaño <strong>de</strong> tabla y c<strong>el</strong>dasComo ya sabes, <strong>el</strong> Ancho <strong>de</strong> una tabla pue<strong>de</strong> ser <strong>de</strong>finido como Píx<strong>el</strong>es o como Porcentaje. Eltamaño <strong>de</strong> la tabla a través d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s estará especificado por los valores <strong>de</strong> An(anchura) y Al (altura). Normalmente sólo se especifica la anchura, no la altura.Los valores An y Al <strong>de</strong> una c<strong>el</strong>da siempre están en Píx<strong>el</strong>es. No es necesario especificar ninguno <strong>de</strong>estos dos valores para las c<strong>el</strong>das, a no ser que se <strong>de</strong>see que se mantenga obligatoriamente ese tamaño, yno que se ajusten al contenido o al tamaño <strong>de</strong> la ventana.No solo pue<strong>de</strong> establecerse <strong>el</strong> tamaño <strong>de</strong> las tablas y <strong>de</strong> las c<strong>el</strong>das a través d<strong>el</strong> inspector <strong>de</strong>propieda<strong>de</strong>s. También es posible hacerlo manteniendo pulsado <strong>el</strong> ratón sobre alguno <strong>de</strong> los bor<strong>de</strong>s,arrastrándolo hacia la posición <strong>de</strong>seada.Ejercicio 14 Cocina ampliaciónPracticar cómo modificar las propieda<strong>de</strong>s <strong>de</strong> una tabla y <strong>de</strong> sus c<strong>el</strong>das.
1 Si no tienes abierto <strong>Dreamweaver</strong>, ábr<strong>el</strong>o para realizar <strong>el</strong> ejercicio.2 Si no aparece <strong>el</strong> pan<strong>el</strong> Archivos, ábr<strong>el</strong>o a través d<strong>el</strong> menú Ventana, opción Archivos.3 S<strong>el</strong>ecciona <strong>el</strong> sitio Cocina en <strong>el</strong> pan<strong>el</strong> Archivos.4 Haz doble clic sobre <strong>el</strong> documento quienes.htm, que aparece en <strong>el</strong> pan<strong>el</strong> Archivos.Se abrirá <strong>el</strong> documento en <strong>Dreamweaver</strong>.5 Si no aparece <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s, ábr<strong>el</strong>o a través d<strong>el</strong> menú Ventana, opciónPropieda<strong>de</strong>s.6 Si <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s no se muestra en su totalidad, pulsa sobre <strong>el</strong> botón para<strong>de</strong>splegar sus propieda<strong>de</strong>s más avanzadas.7 S<strong>el</strong>ecciona la tabla. Para <strong>el</strong>lo pue<strong>de</strong>s colocar <strong>el</strong> cursor en cualquier parte <strong>de</strong> la tabla, <strong>de</strong>splegar<strong>el</strong> <strong>de</strong>splegable d<strong>el</strong> encabezado <strong>de</strong> tabla y s<strong>el</strong>eccionar la opción S<strong>el</strong>eccionar tabla.8 En Im, d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s, busca la imagen fondo2.gif, que se encuentra <strong>de</strong>ntro <strong>de</strong> lacarpeta imagenes d<strong>el</strong> sitio, y s<strong>el</strong>ecciónala. Pue<strong>de</strong>s hacerlo a través d<strong>el</strong> botón con forma <strong>de</strong> carpeta.9 S<strong>el</strong>ecciona la primera fila <strong>de</strong> la tabla. Pue<strong>de</strong>s hacerlo situando <strong>el</strong> cursor junto al bor<strong>de</strong> izquierdo<strong>de</strong> la tabla, a la altura <strong>de</strong> la primera fila, y haciendo clic cuando <strong>el</strong> puntero adquiera la forma <strong>de</strong>flecha.10 En Tam, d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s, s<strong>el</strong>ecciona 18.11 En <strong>el</strong> botón Color <strong>de</strong> texto , que se encuentra a la <strong>de</strong>recha <strong>de</strong> Tam, escribe#926D38.12 S<strong>el</strong>ecciona Centro en <strong>el</strong> <strong>de</strong>splegable Horiz para centrar <strong>el</strong> texto en las c<strong>el</strong>das.13 Pulsa <strong>el</strong> botón .14 S<strong>el</strong>ecciona la segunda y la tercera fila. Pue<strong>de</strong>s hacerlo situando <strong>el</strong> cursor junto al bor<strong>de</strong>izquierdo <strong>de</strong> la tabla, a la altura <strong>de</strong> la segunda fila, y haciendo clic cuando <strong>el</strong> puntero adquiera laforma <strong>de</strong> flecha. Después <strong>de</strong>berás hacer lo mismo con la tercera fila, mientras mantienes pulsada latecla Ctrl (Control).15 En Tam s<strong>el</strong>ecciona 12.16 S<strong>el</strong>ecciona Centro en <strong>el</strong> <strong>de</strong>splegable Horiz para centrar <strong>el</strong> texto en las c<strong>el</strong>das.17 S<strong>el</strong>ecciona las dos c<strong>el</strong>das que contienen <strong>el</strong> texto Valencia y Barc<strong>el</strong>ona. Pue<strong>de</strong>s hacerlopulsando con <strong>el</strong> ratón sobre una <strong>de</strong> <strong>el</strong>las, y luego pulsando Ctrl haz clic en la segunda.18 Pulsa <strong>el</strong> botón .19 En Fnd escribe #AEA484.20 S<strong>el</strong>ecciona las cuatro últimas filas.21 En Tam s<strong>el</strong>ecciona 10.
22 S<strong>el</strong>ecciona Centro en <strong>el</strong> <strong>de</strong>splegable Horiz para centrar <strong>el</strong> texto en las c<strong>el</strong>das.23 Pulsa <strong>el</strong> botón .24 Pulsa fuera <strong>de</strong> la tabla para que las filas <strong>de</strong>jen <strong>de</strong> estar s<strong>el</strong>eccionadas y se apliquen todos loscambios.25 S<strong>el</strong>ecciona la tabla. Para <strong>el</strong>lo pue<strong>de</strong>s colocar <strong>el</strong> cursor en cualquier parte <strong>de</strong> la tabla, <strong>de</strong>splegar<strong>el</strong> <strong>de</strong>splegable d<strong>el</strong> encabezado <strong>de</strong> tabla y s<strong>el</strong>eccionar la opción S<strong>el</strong>eccionar tabla.26 En Bor<strong>de</strong> cambia <strong>el</strong> valor a 1.27 Y dale <strong>el</strong> color #000000 al Bor<strong>de</strong> .28 Haz clic sobre <strong>el</strong> botón Guardar <strong>de</strong> la barra <strong>de</strong> herramientas.Solución
Unidad 7. Tablas (III)Pag 7.3Añadir y <strong>el</strong>iminar filas y columnasExisten varias formas <strong>de</strong> añadir y <strong>el</strong>iminar filas y columnas a una tabla.Lo primero que hay que hacer es, estando <strong>el</strong> cursor en una c<strong>el</strong>da o s<strong>el</strong>eccionando varias,<strong>de</strong>splegar <strong>el</strong> menú contextual <strong>de</strong> la tabla al pulsar con <strong>el</strong> botón <strong>de</strong>recho sobre <strong>el</strong>la, o bien abrir <strong>el</strong>menú Modificar. En ambos casos aparece la opción Tabla.Según las c<strong>el</strong>das s<strong>el</strong>eccionadas, algunas <strong>de</strong> las opciones <strong>de</strong> Tabla se podrán utilizar mientras queotras no.Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertarcolumna.La fila se inserta sobre la c<strong>el</strong>da o <strong>el</strong> conjunto <strong>de</strong> c<strong>el</strong>das s<strong>el</strong>eccionadas, mientras que la columna seinserta a su izquierda.También tenemos una opción más completa, la opción Insertar filas o columnas.... Als<strong>el</strong>eccionarla aparece una nueva ventana, don<strong>de</strong> es posible <strong>de</strong>terminar si lo que se insertarán seránfilas o columnas, <strong>el</strong> número <strong>de</strong> <strong>el</strong>las que se insertará, y la posición don<strong>de</strong> se insertarán.Para <strong>el</strong>iminar una fila o una columna, hay que posicionar <strong>el</strong> cursor en la fila o columna a <strong>el</strong>iminary <strong>el</strong>egir la opción Eliminar fila o Eliminar columna d<strong>el</strong> menú Tabla.
También se pue<strong>de</strong> s<strong>el</strong>eccionar la fila o columna a borrar y pulsar la tecla <strong>de</strong> borrado (D<strong>el</strong> o Supr)Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Añadir y <strong>el</strong>iminar filas.Anidar, dividir y combinar c<strong>el</strong>das
Es posible insertar tablas <strong>de</strong>ntro <strong>de</strong> las c<strong>el</strong>das <strong>de</strong> otras tablas. A esto se le llama anidar tablas.A continuación tienes un ejemplo <strong>de</strong> anidamiento. Como pue<strong>de</strong>s ver, en la primera c<strong>el</strong>da <strong>de</strong> unatabla se ha insertado otra tabla.Para anidar tablas sólo tienes que posicionar <strong>el</strong> cursor en la c<strong>el</strong>da don<strong>de</strong> quieres insertar la nuevatabla e insertarla como ya hemos visto.Combinar c<strong>el</strong>das consiste en convertir 2 o más c<strong>el</strong>das en una sola por lo que <strong>de</strong>jará <strong>de</strong>haber bor<strong>de</strong> <strong>de</strong> separación entre una c<strong>el</strong>da y otra ya que serán una sola. Esto nos pue<strong>de</strong> servir porejemplo para utilizar la primera fila para escribir <strong>el</strong> título <strong>de</strong> la tabla. En este caso habría que combinartodas las c<strong>el</strong>das <strong>de</strong> la primera fila en una solaMientras que dividir c<strong>el</strong>das consiste en partir en dos una c<strong>el</strong>da.Una <strong>de</strong> las formas <strong>de</strong> dividir y combinar c<strong>el</strong>das es a través d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s.Si se s<strong>el</strong>eccionan varias c<strong>el</strong>das pue<strong>de</strong>n combinarse pulsando sobre <strong>el</strong> botón d<strong>el</strong> inspector <strong>de</strong>propieda<strong>de</strong>s (lo encontrarás en la parte inferior izquierda d<strong>el</strong> pan<strong>el</strong> Propieda<strong>de</strong>s, o pulsando sobre laopción Combinar c<strong>el</strong>das <strong>de</strong> la opción Tabla, que como ya has visto pue<strong>de</strong>s dirigirte a <strong>el</strong>la a travésd<strong>el</strong> menú contextual <strong>de</strong> la tabla y a través d<strong>el</strong> menú Modificar.Tienes que tener en cuenta que sólo es posible combinar c<strong>el</strong>das contiguas, cuya combinaciónpueda dar como resultado otra c<strong>el</strong>da, es <strong>de</strong>cir, que su combinación dé como resultado un recuadro.Por ejemplo, en la siguiente tabla no podrían combinarse las c<strong>el</strong>das 1 y 4, ni las c<strong>el</strong>das 1, 2 y 3,porque dichas combinaciones no dan como resultado una c<strong>el</strong>da.1 23 4
Para dividir una c<strong>el</strong>da hay que pulsar sobre <strong>el</strong> botónd<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s, o sobre la opción Dividirc<strong>el</strong>da <strong>de</strong> la opción Tabla.En ambos casos, aparece una ventana como ésta, enla que hay que especificar si la c<strong>el</strong>da se va a dividir enfilas o columnas, y <strong>el</strong> número <strong>de</strong> éstas.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Combinar c<strong>el</strong>das.Modos <strong>de</strong> tablaA la hora <strong>de</strong> trabajar con tablas <strong>Dreamweaver</strong> nos proporciona distintos modos <strong>de</strong> visualización.Nosotros hemos trabajado en todo <strong>el</strong> tema con <strong>el</strong> modo estándar, y vamos a seguir trabajando conél, pero se pue<strong>de</strong> pasar a los otros modos a través d<strong>el</strong> menú Ver opción Modo <strong>de</strong> tabla. Dentro <strong>de</strong>esta opción po<strong>de</strong>mos <strong>el</strong>egir entre Modo estándar, Modo <strong>de</strong> tablas expandidas, o modo <strong>de</strong> diseño.El Modo <strong>de</strong> diseño se utiliza para dibujar páginas con un diseño <strong>de</strong>terminado, basándose entablas. Utilizando esta vista, las tablas no han <strong>de</strong> insertarse obligatoriamente en líneas <strong>de</strong> texto,como hemos hecho hasta <strong>el</strong> momento, sino que es posible insertarlas en cualquier punto <strong>de</strong> lapágina, y <strong>Dreamweaver</strong> se encargará <strong>de</strong> r<strong>el</strong>lenar <strong>el</strong> espacio vacío, para que sea posible que la tablaaparezca en esa posición.El Modo <strong>de</strong> tablas expandidas aña<strong>de</strong> temporalmente r<strong>el</strong>leno y espaciado <strong>de</strong> c<strong>el</strong>da a las tablas <strong>de</strong>un documento y aumenta los bor<strong>de</strong>s <strong>de</strong> las tablas para facilitar la edición. Este modo se pue<strong>de</strong>utilizar para s<strong>el</strong>eccionar <strong>el</strong>ementos <strong>de</strong> las tablas o colocar <strong>el</strong> punto <strong>de</strong> inserción <strong>de</strong> forma precisa peroen este modo no vemos la página como quedará exactamente.En este curso nos limitaremos al modo estándar.
Unidad 7. Tablas (IV)Pag 7.4Adaptar webs a distintasresolucionesSiempre que se crea una página web hay que tener en cuenta que va a ser visitada por usuarioscon monitores <strong>de</strong> distintos tamaños y con distintas resoluciones.Es imposible hacer que una página se vea exactamente igual en todos los monitores <strong>de</strong> losusuarios que la visitan, pero hay que intentar que su visualización sea lo más parecida posible.La resolución usada <strong>de</strong> forma más frecuente es la <strong>de</strong> 800x600, por lo que inicialmente habría quediseñar la página para dicha resolución. Es <strong>de</strong>cir, habría que crear la página en un monitor con dicharesolución, para po<strong>de</strong>r visualizar claramente cómo queda en <strong>el</strong> navegador, y distribuir <strong>el</strong> contenido d<strong>el</strong>a página <strong>de</strong> la forma más a<strong>de</strong>cuada.Normalmente se utilizan tablas, ya que resultan muy útiles para distribuir <strong>el</strong> contenido <strong>de</strong> la página.Como recordarás, <strong>el</strong> tamaño <strong>de</strong> las tablas pue<strong>de</strong> ser <strong>de</strong>finido en píx<strong>el</strong>es o en porcentaje. Cuando<strong>el</strong> tamaño <strong>de</strong> la tabla sea <strong>de</strong>finido en píx<strong>el</strong>es, la tabla se verá d<strong>el</strong> mismo modo in<strong>de</strong>pendientemented<strong>el</strong> tamaño <strong>de</strong> la ventana d<strong>el</strong> navegador. En cambio, cuando <strong>el</strong> tamaño <strong>de</strong> la tabla sea <strong>de</strong>finido enporcentaje, la tabla se ajustará al tamaño <strong>de</strong> la ventana d<strong>el</strong> navegador, lo cual implica que <strong>el</strong>contenido <strong>de</strong> la tabla se <strong>de</strong>scuadrará.Pulsa aquí para ver una página con tablas <strong>de</strong> tamaño fijo, en píx<strong>el</strong>es. Imagina que la página hasido diseñada para visualizarse correctamente en un monitor pequeño <strong>de</strong> baja resolución, cuyotamaño equivale al <strong>de</strong> la ventana d<strong>el</strong> navegador que se ha abierto.Si modificas <strong>el</strong> tamaño <strong>de</strong> la ventana, verás que las tablas son siempre d<strong>el</strong> mismo tamaño. Estotiene un gran inconveniente, ya que si maximizas la ventana d<strong>el</strong> navegador (lo que equivaldría avisualizar la página en un monitor gran<strong>de</strong> con alta resolución), a la <strong>de</strong>recha <strong>de</strong> las tablas apareceráun gran hueco vacío.Pulsa aquí para ver una página con tablas <strong>de</strong> tamaño variable, en porcentaje.Si modificas <strong>el</strong> tamaño <strong>de</strong> la ventana, verás que las tablas se ajustan a <strong>el</strong>la. Usar tablas contamaño variable tiene también un gran inconveniente, ya que si maximizas la ventana d<strong>el</strong> navegadorapreciarás claramente cómo <strong>el</strong> contenido <strong>de</strong> las tablas se <strong>de</strong>scuadra.En un principio pue<strong>de</strong> parecer más conveniente utilizar tablas con tamaño fijo, aunque estoimplique que aparezca <strong>el</strong> hueco vacío a la <strong>de</strong>recha, en <strong>el</strong> caso <strong>de</strong> los monitores con alta resolución.Pero con un poco <strong>de</strong> práctica a la hora <strong>de</strong> manejar las tablas, pue<strong>de</strong>s salvar <strong>el</strong> inconveniente d<strong>el</strong><strong>de</strong>scuadre <strong>de</strong> la página y así <strong>de</strong>finir páginas con tamaño en porcentaje que aprovechen <strong>el</strong> anchocuando <strong>el</strong> monitor <strong>de</strong> más gran<strong>de</strong>.No solo pue<strong>de</strong> establecerse <strong>el</strong> tamaño <strong>de</strong> la tabla, también es posible establecer <strong>el</strong> tamaño <strong>de</strong> lasc<strong>el</strong>das.
El tamaño <strong>de</strong> la c<strong>el</strong>da a través d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s estará especificado por los valores<strong>de</strong> An (anchura) y Al (altura). Normalmente solo se especifica la anchura, no la altura.Los valores An y Al <strong>de</strong> una c<strong>el</strong>da siempre están en Píx<strong>el</strong>es. En la imagen anterior, la c<strong>el</strong>da tieneuna anchura <strong>de</strong> 208 píx<strong>el</strong>es. Para que, por ejemplo, la anchura fuera d<strong>el</strong> 25 por ciento <strong>de</strong> la tabla, enAn habría que escribir 25%.Jugando con las medidas <strong>de</strong> las c<strong>el</strong>das <strong>de</strong> la tabla, y teniendo en cuenta qué contiene cada una <strong>de</strong><strong>el</strong>las (imágenes, texto alineado a la <strong>de</strong>recha, texto alineado a la izquierda, texto <strong>de</strong> gran tamaño,etc.), pue<strong>de</strong> conseguirse que al visualizar la página en monitores <strong>de</strong> distintos tamaños y con distintasresoluciones, la apariencia sea bastante similar, o al menos que la distribución d<strong>el</strong> contenido <strong>de</strong> lapágina no se vea muy afectado por <strong>el</strong> cambio <strong>de</strong> tamaño <strong>de</strong> la ventana d<strong>el</strong> navegador.Ejercicio 15 web <strong>de</strong>portes ampliación tablas1 Abrir <strong>el</strong> sitio Deportes.2 Abrir <strong>el</strong> documento reservas.htm.3 Modificar la segunda tabla <strong>de</strong> la página para que que<strong>de</strong> como la siguiente:ACTIVIDADTARIFA/HORAAEROBICSTEP3 €
MUSCULACIÓN 4 €4 Guardar los cambios y cerrar <strong>el</strong> documento.SolucionEjercicio 16 web animales ampliación tablas1 Abrir <strong>el</strong> sitio Animales.2 Abrir <strong>el</strong> documento inicio.htm.3 Crea una tabla con las siguientes medidas:4 Coloca la tabla en <strong>el</strong> centro <strong>de</strong> la página y asígnale a la tabla <strong>el</strong> color <strong>de</strong> fondo #666633.5 A la c<strong>el</strong>da <strong>de</strong> la esquina superior-<strong>de</strong>recha <strong>de</strong>berás darle como fondo la imagenarriba_<strong>de</strong>recha.gif que encontrarás en la carpeta imagenes.6 A la c<strong>el</strong>da <strong>de</strong> la esquina superior-izquierda <strong>de</strong>berás darle como fondo la imagenarriba_izquierda.gif que encontrarás en la carpeta imagenes.7 A la c<strong>el</strong>da <strong>de</strong> la esquina inferior-<strong>de</strong>recha <strong>de</strong>berás darle como fondo la imagenabajo_<strong>de</strong>recha.gif que encontrarás en la carpeta imagenes.8 A la c<strong>el</strong>da <strong>de</strong> la esquina inferior-izquierda <strong>de</strong>berás darle como fondo la imagenabajo_izquierda.gif que encontrarás en la carpeta imagenes.9 Inserta la imagen logo_animales.gif en la segunda c<strong>el</strong>da <strong>de</strong> la segunda fila.10 Y <strong>de</strong>fine la alineación <strong>de</strong> todas las c<strong>el</strong>das <strong>de</strong> la tabla como centro (en horizontal) y medio (envertical).11 Corta <strong>el</strong> texto que había en <strong>el</strong> archivo antes <strong>de</strong> insertar la tabla y pégalo tal y como estaba en lasegunda c<strong>el</strong>da <strong>de</strong> la cuarta fila.12 Abre <strong>el</strong> archivo botones.htm y copia los botones <strong>de</strong> navegación, <strong>de</strong>berás pegarlos en latercera c<strong>el</strong>da <strong>de</strong> la segunda fila.
13 Define <strong>el</strong> alineamiento <strong>de</strong> esa c<strong>el</strong>da como <strong>de</strong>recha (en horizontal) e inferior (en vertical).14 Guarda los cambios y cierra <strong>el</strong> documento.15 Deberás hacer lo mismo para los archivos consultas.htm, gatos.htm y perros.htm.Solución
Unidad 8. Marcos (I)Pag 8.1Vamos a ver qué son los marcos y para qué se utilizan. También veremos cómo insertar unmarco sencillo en una página, y cómo trabajar con él.IntroducciónLos marcos o frames sirven paradistribuir mejor los datos <strong>de</strong> las páginas,ya que permiten mantener fijas algunaspartes, como pue<strong>de</strong>n ser <strong>el</strong> logotipo y labarra <strong>de</strong> navegación, mientras que otras sípue<strong>de</strong>n cambiar. A<strong>de</strong>más <strong>de</strong> mejorar lafuncionalidad, pue<strong>de</strong>n mejorar también laapariencia.Cada uno <strong>de</strong> los marcos <strong>de</strong> una página,contiene un documento HTML individual.Por ejemplo, en la imagen <strong>de</strong> la <strong>de</strong>rechapue<strong>de</strong>s ver una página con dos marcos. Elmarco izquierdo contiene <strong>el</strong> documentomenu.htm y <strong>el</strong> <strong>de</strong>recho <strong>el</strong> documentoquienes.htm. Para po<strong>de</strong>r visualizar lapágina <strong>de</strong> este modo, hemos tenido queabrir en <strong>el</strong> navegador <strong>el</strong> documento marcos.htm, que es la página que contiene los marcosagrupados.Es posible editar los documentos contenidos en los marcos <strong>de</strong>s<strong>de</strong> la página que contiene <strong>el</strong> grupo<strong>de</strong> marcos. Esto facilita <strong>el</strong> trabajo, ya que es más fácil hacerse una i<strong>de</strong>a <strong>de</strong> cómo quedará la páginaal final, cosa que no es posible si se editan individualmente cada uno <strong>de</strong> los documentos quecontiene <strong>el</strong> marco.El trabajar con marcos pue<strong>de</strong> resultar una tarea algo complicada, sobretodo al principio, por lo queno vamos a profundizar mucho en <strong>el</strong> tema, y veremos solamente algunos conceptos básicos yejemplos sencillos.Crear marcos
Existen varias formas <strong>de</strong> crear un marco. Nosotrosvamos a ver solamente una <strong>de</strong> <strong>el</strong>las.Para crear un marco, primero hay que abrir algúndocumento. Pue<strong>de</strong> ser uno nuevo o uno ya existente.Después, dirigirse al menú Insertar, HTML, Marcos.A través <strong>de</strong> esta opción pue<strong>de</strong> <strong>el</strong>egirse <strong>el</strong> tipo <strong>de</strong> marcoque va a crearse.Vamos a ver <strong>el</strong> marco a la Izquierda.Si pulsamos sobre Izquierda se creará un nuevomarco a la izquierda d<strong>el</strong> documento actual.Como pue<strong>de</strong>s ver en la imagen, aparece una línea quedivi<strong>de</strong> <strong>el</strong> documento en dos. El documento <strong>de</strong> partida era unonuevo.En este caso tendremos tres documentos: <strong>el</strong> <strong>de</strong> la izquierda,<strong>el</strong> <strong>de</strong> la <strong>de</strong>recha, y <strong>el</strong> que contiene <strong>el</strong> grupo <strong>de</strong> marcos. El <strong>de</strong> la<strong>de</strong>recha es <strong>el</strong> documento que teníamos inicialmente, que estáen <strong>el</strong> marco conocido como marco padre (MainFrame).Para s<strong>el</strong>eccionar <strong>el</strong> documento que contiene <strong>el</strong> grupo <strong>de</strong>marcos hay que pulsar sobre la línea que separa los marcos.Esto solo es posible mientras dicho documento no se hayaguardado.Si en lugar <strong>de</strong> insertar un marco a la izquierda lo insertamos a la Derecha, <strong>el</strong> marco vacíoaparecerá a la <strong>de</strong>recha d<strong>el</strong> documento original.En esta imagen pue<strong>de</strong>s ver un ejemplo <strong>de</strong> marco a la <strong>de</strong>recha.Sobre un documento ya existente, menu.htm, se ha insertado un marco a la <strong>de</strong>recha.Al igual que en <strong>el</strong> caso anterior, tenemos tres documentos: <strong>el</strong> <strong>de</strong> la izquierda, <strong>el</strong> <strong>de</strong> la <strong>de</strong>recha, y <strong>el</strong>que contiene <strong>el</strong> grupo <strong>de</strong> marcos. En este caso, <strong>el</strong> documento que teníamos inicialmente es <strong>el</strong> <strong>de</strong> laizquierda, mientras que antes era <strong>el</strong> <strong>de</strong> la <strong>de</strong>recha. Por <strong>el</strong>lo, en este caso <strong>el</strong> marco padre será <strong>el</strong> d<strong>el</strong>a izquierda.El marco padre siempre es <strong>el</strong> marco en <strong>el</strong> que se encuentra <strong>el</strong> documento inicial, sobre <strong>el</strong> que sehan insertado <strong>el</strong> resto <strong>de</strong> marcos.
Ejercicio17 Deportes Ampliación. Marcos1 Abrir <strong>el</strong> sito Deportes.2 Abrir <strong>el</strong> documento marcos.htm.3 Modificar las propieda<strong>de</strong>s d<strong>el</strong> marco inferior, para que <strong>el</strong> documento que se cargue inicialmenteen él sea <strong>el</strong> documento quienes.htm.4 Modificar las propieda<strong>de</strong>s d<strong>el</strong> marco inferior, para que no se muestre su bor<strong>de</strong>.5 Guardar los cambios y cerrar <strong>el</strong> documento.Solución
Unidad 9. Formularios (I)Pag 9.1Vamos a ver qué es un formulario, para qué se utiliza, cómo insertar uno, qué <strong>el</strong>ementos pue<strong>de</strong>contener y cómo pue<strong>de</strong>n validarse los datos introducidos en él.IntroducciónLos formularios se utilizan para recoger datos <strong>de</strong> losusuarios, nos pue<strong>de</strong>n servir para realizar un pedido enuna tienda virtual, crear una encuesta, conocer lasopiniones <strong>de</strong> los usuarios, recibir preguntas, etc.Una vez <strong>el</strong> usuario r<strong>el</strong>lena los datos y pulsa <strong>el</strong> botónpara enviar <strong>el</strong> formulario se arrancará un programa querecibirá los datos y hará <strong>el</strong> tratamiento correspondiente.Aquí vamos a ver cómo crear <strong>el</strong> formulario, (insertarcampos y botones en <strong>el</strong> formulario y validarlos), perono la parte <strong>de</strong> tratamiento <strong>de</strong> los datos, ya que para <strong>el</strong>lose necesitan nociones <strong>de</strong> programación, ya sea enVBScript, en JavaScript o en otro lenguaje <strong>de</strong>programación, y esto no entra en los objetivos d<strong>el</strong> curso.A la <strong>de</strong>recha tienes un ejemplo <strong>de</strong> formulario.Un formulario está formado, entre otras cosas, por etiquetas, campos <strong>de</strong> texto, menús<strong>de</strong>splegables, y botones.Elementos <strong>de</strong> formularioLos <strong>el</strong>ementos <strong>de</strong> formulario pue<strong>de</strong>n insertarse en una página a través d<strong>el</strong> menú Insertar, opciónFormulario.A través <strong>de</strong> esta opción se pue<strong>de</strong> acce<strong>de</strong>r a la lista <strong>de</strong> todos los objetos <strong>de</strong> formulario que pue<strong>de</strong>nser insertados en la página.Vamos a ver uno por uno algunos <strong>de</strong> los distintos <strong>el</strong>ementos que pue<strong>de</strong>n formar parte <strong>de</strong> unformulario, así como algunas <strong>de</strong> sus propieda<strong>de</strong>s.Campo <strong>de</strong> texto y Área <strong>de</strong> textoPermiten introducir texto. El Campo <strong>de</strong> texto solo permite al usuario escribir una línea, mientrasque <strong>el</strong> Área <strong>de</strong> texto permite escribir varias.Se pue<strong>de</strong> pasar <strong>de</strong> Campo <strong>de</strong> texto a Área <strong>de</strong> texto a través d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s,marcando la opción Una línea o Multi línea respectivamente.
También es posible <strong>de</strong>finirlo como Contraseña es como <strong>el</strong> campo <strong>de</strong> texto pero las letras que vatecleando <strong>el</strong> usuario se sustituyen por un carácter como podrás ver en la imagen siguiente.A continuación tienes un ejemplo <strong>de</strong> cada uno <strong>de</strong> estos tres tipos. Pue<strong>de</strong>s escribir en <strong>el</strong>los para versu funcionamiento.Principio d<strong>el</strong> formularioCampo <strong>de</strong> textFinal d<strong>el</strong> formularioPrincipio d<strong>el</strong> formularioÁrea <strong>de</strong> textoPrincipio d<strong>el</strong> formularioFinal d<strong>el</strong> formularioFinal d<strong>el</strong> formularioA través d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s es posible asignar también <strong>el</strong> Ancho d<strong>el</strong> cuadro <strong>de</strong> texto, <strong>el</strong>número máximo <strong>de</strong> líneas o caracteres, y <strong>el</strong> valor inicial d<strong>el</strong> cuadro.BotónEs <strong>el</strong> botón tradicional <strong>de</strong> Windows. El botón pue<strong>de</strong> tener asignadas tres opciones: Enviarformulario, Restablecer formulario (borrar todos los campos d<strong>el</strong> formulario), o Ninguna (parapo<strong>de</strong>r asignarle un comportamiento diferente <strong>de</strong> los dos anteriores).Principio d<strong>el</strong>formularioEnviarFinal d<strong>el</strong>formularioTambién es posible cambiar <strong>el</strong> texto d<strong>el</strong> botón, a través <strong>de</strong> la propiedad Etiqueta d<strong>el</strong> inspector <strong>de</strong>propieda<strong>de</strong>s.Casilla <strong>de</strong> verificaciónEs un cuadrito que se pue<strong>de</strong> activar o <strong>de</strong>sactivar.Principio d<strong>el</strong> formularioDeseo recibir informaciónFinal d<strong>el</strong> formularioPue<strong>de</strong> asignárs<strong>el</strong>e <strong>el</strong> Estado inicial como Activado o como Desactivado.Botón <strong>de</strong> opciónEs un pequeño botón redondo que pue<strong>de</strong> activarse o <strong>de</strong>sactivarse. Si hay varios d<strong>el</strong> mismoformulario, sólo pue<strong>de</strong> haber uno activado. Cuando se activa uno, automáticamente se <strong>de</strong>sactivan los<strong>de</strong>más.Principio d<strong>el</strong> formularioSuperman
Spi<strong>de</strong>rmanFinal d<strong>el</strong> formularioLista/MenúUna lista o menú es un <strong>el</strong>emento <strong>de</strong> formulario que lleva asociada una lista <strong>de</strong> opciones.--- Elige opción lista --- --- Elige opción menú---PerroGatoLos <strong>el</strong>ementos se aña<strong>de</strong>n a través d<strong>el</strong> botón Valores <strong>de</strong> lista... d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s.Cuando se trata <strong>de</strong> un menú, solo es posible <strong>el</strong>egir uno <strong>de</strong> los <strong>el</strong>ementos, pero si se trata <strong>de</strong> unalista, a través <strong>de</strong> S<strong>el</strong>ecciones d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s pue<strong>de</strong> permitirse que se s<strong>el</strong>eccionenvarios simultáneamente.EtiquetaSe utiliza para ponerle nombres al resto <strong>de</strong> <strong>el</strong>ementos <strong>de</strong> formulario, para que <strong>el</strong> usuario puedasaber qué datos ha <strong>de</strong> introducir en cada uno <strong>de</strong> <strong>el</strong>los.
Unidad 9. Formularios (II)Pag 9.2Crear formulariosPue<strong>de</strong>s crear formularios a través d<strong>el</strong> menú Insertar, opciónFormulario.Una vez creado un formulario, este aparecerá en la ventana <strong>de</strong><strong>Dreamweaver</strong> como un recuadro formado por líneas rojasdiscontinuas, similar al <strong>de</strong> la imagen <strong>de</strong> la <strong>de</strong>recha.Dentro <strong>de</strong> dicho formulario se podrán insertar los <strong>el</strong>ementos <strong>de</strong>formulario, que como ya sabes pue<strong>de</strong>s insertar a través d<strong>el</strong> menúInsertar, opción Formulario.Es muy recomendable utilizar tablas para organizar los <strong>el</strong>ementos <strong>de</strong> los formularios. Utilizandotablas se consigue una mejor distribución <strong>de</strong> los <strong>el</strong>ementos d<strong>el</strong> formulario, lo que facilita sucomprensión y mejora su apariencia.Validar formulariosLa validación <strong>de</strong> formularios sirve para hacer que Javascriptvali<strong>de</strong> <strong>el</strong> formulario antes <strong>de</strong> que se envíe <strong>el</strong> formulario, para que en<strong>el</strong> caso <strong>de</strong> que hayan campos d<strong>el</strong> formulario que sean obligatorios,tengan que r<strong>el</strong>lenarse antes <strong>de</strong> po<strong>de</strong>r enviarse.Para validar un formulario hay que abrir <strong>el</strong> pan<strong>el</strong> <strong>de</strong>Comportamientos. Este pan<strong>el</strong> se pue<strong>de</strong> abrir a través d<strong>el</strong> menúVentana, opción Comportamientos, o pulsando Mayús+F3.En este pan<strong>el</strong> hay que <strong>de</strong>splegar <strong>el</strong> botón pulsando sobre él, yen Mostrar eventos para <strong>el</strong>egir una versión <strong>de</strong> las actuales <strong>de</strong>entre la lista <strong>de</strong> navegadores. Por ejemplo, pue<strong>de</strong>s <strong>el</strong>egir <strong>el</strong>navegador IE 6.0.Después <strong>de</strong> esto, hay que volver a <strong>de</strong>splegar <strong>el</strong> botón , ypulsar sobre la opción Validar formulario, <strong>de</strong>berás habers<strong>el</strong>eccionado <strong>el</strong> formulario previamente.
Entonces se mostrará una ventana como la siguiente, don<strong>de</strong> aparecen todos los <strong>el</strong>ementos d<strong>el</strong>formulario.Pue<strong>de</strong> s<strong>el</strong>eccionarse uno por uno cada <strong>el</strong>emento d<strong>el</strong> formulario, pudiendo especificar los requisitosque ha <strong>de</strong> cumplir.Pue<strong>de</strong> establecerse como campo a r<strong>el</strong>lenar obligatoriamente (Valor Obligatorio), y si sucontenido ha <strong>de</strong> ser numérico (Número), una Dirección <strong>de</strong> correo <strong>el</strong>ectrónico, etc.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Insertar <strong>el</strong>ementos <strong>de</strong> formulario.Ejercicio 18 web <strong>de</strong>portes Formulario1 Abrir <strong>el</strong> sito Deportes.2 Abrir <strong>el</strong> documento reservas.htm.3 Insertar un campo <strong>de</strong> texto a la <strong>de</strong>recha d<strong>el</strong> texto Hora:, que tenga 5 como ancho <strong>de</strong>caracteres.Solución4 Insertar un menú a la <strong>de</strong>recha d<strong>el</strong> texto Centro:, cuyos <strong>el</strong>ementos sean:Don BenitoMadridSilla5 S<strong>el</strong>eccionar inicialmente <strong>el</strong> <strong>el</strong>emento Don Benito d<strong>el</strong> menú.6 Insertar un botón para restablecer <strong>el</strong> formulario, a la izquierda d<strong>el</strong> botón Enviar.7 Guardar los cambios y cerrar <strong>el</strong> documento.
Ejercicio 19 web animales Formulario1 Abrir <strong>el</strong> sito Animales.2 Abrir <strong>el</strong> documento consultas.htm.3 Insertar un menú a la <strong>de</strong>recha d<strong>el</strong> texto Animal:, en la c<strong>el</strong>da vacía, cuyos <strong>el</strong>ementos sean:--- Elige opción ---PerroGatoOtros4 S<strong>el</strong>eccionar inicialmente <strong>el</strong> <strong>el</strong>emento --- Elige opción --- d<strong>el</strong> menú.5 Insertar un área <strong>de</strong> texto a la <strong>de</strong>recha d<strong>el</strong> texto Consulta:, en la c<strong>el</strong>da vacía, que tenga 50 comoancho <strong>de</strong> caracteres, 10 como número <strong>de</strong> líneas, y que su valor inicial sea Escribe aquí tuconsulta.Solución6 Insertar un botón <strong>de</strong> Enviar, a la <strong>de</strong>recha d<strong>el</strong> botón Restablecer.7 Guardar los cambios y cerrar <strong>el</strong> documento.
Unidad 10. Multimedia (I)Pag 10.1Vamos a ver cómo insertar <strong>el</strong>ementos multimedia. En concreto, veremos cómo insertar unaanimación Flash, un sonido y un ví<strong>de</strong>o.P<strong>el</strong>ículas FlashLas p<strong>el</strong>ículas Flash son animaciones, que al igual que los botonesy <strong>el</strong> texto Flash, tienen la extensión SWF. Es frecuente verlas en laspáginas iniciales <strong>de</strong> los sitios web, a modo <strong>de</strong> presentación hacia losusuarios, aunque se pue<strong>de</strong>n utilizar para realizar cualquier tipo <strong>de</strong>animación.Estas p<strong>el</strong>ículas pue<strong>de</strong>n crearse mediante <strong>el</strong> programa Flash <strong>de</strong>Macromedía, y necesitan que <strong>el</strong> usuario tenga instalado <strong>el</strong> plug-inpara po<strong>de</strong>r ser visualizadas.Las p<strong>el</strong>ículas Flash pue<strong>de</strong>n insertarse en una página a través d<strong>el</strong> menú Insertar, Media, opciónFlash, o pulsando Ctrl+Alt+F.También pue<strong>de</strong>n insertarse pulsando sobre la opciónd<strong>el</strong> pan<strong>el</strong> Insertar, botón Media.Flash que aparece en la pestaña ComúnEl inspector <strong>de</strong> propieda<strong>de</strong>s <strong>de</strong> las p<strong>el</strong>ículas Flash es prácticamente igual que <strong>el</strong> <strong>de</strong> los botonesy <strong>el</strong> texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualización <strong>de</strong> lap<strong>el</strong>ícula.
La opción Bucle indica que al finalizar la p<strong>el</strong>ícula, ésta volverá a comenzar <strong>de</strong>s<strong>de</strong> <strong>el</strong> principio.La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nadamás cargarse la página comenzará a reproducirse la p<strong>el</strong>ícula Flash.Si esta opción no estuviera marcada, se mostraría únicamente <strong>el</strong> primer fotograma <strong>de</strong> la p<strong>el</strong>ícula.Interesa <strong>de</strong>smarcar esta opción cuando se <strong>de</strong>sea que la reproducción sea activada por algúncomportamiento.SonidoNo es muy habitual incluir sonido en una página web, ya que algunos usuarios su<strong>el</strong>en estarescuchando su propia música cuando navegan en Internet, por lo que <strong>el</strong> escuchar también sonido encada página que se visita pue<strong>de</strong> resultar algo molesto.A pesar <strong>de</strong> <strong>el</strong>lo, <strong>el</strong> incluir un sonido agradable, apropiado al contenido <strong>de</strong> la página, pue<strong>de</strong> hacerlamás atractiva. Muchas <strong>de</strong> las páginas que contienen sonido su<strong>el</strong>en ofrecer la posibilidad <strong>de</strong> activarloo <strong>de</strong>sactivarlo, para que aqu<strong>el</strong>los usuarios que no <strong>de</strong>seen escuchar <strong>el</strong> sonido <strong>de</strong> la página puedan<strong>de</strong>sactivarlo.Los formatos <strong>de</strong> sonido más habituales en Internet son, fundamentalmente, <strong>el</strong> MP3, <strong>el</strong> WAV y enalgunas ocasiones <strong>el</strong> MIDI, aunque existen otros formatos diferentes que también pue<strong>de</strong>n utilizarse.Lo i<strong>de</strong>al es incluir algún archivo <strong>de</strong> audio que no ocupe mucho espacio, y que no por <strong>el</strong>lo sea <strong>de</strong> malacalidad.Para insertar un archivo <strong>de</strong> audio en un documento tienes que dirigirte al menú Insertar, Medía,opción Plug-in.A la <strong>de</strong>recha tienes un ejemplo <strong>de</strong> un archivo <strong>de</strong>sonido, para <strong>el</strong> que se muestran los controles <strong>de</strong> audio. Silo <strong>de</strong>seas, pue<strong>de</strong>s reproducirlo pulsando sobre loscontroles (recuerda encen<strong>de</strong>r los altavoces, si los tienes).En <strong>Dreamweaver</strong> no se mostrarán los controles <strong>de</strong> audio. Todos los archivos que soninsertados como plug-in aparecen representadas <strong>de</strong>ntro <strong>de</strong> <strong>Dreamweaver</strong> por unaimagen como la <strong>de</strong> la izquierda.
En <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s pue<strong>de</strong>n establecerse la altura y la anchura con la que se mostraránlos controles <strong>de</strong> audio, mediante Al y An.En <strong>el</strong> caso <strong>de</strong> no especificar ningún tamaño, se mostrará <strong>el</strong> tamaño por <strong>de</strong>fecto <strong>de</strong> los controles,como ocurre en <strong>el</strong> ejemplo <strong>de</strong> arriba. Si lo que se <strong>de</strong>sea es que se escuche <strong>el</strong> sonido en la página,pero que no se muestren los controles <strong>de</strong> audio, los campos Al y An <strong>de</strong>ben valer cero.Los sonidos se reproducen automáticamente al cargarse la página, y se reproducen solamenteuna vez. Estos valores no pue<strong>de</strong>n <strong>de</strong>finirse a través d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s, pero sí a travésd<strong>el</strong> código. Una vez <strong>de</strong>finidos los podremos cambiar <strong>de</strong>s<strong>de</strong> <strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s con <strong>el</strong> botónParámetros...Por ejemplo, <strong>el</strong> archivo anterior aparecía en <strong>el</strong> código como . Pero para que no se reproduzca automáticamente se haañadido autostart="false", y para que se reproduzca continuamente se ha añadido loop="true".La línea <strong>de</strong> código d<strong>el</strong> archivo <strong>de</strong> audio ha quedado d<strong>el</strong> siguiente modo:En <strong>el</strong> Inspector <strong>de</strong> propieda<strong>de</strong>s d<strong>el</strong> sonido, <strong>el</strong> botón Parámetros... abre un cuadro <strong>de</strong> diálogodon<strong>de</strong> po<strong>de</strong>mos cambiar esos valores una vez introducidos.Para po<strong>de</strong>r hacer que <strong>el</strong> audio pueda activarse y <strong>de</strong>sactivarse cuando no se muestran loscontroles, es necesario insertar una serie <strong>de</strong> comportamientos que se encarguen <strong>de</strong> esa tarea.Si quieres poner música <strong>de</strong> fondo en una página web, sin que aparezcan los controles <strong>de</strong> audio,pue<strong>de</strong>s escribir este código directamente en la vista Código.Insértalo <strong>de</strong>spués <strong>de</strong> la etiqueta Con <strong>el</strong> parámetro loop pue<strong>de</strong>s <strong>de</strong>cidir cuántas vecesquieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce <strong>de</strong> modo continuo).
Unidad 10. Multimedia (II)Pag 10.2Ví<strong>de</strong>osEn ocasiones pue<strong>de</strong> interesar incluir algún ví<strong>de</strong>o en una página web, pero hay que tener en cuentaque los ví<strong>de</strong>os su<strong>el</strong>en ocupar mucho espacio en disco, y por lo tanto, precisan <strong>de</strong> mucho tiempo para<strong>de</strong>scargarse.Los formatos <strong>de</strong> ví<strong>de</strong>o que su<strong>el</strong>en utilizarse en Internet son <strong>el</strong> AVI, <strong>el</strong> MPEG y <strong>el</strong>MOV.Para insertar un archivo <strong>de</strong> ví<strong>de</strong>o en un documento tienes que dirigirte al menúInsertar, Medía, opción Plug-in.A la <strong>de</strong>recha tienes un ejemplo <strong>de</strong> un archivo <strong>de</strong> ví<strong>de</strong>o, para <strong>el</strong> que se muestranlos controles <strong>de</strong> ví<strong>de</strong>o. Pue<strong>de</strong>s reproducirlo pulsando sobre los controles.El inspector <strong>de</strong> propieda<strong>de</strong>s para los archivos <strong>de</strong> ví<strong>de</strong>o insertados <strong>de</strong> esta forma es <strong>el</strong> mismo que<strong>el</strong> <strong>de</strong> los archivos <strong>de</strong> audio, ya que ambos se insertan como Plug-in.Los ví<strong>de</strong>os también se reproducen automáticamente al cargarse la página, y se reproducensolamente una vez. Estos valores pue<strong>de</strong>n cambiarse a través d<strong>el</strong> código, d<strong>el</strong> mismo modo que en <strong>el</strong>caso <strong>de</strong> los archivos <strong>de</strong> audio, añadiendo autostart="false" y loop="true".Todos los objetos insertados a través <strong>de</strong> la opción Plug-in precisan que <strong>el</strong> usuario tenga instaladoun reproductor o un plug-in apropiado para reproducirlos. En <strong>el</strong> campo Origen d<strong>el</strong> inspector <strong>de</strong>propieda<strong>de</strong>s se establece <strong>el</strong> archivo vinculado (<strong>el</strong> archivo <strong>de</strong> audio o <strong>de</strong> ví<strong>de</strong>o) que ha <strong>de</strong>reproducirse.En <strong>el</strong> caso <strong>de</strong> que <strong>el</strong> usuario no tenga instalado ningún plug-in a<strong>de</strong>cuado, pue<strong>de</strong> establecerse en<strong>el</strong> campo URL plg una página en la que pueda encontrarlo.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Insertar un archivo <strong>de</strong> audio.
Unidad 11. Las plantillas (I)Pag 11.1En este tema vamos a ver qué son las plantillas, cómo crearlas y cómo basar documentos en<strong>el</strong>las.IntroducciónCada vez que <strong>de</strong>seamos crear un sitio web, tenemos que tener muy en cuenta que las páginas<strong>de</strong>ben seguir un formato uniforme.La mayoría <strong>de</strong> nosotros solemos hacer copias <strong>de</strong> los documentos ya creados, y trabajar sobreestas copias, modificando simplemente su contenido. Esta es la forma más sencilla <strong>de</strong> tener páginascon una estructura basada en la estructura <strong>de</strong> otras ya creadas previamente.Las plantillas son una especie <strong>de</strong> copia <strong>de</strong> la página en la que van a estar basadas <strong>el</strong> resto <strong>de</strong>páginas d<strong>el</strong> sitio web, pero que incluyen la posibilidad <strong>de</strong> establecer unas zonas editables y otraszonas que serán fijas, que no podrán ser modificadas.No es posible modificar las propieda<strong>de</strong>s <strong>de</strong> una página que está basada en una plantilla, aexcepción d<strong>el</strong> título. Cuando se <strong>de</strong>sea que existan páginas con, por ejemplo, diferente color <strong>de</strong>fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las páginas en una uotra plantilla, según <strong>el</strong> color <strong>de</strong> fondo que se <strong>de</strong>see para cada una.Cuando se modifica <strong>el</strong> diseño <strong>de</strong> una plantilla, se pue<strong>de</strong>n actualizar todas las páginas basadas en<strong>el</strong>la.Las plantillas son archivos con la extensión DWT que se guardan en <strong>el</strong> sitio web, <strong>de</strong>ntro <strong>de</strong> unacarpeta llamada Templates.Crear plantillasLas plantillas pue<strong>de</strong>n crearse <strong>de</strong>s<strong>de</strong> cero, o a partir <strong>de</strong> una página ya existente.
Una forma <strong>de</strong> crear una plantilla <strong>de</strong>s<strong>de</strong> cero es a travésd<strong>el</strong> pan<strong>el</strong> Archivos, pestaña Activos.La pestaña Activos se pue<strong>de</strong> abrir a través d<strong>el</strong> menúVentana, opción Activos. También pulsando F11.Una vez abierto <strong>el</strong> pan<strong>el</strong> hay que s<strong>el</strong>eccionar <strong>el</strong> botón ,para po<strong>de</strong>r trabajar con las plantillas.Los botones inferiores d<strong>el</strong> pan<strong>el</strong> Activos sonsimilares a los d<strong>el</strong> pan<strong>el</strong> Estilos CSS.El único botón diferente es <strong>el</strong> primero, que en este casosirve para actualizar la lista, <strong>el</strong> resto permiten crear unanueva plantilla, editar una plantilla s<strong>el</strong>eccionada en la lista, o <strong>el</strong>iminarla.Para crear una nueva plantilla hay que pulsar sobre <strong>el</strong> botónpulsa con <strong>el</strong> botón <strong>de</strong>recho d<strong>el</strong> ratón y <strong>el</strong>ige Nueva Plantilla).(Si este botón no está activado,Cuando se pulsa ese botón aparece un nuevo documento en la lista <strong>de</strong> plantillas, al que es posiblecambiarle <strong>el</strong> Nombre pulsando previamente sobre él.Para modificar una plantilla la s<strong>el</strong>eccionamos <strong>de</strong> la lista y pulsamos <strong>el</strong> botón .Para<strong>el</strong>iminar una plantilla la s<strong>el</strong>eccionamos <strong>de</strong> la lista y pulsamos <strong>el</strong> botón .Las plantillas se guardan en <strong>el</strong> sitio web actual, <strong>de</strong>ntro <strong>de</strong> la carpeta Templates, que se creaautomáticamente.Para crear una plantilla a partir <strong>de</strong> un archivoexistente es necesario abrir dicho archivo, y<strong>de</strong>spués guardarlo como plantilla a través d<strong>el</strong> menúArchivo, opción Guardar como plantilla.Cuando se pulsa dicha opción, aparece unaventana como la <strong>de</strong> la <strong>de</strong>recha.En <strong>el</strong>la es necesario especificar <strong>el</strong> nombre con <strong>el</strong>que va a ser guardada la plantilla, a través d<strong>el</strong>campo Guardar como, y <strong>el</strong>egir, <strong>de</strong> entre la lista <strong>de</strong>sitios, <strong>el</strong> Sitio: en <strong>el</strong> que se va a guardar.
Unidad 11. Las plantillas (II)Pag 11.2Establecer regiones editables en unaplantillaTodos los <strong>el</strong>ementos <strong>de</strong> una plantilla están bloqueados por <strong>de</strong>fecto, no se pue<strong>de</strong>n modificar.Es necesario establecer las zonas que sí podrán ser editadas en las páginas que se basen endicha plantilla.Para editar una plantilla hay que abrirla en <strong>Dreamweaver</strong>. Una forma <strong>de</strong> abrirla es a través d<strong>el</strong>pan<strong>el</strong> Activos, pulsando dos veces sobre <strong>el</strong>la, o estando s<strong>el</strong>eccionada pulsando sobre <strong>el</strong> botóncomo ya hemos visto.Una vez abierta la plantilla es posible establecer sus propieda<strong>de</strong>s a través <strong>de</strong> la ventanaPropieda<strong>de</strong>s <strong>de</strong> la página.Como recordarás, para abrir esta ventana pue<strong>de</strong>s:Pulsar la combinación <strong>de</strong> teclas Ctrl+J.Hacer clic sobre <strong>el</strong> menú Modificar y <strong>el</strong>egir la opción Propieda<strong>de</strong>s <strong>de</strong> la página.Pulsar con <strong>el</strong> botón <strong>de</strong>recho sobre <strong>el</strong> documento abierto en <strong>Dreamweaver</strong>, y en <strong>el</strong> menúcontextual que aparece s<strong>el</strong>eccionar la opción Propieda<strong>de</strong>s <strong>de</strong> la página.Para insertar una región editable hay quesituar <strong>el</strong> puntero en <strong>el</strong> lugar en <strong>el</strong> que se <strong>de</strong>seainsertar, y <strong>de</strong>spués dirigirse al menú Insertar,Objetos <strong>de</strong> plantilla, opción Región editable, opulsar la combinación <strong>de</strong> teclas Ctrl+Alt+V.En la nueva ventana hay que establecer unNombre para la región editable.Dentro <strong>de</strong> la plantilla no pue<strong>de</strong>n existir dosregiones editables con <strong>el</strong> mismo nombre.Posteriormente pue<strong>de</strong> modificarse <strong>el</strong> nombrea través d<strong>el</strong> inspector <strong>de</strong> propieda<strong>de</strong>s <strong>de</strong> laregión editable.
La zonas editables aparecen representadas en<strong>Dreamweaver</strong> como un recuadro con una etiqueta <strong>de</strong>color turquesa. En la etiqueta aparece <strong>el</strong> nombre <strong>de</strong> lazona editable.Dentro d<strong>el</strong> recuadro es posible insertar objetos, queaparecerán por <strong>de</strong>fecto en aqu<strong>el</strong>los documentos que sebasen en la plantilla. Estos objetos, al estar <strong>de</strong>ntro <strong>de</strong> lazona editable, podrán ser modificados en las páginas.Todos los objetos que se encuentren fuera <strong>de</strong> estaszonas editables aparecerán también en las páginas, perono podrán ser modificados.En este caso, la imagen con <strong>el</strong> logotipo <strong>de</strong> aulaclicaparecería en todas las páginas que se basaran en estaplantilla, mientras que todo lo que insertáramos <strong>de</strong>ntro d<strong>el</strong>a zona editable FormularioCorreoElectronico podríaser modificado.
Unidad 11. Las plantillas (III)Pag 11.3Basar páginas en unaplantillaEl uso <strong>de</strong> las plantillas pue<strong>de</strong> resultar un poco complicado al principio. Vamos a ver cómo basaruna página vacía en una plantilla, ya que por <strong>el</strong> hecho <strong>de</strong> estar vacía resulta más sencillo.Una vez abierto <strong>el</strong> documento, hay que dirigirse al menú Modificar, Plantillas, opción Aplicarplantilla a página.Es preferible que antes <strong>de</strong> hacer esto nosaseguremos <strong>de</strong> que <strong>el</strong> sitio que se encuentraabierto en <strong>Dreamweaver</strong> es <strong>el</strong> mismo en <strong>el</strong>que vamos a guardar <strong>el</strong> documento, y <strong>el</strong>mismo en <strong>el</strong> que se encuentra la plantilla enla que queremos basarlo.Después <strong>de</strong> pulsar sobre la opciónAplicar plantilla a página aparece unaventana como la <strong>de</strong> la <strong>de</strong>recha, en la quehay que s<strong>el</strong>eccionar una <strong>de</strong> las plantillas d<strong>el</strong>a lista Plantillas: d<strong>el</strong> sitio.Es recomendable activar la casillaActualizar página cuando cambie laplantilla, para que la página se actualiceautomáticamente en <strong>el</strong> caso <strong>de</strong> modificar laplantilla en la que se basa.A pesar <strong>de</strong> estar trabajando sobre un documento vacío, es posible que al aplicar la plantillaaparezcan nombres <strong>de</strong> regiones no coinci<strong>de</strong>ntes entre <strong>el</strong> documento en blanco y la plantilla. En esecaso se muestra una ventana como la siguiente.
En <strong>el</strong>la hay que establecer una correspon<strong>de</strong>ncia entre <strong>el</strong> nombre <strong>de</strong> la región d<strong>el</strong> documento vacíocon <strong>el</strong> nombre <strong>de</strong> alguna región <strong>de</strong> la plantilla.En este ejemplo, la región d<strong>el</strong> documento vacío que no coincidía con <strong>el</strong> nombre <strong>de</strong> ninguna región<strong>de</strong> la plantilla era la región Document head.A través <strong>de</strong> Mover contenido a la nueva región: se ha s<strong>el</strong>eccionado la región head <strong>de</strong> laplantilla, para establecer así la correspon<strong>de</strong>ncia que se necesitaba.Después <strong>de</strong> establecer las correspon<strong>de</strong>ncias necesarias, se carga la plantilla en <strong>el</strong> documentovacío.En este caso no es posible cambiar <strong>el</strong> color <strong>de</strong> fondo, que está <strong>de</strong>finido en la plantilla, pero sí esposible cambiar todos los <strong>el</strong>ementos <strong>de</strong> la tabla y <strong>el</strong> formulario, ya que se encuentran <strong>de</strong>ntro <strong>de</strong> unazona <strong>de</strong>finida en la plantilla como editable.En este caso se podría cambiar <strong>el</strong> estilo d<strong>el</strong> texto, <strong>el</strong> color <strong>de</strong> las c<strong>el</strong>das, combinarlas, etc.Para que una página <strong>de</strong>je <strong>de</strong> estar basada en una plantilla hay que dirigirse al menú Modificar,Plantillas, opción Separar <strong>de</strong> plantilla.Cuando se separa una página <strong>de</strong> una plantilla, <strong>el</strong> contenido <strong>de</strong> la página sigue siendo <strong>el</strong> mismoque <strong>el</strong> que tenía cuando aún estaba basada en la plantilla, pero sin las restricciones establecidas porla plantilla.Para practicar los distintos aspectos explicados en <strong>el</strong> tema pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a pasoCrear una plantilla.
Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (I)12. 1En este tema vamos a ver algunas <strong>de</strong> las facilida<strong>de</strong>s que proporciona <strong>Dreamweaver</strong> para trabajarsobre <strong>el</strong> propio código HTML, y no únicamente sobre <strong>el</strong> editor gráfico <strong>de</strong> la vista diseño.En este tema no se preten<strong>de</strong> enseñaros <strong>el</strong> lenguaje HTML sino cómo po<strong>de</strong>r realizar algunosreajustes directamente en <strong>el</strong> código estando <strong>de</strong>ntro <strong>de</strong> <strong>Dreamweaver</strong>.EtiquetasYa sabes que <strong>el</strong> lenguaje HTML está basado en etiquetas que marcan <strong>el</strong> inicio y fin <strong>de</strong> cada<strong>el</strong>emento <strong>de</strong> la página Web.En <strong>el</strong> primer tema vimos como ejemplo las etiquetas que hay que incluir en <strong>el</strong> código HTML <strong>de</strong> unapágina para darle un título. Consistía simplemente en escribir <strong>el</strong> título <strong>de</strong>seado entre las etiquetas y .Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiquetaindica inicio, y la segunda, que incluye <strong>el</strong> símbolo /, indica final y se su<strong>el</strong>e <strong>de</strong>nominar etiqueta <strong>de</strong>cierre.Las etiquetas disponen <strong>de</strong> atributos que permiten <strong>de</strong>finir características d<strong>el</strong> <strong>el</strong>emento sobre <strong>el</strong> queactúan, incluyendo cierto código <strong>de</strong>ntro <strong>de</strong> la etiqueta.Por ejemplo, un párrafo se inserta entre las etiquetas y , pero es posible cambiar suscaracterísticas pre<strong>de</strong>terminadas, como pue<strong>de</strong> ser alinearlo a la <strong>de</strong>recha. Para <strong>el</strong>lo, en lugar <strong>de</strong>introducir <strong>el</strong> texto d<strong>el</strong> párrafo entre las etiquetas anteriores, ha <strong>de</strong> insertarse entre las etiquetas y .También hay <strong>el</strong>ementos que no precisan insertar etiqueta <strong>de</strong> cierre. Por ejemplo, un May+INTRO<strong>de</strong>ntro d<strong>el</strong> código HTML equivale a la etiqueta .También podrás ver la etiqueta en las páginas que sigan <strong>el</strong> estándar XHTML. Éste obliga aque todas las etiquetas se cierren, incluso aqu<strong>el</strong>las que no tienen etiqueta final, por lo que pasa a ser o a .<strong>Dreamweaver</strong> inserta automáticamente las etiquetas necesarias para construir la página con laapariencia y contenido <strong>de</strong>finidos en <strong>el</strong> editor gráfico, pero también ofrece otras posibilida<strong>de</strong>s paratrabajar directamente sobre <strong>el</strong> código.
Entida<strong>de</strong>s HTMLHTML también dispone <strong>de</strong> códigos especiales para representar caráceteres especiales como pue<strong>de</strong>n ser letras con acentos o no pertenecientes alalfabeto latino internacional, signos <strong>de</strong> puntuación o tipográficos y símbolos especiales que presenten un problema en HTML como < ó >, que podríanmalinterpretarse por <strong>el</strong> inicio <strong>de</strong> una etiqueta.Estos códigos pue<strong>de</strong>n mostrarse como un código numérico o con un nombre <strong>de</strong> entidad. Ambos métodos son igualmente aceptables, pero ambos<strong>de</strong>berán ir encerrados entre los símbolos & y ;.De este modo, < se escribirá como < o <Usar este método es muy aconsejable, <strong>de</strong> esta forma los navegadores que estén configurados para visualizar juegos <strong>de</strong> caracteres que no contenganletras como la ó o la ñ podrán ver <strong>el</strong> sitio correctamente. En caso contrario estos caracteres se mostrarían <strong>de</strong> forma extraña.En <strong>el</strong> tema 4 vimos que podíamos escribir estos caracteres utilizando <strong>el</strong> menú Insertar. Ahora te mostraremos otra forma para escribir caracteres que nose incluían en <strong>el</strong> listado <strong>de</strong> <strong>Dreamweaver</strong> y que podrás insertar escribiendo sus entida<strong>de</strong>s en la vista <strong>de</strong> Código.Aquí tienes una tabla <strong>de</strong> los caracteres más utilizados con sus Entida<strong>de</strong>s HTML numérica y <strong>de</strong> nombre <strong>de</strong> entidad:CarácterEntidad connombreEntidadnuméricaCarácterEntidad connombreEntidadnuméricaá á á Á Á Áé é é É É Éí í í Í Í Íó ó ó Ó Ó Óú ú ú Ú Ú Úü ü ü Ü Ü Üñ &nti<strong>de</strong>; ñ Ñ &Ntil<strong>de</strong>; Ñ
¿ ¿ ¿ α α α¡ &iexc; ¡ β β β– – – © © ©→ → → ® ® ®← ← ← € € €< < < espacio  > > >& & &Si escribes más <strong>de</strong> un espacio en <strong>Dreamweaver</strong>, cuando lo visualices en un Navegador sólo veras uno. Esto es <strong>de</strong>bido a que en HTML las palabrasseparadas por más <strong>de</strong> un espacio se visualizan sapradas <strong>de</strong> uno.Para saltarte esta norma pue<strong>de</strong>s escribir tantas veces como quieras y se visualizarán tantos espacios como <strong>el</strong>ementos <strong>de</strong> entidad hayasintroducido.Si quieres ver una tabla con <strong>el</strong> listado <strong>de</strong> todos los caracteres especiales visita <strong>el</strong> avanzado <strong>de</strong> Listado <strong>de</strong> Entida<strong>de</strong>s HTML .Listado <strong>de</strong> Entida<strong>de</strong>s HTML (I)Caracteres Alfabéticos Propios yAlfabeto GriegoSímbolos Otros Símbolos Caracteres TipográficosCarácterEntidadconEntidadnuméricaCarácterEntidad con nombre Entidad numérica∏ ∏ ∏CarácterEntidadconEntidadnumérica
nombre• • •… &h<strong>el</strong>lip; …′ ′ ′″ ″ ″⎯ ‾ ‾⁄ ⁄ ⁄€ € €℘ ℘ ℘I ℑ ℑR ℜ ℜ &tra<strong>de</strong>; ™ℵ ℵ ℵ← ← ←↑ ↑ ↑→ → →↓ ↓ ↓↔ ↔ ↔↵ ↵ ↵⇐ ⇐ ⇐⇑ ⇑ ⇑⇒ ⇒ ⇒⇓ ⇓ ⇓⇔ ⇔ ⇔∀ ∀ ∀∂ ∂ ∂∑ ∑ ∑− − −∗ ∗ ∗√ √ √∝ ∝ ∝∞ ∞ ∞∠ ∠ ∠∧ ∧ ∧∨ ∨ ∨∩ ∩ ∩∪ ∪ ∪∫ ∫ ∫∴ ∴ ∴∼ ∼ ∼≅ ≅ ≅≈ ≈ ≈≠ ≠ ≠≡ ≡ ≡≤ ≤ ≤≥ ≥ ≥⊂ ⊂ ⊂⊃ ⊃ ⊃⊄ ⊄ ⊄⊆ ⊆ ⊆⊇ ⊇ ⊇⊕ ⊕ ⊕nombreespacio  ¡ ¡ ¡¢ ¢ ¢£ £ £¤ ¤ ¤¥ ¥ ¥¦ ¦ ¦§ § §¨ ¨ ¨© © ©ª ª ª« « «¬ ¬ ¬­ ­® ® ®¯ ¯ ¯° &<strong>de</strong>g; °± ± ±² ² ²³ ³ ³´ ´ ´µ µ µ ¶ ¶· · ·¸ ¸ ¸¹ ¹ ¹
∃ ∃ ∃∅ ∅ ∅∇ ∇ ∇∈ ∈ ∈∉ ∉ ∉∋ ∋ ∋⊗ ⊗ ⊗⊥ ⊥ ⊥⋅ ⋅ ⋅⌈ ⌈ ⌈⌉ ⌉ ⌉⌊ ⌊ ⌊⌋ ⌋ ⌋〈 ⟨ 〈〉 ⟩ 〉◊ ◊ ◊♠ &spa<strong>de</strong>s; ♠♣ ♣ ♣♥ ♥ ♥♦ ♦ ♦º º º» » »¼ ¼ ¼½ ½ ½¾ ¾ ¾¿ ¿ ¿Caracteres AlfabéticosMayúsculasCarácterEntidadconnombreEntidadnuméricaÀ À ÀÁ Á Á  Âà &Atil<strong>de</strong>; ÃÄ Ä ÄCaracteres AlfabéticosMinúsculasCarácterEntidadconnombreEntidadnuméricaà à àá á áâ â âã &atil<strong>de</strong>; ãä ä äAlfabeto GriegoCarácterEntidad connombreEntidadnuméricaƒ ƒ ƒΑ Α ΑΒ Β ΒΓ Γ ΓΔ &D<strong>el</strong>ta; ΔΕ Ε Ε
Å Å ÅÆ Æ ÆÇ Ç ÇÈ È ÈÉ É ÉÊ Ê ÊË Ë ËÌ Ì ÌÍ Í ÍÎ Î ÎÏ Ï ÏÐ Ð ÐÑ &Ntil<strong>de</strong>; ÑÒ Ò ÒÓ Ó ÓÔ Ô ÔÕ &Otil<strong>de</strong>; ÕÖ Ö Ö× × ×Ø Ø ØÙ Ù ÙÚ Ú ÚÛ Û ÛÜ Ü ÜÝ Ý ÝÞ Þ Þß ß ßå å åæ &a<strong>el</strong>ig; æç ç çè è èé é éê ê êë ë ëì ì ìí í íî î îï ï ïð ð ðñ &ntil<strong>de</strong>; ñò ò òó ó óô ô ôõ &otil<strong>de</strong>; õö ö ö÷ &divi<strong>de</strong>; ÷ø ø øù ù ùú ú úû û ûü ü üý ý ýþ þ þÿ ÿ ÿΖ Ζ ΖΗ Η ΗΘ Θ ΘΙ Ι ΙΚ Κ ΚΛ Λ ΛΜ Μ ΜΝ Ν ΝΞ Ξ ΞΟ Ο ΟΠ Π ΠΡ Ρ ΡΣ Σ ΣΤ Τ ΤΥ Υ ΥΦ Φ ΦΧ Χ ΧΨ Ψ ΨΩ Ω Ωα α αβ β βγ γ γδ &d<strong>el</strong>ta; δε ε εζ ζ ζη η ηθ θ θ
ι ι ικ κ κλ λ λμ μ μν ν νξ ξ ξο ο οπ π πρ ρ ρς ς ςσ σ στ τ τυ υ υφ φ φχ χ χψ ψ ψω ω ωϑ ϑ ϑϒ ϒ ϒϖ ϖ ϖ
Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (II)12.2El inspector <strong>de</strong> códigoRecordarás que <strong>Dreamweaver</strong> ofrece la posibilidad <strong>de</strong> trabajar con tres vistas: vista Diseño, vistaCódigo y vista Dividir (Código y Diseño).Todas estas vistas se aplican directamente sobre la ventana d<strong>el</strong> documento.Pero existe un pan<strong>el</strong> que permite visualizar <strong>el</strong> código in<strong>de</strong>pendientemente <strong>de</strong> la vista aplicada en <strong>el</strong>documento. Este pan<strong>el</strong> es <strong>el</strong> llamado Inspector <strong>de</strong> código y pue<strong>de</strong> abrirse a través d<strong>el</strong> menúVentana. Si la opción Inspector <strong>de</strong> código no te aparece directamente en este menú, posiblementeesté <strong>de</strong>ntro <strong>de</strong> la opción Otros. También pue<strong>de</strong>s abrir <strong>el</strong> Inspector <strong>de</strong> código pulsando F10.
El Inspector <strong>de</strong> código muestra <strong>el</strong> código HTML <strong>de</strong> la misma forma que lo hacen la vista Códigoy la vista Dividir (Código y Diseño), pero pue<strong>de</strong> resultar más cómodo trabajar con <strong>el</strong> pan<strong>el</strong>, ya quepue<strong>de</strong> situarse en cualquier parte <strong>de</strong> la pantalla, y no se limita sólo al espacio d<strong>el</strong> documento.
Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (III)12.3Completar las etiquetasUna <strong>de</strong> las posibilida<strong>de</strong>s que ofrece <strong>Dreamweaver</strong> a la hora <strong>de</strong> trabajar directamente sobre <strong>el</strong>código HTML es la <strong>de</strong> completar las etiquetas mientras se van introduciendo. Esto se produce tantoen <strong>el</strong> Inspector <strong>de</strong> código como en las vistas <strong>de</strong> código.Imaginemos que <strong>de</strong>seamos introducir en nuestra página un enlace a la página <strong>de</strong> aulaclic, que ha<strong>de</strong> abrirse en una ventana nueva. En este caso <strong>de</strong>beríamos introducir la etiqueta pulsa aquí para visitar aulaclic, con lo que obtendríamos <strong>el</strong>siguiente enlace:pulsa aquí para visitar aulaclicVamos a ver cómo funciona <strong>el</strong> mecanismo <strong>de</strong> completar etiquetas a través <strong>de</strong> este ejemplo.Las etiquetas se completan siempre <strong>de</strong> izquierda a <strong>de</strong>recha, por lo que loprimero que <strong>de</strong>bemos insertar es <strong>el</strong> símbolo < .Después <strong>de</strong> escribir nosotros este símbolo, <strong>Dreamweaver</strong> mostrará una lista contodos los comandos que pue<strong>de</strong>n aparecer <strong>de</strong>spués él. Para <strong>el</strong>egir uno <strong>de</strong> <strong>el</strong>los hayque pulsar dos veces sobre él con <strong>el</strong> puntero d<strong>el</strong> ratón, o bien, estando s<strong>el</strong>eccionado,pulsar INTRO.En este caso tenemos que <strong>el</strong>egir a, <strong>de</strong>spués <strong>de</strong> lo cual <strong>de</strong>saparecerá la lista. En <strong>el</strong>código tendremos .Después <strong>de</strong>
En lugar <strong>de</strong> cerrar ya la etiqueta con <strong>el</strong> símbolo >, queremos primero indicarque <strong>el</strong> vínculo ha <strong>de</strong> abrirse en una ventana nueva. Para <strong>el</strong>lo tenemos queintroducir un nuevo espacio, para que se nos muestre otra lista.En <strong>el</strong>la hay que <strong>el</strong>egir target. El código quedará como.Entonces <strong>el</strong> cursor aparecerá entre las nuevas comillas dobles, y se mostrará unalista en la que es posible <strong>el</strong>egir <strong>el</strong> <strong>de</strong>stino d<strong>el</strong> enlace.Como queremos que <strong>el</strong> enlace se abra en una ventana nueva, hay ques<strong>el</strong>eccionar _blank.Después <strong>de</strong> introducir <strong>el</strong> símbolo > para cerrar la etiqueta, se insertará automáticamente la <strong>de</strong> finald<strong>el</strong> enlace, es <strong>de</strong>cir, se insertará , y tendremos .Ahora po<strong>de</strong>mos completar la etiqueta con la dirección d<strong>el</strong> enlace y <strong>el</strong> texto que servirá comoenlace, para que que<strong>de</strong> d<strong>el</strong> siguiente modo:pulsa aquí para visitar aulaclic
Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (IV)12.4Contraer y expandircódigoUna <strong>de</strong> las mejoras <strong>de</strong> la versión 8 <strong>de</strong><strong>Dreamweaver</strong> es la posibilidad <strong>de</strong>s<strong>el</strong>eccionar fragmentos <strong>de</strong> código ycontraerlos para facilitar la legibilidad d<strong>el</strong>código.Por ejemplo, po<strong>de</strong>mos s<strong>el</strong>eccionar <strong>el</strong>trozo <strong>de</strong> código correspondiente a unatabla, tal y como se ve en la figura <strong>de</strong> la<strong>de</strong>recha.Para <strong>el</strong>lo basta con colocar <strong>el</strong> cursor enla zona que queremos contraer, porejemplo en la línea 318, y pulsar <strong>el</strong> icono<strong>de</strong> la barra <strong>de</strong> herramientas <strong>de</strong>programación, veremos comoautomáticamente se s<strong>el</strong>ecciona <strong>el</strong> códigoentre las etiquetas mas próximas, en estecaso y , si seguimoshaciendo clic se irá s<strong>el</strong>eccionando códigoentre las siguientes etiquetas, y . De forma que con cincoclics en <strong>el</strong> icono tendremoss<strong>el</strong>eccionado <strong>el</strong> código <strong>de</strong> la etiqueta tal y como vemos en la figura.Ahora, para contraer <strong>el</strong> códigos<strong>el</strong>eccionado basta hacer clic en <strong>el</strong>icono y obtendremos <strong>el</strong>resultado que vemos a la <strong>de</strong>recha.De esta forma podríamos ocultar<strong>el</strong> código que no nos interesa y<strong>de</strong>jar <strong>el</strong> resto d<strong>el</strong> código máslegible.Para volver a la situación inicialbasta hacer clic en <strong>el</strong> iconoexpandir , o en <strong>el</strong> signo + queaparece al lado d<strong>el</strong> códigocontraido.
Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (V)12.5Errores en <strong>el</strong> códigoA través d<strong>el</strong> editor gráfico es posiblever si hay algunos errores en <strong>el</strong> códigoHTML, como pue<strong>de</strong> ser una etiquetaincompleta.En <strong>el</strong> caso <strong>de</strong> haber un error <strong>de</strong> estetipo, <strong>el</strong> fragmento <strong>de</strong> código quecontiene <strong>el</strong> error se mostrará resaltadoen amarillo en la ventana <strong>de</strong> diseño <strong>de</strong> lapágina.Esto nos permite darnos cuenta <strong>de</strong> lalínea concreta en la que se encuentra <strong>el</strong>error.Si en <strong>el</strong> ejemplo <strong>de</strong> completar lasetiquetas hubiéramos <strong>de</strong>jado sinterminar la línea <strong>de</strong> código, habiendoescrito únicamente
A continuación se abrirá <strong>el</strong> pan<strong>el</strong> Resultados con las lista <strong>de</strong> los errores encontrados.En esta lista aparece <strong>el</strong> grado <strong>de</strong> importancia d<strong>el</strong> error representado mediante un icono, <strong>el</strong> globo<strong>de</strong> palabras indica un mensaje informativo (señala código que no es compatible con un navegadorpero que no tiene ningún efecto visible), <strong>el</strong> icono <strong>de</strong> signo <strong>de</strong> exclamación con fondo rojo indica error(indica código que pue<strong>de</strong> causar un problema visible grave en un navegador concreto, como hacer<strong>de</strong>saparecer partes <strong>de</strong> una página) y <strong>el</strong> icono <strong>de</strong> signo <strong>de</strong> exclamación con fondo amarillo indicaadvertencia (señala una parte <strong>de</strong> código que no se visualizará correctamente en un navegadorconcreto, pero eso no causará ningún problema grave <strong>de</strong> visualización).A continuación tenemos la página y número <strong>de</strong> línea don<strong>de</strong> está <strong>el</strong> error y una <strong>de</strong>scripción d<strong>el</strong>mismo.A veces la <strong>de</strong>scripción es un texto largo que no se pue<strong>de</strong> visualizar completamente para <strong>el</strong>lopue<strong>de</strong>s utilizar <strong>el</strong> botón Más info .Como ya sabrás los distintos navegadores y sus distintas versiones hacen que un error lo sea ono, <strong>de</strong>bemos realizar la comprobación <strong>el</strong>igiendo las versiones <strong>de</strong> los navegadores que consi<strong>de</strong>remossean las más utilizadas entre nuestros navegantes.Para s<strong>el</strong>eccionar los navegadores para que <strong>Dreamweaver</strong> los compruebe <strong>de</strong>bemos <strong>de</strong>splegar <strong>el</strong>menú Comprobar navegadores <strong>de</strong> <strong>de</strong>stino y s<strong>el</strong>eccionar la opción Configuración... Aparecerá <strong>el</strong>cuadro <strong>de</strong> diálogo Comprobar navegadores <strong>de</strong> <strong>de</strong>stino don<strong>de</strong> s<strong>el</strong>eccionamos los navegadores quequeramos comprobar y la versión mínima <strong>de</strong> la lista <strong>de</strong>splegable a la <strong>de</strong>recha d<strong>el</strong> nombre d<strong>el</strong>navegador.
Unidad 12. HTML <strong>de</strong>s<strong>de</strong> <strong>Dreamweaver</strong> (VI)12.6Buscar y reemplazarEn ocasiones es posible querer buscar <strong>de</strong>ntro <strong>de</strong> un sitio web todas aqu<strong>el</strong>las páginas quecontengan un texto en concreto, una etiqueta en concreto, o parte <strong>de</strong> estos <strong>el</strong>ementos. Tal vez losqueramos buscar porque <strong>de</strong>seemos trabajar sobre esas páginas y no recordábamos cual <strong>de</strong> <strong>el</strong>lasera, o tal vez porque queramos cambiar ese texto o etiqueta por otros.Imaginemos que una persona ha creado un sitio web, en <strong>el</strong> que la mayoría <strong>de</strong> las páginas tiene alcomienzo un texto que hace referencia al nombre d<strong>el</strong> sitio, por ejemplo, todas esas páginascomienzan con PerrosGatos, y tiene la seguridad <strong>de</strong> que no existe ese texto en ninguna parte <strong>de</strong> laspáginas que no sea al comienzo. Ahora imaginemos que esta persona ha creado una imagen <strong>de</strong> unperro y un gato, y que quiere cambiar en todas las páginas que contienen <strong>el</strong> texto PerrosGatos dichotexto por la imagen.En este caso no es necesario que abra una por una todas las páginas que contienen dicho texto,ni tampoco que modifique una por una dichas páginas para cambiar <strong>el</strong> texto por la imagen. Pararealizar esta tarea resulta más sencillo utilizar la herramienta <strong>de</strong> Buscar y reemplazar.Pue<strong>de</strong>s abrirla a través d<strong>el</strong> menú Edición, opción Buscar y reemplazar, o pulsando Ctrl+F.Mediante Buscar en pue<strong>de</strong> especificarse si se va a buscar en <strong>el</strong> documento actual, en todo <strong>el</strong>sitio, o en los archivos s<strong>el</strong>eccionados d<strong>el</strong> sitio (habiendo s<strong>el</strong>eccionado dichos archivos previamente).A través <strong>de</strong> Buscar se especifica si hay que buscarlo en <strong>el</strong> texto (en la ventana diseño), o en <strong>el</strong>código HTML (código fuente).Junto a la lista <strong>de</strong> opciones <strong>de</strong> Buscar, aparece un cuadro <strong>de</strong> texto en <strong>el</strong> que hay que indicar <strong>el</strong>texto o <strong>el</strong> código que se <strong>de</strong>sea buscar.En Reemplazar con hay que especificar <strong>el</strong> texto o <strong>el</strong> código por <strong>el</strong> que se <strong>de</strong>sea cambiar <strong>el</strong> texto ocódigo buscado.El reemplazo pue<strong>de</strong> hacerse <strong>de</strong> varias formas, siempre a través <strong>de</strong> los botones <strong>de</strong> la <strong>de</strong>recha <strong>de</strong> la
ventana. Una <strong>de</strong> <strong>el</strong>las es buscar uno por uno cada uno <strong>de</strong> los documentos que contengan <strong>el</strong> código otexto a buscar, y reemplazar cuando se <strong>de</strong>see. Para <strong>el</strong>lo se utilizan los botones Buscar sig. yReemplazar.Si se <strong>de</strong>sean buscar todos los documentos que contengan dicho texto o código, y reemplazar entodos <strong>el</strong>los, se utilizan los botones Buscar todos y Reemp. todos.Cuando se utiliza la opción Buscar sig., se abre la página en la que se encuentra <strong>el</strong> textocoinci<strong>de</strong>nte, resaltando en <strong>el</strong> código fuente la línea en la que este se encuentra. De este modopo<strong>de</strong>mos <strong>de</strong>cidir uno por uno los cambios a realizar. Cuando estemos seguros <strong>de</strong> querer reemplazarpulsaremos sobre Reemplazar, y cuando no <strong>de</strong>seemos reemplazar volveremos a pulsar sobreBuscar sig..Cuando se utiliza la opción Buscar todos secierra la ventana <strong>de</strong> Buscar y reemplazar y seabre un nuevo pan<strong>el</strong> como <strong>el</strong> <strong>de</strong> la <strong>de</strong>recha, en <strong>el</strong>que aparecen todos los documentos en <strong>el</strong> quecoinci<strong>de</strong> <strong>el</strong> texto o <strong>el</strong> código buscado.Pulsando sobre <strong>el</strong> botón vu<strong>el</strong>ve a abrirse laventana <strong>de</strong> Buscar y reemplazar. Des<strong>de</strong> dichaventana po<strong>de</strong>mos reemplazar en los documentosencontrados, uno por uno, con <strong>el</strong> botónReemplazar, o bien reemplazar directamente entodos los documento encontrados, pulsando sobre<strong>el</strong> botón Reemp. todos.En <strong>el</strong> pan<strong>el</strong>, cuando se haya reemplazado enalgún documento, éste volverá a aparecer en lalista junto con un círculo ver<strong>de</strong>, que indica que yaha sufrido reemplazo.En ocasiones po<strong>de</strong>mos equivocarnos, al buscar y reemplazar texto o código erróneos. Hay quetener mucho cuidado al utilizar esta herramienta, ya que no es posible <strong>de</strong>shacer los cambios en losdocumentos que están cerrados durante la búsqueda y <strong>el</strong> reemplazo.En <strong>el</strong> ejemplo anterior, la persona quería buscar <strong>el</strong> texto PerrosGatos, y reemplazarlo por unaimagen. En este caso concreto, lo que se <strong>de</strong>sea sustituir es texto por una imagen, por lo que enBuscar no podríamos <strong>el</strong>egir la opción Texto, habría que <strong>el</strong>egir la opción Código fuente.En Reemplazar con, habría que especificar la etiqueta HTML completa para insertar la imagen.En este caso la etiqueta sería , teniendo en cuenta que laimagen se llama logo_animales.gif y que se encuentra <strong>de</strong>ntro d<strong>el</strong> sitio en la carpeta imagenes.Existen métodos <strong>de</strong> búsqueda mucho más precisos que los que hemos visto, si quieres conocerlosvisita <strong>el</strong> avanzado <strong>de</strong> Expresiones Regulares .Expresiones Regulares (I)Las Expresiones Regulares son un conjunto <strong>de</strong> símbolos que unidos pue<strong>de</strong>n <strong>de</strong>finir un patrón parai<strong>de</strong>ntificar una ca<strong>de</strong>na <strong>de</strong> caracteres.Antes <strong>de</strong> comenzar a verlas <strong>de</strong>beríamos tener bien claro cómo actúa la búsqueda normal.
Por ejemplo, si buscamos la ca<strong>de</strong>na aula, los resultados que encontrasemos podrían ser aulaclic,miaula, aula, etc...Utilizaremos las Expresiones Regulares para <strong>de</strong>cidir cuales serán <strong>el</strong> resto <strong>de</strong> los caracteres.Para utilizar estos símbolos especiales tendremos quemarcar la casilla Utilizar expresión regularen <strong>el</strong> cuadro <strong>de</strong> diálogo <strong>de</strong> Buscar y Remplazar:Una vez tengamos la casilla marcada, todo lo que escribamos en <strong>el</strong> cuadro <strong>de</strong> búsqueda setomará como una expresión regular, así que empecemos a ver los símbolos que po<strong>de</strong>mos utilizar:SímboloSignificado^Utiliza este símbolo para buscar ca<strong>de</strong>nas al principio <strong>de</strong> undocumento.Esta expresión regular no es muy útil, pues normalmente losdocumentos HTML empiezan con la especificación <strong>de</strong> lascabeceras lo que, normalmente, no pertenece a nuestro objetivo<strong>de</strong> búsqueda.Utilizando este símbolo podríamos encontrar documentosbuscando por^
que sigan HTML.$ Utiliza este símbolo para buscar ca<strong>de</strong>nas al final <strong>de</strong> undocumento.Igual que la anterior, esta expresión regular no nos será <strong>de</strong>mucha ayuda cuando utilicemos la herramienta Buscar yReemplazar. Sólo podremos buscar documentos que terminen<strong>de</strong> <strong>de</strong>terminada manera.Por ejemplo, po<strong>de</strong>mos buscar archivos que terminen con$Esta búsqueda nos <strong>de</strong>volvería todos aqu<strong>el</strong>los documentos quese han cerrado correctamente, los que terminen, por ejemplo en no se mostrarían.* Ahora ya entramos con expresiones regulares mucho más útiles.El asterisco te ayudará a buscar un carácter que aparezca unavez, varias o ninguna. Veamos un ejemplo, si hacemos labusqueda pora*uLos resultados que po<strong>de</strong>mos encontrar serían aula, aaula,aaaaula o incluso uno o cu<strong>el</strong>lo, porque <strong>el</strong> asterisco implica que<strong>el</strong> carácter no tiene porque aparecer.+ Casi ocurre lo mismo con esta expresión regular.El signo + buscará conici<strong>de</strong>ncias <strong>de</strong> un caracter una vez ovarías. En este caso se <strong>de</strong>spreciarán aqu<strong>el</strong>las en las que noaparezca.Por ejemplo, si buscamosa+uLos resultados podrían ser aula, aaula o aaaula, pero no ni unoni cu<strong>el</strong>lo porque este símbolo obliga a que <strong>el</strong> caracter seencuentre al menos una vez.? Veamos ahora qué ocurre con <strong>el</strong> signo <strong>de</strong> interrogación.Este símbolo es <strong>el</strong> contrario d<strong>el</strong> anterior, sólo buscacoinci<strong>de</strong>ncias una sóla vez o ninguna, <strong>de</strong> modo que buscando
au?laPo<strong>de</strong>mos encontrar aula, ala, aulaclic o alameda, pero nuncaauula ni auuulaclic.Es <strong>de</strong>cir, este símbolo nos sirve para marcar caracteresopcionales.. El punto es un símbolo muy útil. Po<strong>de</strong>mos utilizarlo parasustituir cualquier carácter, por ejemplo, en la búsqueda <strong>de</strong><strong>de</strong>.aPodríamos encontrar resultados como d<strong>el</strong>a, <strong>de</strong>sa, <strong>de</strong>ia, <strong>de</strong>ra,<strong>de</strong>9a... pero nunca <strong>de</strong>a (aunque sí <strong>de</strong>aa). En <strong>de</strong>finitiva, estesímbolo sustituye a un carácter ni más ni menos.Llegados a este punto podrías realizar búsquedas máscomplejas combinando varias expresiones que hemos visto, porejemplo,<strong>de</strong>.?aEncontraría d<strong>el</strong>a, <strong>de</strong>sa, <strong>de</strong>ia, <strong>de</strong>ra, <strong>de</strong>9a e incluso <strong>de</strong>a pues alescribir ? a la <strong>de</strong>recha d<strong>el</strong> punto hemos indicado que esecarácter pue<strong>de</strong> aparecer o no.uno|otroEl símbolo | se utiliza para representar la conjunción lógica OR,es <strong>de</strong>cir, uno u otro.Po<strong>de</strong>mos buscar99|a<strong>de</strong>Y encontraríamos resultados tan variados como a<strong>de</strong>cuado,ca<strong>de</strong>na, 1099, 9900, etc...Piensa que ahora po<strong>de</strong>mos complicar mucho más las búsquedascombinando todos los símbolos vistos, con esta búsqueda:<strong>de</strong>.?a|<strong>de</strong>?aEncontaríamos resultados como d<strong>el</strong>a, <strong>de</strong>sarmado, <strong>de</strong>a (quecumple ambas condiciones) o da (que cumple la segunda).{n}Los símbolos <strong>de</strong> llave indican repetición.Nos ayudarán a estabecer <strong>el</strong> número <strong>de</strong> veces que se repite <strong>el</strong>
carácter al cual prece<strong>de</strong>. Por ejemplo, buscandocas{2}aEncontraría únicamente las palabras que contengan cassa(como cassa, micassa, ocassa7a, recassaa...).Sin embargo, la búsqueda <strong>de</strong>cas{2}Podría encontrar cassa, casssa, micassssa, etc... Pues buscaráuna ca<strong>de</strong>na que contenga ca seguida <strong>de</strong> 2 eses.{n,m}Este sería otro caso <strong>de</strong> símbolo <strong>de</strong> llave, pero en este casointroduciremos dos números.Estos números indicarán la repetición que pue<strong>de</strong> tener <strong>el</strong>caracter al cual prece<strong>de</strong>n. Por ejemplo, la búsqueda:m{2,4}Encontraría coinci<strong>de</strong>ncias con ca<strong>de</strong>nas que conteniesen almenos 2 m o hasta como máximo 4.Posibles resultados serían mm, mmm o mmmm. La ca<strong>de</strong>naummmm sí que se encontraría, mientras que en ummmmm sóloencontraría las 4 primeras emes.En esta expresión regular po<strong>de</strong>mos obviar la segunda parte paraconseguir algo como esto:m{2,}El resultado ahora sería cuanquier ca<strong>de</strong>na que contenga almenos 2 m y sin máximo <strong>de</strong> repetición.Las ca<strong>de</strong>nas umm, ummmmmmm o ummmmmmmmmmm seencontrarían sin problemas.Expresiones Regulares (II)Hasta ahora hemos visto expresiones regulares simples.Estos símbolos pue<strong>de</strong>n combinarse para formar búsquedas más complejas. Pero si loscombinamos con los siguientes podremos buscar prácticamente cualquier cosa.SímboloSignificado
() Los paréntesis nos serán <strong>de</strong> gran ayuda cuando realicemosbúsquedas con expresiones regulares.Con los paréntesis po<strong>de</strong>mos agrupar caracteres y aplcarles unaregla <strong>de</strong> regularidad. Por ejemplo:(au)+laDaría como resultados aula, auaula, auauaula, pero no la.El uso <strong>de</strong> estos símbolos nos ayudará muchísimo cuandotrabajemos con Expresiones Regulares.[abc]Los corchetes se utilizarán para establecer rangos o conjuntos <strong>de</strong>caracteres que serán incluidos en la busqueda.De este modoimagen_[abc]Encontrará resultados como imagen_a, imagen_b o imagen_c.También po<strong>de</strong>mos establecer un rango para evitar tener queintroducir todos los componentes d<strong>el</strong> conjunto:imagen_[c-f]Que mostrará los resultados que contengan imagen_c, imagen_d,imagen_e o imagen_f.Esta expresión es muy útil, imagina la siguiente búsqueda:[a-zA-Z]+Buscará cualquier ca<strong>de</strong>na formada por mayúsculas o minúsculas (oincluso ambas mezcladas). Al añadirle <strong>el</strong> símbolo + hacemos qu<strong>el</strong>os caracteres indicados a la izquierda (<strong>el</strong> rango <strong>de</strong> mayúsculas ominúsculas) <strong>de</strong>ban aparecer por lo menos una vez, asíencontraremos cualquier tipo <strong>de</strong> palabra que no contengacaracteres numéricos.Esta búsqueda encontraría, por ejemplo, las palabras Esta,ca<strong>de</strong>na, SI, qUe, sE o EncuEntrA pero no sería capaz <strong>de</strong>encontrar sie7e o canción porque ni los números ni las letrasacentuadas se encuentran en <strong>el</strong> rango [a-zA-Z].
La siguiente búsqueda incluiría números y acentos:imagen_[a-záéíóú0-9]Esta vez podríamos encontrar imagen_casa, imagen_07a,imagen_ladrón o imagen_f5ágh. Pero no imagen_A porque estavez las mayúsculas no se han incluido.[^abc]Utiliza este símbolo <strong>el</strong>iminar caracteres <strong>de</strong> las búsquedas.Por ejemplo:imagen_[^0-9]Sólo encontrará ca<strong>de</strong>nas que empiecen por imagen_ y <strong>el</strong> siguientecarácter no sea numérico. Como por ejemplo, imagen_casa,imagen_ladrón o imagen_sie7e.En este caso imagen_0casa no se encontraría.\ Este es un símbolo muy especial, pues te permitirá buscarcaracteres reservados como pue<strong>de</strong>n ser +, ^, * o $ sin que seconfundan como expresiones regulares.Imagina que queremos buscar en concreto la ca<strong>de</strong>na imagen_123*y la ca<strong>de</strong>na imagen_456*, ¿cómo lo hacemos? Fácil, escribiendo:imagen_(123|456)\*Como pue<strong>de</strong>s ver, buscará calquier ca<strong>de</strong>na que contengaimagen_123 o imagen_456 seguida <strong>de</strong> un asterísco.Si no hubiesemos añadido la barra <strong>de</strong> escape (imagen_(123|456)*)significaría que lo que se encuentra entre paréntesis podríarepetirse varías veces o incluso ni aparecer.Ahora veremos símbolos que nos ayudarán a reproducir estados especiales,como espacios, principios <strong>de</strong> palabra, tabulaciones, etc...\b Este símbolo representa un límite en una ca<strong>de</strong>na <strong>de</strong> texto yabien sea crado por un espacio o un retorno <strong>de</strong> carro.Esto no sayudará a encontrar principios y finales <strong>de</strong> palabras.
Con la búsqueda:\bsEncontraríamos salida pero no cosa porque en este caso la s no seencuenta al principio <strong>de</strong> la palabra.D<strong>el</strong> mismo modo,s\bEncontraría camas pero no salida.\B Este símbolo indica que <strong>el</strong> caracter se encuentra <strong>de</strong>ntro <strong>de</strong> unaca<strong>de</strong>na <strong>de</strong> texto y no en los límites.Podríamos <strong>de</strong>cir que esta expresión es contraria a la anterior.Con la búsqueda:\BcEncontraríamos ocaso pero no cama.\d Este símbolo sustituye a cualquier carácter numérico, esequivalente a la expresión [0-9].La búsqueda:sie\<strong>de</strong>Encontraría sie7e pero no siete.\D Al contrario que <strong>el</strong> anterior, esta expresión equivale a un carácterno numérico, es equivalente a la expresión [^0-9].La búsqueda:sie\DeEncontraría siete pero no sie7e.\w Este símbolo sustituye a cualquier carácter alfanuméricoincluyendo <strong>el</strong> subrayado, es equivalente a la expresión [a-ZA-Z0-9_].
\W Al contrario que <strong>el</strong> anterior, esta expresión equivale a cualquiercarácter que no sea alfanumérico ni <strong>el</strong> subrayado, esequivalente a la expresión [^a-zA-Z0-9_].\s Este símbolo representa un espacio en blanco.\r Este símbolo representa un retorno <strong>de</strong> carro.\t Este símbolo representa un salto <strong>de</strong> tabulador.Expresiones Regulares (III)Muy bien, ahora ya sabemos cómo buscar utilizando expresiones que nos permitirán realizarbúsquedas complejas y encontrar fragmentos <strong>de</strong> ca<strong>de</strong>nas que nos son interesantes.Pero ahora viene la gran cuestión. Apren<strong>de</strong>remos a utilizar todo lo que hemos aprendido parareemplazar un texto por otro.Hasta ahora somos capaces <strong>de</strong> encontrar ca<strong>de</strong>nas con gran precisión, por ejemplo la siguiente:[^
No podremos ir. Tengo que regar las plantas.El texto que verás en la vista <strong>de</strong> Diseño es <strong>el</strong> siguiente:Po<strong>de</strong>mos encontrar texto encerrado entre etiquetas <strong>de</strong> aunquecontengan caracteres especiales como estos ejemplos:El gato "corría" por la casa.Hace 7 semanas que no te veo.La operación (8/2)+4 da como resultado 8.Tengo que ir a la consulta los lunes, miércoles y viernes.No podremos ir. Tengo que regar las plantas.Ahora apren<strong>de</strong>remos una valiosa utilidad.La herramienta Reemplazar busca subexpresiones en la ca<strong>de</strong>na introducida en <strong>el</strong> cuadro Buscar,por lo que si tenemos:(a)(b)(c)Los equivalentes en la caja <strong>de</strong> texto <strong>de</strong> Reemplazar serían:$1 $2 $3Parece un poco complicado, pero en realidad no lo es.Tomemos <strong>el</strong> ejemplo anterior, teníamos la expresión:[^
Habremos conseguido cambiar las etiquetas <strong>de</strong> y por y sinmodificar <strong>el</strong> texto que estaba <strong>de</strong>ntro.Fácil, ¿verdad?Búsqueda en EtiquetasEn <strong>el</strong> cuadro <strong>de</strong> diálogo Buscar y Reemplazar podrás encontrar otros tipos <strong>de</strong> búsqueda quetodavía no hemos visto.Para <strong>el</strong>lo <strong>de</strong>berás s<strong>el</strong>eccionarlos en <strong>el</strong> <strong>de</strong>splegable Buscar:El primer método que veremos será la opción Texto (avanzado).Como pue<strong>de</strong>s ver en la imagen, este cuadro <strong>de</strong> búsqueda es muy similar al que estamosacostumbrados a utilizar, sólo que tiene un espacio entre los campos Buscar y Reemplazar que nosdarán la oportunidad <strong>de</strong> trabajar con etiquetas.S<strong>el</strong>ecciona en <strong>el</strong> segundo <strong>de</strong>splegable la etiqueta en la que quieres que se encuentre tu texto (ono, según hayas s<strong>el</strong>eccionado en <strong>el</strong> primero).Ahora estarás listo para realizar búsquedas en etiquetas especificas.Pero aún hay más. Pue<strong>de</strong>s hacer clic en <strong>el</strong> botónpara ver cómo aparecen más opciones:
Pue<strong>de</strong>s incluir más opciones sobre <strong>el</strong> tipo <strong>de</strong> atributos que tenga (e incluso en los <strong>de</strong>splegables d<strong>el</strong>a <strong>de</strong>recha incluir un valor para <strong>el</strong> atributo) o seguir buscando por otras opciones.Verás que en seguida te harás con <strong>el</strong> método <strong>de</strong> búsqueda.Lo que tenemos que <strong>de</strong>stacar es que esta forma te ayudará a modificar <strong>el</strong> texto que se encuentre<strong>de</strong>ntro <strong>de</strong> una etiqueta.¿Pero qué pasa si lo que queremos es buscar o modificar una etiqueta especifica con unascircunstancias igual <strong>de</strong> especificas?Muy sencillo, en <strong>el</strong> <strong>de</strong>splegable Buscar: s<strong>el</strong>eccionaremos Etiqueta específica.Verás <strong>el</strong> siguiente cuadro <strong>de</strong> diálogo:En este caso tenemos dos secciones Buscar: y Acción:.
Obviamente para realizar la segunda tendremos que r<strong>el</strong>lenar los datos correctos en la primera. Asíque veamos qué nos po<strong>de</strong>mos encontrar.En <strong>el</strong> <strong>de</strong>splegable <strong>de</strong> al lado <strong>de</strong> Etiqueta especifica <strong>de</strong>beremos indicar <strong>el</strong> tipo <strong>de</strong> etiqueta queestamos buscando.Luego en la línea siguiente podremos indicar si tiene algun tipo <strong>de</strong> atributo (y con qué valor) o si seencuentra <strong>de</strong>ntro <strong>de</strong> otra etiqueta..Estas últimas opciones son muy parecidas a las que se utilizaron en <strong>el</strong> método <strong>de</strong> Texto(avanzado).Recuerda que pue<strong>de</strong>s usar <strong>el</strong> botónpara seguir añadiendo condiciones.Finalmente y cuando la búsqueda funcione correctamente podremos utilizar la opción Acción:Como pue<strong>de</strong>s ver, pue<strong>de</strong>s escoger entre varias acciones a aplicar, entre reemplazar la etiquetacon otra o cambiar alguno <strong>de</strong> sus atributos como añadir algo antes o <strong>de</strong>spués <strong>de</strong> ésta.Por ejemplo, si quisiesemos quitar todos los enlaces <strong>de</strong> una página podríamos utilizar laopción Estiqueta especifica para <strong>el</strong>lo, bastará con que indiques las opciones que pue<strong>de</strong>s ver en lasiguiente imagen:
Para practicar los distintos aspectos explicados en <strong>el</strong> tema pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a pasoBuscar y reemplazar.Si quieres ver otros métodos <strong>de</strong> búsqueda r<strong>el</strong>acionados con las etiquetas d<strong>el</strong> código visita <strong>el</strong>avanzado <strong>de</strong> Búsqueda en Etiquetas .Ejercicios d<strong>el</strong> Tema 12. Prueba evaluativa d<strong>el</strong> Tema 12.
Unidad 13. Otros <strong>el</strong>ementos (I)13.1Vamos a ver una serie <strong>de</strong> <strong>el</strong>ementos que su<strong>el</strong>en aparecer en las páginas web, como pue<strong>de</strong>n serlas marquesinas, las reglas horizontales y la fecha.MarquesinasLas marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pue<strong>de</strong>n<strong>de</strong>splazarse <strong>de</strong> un lado a otro <strong>de</strong> la ventana en forma <strong>de</strong> línea. A continuación tienes un ejemplo <strong>de</strong>marquesina.Las marquesinas no se pue<strong>de</strong>n insertar a través d<strong>el</strong> editor gráfico <strong>de</strong> <strong>Dreamweaver</strong>, es necesariohacerlo a través d<strong>el</strong> código.Para crear una marquesina hay que insertar las etiquetas y . Entredichas etiquetas han <strong>de</strong> introducirse los <strong>el</strong>ementos que se <strong>de</strong>sea que aparezcan en la marquesina.También es posible especificar algunas características <strong>de</strong> la marquesina. La marquesina, por<strong>de</strong>fecto, se <strong>de</strong>splaza <strong>de</strong> <strong>de</strong>recha a izquierda in<strong>de</strong>finidamente, pero si lo <strong>de</strong>seas pue<strong>de</strong>s hacer queestas propieda<strong>de</strong>s varíen. Por ejemplo, si pones , la marquesina hará<strong>el</strong> <strong>de</strong>splazamiento una sola vez y se <strong>de</strong>tendrá.Si pones , en lugar <strong>de</strong> <strong>de</strong>splazarse continuamente <strong>de</strong> <strong>de</strong>recha aizquierda, la marquesina se <strong>de</strong>splazará <strong>de</strong> lado a lado <strong>de</strong> la ventana, como si rebotara en losextremos, tal y como ocurre en <strong>el</strong> ejemplo anterior, cuyo código pue<strong>de</strong>s ver a continuación:Bienvenid@s a PerrosGatos
Unidad 13. Otros <strong>el</strong>ementos (II)13.2Fecha<strong>Dreamweaver</strong> permite insertar fácilmente la fecha <strong>de</strong> última modificación <strong>de</strong> las páginas.Cuando se modifica una página en la que se ha insertado este tipo <strong>de</strong> fecha, se actualizaráautomáticamente con la fecha d<strong>el</strong> sistema.Conviene insertar la fecha <strong>de</strong> modificación cuando la página ha <strong>de</strong> contener informaciónactualizada cada poco tiempo, para que los usuarios puedan saber cuando fue la última vez que seactualizaron los datos. Pero en <strong>el</strong> caso <strong>de</strong> que la página no se actualice hasta que pase ciertotiempo, es preferible no incluir la fecha <strong>de</strong> modificación.Para insertar la fecha hay que dirigirse al menú Insertar, a la opción Fecha.En la nueva ventana ya es posible establecer <strong>el</strong> formato <strong>de</strong> la fecha, y si se <strong>de</strong>sea que se actualiceo no automáticamente al modificar y guardar la página <strong>de</strong> nuevo.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Insertar fecha .Regla horizontal
El <strong>el</strong>emento que su<strong>el</strong>e utilizarse para separar secciones <strong>de</strong>ntro <strong>de</strong> una misma página es la reglahorizontal. Una regla horizontal no es más que una línea horizontal.Para insertar una regla hay que dirigirse al menú Insertar, opción HTML, luego la opción Reglahorizontal.El inspector <strong>de</strong> propieda<strong>de</strong>s para las reglas es <strong>el</strong> siguiente.A través <strong>de</strong> sus campos es posible modificar en cierta medida la apariencia <strong>de</strong> las reglas. Acontinuación tienes cuatro ejemplos <strong>de</strong> reglas horizontales.Estas reglas sólo se diferencian en las opciones Al (altura) y Sombreado. Las dos primeras, porejemplo, no tienen activada la opción Sombreado, mientras que las otras dos sí.
Unidad 13. Otros <strong>el</strong>ementos (III)13.3Código <strong>de</strong> otras páginasEn ocasiones nos gustaría incluir en nuestras páginas cosas que hemos visto en otras páginasque están publicadas en Internet.Pue<strong>de</strong>s visualizar <strong>el</strong> código fuente <strong>de</strong> dichas páginas a través d<strong>el</strong> menú Ver d<strong>el</strong> navegadorInternet Explorer, opción Código fuente, o bien mostrar <strong>el</strong> menú contextual <strong>de</strong> la página pulsandocon <strong>el</strong> botón <strong>de</strong>recho sobre <strong>el</strong>la, y pulsando <strong>de</strong>spués sobre la opción Ver código fuente. De estemodo pue<strong>de</strong>s consultar <strong>el</strong> código que se ha utilizado para realizar la página, y utilizar dicho código enlas tuyas.Visualizar <strong>el</strong> código fuente resulta útil para ver cómo se ha estructurado la página, <strong>el</strong> uso <strong>de</strong> loscomportamientos (que aparecen programados en código JavaScript), y otra serie <strong>de</strong> rutinasJavaScript.Por ejemplo, pulsa aquí para abrir una página en la que aparece un efecto en la barra <strong>de</strong> estadod<strong>el</strong> navegador, que muestra una marquesina, cuyo texto es CODIGO JAVASCRIPT - CURSO<strong>Dreamweaver</strong> 8 - AULACLIC.Si miras <strong>el</strong> código fuente <strong>de</strong> esa página podrás ver <strong>el</strong> código javascript que utiliza para conseguirese efecto en la barra <strong>de</strong> estado. El código es <strong>el</strong> siguiente:
Dicho código tiene que ir entre las etiquetas y , y añadir onload="scroller()"<strong>de</strong>ntro <strong>de</strong> la etiqueta , <strong>de</strong> modo que ésta queda d<strong>el</strong> siguiente modo:Este código no es <strong>de</strong>masiado complicado, y podrías casi sin problemas añadirlo a tus páginas,para que mostrasen los mensajes que quisieras.Pero en muchas ocasiones pue<strong>de</strong> costar enten<strong>de</strong>r <strong>el</strong> código, sobretodo si no se tienen nociones<strong>de</strong> ningún lenguaje <strong>de</strong> programación. Si no entien<strong>de</strong>s <strong>el</strong> código, pue<strong>de</strong>s cometer <strong>el</strong> error <strong>de</strong> copiarcódigo JavaScript erróneo, copiarlo <strong>de</strong> forma incompleta, insertarlo en una zona incorrecta d<strong>el</strong> códigohtml, etc.Lo importante que tienes que saber en este momento sobre las funciones JavaScript es queaparecen entre las líneas ... ... Ejercicios d<strong>el</strong> Tema 13. Prueba evaluativa d<strong>el</strong> Tema 13.
Unidad 14. Capas14.1Vamos a ver algunas <strong>de</strong> las características básicas sobre las capas, para luego po<strong>de</strong>r trabajar con<strong>el</strong>las y aplicarles algún comportamiento.IntroducciónLas capas no son más que unos recuadros, que pue<strong>de</strong>n situarse en cualquier parte <strong>de</strong> la página,en los que po<strong>de</strong>mos insertar contenido HTML. Dichas capas pue<strong>de</strong>n ocultarse y solaparse entre sí, loque proporciona gran<strong>de</strong>s posibilida<strong>de</strong>s <strong>de</strong> diseño.Las capas pue<strong>de</strong>n moverse <strong>de</strong> una posición a otra <strong>de</strong> la ventanapulsando sobre <strong>el</strong> recuadro blanco, y sin soltar <strong>el</strong> ratón, arrastrándolahacia la nueva posición.También pue<strong>de</strong>n ser redimensionadas pulsando sobre losrecuadros negros, y arrastrándolos hasta conseguir <strong>el</strong> tamaño <strong>de</strong>seado.Dentro d<strong>el</strong> recuadro <strong>de</strong> la capa es posible insertar texto, tablas, imágenes, animaciones flash, ytodos los <strong>el</strong>ementos que pue<strong>de</strong> contener un documento HTML.Este iconocapa.sirve para s<strong>el</strong>eccionar la capa al pulsar sobre él, y al <strong>el</strong>iminarlo se <strong>el</strong>imina también laInsertar una capaLas capas pue<strong>de</strong>n insertarse en una página a través d<strong>el</strong> menú Insertar, opción Objeto <strong>de</strong> diseño,Capa.Una vez se ha insertado la capa, pue<strong>de</strong>n editarse sus atributos, pero para <strong>el</strong>lo hay ques<strong>el</strong>eccionarla primero.Una capa pue<strong>de</strong> s<strong>el</strong>eccionarse <strong>de</strong> varias maneras. Una <strong>de</strong> <strong>el</strong>las es pulsando sobre <strong>el</strong> iconocorrespondiente, pero esto no resulta útil cuando existen muchas capas en un mismo documento, yaque todas las capas tienen asociada una imagen igual a esta, y no es fácil s<strong>el</strong>eccionar la <strong>de</strong>seada ala primera.
Cuando existen varias capas en un mismo documento, espreferible s<strong>el</strong>eccionarlas a través <strong>de</strong> la pestaña Capas d<strong>el</strong> pan<strong>el</strong>Diseño, que pue<strong>de</strong> abrirse a través d<strong>el</strong> menú Ventana opciónCapas. Si la opción Capas no te aparece directamente en estemenú, posiblemente esté <strong>de</strong>ntro <strong>de</strong> la opción Otros. Tambiénpue<strong>de</strong>s abrir <strong>el</strong> pan<strong>el</strong> pulsando F2.En dicho pan<strong>el</strong> aparecen los nombres <strong>de</strong> todas las capas queexisten en <strong>el</strong> documento actual, y para s<strong>el</strong>eccionar una <strong>de</strong> <strong>el</strong>lassimplemente hay que pulsar sobre <strong>el</strong> nombre en <strong>el</strong> pan<strong>el</strong>.Formato <strong>de</strong> una capaLas propieda<strong>de</strong>s <strong>de</strong> la capa se especifican a través <strong>de</strong> su inspector <strong>de</strong> propieda<strong>de</strong>s.ID <strong>de</strong> capa es <strong>el</strong> nombre <strong>de</strong> la capa. También pue<strong>de</strong> ser cambiado a través d<strong>el</strong> pan<strong>el</strong> Capas,haciendo doble clic sobre él.Iz y Sup indican la distancia en píx<strong>el</strong>es que hay entre los límites izquierdo y superior d<strong>el</strong>documento y la capa.An y Al indican la anchura y la altura <strong>de</strong> la capa.Índice Z es <strong>el</strong> número <strong>de</strong> or<strong>de</strong>n <strong>de</strong> colocación <strong>de</strong> las capas. Este valor también pue<strong>de</strong> cambiarse através d<strong>el</strong> pan<strong>el</strong> Capas. Una capa será solapada por aqu<strong>el</strong>las capas cuyo índice Z sea mayor que <strong>el</strong>suyo.Vis indica la visibilidad inicial <strong>de</strong> la capa. La visibilidad pue<strong>de</strong> ser <strong>de</strong> cuatro tipos:Default (visibilidad según <strong>el</strong> navegador),Inherit (se muestra la capa mientras la página a la que pertenece también se estémostrando),Visible (muestra la capa, aunque la página no se esté viendo) yHid<strong>de</strong>n (la capa está oculta).La visibilidad también pue<strong>de</strong> cambiarse a través d<strong>el</strong> pan<strong>el</strong> Capas, pulsando sobre la imagen d<strong>el</strong>ojo. El ojo abierto indica Visible, y <strong>el</strong> ojo cerrado indica Hid<strong>de</strong>n.A través <strong>de</strong> Im. fondo y Col pue<strong>de</strong> indicarse una imagen o un color <strong>de</strong> fondo para la capa.Desb. (Desbordamiento) controla cómo aparecen las capas en un navegador cuando <strong>el</strong> contenidoexce<strong>de</strong> <strong>el</strong> tamaño especificado <strong>de</strong> la capa.Visible indica que <strong>el</strong> contenido adicional aparece en la capa. La capa se amplíapara darle cabida.
Hid<strong>de</strong>n (oculto) especifica que <strong>el</strong> contenido adicional no se mostrará en <strong>el</strong>navegador.Scroll (<strong>de</strong>splazamiento) especifica que <strong>el</strong> navegador <strong>de</strong>berá añadir barras <strong>de</strong><strong>de</strong>splazamiento a la capa tanto si se necesitan como si no.Auto (automático) hace que <strong>el</strong> navegador muestre barras <strong>de</strong> <strong>de</strong>splazamiento parala capa cuando sean necesarias (es <strong>de</strong>cir, cuando <strong>el</strong> contenido <strong>de</strong> la capa supere suslímites).Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Insertar una capa.Ejercicios d<strong>el</strong> Tema 14. Prueba evaluativa d<strong>el</strong> Tema 14.
Unidad 15. Comportamientos (I)15.1En este tema vamos a ver las características básicas <strong>de</strong> los comportamientos, así como un par<strong>de</strong> ejemplos <strong>de</strong> entre sus posibles aplicaciones.IntroducciónLos comportamientos son acciones que suce<strong>de</strong>n cuando los usuarios realizan algún eventosobre un objeto, como pue<strong>de</strong> ser mover <strong>el</strong> ratón sobre una imagen, pulsar sobre un texto, hacerdoble clic sobre un mapa <strong>de</strong> imagen, etc.Los comportamientos no existen como código HTML, se programan en JavaScript. <strong>Dreamweaver</strong>permite insertarlos a través d<strong>el</strong> pan<strong>el</strong> Comportamientos, por lo que no es necesario escribir ningunalínea <strong>de</strong> código JavaScript para programarlos.La imagen que aparece a continuación tiene asociado un comportamiento. Sitúa <strong>el</strong> puntero sobre<strong>el</strong>la para ver qué es lo que ocurre.Estás visualizando una capa que estaba oculta.Si <strong>de</strong>jas <strong>de</strong> situar <strong>el</strong> puntero sobre la imagen, la capa volveráa ocultarse.La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo <strong>de</strong>comportamiento lo veremos más ad<strong>el</strong>ante.Otros comportamientos que ya has visto son los que se aplican sobre las imágenes <strong>de</strong> sustitucióny las barras <strong>de</strong> navegación, que ya están pre<strong>de</strong>finidos, por lo que no es necesario introducir esteconjunto <strong>de</strong> comportamientos a través d<strong>el</strong> pan<strong>el</strong> Comportamientos.Para validar formularios ya viste algunas características d<strong>el</strong> pan<strong>el</strong> Comportamientos. Vamos arecordar las que necesitamos para po<strong>de</strong>r insertar comportamientos más tar<strong>de</strong>.El pan<strong>el</strong> Comportamientos se pue<strong>de</strong> abrir a través d<strong>el</strong> menú Ventana, opción
Comportamientos. También pulsando Mayús+F3.En este pan<strong>el</strong> hay que <strong>de</strong>splegar <strong>el</strong> botón pulsando sobre él, yen Mostrar eventos para <strong>el</strong>egir una versión <strong>de</strong> la lista <strong>de</strong>navegadores.Algunos comportamientos no funcionan para algunosnavegadores, por lo que <strong>de</strong>pendiendo d<strong>el</strong> navegador <strong>el</strong>egidoaparecerán unos u otros comportamientos posibles.Existen comportamientos que funcionan en Internet Explorer perono en Netscape. Debido a que la mayoría <strong>de</strong> usuarios utilizaInternet Explorer, vamos a s<strong>el</strong>eccionar este navegador. Pue<strong>de</strong>ss<strong>el</strong>eccionar alguna <strong>de</strong> sus últimas versiones: IE 5.5 o IE 6.0.Una vez <strong>el</strong>egido un navegador ya no es necesario volver a<strong>el</strong>egirlo las siguientes veces que se <strong>de</strong>see insertar algúncomportamiento.Insertar un comportamientoCuando ya hay establecido algún navegador, ya se pue<strong>de</strong>ninsertar comportamientos.Lo primero que hay que hacer es s<strong>el</strong>eccionar <strong>el</strong> objeto sobre <strong>el</strong>que se ha <strong>de</strong> aplicar <strong>el</strong> comportamiento, como pue<strong>de</strong> ser unaimagen, un fragmento <strong>de</strong> texto, etc.Al <strong>de</strong>splegar <strong>el</strong> botón d<strong>el</strong> pan<strong>el</strong> Comportamientos aparec<strong>el</strong>a opción Mostrar eventos para, a través <strong>de</strong> la cual se había<strong>el</strong>egido <strong>el</strong> navegador. También aparece la lista <strong>de</strong> todas lasacciones posibles para <strong>el</strong> navegador <strong>el</strong>egido previamente, <strong>de</strong>entre las que se pue<strong>de</strong> s<strong>el</strong>eccionar una.Según <strong>el</strong> <strong>el</strong>emento sobre <strong>el</strong> que se <strong>de</strong>see aplicar <strong>el</strong>comportamiento, se podrán <strong>el</strong>egir unas acciones, mientras queotras no.En este caso la acción Validar formulario no pue<strong>de</strong>s<strong>el</strong>eccionarse porque no existe ningún formulario en la página.Después <strong>de</strong> <strong>el</strong>egir alguna acción, <strong>el</strong> comportamientocorrespondiente aparece en <strong>el</strong> pan<strong>el</strong> Comportamientos. En estecaso se han insertado dos comportamientos.Como pue<strong>de</strong>s ver, cada comportamiento tiene asociados unevento y una acción.Las acciones son las que se han <strong>el</strong>egido en la lista anterior y <strong>el</strong>evento indica cuándo se <strong>de</strong>be <strong>de</strong> realizar la acción.
Para <strong>el</strong>iminar un comportamiento, hay que s<strong>el</strong>eccionarlo en <strong>el</strong> pan<strong>el</strong> Comportamientos y pulsarsobre <strong>el</strong> botón . También es posible cambiar <strong>el</strong> or<strong>de</strong>n <strong>de</strong> los comportamientos aplicados a unobjeto, s<strong>el</strong>eccionándolos y or<strong>de</strong>nándolos mediante los botones .
Unidad 15. Comportamientos (II)15.2Mostrar-Ocultar capasUno <strong>de</strong> los comportamientos más habitual e interesante es <strong>el</strong> <strong>de</strong> Mostrar-Ocultar capas. Resultaobvio que para po<strong>de</strong>r aplicar este comportamiento han <strong>de</strong> existir capas en <strong>el</strong> documento.En la página anterior tenías un ejemplo <strong>de</strong> este tipo. Vamos a ver quéeventos y acciones hay que establecer para que se produzca dichocomportamiento.Después <strong>de</strong> s<strong>el</strong>eccionar la imagen hay que s<strong>el</strong>eccionar una acción d<strong>el</strong>a lista, pulsando sobre <strong>el</strong> botón . En este caso la acción tiene queser la <strong>de</strong> Mostrar-Ocultar capas.Tras <strong>el</strong>egir la acción, hay que especificar qué capas han <strong>de</strong> mostrarseu ocultarse para <strong>el</strong> evento. Para <strong>el</strong>lo hay que pulsar dos veces sobre laacción, en <strong>el</strong> pan<strong>el</strong> Comportamientos.Entonces aparece una nueva ventana, con la lista <strong>de</strong> todas las capasque hay en la página, en la que pue<strong>de</strong> indicarse la variación que se va a producir sobre la visibilidad<strong>de</strong> cada una <strong>de</strong> las capas.Pue<strong>de</strong> indicarse si se van aMostrar, si se van a Ocultar, o sivan a adquirir la visibilidad inicial(Pre<strong>de</strong>terminada).la ventana.Para <strong>de</strong>terminar la visibilidad <strong>de</strong>cada una <strong>de</strong> las capas esnecesario s<strong>el</strong>eccionarlas una poruna, indicando su visibilidad através <strong>de</strong> los botones inferiores <strong>de</strong>No es necesario aplicar una visibilidad diferente a todas las capas <strong>de</strong> la página, solamente a lasque se <strong>de</strong>sea que cambien al producirse <strong>el</strong> evento. Por ejemplo, en este caso a la capa gatomes nose le ha aplicado ninguna visibilidad diferente, ya que no se <strong>de</strong>sea que varíe al producirse <strong>el</strong> evento.Si se <strong>de</strong>sea <strong>el</strong>iminar una visibilidad establecida para alguna <strong>de</strong> las capas, simplemente hay quevolver a pulsar sobre <strong>el</strong> botón correspondiente a la visibilidad que ya tiene aplicada. Por ejemplo,para <strong>el</strong>iminar la visibilidad aplicada a la capa gatosemana habría que volver a pulsar sobre <strong>el</strong> botónMostrar.Hay que tener en cuenta en este caso que lo que se <strong>de</strong>sea es que al situar <strong>el</strong> puntero sobre laimagen, se muestre la capa, y que cuando <strong>el</strong> puntero <strong>de</strong>je <strong>de</strong> estar sobre la imagen, la capa sevu<strong>el</strong>va a ocultar. Para <strong>el</strong>lo es necesario insertar dos comportamientos con la acción Mostrar-Ocultarcapas. Uno <strong>de</strong> <strong>el</strong>los mostrará la capa para <strong>el</strong> evento onMouseOver (cuando <strong>el</strong> ratón esté sobre),
mientras que <strong>el</strong> otro la ocultará para <strong>el</strong> evento onMouseOut (cuando <strong>el</strong> ratón esté fuera).Llamar JavaScriptOtro <strong>de</strong> los comportamientos que pue<strong>de</strong> aplicarse sobre algún objeto es <strong>el</strong> <strong>de</strong> Llamar Javascript.Este comportamiento permite insertar código JavaScript <strong>de</strong>ntro d<strong>el</strong> código d<strong>el</strong> documento.Por ejemplo, es posible hacer que se cierre la ventana d<strong>el</strong> navegador al pulsar sobre un objeto.Para <strong>el</strong>lo hay que insertar la línea JavaScript "window.close();".Al igual que para <strong>el</strong> ejemplo <strong>de</strong> las capas, lo primero que hay que hacer es s<strong>el</strong>eccionar <strong>el</strong> objetosobre <strong>el</strong> que se <strong>de</strong>sea aplicar <strong>el</strong> comportamiento. Seguidamente hay que s<strong>el</strong>eccionar la acciónLlamar Javascript a través d<strong>el</strong> botón .Entonces aparece una nueva ventana en la que hay que introducir la línea JavaScript.Una vez insertado <strong>el</strong> comportamiento, en <strong>el</strong> pan<strong>el</strong>Comportamientos hay que establecer <strong>el</strong> evento onclick (alhacer clic) para que la llamada a JavaScript se produzca alpulsar una vez sobre <strong>el</strong> objeto.Pulsando dos veces sobre la acción vu<strong>el</strong>ve a abrirse laventana anterior, y es posible modificar la línea <strong>de</strong> código.Para practicar pue<strong>de</strong>s realizar <strong>el</strong> Ejercicio paso a paso Crear comportamiento.Ejercicios d<strong>el</strong> Tema 15. Prueba evaluativa d<strong>el</strong> Tema 15
Unidad 16. Comportamientos Avanzados (I)16.1En <strong>el</strong> tema anterior vimos algunos <strong>de</strong> los comportamientos básicos, en este tema veremos otroscomportamientos y veremos cómo utilizarlos y aprovecharnos <strong>de</strong> esta característica <strong>de</strong> <strong>Dreamweaver</strong>para crear diversas funcionalida<strong>de</strong>s automáticamente.Mensajes emergentesEste comportamiento te permitirá crear avisos emergentes como en <strong>el</strong> siguiente ejemplo.Haz clic aquí.Este comportamiento es útil para po<strong>de</strong>r enviar mensajes al usuario. Ten en cuenta que no <strong>de</strong>berásabusar <strong>de</strong> <strong>el</strong>los, pues a la larga pue<strong>de</strong>n resultar un poco incómodos, utilízalos con un objetivoconcreto y no porque quieras atraer la atención d<strong>el</strong> usuario.Para crear un mensaje emergente <strong>de</strong>berás s<strong>el</strong>eccionar <strong>el</strong> <strong>el</strong>emento al cual irá asociado <strong>el</strong>mensaje, en <strong>el</strong> ejemplo es un texto.Una vez s<strong>el</strong>eccionado ves al pan<strong>el</strong> Comportamientos (Mayus+F4) pulsa <strong>el</strong> botónla opción Mensaje emergente.y s<strong>el</strong>eccionaSe abrirá <strong>el</strong> siguiente cuadro <strong>de</strong> diálogo:Aquí <strong>de</strong>berás introducir <strong>el</strong> Mensaje que quieras que se muestre. Pulsa Aceptar cuando hayasacabado y estará listo.Es aconsejable que asocies este comportamiento al evento onClick (cuando <strong>el</strong> usuario hace clic).Es más intuitivo para <strong>el</strong> usuario, por ejemplo, si asocias <strong>el</strong> mensaje a un evento onMouseOver(cuando se pase <strong>el</strong> ratón por encima) <strong>el</strong> usuario no sabrá muy bien porque se ha generado <strong>el</strong>mensaje <strong>de</strong> aviso.En realidad no habrá hecho ningún movimiento voluntario para recibir ese tipo <strong>de</strong> respuesta.Debido a esto (<strong>el</strong> estimulo-respuesta que espera <strong>el</strong> usuario), <strong>el</strong> evento onClick es <strong>el</strong> más indicadopara este caso.
Texto <strong>de</strong> la Barra <strong>de</strong>EstadoEl Texto <strong>de</strong> la Barra <strong>de</strong> Estado es un <strong>el</strong>emento muy utilizado a la hora <strong>de</strong> personalizar unapágina web. Aunque no funciona en algunos navegadores.Si observas esta barra cuando navegas verás que va cambiando su texto según te encuentressobre un enlace o no. Normalmente, las páginas que no tratan la Barra <strong>de</strong> Estado (por ejemplo,esta) no muestran ninguna información. Únicamente cuando posicionas <strong>el</strong> puntero sobre un enlace <strong>el</strong>texto <strong>de</strong> la Barra cambia para mostrar la dirección a la que este se dirige.Observa este ejemplo, si haces clic sobre él te llevará a la página principal <strong>de</strong> aulaClic.Cambiar <strong>el</strong> Texto <strong>de</strong> la Barra <strong>de</strong> Estado significaría modificar <strong>el</strong> texto que aparece en esemomento cuando realizamos un evento sobre un <strong>el</strong>emento en particular. Por ejemplo:aulaClic.esEste comportamiento es muy útil para personalizar mucho más tu página y mostrar informaciónque <strong>de</strong> otra forma no sería posible. Aunque no todos los navegadores son capaces <strong>de</strong> respon<strong>de</strong>r aeste comportamiento.Para crear este comportamiento s<strong>el</strong>ecciona <strong>el</strong> <strong>el</strong>emento al cual quieres asociar estecomportamiento. Abre <strong>el</strong> pan<strong>el</strong> Comportamientos (Mayus+F4) y pulsa <strong>el</strong> botón .Luego s<strong>el</strong>ecciona la opción Definir texto y haz clic en Establecer texto <strong>de</strong> la barra <strong>de</strong> estado.Aquí <strong>de</strong>berás escribir <strong>el</strong> texto que quieres que aparezca en <strong>el</strong> cuadro Mensaje, luego pulsaAceptar y listos.¿Dón<strong>de</strong> y cómo asociar <strong>el</strong> texto en una página? es sencillo. Una <strong>de</strong> las opciones que te da estecomportamiento es po<strong>de</strong>r asociar un texto en concreto a la página en sí.Es <strong>de</strong>cir, que cuando abras una página se muestre inmediatamente (y permanentemente) un textoen la barra <strong>de</strong> estado. Eso es posible creando <strong>el</strong> mensaje asociado al body <strong>de</strong> la página (para <strong>el</strong>lotendrás que insertar <strong>el</strong> comportamiento sin s<strong>el</strong>eccionar ningún <strong>el</strong>emento para que se asocie con todala página) y lanzándolo en <strong>el</strong> evento onLoad (en la carga d<strong>el</strong> documento). De esta forma cuando seabra la página se mostrará <strong>el</strong> mensaje en la barra <strong>de</strong> estado y permanecerá allí hasta que seproduzca un cambio (por ejemplo, que se posicione <strong>el</strong> cursor sobre un enlace).Ahora veamos cómo <strong>de</strong>bemos actuar al establecer texto para los enlaces. En este caso seránecesario que introduzcamos dos comportamientos.
El primero, asociado al evento onMouseOver (cuando <strong>el</strong> ratón se encuentra encima) que mostrará<strong>el</strong> mensaje que queramos.El segundo <strong>de</strong>berá ir asociado al evento onMouseOut (cuando <strong>el</strong> ratón <strong>de</strong>ja <strong>de</strong> estar encima) que<strong>de</strong>berá limpiar la barra <strong>de</strong> estado para que recupere su estado anterior.En <strong>el</strong> caso <strong>de</strong> que hubiésemos establecido un mensaje para <strong>el</strong> body <strong>de</strong> la página, al salir <strong>de</strong> unenlace (en <strong>el</strong> onMouseOut) <strong>de</strong>beremos volver a escribir ese mensaje para que siga mostrándose.En <strong>el</strong> caso <strong>de</strong> que la página no tuviese un mensaje personalizado, <strong>de</strong>ja <strong>el</strong> cuadro Mensaje enblanco para que la barra <strong>de</strong> estado recupere su estado natural.Observa que si no estableces <strong>el</strong> segundo comportamiento, cuando posiciones <strong>el</strong> ratón sobre <strong>el</strong>enlace (o imagen, párrafo..., da igual) <strong>el</strong> texto <strong>de</strong> la barra <strong>de</strong> estado cambiará. Pero cuando <strong>el</strong> ratón<strong>de</strong>je <strong>de</strong> estar sobre <strong>el</strong> <strong>el</strong>emento no habrá ninguna or<strong>de</strong>n para que <strong>el</strong> texto vu<strong>el</strong>va a cambiar y semantendrá fijo con <strong>el</strong> mensaje d<strong>el</strong> anterior comportamiento.
Unidad 16. Comportamientos Avanzados (II)16.2Carga Previa <strong>de</strong>ImágenesEste comportamiento te será muy útil para mejorar la visualización <strong>de</strong> tus páginas web.Al cargar previamente las imágenes contenidas en la página obligamos al navegador a <strong>de</strong>scargarlas imágenes con prioridad sobre <strong>el</strong> resto d<strong>el</strong> documento.Así cuando la página finalmente se visualiza (porque ha terminado la carga) <strong>el</strong> usuario verá laestructura completa <strong>de</strong> la página con las imágenes incluidas ya cargadas y mostrándose.Este método se diferencia d<strong>el</strong> tradicional en que si no establecemos este comportamiento, lapágina se carga (sólo texto) y se visualiza.Una vez terminada esta carga, <strong>el</strong> navegador empieza la <strong>de</strong>scarga <strong>de</strong> las imágenes. Por lo que hayunos momentos en los que la página no se muestra tal y como fue concebida, e incluso su estructurapue<strong>de</strong> verse afectada si no se introdujeron los valores <strong>de</strong> altura y anchura <strong>de</strong> las imágenescontenidas (<strong>el</strong> texto se dispondría sin tenerlas en cuenta hasta que se <strong>de</strong>scargasen).Para evitar esto utilizaremos la Carga Previa <strong>de</strong> Imágenes.Para <strong>el</strong>lo <strong>de</strong>beremos abrir <strong>el</strong> pan<strong>el</strong> Comportamientos (Mayus+F4) y hacer clic sobre <strong>el</strong> botón ,s<strong>el</strong>ecciona, entonces, la opción Carga previa <strong>de</strong> imágenes.Se abrirá <strong>el</strong> siguiente cuadro <strong>de</strong> diálogo:Aquí <strong>de</strong>berás incluir las imágenes que quieras que se carguen utilizando los botones ,podrás indicar su ubicación pulsando <strong>el</strong> botón Examinar.Respecto a este comportamiento <strong>de</strong>berás <strong>de</strong> tener en cuenta dos cosas. La primera y más obviaes que no cargues imágenes que no vayas a utilizar. No tiene sentido que <strong>de</strong>saproveches tiempo <strong>de</strong><strong>de</strong>scarga y visualización en cargar una imagen que no vas a utilizar.
El segundo consejo es que no abuses <strong>de</strong> este comportamiento. Es verdad que es muy útil, perosólo cuando las imágenes a cargar no son muchas y a<strong>de</strong>más son bastantes ligeras.Si cargas previamente imágenes muy pesadas, o <strong>de</strong>masiadas como para que <strong>el</strong> navegador se<strong>de</strong>tenga durante unos segundos mientras realiza la carga, es posible que <strong>el</strong> usuario al ver que tupágina tarda <strong>de</strong>masiado en cargarse la abandone.
Unidad 16. Comportamientos Avanzados (III)16.3Abrir Ventana d<strong>el</strong>NavegadorEste comportamiento, aunque a primera vista creas que no sirva para mucho, te ayudará a crearenlaces mucho más personalizados.Asociaremos este comportamiento normalmente a un enlace, o como mucho a una imagen o unbotón. Pero siempre lo haremos asociado al evento onClick <strong>de</strong> estos <strong>el</strong>ementos.Otra opción es asociarlo al evento onLoad d<strong>el</strong> body para que cuando se cargue <strong>el</strong> documentoabra al mismo tiempo una nueva ventana que dirigiremos a la URL que queramos.En esencia este comportamiento es un creador <strong>de</strong> pop-ups o ventanas emergentes, así quesi <strong>el</strong> usuario dispone <strong>de</strong> un bloqueador es posible que no se pueda llevar a cabo la apertura <strong>de</strong> lanueva ventana.Pero veamos qué <strong>de</strong>bemos hacer para po<strong>de</strong>r abrir una ventana <strong>de</strong> este modo.Primero s<strong>el</strong>eccionaremos <strong>el</strong>emento asociado al comportamiento, si lo que queremos es que seasocie al body <strong>de</strong> la página haremos clic en una área vacía d<strong>el</strong> documento.Luego abre <strong>el</strong> pan<strong>el</strong> Comportamientos (Mayus+F4) y pulsa <strong>el</strong> botónpara <strong>de</strong>splegar la lista.S<strong>el</strong>ecciona la opción Abrir ventana d<strong>el</strong> navegador y verás <strong>el</strong> siguiente cuadro <strong>de</strong> diálogo:Veamos las opciones que po<strong>de</strong>mos s<strong>el</strong>eccionar aquí.En Mostrar URL: escribiremos la URL <strong>de</strong> la página que queremos abrir.En los cuadros <strong>de</strong> texto <strong>de</strong> Ancho <strong>de</strong> la ventana: y Alto <strong>de</strong> la ventana: podremos especificarsu tamaño en píx<strong>el</strong>es.El cuadro Nombre <strong>de</strong> la ventana: te permitirá darle un nombre a la nueva ventana. Así, mástar<strong>de</strong>, utilizando JavaScript, podríamos referenciarnos a <strong>el</strong>la utilizando este nombre.
En Atributos: marca las casillas para que los <strong>el</strong>ementos como la barra <strong>de</strong> estado o la barra <strong>de</strong>menús aparezcan en la nueva ventana.Si <strong>de</strong>jas todos <strong>de</strong>smarcados, la ventana se abrirá sin ningún <strong>el</strong>emento y aparecerá únicamentero<strong>de</strong>ada <strong>de</strong> un marco <strong>de</strong> página.
Unidad 16. Comportamientos Avanzados (IV)16.4Comprobar NavegadorPo<strong>de</strong>mos utilizar este comportamiento para crear dos páginas diferentes <strong>de</strong>pendiendo d<strong>el</strong>navegador que esté utilizando <strong>el</strong> usuario.Esta opción existe <strong>de</strong>bido a que Internet Explorer su<strong>el</strong>e comportarse <strong>de</strong> forma diferente al resto <strong>de</strong>navegadores. Su política <strong>de</strong> seguimiento <strong>de</strong> los estándares varía un poco respecto a las <strong>de</strong>más. Porlo que una página se pue<strong>de</strong> ver diferente en IE y en Firefox siendo que tiene <strong>el</strong> mismo código!Para saltarnos este error entre los navegadores aparece este comportamiento que utilizaremospara evaluar <strong>el</strong> navegador que está utilizando <strong>el</strong> usuario y mostrando una página u otra utilizandoredireccionamientos.Veamos <strong>el</strong> cuadro <strong>de</strong> diálogo que se muestra al s<strong>el</strong>eccionar Comprobar navegador al hacer clicen <strong>el</strong> botón d<strong>el</strong> pan<strong>el</strong> Comportamientos:Como pue<strong>de</strong>s ver hay dos bloques importantes en esta ventana Netscape Navigator e InternetExplorer, esto es <strong>de</strong>bido a que son los más utilizados.Po<strong>de</strong>mos s<strong>el</strong>eccionar la versión a partir <strong>de</strong> la cual <strong>el</strong> cambio <strong>de</strong> URL se realice, si no tienes muyclaro qué valores <strong>de</strong>bes escribir déjalo como está. Los valores por <strong>de</strong>fectos son bastante acertados.Luego <strong>de</strong>berás s<strong>el</strong>eccionar qué quieres hacer en cada uno <strong>de</strong> los casos (que se cumpla la versióno no). Para <strong>el</strong>lo <strong>de</strong>berás r<strong>el</strong>lenar las dos cajas <strong>de</strong> texto que se encuentran al pie <strong>de</strong> la ventana URL yAlt URL (URL alternativa).En los <strong>de</strong>splegables encontrarás también la opción Permanecer en esta página cuyo uso esbastante aconsejable, así evitarás saltos <strong>de</strong> URLs innecesarios.
Finalmente <strong>el</strong> tercer bloque Otros navegadores te permite exactamente las mismas opciones qu<strong>el</strong>as anteriores. Esto, en realidad, se <strong>de</strong>be a que las versiones antiguas <strong>de</strong> Netscape e IE son las másproblemáticas y por <strong>el</strong>lo se <strong>de</strong>dican páginas especiales para <strong>el</strong>los.Un consejo que te podríamos dar es que te instales diferentes navegadores en tu PC y hagaspruebas d<strong>el</strong> visionado <strong>de</strong> las páginas antes <strong>de</strong> publicarlas. Así te asegurarás <strong>de</strong> que <strong>el</strong> resultado seaóptimo en todos los casos.Este comportamiento <strong>de</strong>be ir asociado al evento onLoad <strong>de</strong> la etiqueta body para que se ejecuteen la carga <strong>de</strong> la página.Comprobar Plug-insOtro comportamiento que tiene que ver con la comprobación <strong>de</strong> las características d<strong>el</strong> navegadord<strong>el</strong> usuario es la opción Comprobar Plug-ins.Si haces clic sobre <strong>el</strong>la verás <strong>el</strong> siguiente cuadro <strong>de</strong> diálogo:Este comportamiento nos dará la posibilidad <strong>de</strong> comprobar si <strong>el</strong> navegador tiene instalados losplug-ins (o añadidos) necesarios para que pueda ver archivos <strong>de</strong> tipo Flash, Quicktime,Shockwave, RealPlayer, etc...Para <strong>el</strong>lo <strong>de</strong>beremos s<strong>el</strong>eccionar <strong>el</strong> tipo <strong>de</strong> plug-in que requerimos para que nuestra página sevisualice correctamente, en <strong>el</strong> caso <strong>de</strong> que no se encuentre en <strong>el</strong> <strong>de</strong>splegable S<strong>el</strong>eccionar:<strong>de</strong>beremos escribir su nombre en <strong>el</strong> cuadro <strong>de</strong> texto Introducir: (aunque esto ocurrirá en contadasocasiones).R<strong>el</strong>lena los campos <strong>de</strong> URL siguientes. El primero indicará la ruta <strong>de</strong> la página que quieres que semuestre si <strong>el</strong> plug-in existe en <strong>el</strong> navegador d<strong>el</strong> usuario. Déjalo en blanco si quieres que se que<strong>de</strong> enla página en la que está.Y en <strong>el</strong> campo De lo contrario, ir a URL: escribe la ruta a la que <strong>de</strong>be redirigirse <strong>el</strong> navegador encaso <strong>de</strong> que no tuviese <strong>el</strong> plug-in instalado. Aquí tienes dos opciones, o bien redirigir al usuario a lapágina don<strong>de</strong> <strong>de</strong>scargarse <strong>el</strong> plug-in para po<strong>de</strong>r visualizar la tuya correctamente, o redirigirlo a unapágina que hayas creado para aqu<strong>el</strong>los que no cumplan los requisitos mínimos d<strong>el</strong> sitio.
Este comportamiento también <strong>de</strong>berá ir asociado al evento onLoad d<strong>el</strong> body para que puedaejecutarse en la carga <strong>de</strong> la página.Normalmente este comportamiento sólo tendrá un uso práctico en Internet Explorer, ya que lamayoría d<strong>el</strong> resto <strong>de</strong> los navegadores soportan por sí solos la <strong>de</strong>tección <strong>de</strong> plug-ins instalados yredireccionan a la fuente d<strong>el</strong> plug-in directamente.
Unidad 16. Comportamientos Avanzados (V)16.5Menús <strong>de</strong> SaltoPrincipio d<strong>el</strong> formularioFinal d<strong>el</strong> formularioSección 1Aunque este comportamiento se encuentra en <strong>el</strong> listado d<strong>el</strong> pan<strong>el</strong> Comportamientos vamos aapren<strong>de</strong>r a insertarlo <strong>de</strong>s<strong>de</strong> otro lugar ya que te será más fácil.Un menú <strong>de</strong> salto no es más que un menú <strong>de</strong>splegable <strong>de</strong>s<strong>de</strong> <strong>el</strong> que pue<strong>de</strong>s saltar <strong>de</strong> una páginaa otra con sólo s<strong>el</strong>eccionar la opción correspondiente en <strong>el</strong> menú. Justo al principio d<strong>el</strong> apartadotienes un ejemplo (no es funcional pero pue<strong>de</strong>s <strong>de</strong>splegarlo para hacerte una i<strong>de</strong>a) que ilustra <strong>el</strong>aspecto que tendría este tipo <strong>de</strong> menús.Insertarlo es muy sencillo, sólo tienes que hacer clic en Insertar, s<strong>el</strong>eccionar la opción Formularioy en <strong>el</strong> <strong>de</strong>splegable <strong>el</strong>egir Menú <strong>de</strong> salto.Se abrirá este cuadro <strong>de</strong> diálogo:Para crear <strong>el</strong> menú <strong>de</strong>berás introducir los <strong>el</strong>ementos (opciones) que lo forman. Para <strong>el</strong>lo escribe enTexto <strong>el</strong> título <strong>de</strong> la página y en Al s<strong>el</strong>eccionarse, ir a URL la ruta <strong>de</strong> la página que se tiene queabrir si <strong>el</strong> usuario s<strong>el</strong>ecciona esta opción d<strong>el</strong> menú.Una vez r<strong>el</strong>lenados estos campos, haz clic en <strong>el</strong> botón .Luego repite <strong>el</strong> proceso tantas veces como <strong>el</strong>ementos en <strong>el</strong> menú quieras insertar.Cuando hayas acabado <strong>de</strong>ci<strong>de</strong> en qué ventana quieres abrir los enlaces en Abrir URL en: y daleun nombre al menú (para reconocerlo mejor más tar<strong>de</strong>) en Nombre d<strong>el</strong> menú.
Luego pue<strong>de</strong>s marcar la opción S<strong>el</strong>eccionar primer <strong>el</strong>emento tras <strong>el</strong> cambio <strong>de</strong> URL para quecuando se abra la ventana <strong>el</strong> <strong>el</strong>emento d<strong>el</strong> menú que se muestre sea <strong>el</strong> primero.Déjalo <strong>de</strong>smarcado si quieres que se muestre <strong>el</strong> <strong>de</strong> la página que se está visualizando.Principio d<strong>el</strong> formularioSección 1Final d<strong>el</strong> formularioLuego marca la opción Insertar botón Ir tras <strong>el</strong> menú para que se añada un botón al formulario.Si escoges esta opción verás que se crea un menú como <strong>el</strong> que tienes justo sobre este párrafo.El funcionamiento <strong>de</strong> este menú <strong>de</strong> salto es muy parecido al anterior, sólo que una vezs<strong>el</strong>eccionada la página que mostrar hay que pulsar <strong>el</strong> botón para que se efectúe <strong>el</strong> salto.
Unidad 16. Comportamientos Avanzados (VI)16.6Menús EmergentesEsta es una <strong>de</strong> las herramientas más utiles en cuanto al uso <strong>de</strong> JavaScript en <strong>Dreamweaver</strong>.Como pue<strong>de</strong>s ver en la parte superior izquierda <strong>de</strong> este apartado hemos creado tres menúsemergentes <strong>de</strong> una forma sencilla y con una apariencia fenomenal, cada uno <strong>de</strong> los menús lo hemosasociado a una imagen.Lo único que <strong>de</strong>berás tener en cuenta es que estos menús sólo se pue<strong>de</strong>n asociar a enlaces o aimágenes.Si no quieres utilizar imágenes, simplemente coje <strong>el</strong> texto (colócalo en la parte superior <strong>de</strong> lapágina) y dale como vínculo #, se convertirá en un enlace vacío. El enlace no hará nada pero estarálisto para que le asignes <strong>el</strong> menú.Más ad<strong>el</strong>ante veremos que crear enlaces vistosos para utilizar en estos menús es muy fácil conCSS.La alternativa <strong>de</strong> las imágenes es muy socorrida, pue<strong>de</strong>s utilizarla en cualquier posición <strong>de</strong>ntro d<strong>el</strong>a página y son un poco más <strong>el</strong>egantes.Para crear uno <strong>de</strong> estos menús s<strong>el</strong>ecciona la imagen o <strong>el</strong> enlace que hayas creado para tal efectoy s<strong>el</strong>ecciona Mostrar menú emergente en <strong>el</strong> pan<strong>el</strong> Comportamientos haciendo clic en <strong>el</strong> botón .Se abrirá <strong>el</strong> siguiente cuadro <strong>de</strong> diálogo:
R<strong>el</strong>lenar este menú es igual <strong>de</strong> fácil que <strong>el</strong> anterior. Solo introduce <strong>el</strong> Texto d<strong>el</strong> enlace, la ruta d<strong>el</strong>Vínculo y su Destino, es <strong>de</strong>cir, dón<strong>de</strong> se abrirá.Cuando lo tengas haz clic en <strong>el</strong> botón .Hazlo tantas veces como sea necesario y luego reordénalos utilizando las flechasmoverlos <strong>de</strong> arriba a abajo y viceversa.paraCon los botones podrás crear los diferentes niv<strong>el</strong>es <strong>de</strong>ntro d<strong>el</strong> menú, con <strong>el</strong> primer colocas<strong>el</strong> <strong>el</strong>emento s<strong>el</strong>eccionado al mismo niv<strong>el</strong> que <strong>el</strong> anterior, con <strong>el</strong> segundo botón colocarás <strong>el</strong> <strong>el</strong>ementos<strong>el</strong>eccionado <strong>de</strong>ntro d<strong>el</strong> anterior.Luego pue<strong>de</strong>s visitar <strong>el</strong> resto <strong>de</strong> las pestañas para mejorar su aspecto d<strong>el</strong> menú.Realiza <strong>el</strong> ejercicio paso o paso <strong>de</strong> Menús Emergentes para practicar <strong>el</strong> resto <strong>de</strong> opciones.Ejercicios d<strong>el</strong> Tema 16. Prueba evaluativa d<strong>el</strong> Tema 16.
Unidad 17. Estilos CSS Avanzado (I)17.1En temas anteriores vimos cómo funcionaba <strong>el</strong> Pan<strong>el</strong> CSS y cómo crear hojas <strong>de</strong> estilos parapo<strong>de</strong>r utilizarlas en tus páginas web.En este tema apren<strong>de</strong>remos más sobre CSS, pero orientándonos más a qué es CSS y cómo crearestilos CSS para crear páginas que sigan los fundamentos y reglas marcadas por <strong>el</strong> W3C (WordWi<strong>de</strong> Web Consortium).Esta metodología exige que <strong>el</strong> archivo HTML solamente muestre datos organizados yestructurados con etiquetas <strong>de</strong> marcación HTML, mientras que la parte <strong>de</strong> formato recaería sobre losestilos CSS única y exclusivamente.Para po<strong>de</strong>r lograr esto <strong>de</strong>beremos dominar en profundidad CSS para po<strong>de</strong>r posicionar, modificar oadornar la página <strong>de</strong> un modo eficiente.En este tema apren<strong>de</strong>remos controles que nos ayudarán a presentar <strong>el</strong> texto e imágenes <strong>de</strong>nuestras páginas <strong>de</strong> una forma mucho más limpia y cómoda.Aplicar estilos CSSHasta ahora, si has entrado un poco en <strong>el</strong> código <strong>de</strong> las páginas, habrás visto etiquetas queintroducían estilos CSS en <strong>el</strong>las.La forma más habitual <strong>de</strong> presentarse es en la sección head <strong>de</strong> la página <strong>de</strong> esta forma:
También es posible importar archivos <strong>de</strong> hojas <strong>de</strong> estilos (<strong>de</strong> extensión .css) que hayamoscreado. Como ya hemos visto esta opción es mucho mejor porque así po<strong>de</strong>mos aplicarla sobre variaspáginas a la vez sin la necesidad <strong>de</strong> escribir <strong>el</strong> código en cada una <strong>de</strong> <strong>el</strong>las.En este caso <strong>de</strong>beremos crear un archivo CSS (Archivo → Nuevo y s<strong>el</strong>eccionando CSS) don<strong>de</strong>escribiremos las reglas <strong>de</strong> estilo d<strong>el</strong> mismo modo en <strong>el</strong> que hemos visto más arriba pero <strong>el</strong>iminado <strong>el</strong>componente HTML:body {font-family: Verdana, Arial, H<strong>el</strong>vetica, sans-serif;font-size: 12px;text-align: center;background: url('imagenes/fondo.gif') repeat-x bottom;}Luego <strong>de</strong>beríamos vincularlo en la página HTML utilizando la etiqueta link:Una página pue<strong>de</strong> contener ambos tipos <strong>de</strong> estilos CSS, como por ejemplo, tener un archivovinculado y luego un bloque <strong>de</strong> estilo incrustado. O incluso tener varias hojas <strong>de</strong> estilo asociadas.La organización <strong>de</strong> los estilos <strong>de</strong>bes <strong>de</strong>cidirla tú. Pero recuerda que cuanto menos código repitasen tus páginas, más fácil será luego <strong>de</strong> modificar o exportar.También es posible <strong>de</strong>clarar <strong>el</strong> estilo en línea. Es <strong>de</strong>cir, tal y como se van creando las etiquetasHTML, para <strong>el</strong>lo <strong>de</strong>berás utilizar <strong>el</strong> atributo style:Este texto está en rojo y con un tamaño <strong>de</strong> 30píx<strong>el</strong>esEl estilo en línea es más <strong>de</strong>saconsejado porque es más difícil <strong>de</strong> modificar al tener que buscarlopor <strong>el</strong> texto y modificándolo uno a uno.Para practicar realiza <strong>el</strong> Ejercicio Paso a Paso <strong>de</strong> Creación <strong>de</strong> una Hoja <strong>de</strong> Estilo.
Unidad 17. Estilos CSS Avanzado (II)17.2Estructura CSSUn archivo CSS (por suerte) tiene una estructura muy bien <strong>de</strong>finida, por lo que bastará con quenos aprendamos unas cuantas reglas para po<strong>de</strong>r empezar a familiarizarnos con su creación.Su estructura siempre es la siguiente:s<strong>el</strong>ector { propiedad:valor; }Esto es lo que podríamos llamar una regla CSS. Po<strong>de</strong>mos escribir tantas reglas CSS comoqueramos, siempre una <strong>de</strong>spués <strong>de</strong> otra.Entre llaves se encierra la <strong>de</strong>finición d<strong>el</strong> estilo, que viene dada por una lista <strong>de</strong> propieda<strong>de</strong>s y susvalores separados por puntos y comas.Los s<strong>el</strong>ectores son aqu<strong>el</strong>los sobre los que se aplica la <strong>de</strong>finición d<strong>el</strong> estilo CSS.Hay 3 tipos <strong>de</strong> s<strong>el</strong>ectores:Etiqueta HTMLClaseI<strong>de</strong>ntidadCualquier etiqueta HTML es un s<strong>el</strong>ector (<strong>el</strong>iminando los < y >). Por lo que cualquier <strong>el</strong>emento <strong>de</strong>una página pue<strong>de</strong> ser modificado genéricamente para que tome un mismo aspecto, por ejemplo:p {font: 13px bold Arial;}Hace que todos los párrafos (la etiqueta P) tendrán la fuente <strong>de</strong> un tamaño <strong>de</strong> 13 píx<strong>el</strong>es, estaráen negrita y será d<strong>el</strong> tipo Arial.Una clase es un s<strong>el</strong>ector que afectará sólo a aqu<strong>el</strong>las etiquetas que nosotros <strong>de</strong>cidamos, porejemplo:.rojo {color: red;}Hemos creado una clase que hace que <strong>el</strong> color <strong>de</strong> la letra que tenga asociada esta clase sea rojo.Como pue<strong>de</strong>s ver, la clase se <strong>de</strong>fine porque tiene un punto d<strong>el</strong>ante.Ahora podríamos aplicar este estilo sobre cualquier etiqueta que queramos.Este es un texto en rojo
Este es un bloque con <strong>el</strong> texto rojoEn este ejemplo estaríamos creando un párrafo o un bloque y ambos tendrían <strong>el</strong> texto <strong>de</strong> color rojopor habérs<strong>el</strong>es aplicado la misma regla CSS.Los s<strong>el</strong>ectores <strong>de</strong> clase <strong>de</strong>ben estar siempre escritos con carácteres alfanuméricos y sin utilizarespacios (utiliza <strong>el</strong> subrayado _ para separar palabras).Por último encontraríamos los s<strong>el</strong>ectores <strong>de</strong> i<strong>de</strong>ntidad. Estos sólo se aplican una vez y se asociana una etiqueta.#contenedor {width: 600px;}Más tar<strong>de</strong> en <strong>el</strong> código podremos encontrar:Este es un bloque que contiene textoLas clases <strong>de</strong> i<strong>de</strong>ntidad se i<strong>de</strong>ntifican por empezar <strong>el</strong> s<strong>el</strong>ector con un signo #. En <strong>el</strong> código <strong>de</strong>beráestablecerse la regla CSS asociándos<strong>el</strong>a al atributo ID.Este atribudo (id) recoge <strong>el</strong> nombre d<strong>el</strong> <strong>el</strong>emento que se ha creado con la etiqueta HTML.A partir <strong>de</strong> ese momento se podría referenciar a ese cuadro <strong>de</strong> texto como contenedor utilizandoJavaScript.
Unidad 17. Estilos CSS Avanzado (III)17.3S<strong>el</strong>ectores CSSAunque sólo hay tres tipos <strong>de</strong> s<strong>el</strong>ectores diferentes hay diversas formas <strong>de</strong> combinarlos paraproducir hojas <strong>de</strong> estilo más complejas.Ahora veremos estos tipos <strong>de</strong> combinación:Agrupación: Los s<strong>el</strong>ectores se pue<strong>de</strong>n agrupar separados por comas, por lo que:p { background-color: #000033; }.azul_oscuro { background-color : #000033; }#cabecera { background-color: #000033; }Pue<strong>de</strong> escribirse como:p, .azul_oscuro, #cabecera { background-color: #000033; }Descen<strong>de</strong>ncia: Po<strong>de</strong>mos obligar que un estilo sólo se aplique sobre un <strong>el</strong>emento que esté<strong>de</strong>ntro <strong>de</strong> otro. Por ejemplo:h1 {color: #0000FF;font-weight: bold;}b { color: #0000FF; }Esto hará que todos los encabezados H1 <strong>de</strong> la página sean <strong>de</strong> color azul y en negrita, y que lostextos en negrita se muestren azules.Pero, ¿qué pasa si queremos resaltar texto en los encabezados, no podremos utilizar la negrita?Título: El uso <strong>de</strong> la NegritaEn este caso <strong>de</strong>beremos hacer uso <strong>de</strong> la <strong>de</strong>scen<strong>de</strong>ncia:h1 b { color: red; }Ahora los textos marcados con la etiqueta B en los encabezados H1 serán <strong>de</strong> color rojo.Al escribir dos s<strong>el</strong>ectores seguidos obligamos a que <strong>el</strong> segundo tenga que estar <strong>de</strong>ntro d<strong>el</strong>anterior.
Pue<strong>de</strong>s utilizar todas las anidaciones que quieras y mezclar los s<strong>el</strong>ectores, por ejemplo:#contenedor p .<strong>de</strong>recha { float: right; }En este caso todas las etiquetas con la clase <strong>de</strong>recha que se encuentren <strong>de</strong>ntro <strong>de</strong> un párrafo d<strong>el</strong><strong>el</strong>emento <strong>de</strong>finido como contenedor flotarán a la <strong>de</strong>recha.S<strong>el</strong>ectores <strong>de</strong> AtributoHasta ahora hemos visto que los s<strong>el</strong>ectores se pue<strong>de</strong>n combinar <strong>de</strong> bastantes formas. Veamosque <strong>el</strong> po<strong>de</strong>r <strong>de</strong> CSS no sólo se queda ahí sino que avanza un poco más para ayudarnos aestablecer estilos según <strong>el</strong> tipo <strong>de</strong> atributos que tenga una etiqueta.Un atributo es una parte <strong>de</strong> la <strong>de</strong>scripción <strong>de</strong> un s<strong>el</strong>ector HTML. Por ejemplo, en:EnlaceA es <strong>el</strong> s<strong>el</strong>ector <strong>de</strong> la etiqueta, mientras que href y target son atributos.CSS permite entrar en <strong>el</strong> contenido <strong>de</strong> las etiquetas para cambiar sus estilos. Veamos cómohacerlo:Nombre <strong>de</strong> Atributo: Po<strong>de</strong>mos establecer estilos para etiquetas con <strong>de</strong>terminados atributos<strong>de</strong>finidos, por ejemplo:a[href] { font-family: Arial, H<strong>el</strong>vetica; }En esta línea estamos estableciendo que cualquier etiqueta a que tenga <strong>el</strong> atributo href cambie sutipo <strong>de</strong> letra a Arial o H<strong>el</strong>vética.Valor <strong>de</strong> Atributo: Po<strong>de</strong>mos aplicar estilos a etiquetas que tengan <strong>de</strong>terminado valor en unatributo, por ejemplo:a[target="_blank"] { font-weight: bold; }Esta línea hará que se convierta en negrita cualquier enlace que abra una nueva ventana alhacer clic.Interesante, ¿verdad?.
Unidad 17. Estilos CSS Avanzado (IV)17.4Pseudo-clases y Pseudo<strong>el</strong>ementosCSSPor último, y para terminar con los s<strong>el</strong>ectores veremos las pseudo-clases, <strong>el</strong>ementos queañadiremos a los s<strong>el</strong>ectores para evi<strong>de</strong>nciar algún estado.Y los pseudo-<strong>el</strong>ementos, que aplicaremos sobre los s<strong>el</strong>ectores en dos casos muy sencillos.Primero veremos 4 tipos diferentes <strong>de</strong> pseudo-clases, que hasta ahora sólo pue<strong>de</strong>n aplicarse sinningún problema sobre la etiqueta A (que utilizamos para crear vínculos). Son: :link, :visited, :hovery :active.Incluyendo estas pseudo-clases en nuestros estilos CSS podremos modificar <strong>el</strong> modo en <strong>el</strong> que sevisualizarán los enlaces.Veamos <strong>el</strong> siguiente ejemplo:a:link { color: red; }a:visited { color: blue; }a:hover { color: green; }a:active { color: y<strong>el</strong>low; }Esto hará que los enlaces se muesten <strong>de</strong> color rojo (red) en nuestra página. Es <strong>el</strong> estado link.Cuando ya hayan sido visitados por <strong>el</strong> usuario se quedarán <strong>de</strong> color azul (blue). Es <strong>el</strong> estadovisited. Este estado se renovará <strong>de</strong>pendiendo d<strong>el</strong> navegador utilizado y se mostrará durante untiempo <strong>de</strong>terminado (una sesión, etc...).En <strong>el</strong> momento en que coloques <strong>el</strong> ratón sobre él se mostrará <strong>de</strong> color ver<strong>de</strong> (green). Es <strong>el</strong> estadohover.Y finalmente en <strong>el</strong> momento que se haga clic sobre él, y mientras se mantenga pulsado <strong>el</strong> botón severá <strong>de</strong> color amarillo (y<strong>el</strong>low). Es <strong>el</strong> estado active.Prueba este enlacePue<strong>de</strong>s aplicar estas pseudo-clases <strong>de</strong> cualquier forma <strong>de</strong> las anteriores.a.menu:hover { text-<strong>de</strong>coration: none; }Esta línea hará que los <strong>el</strong>ementos A <strong>de</strong> la clase menu no muestren subrayado (ni ningún tipo <strong>de</strong><strong>de</strong>coración) cuando se coloque <strong>el</strong> ratón sobre él.
Pue<strong>de</strong>s utilizarlas todas a la vez o <strong>de</strong>scartar los estados que no quieras tratar. Pero recuerda,<strong>de</strong>berán estar <strong>de</strong>claradas en <strong>el</strong> estilo CSS en este or<strong>de</strong>n para que funcionen correctamente. Si loscambias <strong>de</strong> or<strong>de</strong>n es posible que no te funcionen.Luego tenemos dos pseudo-<strong>el</strong>ementos que actuarán sobre <strong>el</strong> texto d<strong>el</strong> documento, son: :firstlettery :first-line (primera letra y primera línea respectivamente).p:first-letter { font-size: 26px; }p:first-line { font-variant: small-caps; }Pue<strong>de</strong>s ver un ejemplo <strong>de</strong> cómo actuarían estos pseudo-<strong>el</strong>ementos en la siguiente línea:Esto es una Prueba, la primera línea esta en versales y la primera letra tiene un tamaño <strong>de</strong> 26px.Para practicar los pseudo-<strong>el</strong>ementos y clases realiza <strong>el</strong> Ejercicio Paso a Paso <strong>de</strong> Pseudo<strong>el</strong>ementosy clases.
Unidad 17. Estilos CSS Avanzado (V)17.5Controles <strong>de</strong> fuenteYa hemos visto cómo manejarnos con los s<strong>el</strong>ectores, ahora veremos cómo <strong>de</strong>beremos crear las<strong>de</strong>finiciones <strong>de</strong> los estilos.Empezaremos viendo los controles <strong>de</strong> modificación <strong>de</strong> fuentes:font-family: indica la familia <strong>de</strong> fuente en la que se mostrará <strong>el</strong> texto, pue<strong>de</strong> tomar los valoresserif, sans-serif, cursive, fantasy y monospace:serif, sans-serif, cursive, FANTASY, monospace...Aunque esta propiedad también soporta que nombres un listado <strong>de</strong> diferentes fuentes. Elnavegador las buscará en <strong>el</strong> equipo d<strong>el</strong> usuario y si la encuentra la mostrará. El or<strong>de</strong>n en este casotambién es importante, pues mostrará la que primero encuentre.Es recomendable, aun así, indicar siempre una familia en <strong>el</strong> caso <strong>de</strong> que no se encontraseninguna <strong>de</strong> las fuentes instaladas, ejemplo:p { font-family: Arial, H<strong>el</strong>vetica, sans-serif; }font-style: indica <strong>el</strong> estilo <strong>de</strong> la fuente, pue<strong>de</strong> tomar los valores italic y oblique.italic, obliqueAlgunas fuentes están hechas especialmente para tener una variante en italic (cursiva), paraaqu<strong>el</strong>las que no lo tengan implementado utiliza <strong>el</strong> atributo oblique que hace que <strong>el</strong> navegador inclineautomáticamente la fuente para mostrarla en cursiva.font-variant: establece la variante <strong>de</strong> la fuente. Pue<strong>de</strong> tomar <strong>el</strong> valor small-caps (versales). Elvalor normal hará que se muestre <strong>el</strong> estado por <strong>de</strong>fecto <strong>de</strong> la fuente.SMALL-CAPS, Normalfont-weight: indica <strong>el</strong> peso <strong>de</strong> la fuente. Los valores más utilizados son: bol<strong>de</strong>r, bold y lighter.También pue<strong>de</strong>s utilizar valores d<strong>el</strong> 100 al 900, siendo <strong>el</strong> primero la fuente más ligera y <strong>el</strong> último <strong>el</strong>más pesado.bol<strong>de</strong>r, bold, lighter
font-size: establece <strong>el</strong> tamaño <strong>de</strong> la fuente. Pue<strong>de</strong>s utilizar lo valores pre<strong>de</strong>finidos smaller,larger, xx-small, x-small, small, medium, large, x-large y xx-large. Los dos primeros valoresestablecen <strong>el</strong> tamaño <strong>de</strong> la fuente en comparación a la <strong>de</strong>finida en <strong>el</strong> <strong>el</strong>emento padre don<strong>de</strong> seencuentra, así se mostrará más pequeña (smaller) o más gran<strong>de</strong> (larger).xx-small, x-small, small, medium, large, x-large, xx-largeTambién es posible establecer <strong>el</strong> tamaño d<strong>el</strong> texto utilizando porcentajes. Que también mostrará <strong>el</strong>texto en r<strong>el</strong>ación a su <strong>el</strong>emento padre.Pero, <strong>de</strong> lejos, la forma más utilizada es especificando expresamente <strong>el</strong> tamaño <strong>de</strong> la fuente enuna cifra.Las unida<strong>de</strong>s utilizadas son varias, ems, puntos, píx<strong>el</strong>es... El sistema <strong>de</strong> puntos (pt) varía unpoco según los sistemas operativos, por lo que es aconsejable utilizar alguno <strong>de</strong> los restantes:a { font-size: 12em; }p { font-size: 14px; }Es posible <strong>de</strong>finir todos estos estilos que hemos visto en una sola <strong>de</strong>finición. Para <strong>el</strong>loutilizaremos font:.Así una retaíla <strong>de</strong> reglas como esta:p { font-style: italic; }p { font-variant: small-caps; }p { font-weight: bold; }p { font-size: large; }p { font-family: monospace; }Pue<strong>de</strong> escribirse como:p {font: italic small-caps bold large monospace;}Recuerda que <strong>el</strong> or<strong>de</strong>n <strong>de</strong>be ser siempre <strong>el</strong> mismo: style, variant, weight, size y family.Si no vas a utilizar una <strong>de</strong> las <strong>de</strong>finiciones pue<strong>de</strong>s omitirla como en este ejemplo:p {font: bold sans-serif;}
Unidad 17. Estilos CSS Avanzado (VI)17.6EspaciadoContinuando con los controles <strong>de</strong> texto tenemos la propiedad word-spacing que establece laseparación entre las palabras <strong>de</strong> un texto.Este texto tiene una separación <strong>de</strong> 18 píx<strong>el</strong>es entre sus palabras.Este, sin embargo, tiene una separación <strong>de</strong> -5 píx<strong>el</strong>es.También po<strong>de</strong>mos utilizar la propiedad letter-spacing para establecer la distancia aplicadaentre los caracteres d<strong>el</strong> texto:Este texto tiene una separación <strong>de</strong> 5 píx<strong>el</strong>es entresus palabras.Este, sin embargo, tiene una separación <strong>de</strong> -2 píx<strong>el</strong>es.vertical-align establece la alineación vertical d<strong>el</strong> texto. Pue<strong>de</strong> tomar los valores bas<strong>el</strong>ine, sub,super, top, text-top, middle, bottom, text-botom.bas<strong>el</strong>ine,sub,super,top, text-top, middle, bottom, text-bottomObserva como los valores sub, super, text-bottom y text-top toman como referencia <strong>el</strong> tamañod<strong>el</strong> texto, mientras que top, middle y bottom toman como referencia <strong>el</strong> alto d<strong>el</strong> párrafo completo (eneste caso lo marca la imagen <strong>de</strong> aulaClic).line-height indica <strong>el</strong> alto <strong>de</strong> línea d<strong>el</strong> texto, igual que <strong>el</strong> resto <strong>de</strong> propieda<strong>de</strong>s pue<strong>de</strong>s estableceresta altura en píx<strong>el</strong>es, ems o puntos.Este texto tiene un alto <strong>de</strong> línea <strong>de</strong> 30 píx<strong>el</strong>es. Pue<strong>de</strong>s ver que la separación entres estas líneas es mayor que la<strong>de</strong>finida por <strong>de</strong>fecto.Este texto tiene un alto <strong>de</strong> línea <strong>de</strong> 10 píx<strong>el</strong>es. Pue<strong>de</strong>s ver que la separación entres estas líneas es menor que la<strong>de</strong>finida por <strong>de</strong>fecto.Si estableces simplemente valores numéricos podrás indicar <strong>el</strong> alto respecto a su tamaño normal.Por ejemplo:p { line-height: 2; }
Esta línea muestra <strong>el</strong> texto con un interlineado doble. Si hubiesemos escrito 1.5 <strong>el</strong> interlineadosería un 50% más alto <strong>de</strong> lo normal.text-align establece la alineación horizontal d<strong>el</strong> texto. Sus valores ya te <strong>de</strong>ben ser familiares:left, right, center y justify.Este texto está alineado a la izquierda con left.Este texto está alineado al centro con center.Este texto está alineado a la <strong>de</strong>recha con right.Este texto está justificado, ambos márgenes d<strong>el</strong> texto tocarán los bor<strong>de</strong>s. Si es necesario estirar las líneas se hará.text-in<strong>de</strong>nt indica <strong>el</strong> tamaño <strong>de</strong> i<strong>de</strong>ntación (o sangría) d<strong>el</strong> texto. Tomará valores en puntos,píx<strong>el</strong>es o ems, como prefieras.Texto i<strong>de</strong>ntado 24pxTexto i<strong>de</strong>ntado 48pxTexto i<strong>de</strong>ntado 72pxwhite-space, esta propiedad es muy útil para evitar que <strong>el</strong> ancho d<strong>el</strong> navegador modifique <strong>el</strong>ancho <strong>de</strong> las líneas d<strong>el</strong> texto.Pue<strong>de</strong> tomar <strong>el</strong> valor nowrap para que <strong>el</strong> texto se muestre en una sóla línea sin insertar saltos no<strong>de</strong>seados:Este texto no tiene saltos <strong>de</strong> línea, así que se mostrará en toda su anchura aunque <strong>el</strong>navegador sea más estrecho. Haz más pequeña la ventana para probarlo.También pue<strong>de</strong>s establecer esta propiedad al valor pre. En este caso todos los espaciosinsertados en <strong>el</strong> texto se mostrarán y no se convertirán en uno sólo como ocurre normalmente:En este textopo<strong>de</strong>mos introducir tantos espacios como queramos. Da igual si son más <strong>de</strong> uno, semostrarán igualmente.Este último valor no funciona correctamente en Internet Explorer así que es recomendable utilizarla entidad HTML ( ) para mostrar más <strong>de</strong> un espacio.
Unidad 17. Estilos CSS Avanzado (VII)17.7Aspecto d<strong>el</strong> textotext-<strong>de</strong>coration establece si <strong>el</strong> texto llevará <strong>de</strong>coración o no. Esta propiedad es muy útil paramodificar <strong>el</strong> estilo <strong>de</strong> los enlaces. Los valores que pue<strong>de</strong> tomar esta propiedad son none, un<strong>de</strong>rline,overline, line-through, blink.none, un<strong>de</strong>rline, overline, line-through, blinkEl valor blink hace que <strong>el</strong> texto parpa<strong>de</strong>e. Este valor sólo funciona en <strong>de</strong>terminados navegadores(no en Internet Explorer).Con la propiedad text-transform pue<strong>de</strong>s indicar la transformación d<strong>el</strong> texto <strong>de</strong> la siguienteforma. Capitalize cambia la primera letra <strong>de</strong> cada palabra a mayúsculas. Uppercase y lowercasecambian <strong>el</strong> texto a mayúsculas o minúsculas respectivamente.Este texto tiene <strong>el</strong> valor capitalize, las primeras letras serán en mayúsculas, <strong>el</strong>resto se mostrará en minúsculas automáticamenteESTE TEXTO TIENE EL VALOR UPPERCASE, AUNQUE ESTE ESCRITO ENMINÚSCULAS SE CAMBIARÁ A MAYÚSCULASEste texto tiene <strong>el</strong> valor lowercase, aunque este escrito en mayúsculas secambiará a minúsculasPor último veremos la propiedad color que establece <strong>el</strong> color d<strong>el</strong> texto.Esta propiedad pue<strong>de</strong> tomar un valor hexa<strong>de</strong>cimal (como vimos en <strong>el</strong> apartado <strong>de</strong> colores d<strong>el</strong> tema3).De modo que simplemente haría falta especificar <strong>el</strong> color <strong>de</strong> este modo:p { color: #006600; }Unos ejemplos serían los siguientes:#006600 #00FF00 #003399 #33CC99 #66CCFF #00CCCC#990000 #999900 #FF9933 #996699 #CCFF33 #CCFF99También existe la posibilidad <strong>de</strong> utilizar unas palabras reservadas para nombrar unos cuantoscolores básicos.
El modo en <strong>el</strong> que se <strong>de</strong>finiría <strong>el</strong> estilo sería <strong>el</strong> mismo:p { color: red; }Aunque en este caso en vez <strong>de</strong> introducir su equivalente hexa<strong>de</strong>cimal, referenciaríamosdirectamente su nombre.Pue<strong>de</strong>s encontrar <strong>el</strong> listado <strong>de</strong> los nombres <strong>de</strong> color que pue<strong>de</strong>s utilizar en <strong>el</strong> sitio <strong>de</strong> la W3C.Para practicar realiza <strong>el</strong> Ejercicio Paso a Paso <strong>de</strong> Controles <strong>de</strong> Fuente.Controles <strong>de</strong> ratónHemos <strong>de</strong>cidido <strong>de</strong>dicar este apartado a la propiedad cursor que modifica la apariencia d<strong>el</strong> ratóncuando se sitúa sobre una etiqueta afectada por esta propiedad CSS.Pue<strong>de</strong>s aplicarla sobre párrafos, enlaces o incluso sobre <strong>el</strong> body mismo (así <strong>el</strong> cursor tendrá unaforma personalizada en toda la página!).El modo en <strong>el</strong> que se utiliza es igual que <strong>el</strong> resto:p {cursor: pointer;}Y pue<strong>de</strong> tomar los valores auto, crosshair, pointer, move, n-resize, ne-resize, e-resize, seresize,sw-resize, w-resize, nw-resize, text, wait y h<strong>el</strong>p.Aquí tienes un ejemplo <strong>de</strong> cada uno <strong>de</strong> los cursores. Sitúa <strong>el</strong> ratón sobre <strong>el</strong>los para ver <strong>el</strong> efecto:autoenlacecrosshairenlacepointerenlacemoveenlacetextenlacewaitenlaceh<strong>el</strong>penlacen-resizeenlaceneresizeenlacee-resizeenlaceseresizeenlaceswresizeenlacew-resizeenlacenwresizeenlacePara practicar realiza <strong>el</strong> Ejercicio Paso a Paso <strong>de</strong> Controles <strong>de</strong> Ratón.
Unidad 17. Estilos CSS Avanzado (VIII)17.8Controles <strong>de</strong> listaHemos visto muchas propieda<strong>de</strong>s que afectan al modo en <strong>el</strong> que se muestran los textos <strong>de</strong>nuestras páginas.Ahora haremos un alto para ver unas cuantas propieda<strong>de</strong>s que utilizaremos para dar estilo anuestras listas.list-style-type permite establecer <strong>el</strong> tipo <strong>de</strong> viñeta utilizada en las listas, pue<strong>de</strong> tomar los valoresdisc, circle, square, <strong>de</strong>cimal, lower-roman, upper-roman, lower-alpha, upper-alpha y none.• disc 1• disc 2• disc 3o circle 1o circle 2o circle 3• square 1• square 2• square 31. <strong>de</strong>cimal 12. <strong>de</strong>cimal 23. <strong>de</strong>cimal 3i. lower-roman 1ii. lower-roman 2iii. lower-roman 3I. upper-roman 1II. upper-roman 2III. upper-roman 3a. lower-alpha 1b. lower-alpha 2c. lower-alpha 3A. upper-alpha 1B. upper-alpha 2C. upper-alpha 3• none 1• none 2• none 3Este estilo <strong>de</strong>be ir asociado a la etiqueta li, ul o ol.list-style-image permite mostrar una imagen en lugar <strong>de</strong> una viñeta.La forma en la que lo haremos será la siguiente:ul { list-style-image: url(graficos/lista.gif); }Así <strong>de</strong>clararemos <strong>el</strong> estilo. Luego bastará con escribir una lista <strong>de</strong>sor<strong>de</strong>nada, pues hemos utilizado<strong>el</strong> s<strong>el</strong>ector ul para marcar <strong>el</strong> estilo.• <strong>el</strong>emento 1• <strong>el</strong>emento 2• <strong>el</strong>emento 3• <strong>el</strong>emento 4
Observa que hemos utilizado una URL. Esta ruta <strong>de</strong>be ser o bien absoluta, o r<strong>el</strong>ativa a la hoja <strong>de</strong>estilos. Nunca al documento don<strong>de</strong> se aplica!list-style-position sirve para establecer sangrados colgantes. Pue<strong>de</strong> tomar dos valores outsi<strong>de</strong>(fuera) e insi<strong>de</strong> (<strong>de</strong>ntro).Veamos un ejemplo que lo ilustrará perfectamente:• <strong>el</strong>emento 1• <strong>el</strong>emento 2 con valor outsi<strong>de</strong>• <strong>el</strong>emento 3• <strong>el</strong>emento 4 con valor insi<strong>de</strong>• <strong>el</strong>emento 5Como pue<strong>de</strong>s ver <strong>el</strong> valor insi<strong>de</strong> alinea la viñeta con <strong>el</strong> principio d<strong>el</strong> texto d<strong>el</strong> <strong>el</strong>emento anterior.Outsi<strong>de</strong> alinea la viñeta d<strong>el</strong> <strong>el</strong>emento en la posición pre<strong>de</strong>finida. Utiliza este último valor para<strong>de</strong>stacar listas <strong>de</strong>finidas como insi<strong>de</strong>.Por último, como en los controles <strong>de</strong> fuente, existe un modo en <strong>el</strong> que po<strong>de</strong>mos escribir todasestas reglas sin tener que escribirlas una a una. Para <strong>el</strong>lo utilizaremos la propiedad list-style.De este modo <strong>el</strong> siguiente bloque:ol {list-style-type: upper-alpha;list-style-position: outsi<strong>de</strong>;list-style-image: url(imagenes/bullet.gif);}Pue<strong>de</strong> escribirse como:ol {list-style: upper-alpha outsi<strong>de</strong> url(imagenes/bullet.gif);}Ten en cuenta siempre <strong>el</strong> or<strong>de</strong>n type, position e image. Si no quieres utilizar alguna <strong>de</strong> <strong>el</strong>las,simplemente omít<strong>el</strong>a.
Unidad 17. Estilos CSS Avanzado (IX)17.9Controles <strong>de</strong> fondoEn este apartado veremos las propieda<strong>de</strong>s que pue<strong>de</strong>n aplicarse sobre <strong>el</strong> fondo.Estas propieda<strong>de</strong>s se pue<strong>de</strong>n aplicar sobre muchos <strong>de</strong> los <strong>el</strong>ementos, tanto c<strong>el</strong>das, párrafos o <strong>el</strong>body <strong>de</strong> la página.background-color permite establecer <strong>el</strong> color <strong>de</strong> fondo. Utiliza los mismos códigoshexa<strong>de</strong>cimales o los nombres <strong>de</strong> color que vimos en la propiedad color d<strong>el</strong> texto.La sintaxis es igual a la que hemos visto hasta ahora:td.rojo {background-color: red;}background-image establece una imagen <strong>de</strong> fondo para <strong>el</strong> <strong>el</strong>emento.body {background-image: url(imagenes/fondo.jpg);}Por <strong>de</strong>fecto, las imágenes se posicionarán en la esquina superior izquierda y en mosaico.background-repeat indica <strong>el</strong> modo <strong>de</strong> repetición <strong>de</strong> la imagen establecida para <strong>el</strong> fondo.Pue<strong>de</strong> tomar los siguientes valores:repeat: la imagen se repite a modo <strong>de</strong> mosaico hasta ocupar la página completa.repeat-x: la imagen se repite a lo largo d<strong>el</strong> eje horizontal.repeat-y: la imagen se repite a lo largo d<strong>el</strong> eje vertical.no-repeat: la imagen no se repite.Por omisión, <strong>el</strong> valor que se toma es repeat, por lo que se genera un mosaico con la imagen d<strong>el</strong>fondo.Deberás <strong>de</strong>clarar la URL <strong>de</strong> la imagen para po<strong>de</strong>r utilizar esta propiedad:
#menu {background-image: url(imagenes/menu.gif);background-repeat: repeat-x;}textotextotextotextotextotextotextotextotextotextotextotextotextobackground-attachment se utiliza para indicar si la imagen <strong>de</strong> pantalla es fija o se <strong>de</strong>splazacon <strong>el</strong> movimiento <strong>de</strong> las barras <strong>de</strong> <strong>de</strong>splazamiento.Esta opción se usa sobre todo para las imágenes d<strong>el</strong> body.Pue<strong>de</strong> tomar los valores fixed y scroll. El primer valor <strong>de</strong>jará la imagen fija, <strong>el</strong> segundo hará qu<strong>el</strong>a imagen se <strong>de</strong>splace junto con las barras (como <strong>el</strong> fondo <strong>de</strong> esta página).background-position permite <strong>el</strong> posicionamiento <strong>de</strong> la imagen <strong>de</strong> fondo.S<strong>el</strong>ecciona entre los valores top, center, bottom y left, center, right.En este caso podremos combinar dos <strong>de</strong> los valores, por ejemplo:.cita {background-image: url(imagenes/quote.gif);background-repeat: no-repeat;background-position: right top;}
Aunque pue<strong>de</strong>s omitirlos, pero recuerda que si lo haces por omision los valores serán top y left.Igual que en algunos <strong>de</strong> los apartados anteriores pue<strong>de</strong>s utilizar la propiedad background pararesumir las reglas CSS.Así <strong>el</strong> siguiente bloque:.cita {background-color: gray;background-image: url(imagenes/quote.gif);background-repeat: no-repeat;background-attachment: scroll;background-position: right top;}Pue<strong>de</strong> ser escrito <strong>de</strong> la siguiente forma:.cita {background: gray url(imagenes/quote.gif) no-repeat scroll right top;}Recuerda mantener <strong>el</strong> or<strong>de</strong>n color, image, repeat, attachment y position.Y ya sabes, si no quieres alguno, sáltat<strong>el</strong>o.Para practicar realiza <strong>el</strong> Ejercicio Paso a Paso <strong>de</strong> Controles <strong>de</strong> Fondo.
Unidad 17. Estilos CSS Avanzado (X)17.10Controles <strong>de</strong> margenAhora veremos unas cuantas reglas que afectarán a los bor<strong>de</strong>s y márgenes <strong>de</strong> los <strong>el</strong>ementos.Para <strong>el</strong>lo utilizaremos <strong>el</strong> mismo ejemplo: dos cajas, una <strong>de</strong>ntro <strong>de</strong> la otra.margentextomargenmargin-top, margin-right, margin-bottom y margin-left establecen la distancia <strong>de</strong> los bor<strong>de</strong>sd<strong>el</strong> <strong>el</strong>emento al <strong>el</strong>emento padre.Pue<strong>de</strong>s utilizar píx<strong>el</strong>es 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;}margentextomargenLos márgenes superiores e inferiores se pue<strong>de</strong>n ver en la distancia que hay <strong>de</strong> la caja interior a laspalabras margen.Observa cómo <strong>el</strong> margen 0 d<strong>el</strong> lado <strong>de</strong>recho hace que los bor<strong>de</strong>s que<strong>de</strong>n pegados, mientras queun valor negativo hace que <strong>el</strong> bloque salga <strong>de</strong> la caja.La propiedad margin te permite unificar varias propieda<strong>de</strong>s en una sola:.bloque_interior {margin-top: 20px;margin-right: 0px;margin-bottom: 5px;
margin-left: -10px;}Este bloque se podría reescribir como:.bloque_interior {margin: 20px 0px 5px -10px;}Recuerda que <strong>de</strong>berás seguir <strong>el</strong> or<strong>de</strong>n top, right, bottom y left.En <strong>el</strong> caso <strong>de</strong> que los valores arriba y abajo (top y bottom) e izquierda y <strong>de</strong>recha (left y right)sean iguales entre sí se pue<strong>de</strong> escribir en dos valores, como:.bloque_interior {margin: 20px 5px;}En este caso los márgenes superior e inferior serán <strong>de</strong> 20px y los <strong>de</strong> los lados <strong>de</strong> 5.En caso <strong>de</strong> que quieras que todos los margenes tengan la misma distancia pue<strong>de</strong>s escribirlosólo una vez:.bloque_interior {margin: 20px;}Ahora todos los márgenes serán <strong>de</strong> 20 píx<strong>el</strong>es.También se pue<strong>de</strong>n establecer estas propieda<strong>de</strong>s a auto. Dejando que los bor<strong>de</strong>s d<strong>el</strong> <strong>el</strong>ementosean <strong>de</strong>terminados por <strong>el</strong> navegador.Esta opción, sin embargo, no se trata d<strong>el</strong> mismo modo en todos los navegadores.Internet Explorer no sigue los estándares y no la maneja <strong>de</strong> un modo correcto.Por lo que cuando con otros navegadores centrar un <strong>el</strong>emento es muy sencillo con <strong>el</strong> valor auto,para IE hay que hacer una pequeña trampa.Veamos <strong>el</strong> siguiente ejemplo:margentextomargenEl código CSS <strong>de</strong> la caja interior es:
.bloque_interior {margin-right: auto;margin-left: auto;}Si intentas hacerlo sobre <strong>el</strong> body, en IE no funcionará. Los márgenes auto no centrarán <strong>el</strong> bloque.Deberás darle la siguiente propiedad al body para que funcione:text-align: center;Esto simplemente alineará <strong>el</strong> texto al centro en <strong>el</strong> resto <strong>de</strong> navegadores (don<strong>de</strong> <strong>de</strong>beremos seguirutilizando <strong>el</strong> valor auto para los márgenes) y hará que los bloques se alineen en <strong>el</strong> centro <strong>de</strong> lapantalla.padding-top, padding-left, padding-bottom y padding-right establecerán la distancia d<strong>el</strong>bor<strong>de</strong> <strong>de</strong> un <strong>el</strong>emento con sus etiquetas interiores.Lo enten<strong>de</strong>rás mucho mejor con <strong>el</strong> siguiente ejemplo:textoA esta caja le hemos aplicado <strong>el</strong> siguiente estilo:.bloque {padding-top: 20px;padding-right: 5px;padding-bottom: 5px;padding-left: 10px;}Como pue<strong>de</strong>s ver la distancia <strong>de</strong> la palabra texto a los bor<strong>de</strong>s <strong>de</strong>recho e inferior es <strong>de</strong> 5px.Y lo mismo pasa con los márgenes superior (20px) e izquierdo (10px).Igual que con los márgenes po<strong>de</strong>mos abreviar las reglas CSS utilizando la propiedad margin.Así, <strong>el</strong> 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, también, mantener <strong>el</strong> or<strong>de</strong>n top, left, bottom, right.Los casos <strong>de</strong> repetición se aplican igual que en los márgenes, por lo que podrás escribir lossiguientes casos:.bloque1 {padding: 20px 5px 5px 10px;}.bloque2 {padding: 20px 7px;}.bloque3 {padding: 5px;}
Unidad 17. Estilos CSS Avanzado (XI)17.11Bor<strong>de</strong>sTambién tenemos las propieda<strong>de</strong>s <strong>de</strong> bor<strong>de</strong>.La primera es bor<strong>de</strong>r-width que indica <strong>el</strong> ancho <strong>de</strong> un bor<strong>de</strong>.Pue<strong>de</strong> tomar los valores medium, thin y thick. Aunque también se aceptan valores en píx<strong>el</strong>es yporcentajes que son más fáciles <strong>de</strong> manejar a la hora <strong>de</strong> crear bor<strong>de</strong>s con una anchura exacta.texto textoEn este caso hemos utilizado:.bor<strong>de</strong>1 {bor<strong>de</strong>r-width: 1px;}.bor<strong>de</strong>2 {bor<strong>de</strong>r-width: 5px;}bor<strong>de</strong>r-style muestra <strong>el</strong> bor<strong>de</strong> d<strong>el</strong> <strong>el</strong>emento <strong>de</strong> una forma <strong>de</strong>terminada, existen varios tipos:none dotted dashed soliddouble groove ridge inset outsetbor<strong>de</strong>r-color establece en forma hexa<strong>de</strong>cimal o con nombre <strong>el</strong> color d<strong>el</strong> bor<strong>de</strong> <strong>de</strong> un <strong>el</strong>emento.textoEn este caso ha sido:.bor<strong>de</strong> {bor<strong>de</strong>r-color: #FFFF00;
}Como en <strong>el</strong> resto <strong>de</strong> propieda<strong>de</strong>s, utilizaremos la propiedad bor<strong>de</strong>r para resumir estas tresúltimas.De modo que <strong>el</strong> siguiente bloque:.bor<strong>de</strong> {bor<strong>de</strong>r-width: 10px;bor<strong>de</strong>r-style: groove;bor<strong>de</strong>r-color: black;}Podría escribirse más fácilmente:.bor<strong>de</strong> { bor<strong>de</strong>r: 10px groove black; }Debes mantener <strong>el</strong> or<strong>de</strong>n width, style y color, y en este caso <strong>de</strong>berás especificar cada uno d<strong>el</strong>os valores para que la regla se comporte normalmente.También para los bor<strong>de</strong>s es posible utilizar las mismas propieda<strong>de</strong>s pero indicando a qué ladonos referimos:.bor<strong>de</strong> {bor<strong>de</strong>r-top-width: 10px;bor<strong>de</strong>r-top-style: groove;bor<strong>de</strong>r-top-color: black;bor<strong>de</strong>r-left-width: 10px;bor<strong>de</strong>r-left-style: groove;bor<strong>de</strong>r-left-color: black;bor<strong>de</strong>r-bottom-width: 10px;bor<strong>de</strong>r-bottom-style: groove;bor<strong>de</strong>r-bottom-color: black;
or<strong>de</strong>r-right-width: 10px;bor<strong>de</strong>r-right-style: groove;bor<strong>de</strong>r-right-color: black;}Que a su vez podría reescribirse como:.bor<strong>de</strong> {bor<strong>de</strong>r-top: 10px groove black;bor<strong>de</strong>r-left: 10px groove black;bor<strong>de</strong>r-bottom: 10px groove black;bor<strong>de</strong>r-right: 10px groove black;}Y si todos los valores son iguales para cada uno <strong>de</strong> los bor<strong>de</strong>s, volvemos a utilizar la propiedadbor<strong>de</strong>r:.bor<strong>de</strong> {bor<strong>de</strong>r: 10px groove black;}Para practicar realiza <strong>el</strong> Ejercicio Paso a Paso <strong>de</strong> Controles <strong>de</strong> Márgenes y Bor<strong>de</strong>s.
Unidad 17. Estilos CSS Avanzado (XII)17.12Controles <strong>de</strong> <strong>el</strong>ementos <strong>de</strong>bloque y en líneaAhora veremos cómo posicionar los <strong>el</strong>ementos y darles <strong>el</strong> tamaño que nos convenga pararepresentarlos.Antes <strong>de</strong> empezar <strong>de</strong>beríamos hacer una distinción entre las etiquetas HTML.Las hay <strong>de</strong> 2 tipos: <strong>de</strong> bloque o en línea.Las etiquetas <strong>de</strong> bloque son aqu<strong>el</strong>las que causan un salto <strong>de</strong> línea antes y <strong>de</strong>spués <strong>de</strong> <strong>el</strong>los,como por ejemplo las etiquetas p, div, table, br, etc...Sin embargo luego encontramos otro tipo <strong>de</strong> etiquetas (en línea) que no producen saltos en <strong>el</strong> flujo<strong>de</strong> la página, como pue<strong>de</strong>n ser las etiquetas a, b, i, span, etc...Teniendo esto siempre en mente verás que es más sencillo trabajar y mol<strong>de</strong>ar las páginasutilizando CSS.Primero veremos las propieda<strong>de</strong>s <strong>de</strong> tamaño height (altura) y width (anchura).Pue<strong>de</strong>s especificarlas en cualquier <strong>el</strong>emento <strong>de</strong> bloque y establecerán su alto y su ancho enpíx<strong>el</strong>es o porcentaje.300x50#contenedor {width: 300px;height: 50px;}©Luego encontramos la propiedad float, que permite que cualquier <strong>el</strong>emento flote en un lado<strong>de</strong>terminado <strong>de</strong> la pantalla mientras <strong>el</strong> resto sigue <strong>el</strong> flujo natural.Observa estos ejemplos:Este texto tiene un <strong>el</strong>emento flotante a la izquierda.
A<strong>de</strong>más le hemos dado un tamaño <strong>de</strong> fuente mayor para que se note mejor <strong>el</strong> efecto.©Este texto tiene un <strong>el</strong>emento flotante a la <strong>de</strong>recha.A<strong>de</strong>más le hemos dado un tamaño <strong>de</strong> fuente mayor para que se note mejor <strong>el</strong> efecto.Hemos utilizado los valores left y right respectivamente. En estos casos a los párrafos quecontienen <strong>el</strong> símbolo <strong>de</strong> copyright se les han aplicado la propiedad CSS float:©©©©Pero si vemos <strong>de</strong>tenidamente esta propiedad veremos que encontramos un problema:Este texto tiene un <strong>el</strong>emento flotante a la <strong>de</strong>recha.Pero quiero que este párrafo no se vea afectado por <strong>el</strong> bloque flotante y se muestre sin tener que ajustarse a él.Como este párrafo que ocupa toda la anchura d<strong>el</strong> bloque div padre.¿Cómo solucionamos este problema?Para <strong>el</strong>lo <strong>de</strong>beremos utilizar la propiedad clear. Esta propiedad permite romper <strong>el</strong> ajuste que seesté realizando por una etiqueta anterior marcada con float.Clear pue<strong>de</strong> tomar 3 valores: left, right o both, para romper <strong>el</strong> float <strong>de</strong> izquierda, <strong>de</strong>recha oambos respectivamente.Por lo que si le aplicamos un clear: right; al segundo párrafo este se mostrará sin verse afectadopor <strong>el</strong> float:©©Este texto tiene un <strong>el</strong>emento flotante a la <strong>de</strong>recha.Pero quiero que este párrafo no se vea afectado por <strong>el</strong> bloque flotante y se muestre sin tener que ajustarse a él.Como este párrafo que ocupa toda la anchura d<strong>el</strong> bloque div padre.
El código que hemos utilizado es <strong>el</strong> siguiente:Pero quiero que este párrafo no se vea afectado por <strong>el</strong>bloque flotante y se muestre sin tener que ajustarse a él.©©©©D<strong>el</strong> mismo modo esta propiedad nos ayudará en este caso:Este texto tiene dos <strong>el</strong>ementos flotantes a la izquierda.Queremos que los dos bloques estén flotando a la izquierda pero uno <strong>de</strong>bajo d<strong>el</strong> otro.Para <strong>el</strong>lo <strong>de</strong>beremos aplicarle al segundo <strong>el</strong>emento un clear: left; para que <strong>el</strong>imine <strong>el</strong>comportamiento d<strong>el</strong> primer <strong>el</strong>emento que ya estaba flotando.Por <strong>el</strong>lo, <strong>el</strong> segundo <strong>el</strong>emento lo escribiríamos así:©©©©©©Y obtendríamos lo siguiente:Este texto tiene dos <strong>el</strong>ementos flotantes a la izquierda.Ahora uno se encuentra <strong>de</strong>bajo d<strong>el</strong> otro, y <strong>el</strong> texto fluye teniéndolos en cuenta a ambos.Aunque pue<strong>de</strong> llegar un párrafo que <strong>de</strong>je <strong>de</strong> verse afectado.Como este!Ahora combinando los márgenes y los <strong>el</strong>ementos flotantes po<strong>de</strong>mos crear columnas <strong>de</strong> unaforma muy sencilla:cabeceramenumenumenu
menumenucontenidocontenidocontenidocontenidocontenidopieLa forma es la siguiente:1. Creamos una cabecera. No hace falta que se le aplique ningún estilo en especial, pero hemos preferidoañadir unos bor<strong>de</strong>s y paddings para que se vea mejor <strong>el</strong> ejemplo (igual que en resto <strong>de</strong> los <strong>el</strong>ementos).cabecera2. Luego creamos otro bloque (nosotros hemos utilizado divs aunque pue<strong>de</strong>s utilizar párrafos, tablas ocualquier <strong>el</strong>emento <strong>de</strong> bloque).cabeceramenumenumenumenumenu3. A este último bloque le asignamos la propiedad float: left; para que se encuentre flotando a la izquierda y ledamos una anchura (en nuestro caso un 30%).cabeceramenumenu4. Luego creamos un tercer <strong>el</strong>emento que contendrá la segunda columna.cabeceramenumenu
contenidocontenidocontenidocontenidocontenido5. A este <strong>el</strong>emento <strong>de</strong>beremos darle un margin-left d<strong>el</strong> mismo tamaño que la anchura <strong>de</strong> la primeracolumna. Así nos aseguramos <strong>de</strong> que se encuentren en <strong>el</strong> mismo niv<strong>el</strong> (porque <strong>el</strong> <strong>el</strong>emento <strong>de</strong> laizquierda está flotando) pero no vu<strong>el</strong>va a tomar <strong>el</strong> flujo normal cuando <strong>el</strong> bloque <strong>de</strong> la izquierda hayaacabado.cabeceramenumenucontenidocontenidocontenidocontenidocontenido6. Finalmente añadimos un nuevo bloque que utilizaremos como pie <strong>de</strong> página.cabeceramenumenumenumenumenucontenidocontenidopie
7. A este bloque <strong>de</strong>beremos asignarle la propiedad clear: both; para que <strong>el</strong> <strong>el</strong>emento flotante no le afecte encaso <strong>de</strong> que <strong>el</strong> contenido fuese <strong>de</strong>masiado corto.cabeceramenumenumenumenumenucontenidocontenidopieFinalmente tenemos la propiedad display, que establece <strong>el</strong> tipo <strong>de</strong> <strong>el</strong>emento con <strong>el</strong> que estamostratando.Esta propiedad es muy útil porque transforma las etiquetas <strong>de</strong> bloque a en línea y viceversa.Pue<strong>de</strong> tomar los valores block, inline o list-item.Los dos primeros valores hablan por sí mismos. Pue<strong>de</strong>s asociarle <strong>el</strong> estilo display: block; a unaetiqueta A para que cree un salto <strong>de</strong> línea antes y <strong>de</strong>spués <strong>de</strong> <strong>el</strong>la.D<strong>el</strong> mismo modo, podrás hacer que una etiqueta <strong>de</strong> bloque (como p o div) se convierta en un<strong>el</strong>emento en línea utilizando display: inline; y puedan ser mostradas una al lado <strong>de</strong> otra:1 2 3 46 7 824 5 9 10 11231222 21 20 132519 1418 17 16 151 2 3 46 7 824 5 9 10 112312 25
22 21 20 1319 1418 17 16 151 2 3 46 7 824 5 9 10 11231222 21 20 132519 1418 17 16 15En este ejemplo po<strong>de</strong>mos ver tres tablas que se muestran una al lado <strong>de</strong> la otra.Simplemente les hemos dado <strong>el</strong> estilo:.tabla {display: inline;}Aunque si disminuyes <strong>el</strong> ancho <strong>de</strong> la ventana verás que al tratarse <strong>de</strong> <strong>el</strong>ementos en línea seadaptan a su tamaño.Para saltarnos este inconveniente (si lo fuera), po<strong>de</strong>mos utilizar la propiedad que vimos en <strong>el</strong>apartado <strong>de</strong> Controles <strong>de</strong> texto: white-space.Introduciendo estas tres tablas en un <strong>el</strong>emento <strong>de</strong> bloque como un p o un div y asignándole lapropiedad white-space: nowrap; conseguiríamos que las tres tablas permaneciesen en línea sinsaltos <strong>de</strong> pantalla a pesar <strong>de</strong> la anchura <strong>de</strong> la ventana.1 2 3 46 7 824 5 9 10 11231222 21 20 132519 1418 17 16 151 2 3 46 7 824 5 9 10 11231222 21 20 132519 1418 17 16 15
1 2 3 46 7 824 5 9 10 11231222 21 20 132519 1418 17 16 15Finalmente, comentaremos que esta propiedad también pue<strong>de</strong> tomar <strong>el</strong> valor list-item.De este modo, los <strong>el</strong>ementos que se vean afectados por <strong>el</strong> estilo display: list-item; se mostrarácomo si formasen parte <strong>de</strong> una lista.Observa <strong>el</strong> siguiente ejemplo:p.lista {display: list-item;list-style-type: square;}Si aplicamos este estilo sobre unos párrafos veremos esto:Esto es un párrafo que se muestra en forma <strong>de</strong> <strong>el</strong>emento <strong>de</strong> lista.Esto es un párrafo que se muestra en forma <strong>de</strong> <strong>el</strong>emento <strong>de</strong> lista.Esto es un párrafo que se muestra en forma <strong>de</strong> <strong>el</strong>emento <strong>de</strong> lista.Esto es un párrafo que se muestra en forma <strong>de</strong> <strong>el</strong>emento <strong>de</strong> lista.Para practicar realiza <strong>el</strong> Ejercicio Paso a Paso <strong>de</strong> Controles <strong>de</strong> Bloque.
Unidad 17. Estilos CSS Avanzado (XIII)17.13Controles <strong>de</strong> posiciónEn este apartado veremos cómo posicionar <strong>el</strong> contenido <strong>de</strong> la página web utilizando únicamenteestilos CSS.Existen unas propieda<strong>de</strong>s CSS que combinadas con las siguientes nos ayudarán a mover <strong>el</strong>contenido <strong>de</strong> la página.Estas son top, left, bottom y right.Con estas propieda<strong>de</strong>s podremos establecer la distancia a los bor<strong>de</strong>s <strong>de</strong> la ventana d<strong>el</strong>navegador.Recor<strong>de</strong>mos que top equivale a la parte superior.Left al lado izquierdo.Bottom al bor<strong>de</strong> inferior.Y finalmente right al <strong>de</strong>recho.Normalmente daremos valores a estas propieda<strong>de</strong>s utilizando píx<strong>el</strong>es o porcentajes.Veamos ahora cómo las utilizaremos para <strong>el</strong>lo <strong>de</strong>beremos <strong>de</strong>clarar también la propiedadposition.Esta es sin duda la más compleja <strong>de</strong> este apartado así que la veremos con <strong>de</strong>tenimiento.Esta propiedad pue<strong>de</strong> aceptar 4 valores: static, absolute, r<strong>el</strong>ative y fixed.Vayamos uno a uno.El valor static es <strong>el</strong> valor por <strong>de</strong>fecto <strong>de</strong> un <strong>el</strong>emento, ocupa su lugar en <strong>el</strong> flujo <strong>de</strong> la página y nopue<strong>de</strong> ser modificado utilizando las propieda<strong>de</strong>s top/bottom y left/right.p {position: static;}Con <strong>el</strong> valor absolute pue<strong>de</strong>s colocar un <strong>el</strong>emento en cualquier parte <strong>de</strong> la ventana con sólo darl<strong>el</strong>as coor<strong>de</strong>nadas.
Así <strong>de</strong>beríamos <strong>de</strong>clarar la posición utilizando un par <strong>de</strong> propieda<strong>de</strong>s top/bottom y left/right.Un ejemplo podría ser este:#capa_flotante {position: absolute;top: 100px;left: 300px;width: 30px;height: 125px;}Esta <strong>de</strong>claración <strong>de</strong> estilos es muy habitual en las capas. Se posiciona absolutamente <strong>el</strong> objeto yluego se le da un ancho y un alto.El valor r<strong>el</strong>ative también nos permite mover <strong>el</strong> <strong>el</strong>emento. Este, en principio, ocupa su lugar en <strong>el</strong>flujo normal <strong>de</strong> la página y utilizaremos las propieda<strong>de</strong>as top/bottom y left/right para <strong>de</strong>splazarlotomando como referencia ese lugar y no los bor<strong>de</strong>s <strong>de</strong> la página.Por ejemplo:p.especial {position: r<strong>el</strong>ative;top: 20px;}Esta regla hará que los párrafos marcados con la clase especial se <strong>de</strong>splacen 20 píx<strong>el</strong>es haciaabajo <strong>de</strong> su positión normal en <strong>el</strong> flujo <strong>de</strong> la página.Piensa que lo que estamos diciendo en la <strong>de</strong>finición <strong>de</strong> la regla es que va a haber una <strong>de</strong>sfase <strong>de</strong>20 píx<strong>el</strong>es <strong>de</strong>s<strong>de</strong> la parte superior <strong>de</strong> don<strong>de</strong> se encontraba en un principio, por lo que <strong>el</strong><strong>el</strong>emento se verá <strong>de</strong>splazado hacia abajo.Finalmente encontramos <strong>el</strong> valor fixed. Este valor, <strong>de</strong>sgraciadamente, no funciona en algunasversiones <strong>de</strong> Internet Explorer por lo que no te será <strong>de</strong> mucho uso aunque sea una muy buenaregla <strong>de</strong> estilo.Asignándole este valor a la propiedad position po<strong>de</strong>mos hacer que un <strong>el</strong>emento se que<strong>de</strong> fijo enla ventana aunque se muevan las barras <strong>de</strong> <strong>de</strong>splazamiento. Un comportamiento muy útil para losmenús o algunos gráficos que queramos que permanezcan siempre a la vista.También acepta los pares top/bottom y left/right para <strong>de</strong>finir la posición en la que se mostará fijo.
Por ejemplo:#menu {position: fixed;top: 0px;right: 0px;}Esta regla <strong>de</strong> estilo posicionaría un <strong>el</strong>emento con i<strong>de</strong>ntidad menu en la esquina superior <strong>de</strong>recha<strong>de</strong> la ventana y aunque utilicemos <strong>el</strong> scroll (las barras <strong>de</strong> <strong>de</strong>splazamiento) permanecerá allí fijo.Claro está, este valor no funciona en IE 6, aunque es posible que en futuras versiones puedanarreglar este problema.
Unidad 17. Estilos CSS Avanzado (XIV)17.14Controles <strong>de</strong> visibilidadPor último en este apartado veremos unas cuantas propieda<strong>de</strong>s que tienen que ver con la formaen la que se visualizan los <strong>el</strong>ementos en pantalla.La primera propiedad que veremos será z-in<strong>de</strong>x.Esta propiedad <strong>de</strong>ci<strong>de</strong> <strong>el</strong> or<strong>de</strong>n <strong>de</strong> profundidad <strong>de</strong> los <strong>el</strong>ementos que se encuentran solapados.En <strong>el</strong> apartado anterior vimos cómo mover los <strong>el</strong>ementos en la pantalla. Imagina, ahora, que almover dos capas una nos queda por encima <strong>de</strong> la otra.¿Cómo po<strong>de</strong>mos <strong>de</strong>cidir cuál quedará por <strong>de</strong>trás? ¿Y al frente?Utilizaremos esta propiedad para <strong>el</strong>lo.Z-in<strong>de</strong>x acepta números positivos o negativos, y establece que <strong>el</strong> <strong>el</strong>emento con un valormayor se mostrará por d<strong>el</strong>ante d<strong>el</strong> resto.Veamos un ejemplo:z-in<strong>de</strong>x: 0z-in<strong>de</strong>x: 2z-in<strong>de</strong>x: 1z-in<strong>de</strong>x: 2z-in<strong>de</strong>x: 0z-in<strong>de</strong>x: 1Para utilizar esta propiedad basta con <strong>de</strong>clararla:.rojo {position: r<strong>el</strong>ative;top: 100px;left: 20px;z-in<strong>de</strong>x: 0;}Otra propiedad muy valiosa a la hora <strong>de</strong> jugar con la visibilidad es visibility.Pue<strong>de</strong> tomar los valores visible y hid<strong>de</strong>n (visible y escondida respectivamente).
Asigna <strong>el</strong> valor hid<strong>de</strong>n a todos aqu<strong>el</strong>los <strong>el</strong>ementos que quieras que no aparezcan en la pantalla.Muy útil para ocultar estadísticas o para crear animaciones complejas combinando esta propiedadcon JavaScript.#estadisticas {visible: hid<strong>de</strong>n;}Finalmente nos encontramos con otra propiedad llamada overflow.Esta propiedad establece como ha <strong>de</strong> tratarse <strong>el</strong> contenido <strong>de</strong>ntro <strong>de</strong> un <strong>el</strong>emento.El overflow en realidad se hace cargo d<strong>el</strong> <strong>de</strong>sbordamiento <strong>de</strong> contenido. Por lo que sólo actúaen aqu<strong>el</strong>los casos en los que <strong>el</strong> continente se queda <strong>de</strong>masiado pequeño para mostarlo todo.Pue<strong>de</strong> tomar los valores visible, hid<strong>de</strong>n, scroll y auto.El valor visible hace que se ignore <strong>el</strong> tamaño d<strong>el</strong> continente para mostrar todo <strong>el</strong> contenido. Es <strong>el</strong>valor por omisión en la mayoría <strong>de</strong> los navegadores.Utilizando hid<strong>de</strong>n se oculta <strong>el</strong> contenido que no cabe y no muestra barras <strong>de</strong> <strong>de</strong>splazamiento. Eltamaño d<strong>el</strong> continente no se verá afectado.Si le das <strong>el</strong> valor scroll se introducirán las barras <strong>de</strong> <strong>de</strong>splazamiento necesarias para que <strong>el</strong>contenido pueda visualizarse correctamente. El tamaño d<strong>el</strong> continente no se verá afectado.Finalmente, con <strong>el</strong> valor auto <strong>de</strong>jamos que sea <strong>el</strong> explorador d<strong>el</strong> usuario <strong>el</strong> que <strong>de</strong>cida qué hacercon <strong>el</strong> sobrante d<strong>el</strong> contenido.Veamos unos ejemplos:visiblehid<strong>de</strong>nscroll
autoEn este ejemplo hemos introducido 4 etiquetas div que contienen una imagen más ancha que<strong>el</strong>las.El bloque marcado con overflow: visible; ignora su tamaño y muestra la imagen completa. Alcontrario que <strong>el</strong> que está <strong>de</strong>finido como hid<strong>de</strong>n que escon<strong>de</strong> (o recorta) <strong>el</strong> resto <strong>de</strong> la imagen.El valor scroll muestra las 2 barras <strong>de</strong> <strong>de</strong>splazamiento aunque la vertical no sea necesaria, y autohace que <strong>el</strong> navegador introduzca únicamente la horizontal pues es la que es necesaria en estecaso.Ejercicios d<strong>el</strong> Tema 17. Prueba evaluativa d<strong>el</strong> Tema 17.
Unidad 18. Sitios Remotos (I)18.1En <strong>el</strong> tema 3 vimos cómo crear y trabajar con un sitio local.Esta unidad está <strong>de</strong>dicada a los Sitios Remotos, veremos cómo crearlos y cómo utilizarlos.Definir un sitio remoto significa establecer una configuración <strong>de</strong> modo que <strong>Dreamweaver</strong> seacapaz <strong>de</strong> comunicarse directamente con un servidor en Internet (por eso se llama remoto) y así po<strong>de</strong>rtrabajar a la vez con tus archivos en <strong>el</strong> sitio local, es <strong>de</strong>cir, la copia que tienes en tu or<strong>de</strong>nador, y en<strong>el</strong> sitio remoto, colgados en <strong>el</strong> servidor, en Internet.El modo en <strong>el</strong> que veremos que <strong>el</strong> programa se comunica con tu servidor será FTP, ya que esprácticamente <strong>el</strong> más utilizado y muy pocos utilizan otras alternativas.Configurar un Sitio RemotoMuy bien, ahora veamos los pasos que tenemos que seguir para configurar las opciones y que<strong>Dreamweaver</strong> se pueda conectar con nuestro servidor.Para <strong>el</strong>lo <strong>de</strong>beremos modificar la especificación que creamos en su día d<strong>el</strong> sitio con <strong>el</strong> queestamos trabajando.Así que haz clic en Sitio y s<strong>el</strong>ecciona Administrar sitios.S<strong>el</strong>ecciona <strong>el</strong> sitio con <strong>el</strong> que quieras establecer comunicación remota (o crea uno nuevo para <strong>el</strong>caso) y pulsa Editar.Verás que se abre <strong>el</strong> cuadro <strong>de</strong> diálogo <strong>de</strong> Definición d<strong>el</strong> Sitio.Ahora podremos escoger entre trabajar en modo básico o avanzado. Vamos a s<strong>el</strong>eccionar lapestaña Avanzado para po<strong>de</strong>r ver con más <strong>de</strong>tenimiento las opciones que se nos ofrecen.Una vez estés en <strong>el</strong> nuevo modo, s<strong>el</strong>ecciona la Categoría Datos remotos en <strong>el</strong> listado <strong>de</strong> laizquierda.Ahora en <strong>el</strong> <strong>de</strong>splegable Acceso s<strong>el</strong>ecciona <strong>el</strong> método <strong>de</strong> acceso que <strong>de</strong>berá utilizar<strong>Dreamweaver</strong> para conectarse con <strong>el</strong> servidor. Como ya hemos dicho nosotros explicaremos laopción FTP.Se mostrarán las siguientes opciones:
Aquí <strong>de</strong>berás r<strong>el</strong>lenar los datos que te facilitó <strong>el</strong> servicio <strong>de</strong> hosting que contrataste. Si norecuerdas los datos o has perdido <strong>el</strong> correo <strong>el</strong>ectrónico que seguramente te enviaron, píd<strong>el</strong>es <strong>de</strong>nuevo la información.Los datos que necesitrás son los siguientes:Servidor FTP o host es la dirección a la que se dirigirá <strong>Dreamweaver</strong> para conectarse a tuservidor será d<strong>el</strong> tipo ftp.servidor.com o también podrás encontrar algunas que están formadas enforma <strong>de</strong> dirección IP (como por ejemplo, 192.186.1.1)En <strong>el</strong> campo Directorio d<strong>el</strong> Servidor podremos establecer una carpeta contenida en <strong>el</strong> servidordon<strong>de</strong> queramos subir las páginas.Imagina que <strong>de</strong>ntro <strong>de</strong> la estructura <strong>de</strong> carpetas d<strong>el</strong> servidor romoto tienes una que se llamapagina y <strong>de</strong>ntro <strong>de</strong> esta otra que se llame principal. Podríamos indicar la ruta pagina/principal paraque los archivos se subiesen directamente a esa ubicación.En Usuario y Contraseña escribe <strong>el</strong> nombre <strong>de</strong> usuario y <strong>el</strong> password para po<strong>de</strong>r conectar con<strong>el</strong> servidor. Marca la casilla Guardar si quieres que <strong>el</strong> programa recuer<strong>de</strong> la contraseña.Una vez introducidos estos datos pue<strong>de</strong>s pulsar <strong>el</strong> botón Probar para ver si son correctos y<strong>Dreamweaver</strong> pue<strong>de</strong> crear una conexión con <strong>el</strong> servidor remoto.Finalmente comentaremos la opción Permitir <strong>de</strong>sproteger y proteger archivo. Esta casilla es útilcuando más <strong>de</strong> una persona está utilizando <strong>el</strong> mismo servidor y las mismas páginas. De esta forma(como veremos más ad<strong>el</strong>ante) podrás bloquear diversos archivos para evitar que se veanmodificados por otra persona (que también tenga acceso al servidor) mientras tú trabajas con <strong>el</strong>los.
Si s<strong>el</strong>eccionas la opción Cargar archivos en <strong>el</strong> servidor automáticamente al guardar forzarás aque Deamweaver suba los archivos cada vez que los guar<strong>de</strong>s. Una opción bastante útil para noolvidar subir pequeños retoques que se vayan haciendo en <strong>el</strong> tiempo. Aunque es una opción un pocop<strong>el</strong>igrosa porque si modificas la versión en local y te equivocas no podrás recuperar la versiónanterior que estaba almacenada en <strong>el</strong> remoto porque se habrá sobreescrito. Esta opción tampoco esrecomendable si no tienes conexión permanente y rápida a Internet.Una vez hayas terminado Acepta todas las pantallas hasta volver a la vista <strong>de</strong> trabajo y estaremoslistos.
Unidad 18. Sitios Remotos (II)18.2El Pan<strong>el</strong> ArchivosDes<strong>de</strong> <strong>el</strong> pan<strong>el</strong> Archivos seremos capaces <strong>de</strong> controlar nuestro sitio local y remoto <strong>de</strong> forma fácily rápida.En este apartado veremos qué pasos <strong>de</strong>bemos seguir para completar unas cuantas acciones quenos serán bastante útiles.A primera vista <strong>el</strong> pan<strong>el</strong> Archivos muestra este aspecto:Su uso es bastante sencillo. Observa los dos <strong>de</strong>splegables <strong>de</strong> la parte superior.El primero te permite s<strong>el</strong>eccionar <strong>el</strong> sitio con <strong>el</strong> que estamos trabajando. El segundo te permitecambiar la vista <strong>de</strong> ese sitio.Esta última opción es muy útil para ver <strong>el</strong> contenido que se encuentra subido en Internet. Una vezhayas configurado las opciones d<strong>el</strong> Servidor Remoto podrás <strong>de</strong>splegar esta opción y s<strong>el</strong>eccionarVista remota, se mostrarán todos los archivos que en ese momento se encuentran en <strong>el</strong> servidor.Ahora veremos para qué sirven los botones:El botón Conectar te permitirá establecer una conexión con <strong>el</strong> servidor. De formapre<strong>de</strong>terminada <strong>Dreamweaver</strong> se <strong>de</strong>sconecta d<strong>el</strong> servidor cada 30 minutos.
El botón Actualizar actualiza las listas <strong>de</strong> las vistas local y remota. Así podrás ver <strong>el</strong>contenido exacto en cada momento <strong>de</strong> cada uno <strong>de</strong> los sitios, se utiliza sobre todo cuando variaspersonas tienen acceso al sitio remoto para cambiar las páginas.Utiliza <strong>el</strong> botón Obtener para <strong>de</strong>scargar al servidor local archivos que hayas s<strong>el</strong>eccionado en<strong>el</strong> pan<strong>el</strong> Archivos en la vista remota. Estos archivos se copiarán en tu sitio local, y en caso <strong>de</strong> yaexistir se sobreescribirán.El botón Colocar actúa <strong>de</strong> forma contraria. Sube los archivos s<strong>el</strong>eccionados en la vista localal servidor, se copiarán y si existen se sobreescribirán.Luego los dos siguientes botones podrán ser utilizados si has s<strong>el</strong>eccionado la opción Permitir<strong>de</strong>sproteger y proteger archivo en <strong>el</strong> cuadro <strong>de</strong> diálogo Definición d<strong>el</strong> Sitio anterior.Utiliza <strong>el</strong> botón Proteger para realizar la acción anterior <strong>de</strong> Obtener pero protegiendo <strong>el</strong>archivo que se encuentra en <strong>el</strong> servidor convirtiéndolo en sólo lectura. De esta forma si alguien conacceso al servidor intenta modificar <strong>el</strong> archivo le será imposible hasta que lo <strong>de</strong>sprotejas.D<strong>el</strong> mismo modo, <strong>el</strong> botón Desproteger actúa d<strong>el</strong> mismo modo que <strong>el</strong> botón Colocar perocuando sube <strong>el</strong> archivo al servidor lo <strong>de</strong>sprotege para que pueda ser modificado por otras personas.Si activaste la opción Permitir <strong>de</strong>sproteger y proteger archivo y subes un archivo nuevo alservidor (uno que aún no se encuentre en la vista remota) automáticamente se protegerá. Para evitaresto <strong>de</strong>berás subir los archivos nuevos utilizando <strong>el</strong> botón Desproteger.
Unidad 18. Sitios Remotos (III)18.3Sincronizar SitiosEsta es una <strong>de</strong> las opciones más útiles en cuanto a Sitios Remotos.Esta opción permite hacer un estudio <strong>de</strong> los archivos situados en <strong>el</strong> sitio local y remoto yestablecer <strong>el</strong> modo en <strong>el</strong> que se <strong>de</strong>berán copiar, borrar y sobreescribir los archivos para conseguir unobjetivo: al final <strong>de</strong> la sincronización, los archivos en <strong>el</strong> sitio remoto y <strong>el</strong> sitio local <strong>de</strong>ben ser iguales.Para realizar una sincronización haz clic <strong>de</strong>recho sobre cualquier zona en <strong>el</strong> pan<strong>el</strong> Archivos ys<strong>el</strong>ecciona la opción Sincronizar....Verás que aparece un cuadro <strong>de</strong> diálogo como este:Este es <strong>el</strong> paso más importante en la sincronización, pues <strong>de</strong>cidiremos <strong>de</strong> qué modo se va arealizar.En <strong>el</strong> <strong>de</strong>splegable Sincronizar: s<strong>el</strong>eccionaremos una <strong>de</strong> las dos opciones, Archivos localess<strong>el</strong>eccionados solamente o Todo <strong>el</strong> sitio. Dependiendo <strong>de</strong> qué opción <strong>el</strong>ijas se copiarán sólo unosarchivos o todos los que forman <strong>el</strong> sitio.En <strong>el</strong> <strong>de</strong>splegable Dirección: estableceremos las pautas que se <strong>de</strong>ben seguir durante lasincronización.Si s<strong>el</strong>eccionas Colocar archivos más nuevos en remoto cuando se comparen ambos sitios, sesobreescribirán aqu<strong>el</strong>los en <strong>el</strong> sitio remoto que tengan una fecha <strong>de</strong> modificación menor a la queexista en <strong>el</strong> local. De esta forma copiarás en dirección Local a Remoto.Si s<strong>el</strong>eccionas la opción Obtener archivos más nuevos <strong>de</strong> remoto se copiarán aqu<strong>el</strong>los archivosque se encuentren en <strong>el</strong> sitio remoto que tengan una fecha <strong>de</strong> modificación mayor que la d<strong>el</strong> local.En este caso estaremos copiando en dirección Remoto a Local.La última opción, Obtener y colocar archivos más nuevos, se refiere a la sincronización comotal. Evalúa los archivos en <strong>el</strong> sitio remoto y local y copia los más nuevos en <strong>el</strong> que contiene los másviejos. En este caso la Sincronización es Bidireccional.
Marca la opción Eliminar archivos remotos no existentes en la unidad local si quieres que losarchivos que se encuentren en <strong>el</strong> remoto que no estén en <strong>el</strong> local se borren.Al pulsar Vista previa... aparece un listado con los cambios que se van a realizar, sólo nosquedará aceptarlo.Debido a que no todos los servidores tienen acceso FTP y que no tienes porqué tener acceso a unservidor remoto no realizaremos ningún ejercicio sobre este tema. Si quieres establecer una conexióncon tu servidor remoto sólo tendrás que seguir los pasos explicados en la teoría.Prueba evaluativa d<strong>el</strong> Tema 18.
![Ejercicios de form. y deriv. [ejercicios]](https://img.yumpu.com/42668029/1/184x260/ejercicios-de-form-y-deriv-ejercicios.jpg?quality=85)
Change language