CURSO DE DISEÑO DE PÁGINAS WEB Unidad 1. Conceptos básicos de Dreamweaver 8 (I)...3 Unidad 1. Conceptos básicos de Dreamweaver 8 (II)...7 Unidad 1.

Transcripción

1 CURSO DE DISEÑO DE PÁGINAS WEB Unidad 1. Conceptos básicos de Dreamweaver 8 (I)...3 Unidad 1. Conceptos básicos de Dreamweaver 8 (II)...7 Unidad 1. Conceptos básicos de Dreamweaver 8 (III)...10 Unidad 1. Conceptos básicos de Dreamweaver 8 (IV)...13 Ejercicio 1: Mi primera página...14 Unidad 2. El entorno de trabajo (I)...15 Unidad 2. El entorno de trabajo (II)...21 Unidad 3. Configuración de un sitio local (I)...24 Unidad 3. Configuración de un sitio local (II)...27 Ejercicio 2 Web deportes...34 Ejercicio 3 web animales...35 Unidad 4. El texto (I)...36 Unidad 4. El texto (II)...39 Unidad 4. El texto (III)...41 Ejercicio 4 web Deportes continuacion...46 Ejercicio 5 Web animales continuacion...46 Unidad 5. Hiperenlaces (I)...48 Unidad 5. Hiperenlaces (II)...53 Ejercicio 6 Deportes Continuación...56 Ejercicio 7 Animales Continuación...56 Unidad 6. Imágenes (I)...58 Ejercicio 8 Cocina Zonas interactivas...66 Unidad 6. Imágenes (II)...68 Ejercicio 9 Web deportes continuación...73 Ejercicio 10 Web animales continuación...73 Ejercicio 11 Barra de navegación...74 Ejercicio 12 Texto flash...74 Unidad 7. Tablas (I)...75 Ejercicio 13 Insertar tabla...77 Unidad 7. Tablas (II)...79 Ejercicio 14 Cocina ampliación...82 Unidad 7. Tablas (III)...85 Unidad 7. Tablas (IV)...89 Ejercicio 15 web deportes ampliación tablas...90 Ejercicio 16 web animales ampliación tablas...91 Unidad 8. Marcos (I)...93 Ejercicio17 Deportes Ampliación. Marcos...95 Unidad 9. Formularios (I)...96 Unidad 9. Formularios (II)...99 Ejercicio 18 web deportes Formulario Ejercicio 19 web animales Formulario Unidad 10. Multimedia (I) Unidad 10. Multimedia (II) Unidad 11. Las plantillas (I) Unidad 11. Las plantillas (II) Unidad 11. Las plantillas (III) Unidad 12. HTML desde Dreamweaver (I) Unidad 12. HTML desde Dreamweaver (II) Unidad 12. HTML desde Dreamweaver (III) Unidad 12. HTML desde Dreamweaver (IV) Unidad 12. HTML desde Dreamweaver (V) Unidad 12. HTML desde Dreamweaver (VI) Unidad 13. Otros elementos (I)...141

2 Unidad 13. Otros elementos (II) Unidad 13. Otros elementos (III) Unidad 14. Capas Unidad 15. Comportamientos (I) Unidad 15. Comportamientos (II) Unidad 16. Comportamientos Avanzados (I) Unidad 16. Comportamientos Avanzados (II) Unidad 16. Comportamientos Avanzados (III) Unidad 16. Comportamientos Avanzados (IV) Unidad 16. Comportamientos Avanzados (V) Unidad 16. Comportamientos Avanzados (VI) Unidad 17. Estilos CSS Avanzado (I) Unidad 17. Estilos CSS Avanzado (II) Unidad 17. Estilos CSS Avanzado (III) Unidad 17. Estilos CSS Avanzado (IV) Unidad 17. Estilos CSS Avanzado (V) Unidad 17. Estilos CSS Avanzado (VI) Unidad 17. Estilos CSS Avanzado (VII) Unidad 17. Estilos CSS Avanzado (VIII) Unidad 17. Estilos CSS Avanzado (IX) Unidad 17. Estilos CSS Avanzado (X) Unidad 17. Estilos CSS Avanzado (XI) Unidad 17. Estilos CSS Avanzado (XII) Unidad 17. Estilos CSS Avanzado (XIII) Unidad 17. Estilos CSS Avanzado (XIV) Unidad 18. Sitios Remotos (I) Unidad 18. Sitios Remotos (II) Unidad 18. Sitios Remotos (III)...213

3 Unidad 1. Conceptos básicos de Dreamweaver 8 (I) Pág. 1.1 Qué es Dreamweaver 8 Dreamweaver 8 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver 8 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te animas a comprar la versión de pago de este estupendo programa. Si no conoces las características básicas de HTML puedes verlas aquí. HTML básico Las páginas que vemos en Internet están escritas utilizando el lenguaje HTML (Hyper Text Markup Language). Este lenguaje está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web. Por ejemplo, el título de la página Web se escribe entre las etiquetas <TITLE> y </TITLE>. Como ves, ambas etiquetas consisten en poner un mismo comando entre los símbolos "<" y ">". La primera etiqueta indica inicio, y la segunda, que incluye el símbolo "/", indica final. Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan. Por ejemplo, <TABLE Border="1"> indica que la tabla tendrá un borde de tipo 1. Una página HTML básica tendría el siguiente aspecto: <HTML> <HEAD> <TITLE> Mi primera página web </TITLE> <BODY> <A href:" Haz clic aquí para ir a aulaclic</a> resto de la página web </BODY>

4 <HTML> Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se muestra en un navegador (IExplorer, Netscape, etc). Cuando un usuario desde Internet solicita ver una página el servidor Web envía la página al navegador y este interpreta las etiquetas para dar el formato a la página. Cuando utilizamos Dreamweaver para crear una página Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico. Novedades de Dreamweaver 8 En este punto comentaremos las características que aporta esta nueva versión sobre la anterior, Dreamweaver MX Integración de RSS: con Dreamweaver 8 podrás integrar entradas RSS provinientes de otras páginas con sólo introducir la fuente y arrastrar y colocar los campos. De esta forma podrás introducir datos en forato XML fácil y cómodamente. Mejoras CSS: esta última versión ha mejorado mucho respecto a la compatibilidad y manejo de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS, donde ahora podrás acceder a la configuración de cada uno de los estilos desde una lista mucho mejor dotado de una cuadrícula editable desde donde podrás modificar sus propiedades. Además, Dreamweaver 8, añade una nueva barra de herramientas que proporciona la reprodución inmediata de los estilos para diferentes medios (pantalla, impresora, webtv, PDAs...). Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2 marcadas por la WCAG/W3C. Transferencia de archivos: Ahora con Dreamweaver 8 podrás seguir trabajando con tus archivos mientras el programa se comunica con tu servidor e incluye los archivos creados o modificados recientemente. Su sincronización ha mejorado notablemente siendo posible una mejor gestión de cambios, además de pemitir en uso de bolqueo/desbloqueo de archivos para que estos no se sobreescriban. Interfaz mejorada: Los usuarios con problemas visuales podrán acceder auna opción de Aumento de la pantaña en vista de diseño para analizar o trabajar con difícles anidamientos de tablas. Además de la inclusión de información visual gracias a las guías que permitirán la medición píxel a píxel de todos los elementos. Nueva barra de herramientas: Se ha añadido una barra de herramientas a Dreamweaver 8, podrás encontrarla en la parte lateral izquierda del modo de Código, esta barra hace mucho más accesible el código al permitirnos la navegación por etiquetas y su contracción. Una de las nuevas novedades es la posibilidad de añadir comentarios con un sólo clic. Compatibilidad: Comentaremos, además, la compatibilidad añadida en esta versión con PHP5, Coldfusion MX 7 y Video Flash. Editar páginas web

5 Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo. Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página. Dreamweaver. Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromedía Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos. Cómo tener una página en Internet Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal. Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo,.net,.org,.es o.com. En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada. A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados. Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo. Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás que se encuentre a disposición de todo el mundo en Internet. Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu servidor

6 manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de 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 en blanco. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él. Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores distinguen entrre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imágen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.

7 Unidad 1. Conceptos básicos de Dreamweaver 8 (II) Pág. 1.2 Arrancar y cerrar Dreamweaver 8 Veamos las dos formas básicas de arrancar Dreamweaver 8. Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú; al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Macromedia (o Adobe si tienes las últimas versiones), seguidamente Dreamweaver 8, hacer clic sobre él, y se arrancará el programa. Desde el icono de Dreamweaver 8 del escritorio. Puedes arrancar Dreamweaver 8 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que te explicamos aquí. Compaginar dos sesiones Aquí te explicaremos cómo conseguir tener la pantalla dividida en dos partes, una con el curso y otra con Dreamweaver 8. 1 Abrir la sesión con el curso en Internet Explorer. 2 Abrir la sesión de Dreamweaver 8. 3 Pulsar con el botón derecho sobre cualquier parte vacía de la barra de tareas, en la parte inferior de la ventana de Windows (del escritorio). Es la barra en la que se encuentra el botón Inicio. 4 Elegir la opción Mosaico vertical. Observa como la pantalla ha quedado dividida en dos partes, como en la figura:

8 5 Una vez tenemos las dos sesiones con el tamaño adecuado, basta hacer clic con el ratón para pasar de la una a la otra. Para volver a dejar las ventanas con su tamaño normal, hacer clic en el botón Maximizar. Esto va bien con monitores grandes ( de 17" o más), con monitores pequeños quizás prefieras dejar las ventanas con su tamaño normal e ir pasando de una a otra presionando las teclas Alt + tabulador (manteniendo pulsada Alt, presionar la tecla tabulador) o pulsando el botón correspondiente a la sesión en la barra de tareas en la última línea de la pantalla. Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botón cerrar Pulsar la combinación de teclas ALT+F4. Hacer clic sobre el menú Archivo y elegir la opción Salir. Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos. Abrir y guardar documentos Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botón abrir de la barra de herramientas estándar. Pulsar la combinación de teclas Ctrl+O. Hacer clic sobre el menú Archivo y elegir la opción Abrir. Hacer doble clic sobre el archivo en la ventana del sitio.

9 Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botón abrir de la barra de herramientas estándar. Pulsar la combinación de teclas Ctrl+N. Hacer clic sobre el menú Archivo y elegir la opción Nuevo. Hacer doble clic sobre el archivo en la ventana del sitio. Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página básica, HTML. Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botón guardar de la barra de herramientas estándar. Pulsar la combinación de teclas Ctrl+S. Hacer clic sobre el menú Archivo y elegir la opción Guardar. Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones. Hacer clic en el botón guardar todo de la barra de herramientas estándar. Hacer clic sobre el menú Archivo y elegir la opción Guardar todo. Al tener varios documentos abiertos es fácil olvidarse de todos las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta que te hayas habituado a manejar el programa.

10 Unidad 1. Conceptos básicos de Dreamweaver 8 (III) PAG 1.3 Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de 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 elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es. Mi primera página Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abres un documento nuevo y seleccionas la Categoría Página básica, HTML. Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente. Una vez introducido el texto, vas a modificar el título y el color de fondo del documento. Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. Entonces se abrirá una ventana como la que aparece más abajo.

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

12 Ahora tienes que insertar la imagen debajo de la segunda línea de texto. En primer lugar debes situar el cursor al final de la segunda línea y pulsar un intro (Enter) para ir a una nueva línea. Después debes dirigirte al menú Insertar, a la opción Imagen. En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, y después seleccionarla.

13 Unidad 1. Conceptos básicos de Dreamweaver 8 (IV) PAG 1.4 Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto: Si no te aparece, puedes mostrarlo a través del menú Ventana, con la opción Propiedades. Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraido. Para que te aparezca desplegado debes pulsar sobre el botón, que aparece junto al nombre. Selecciona la primera línea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen. Después de esto, la apariencia de la primera línea habrá cambiado. Selecciona la imagen y las dos útimas líneas de texto. Pulsa sobre el botón para centrarlos. Una vez hayas centrado la imagen y las otras dos líneas siguientes, selecciona la segunda línea de texto, que aún no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el botón y pulsa tres veces sobre el botón. Selecciona de nuevo la última línea, y en Vínculo introduce para crear un enlace a esa otra página:

14 Después de todos estos pasos, puedes ver cómo ha quedado el documento pulsando la tecla F12. Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar. Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensión ha de ser htm o html. Por ejemplo, puedes llamarlo prueba1.htm. Si pulsas aquí podrás ver cómo debería haber quedado la página después de haber seguido todos los pasos anteriores. Compara esta página con la tuya, para ver si lo has hecho todo bien. Ejercicio 1: Mi primera página. Sin resolver Resuelto

15 Unidad 2. El entorno de trabajo (I) Pag 2.1 Vamos a ver cuáles son los elementos básicos de Dreamweaver 8, la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde 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 de empezar a crear páginas web. La pantalla inicial Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento, como veremos más adelante. Las barras La barra de título

16 La barra de título contiene el nombre del programa (Marcromedia Dreamweaver 8) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar. La barra de menús La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles. La barra de herramientas estándar La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir, Guardar, etc. La barra de herramientas de documento La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa, etc. La barra de estado La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>). También nos es posible alternar entre los modos de selección, mano (para arrastrar la página), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%). Los paneles e inspectores

17 Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes. El inspector de Propiedades El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc. Pulsando sobre el botón inferior-derecha. se despliega para mostrar más opciones. Este botón se encuentra en la esquina Seguramente será la herramienta de Dreamweaver que más vayas a utilizar. La barra de herramientas Insertar o panel de objetos La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez. Si lo deseas puedes personalizar el área de trabajo, te explicamos cómo hacerlo aquí. Personalizar el área de trabajo (I)

18 Cambiar el aspecto del Panel de objetos Es posible cambiar el aspecto del panel de objetos, se puede visualizar a modo de fichas, tal como aparece en la siguiente imagen: También puede tener este otro aspecto: Para pasar del aspecto Fichas al otro hay que hacer clic sobre el botón como menú., y seleccionar la opción Mostrar Para volver al aspecto Fichas, desplegamos el menú Diseño (o el que esté en ese momento) y seleccionamos la opción Mostrar como fichas. Cambiar el nombre de un grupo de paneles Es posible cambiar el nombre de un grupo de paneles de forma sencilla. Vamos a ver como ejemplo el cambio de nombre del panel de objetos. En estos momentos el panel se llama "Insertar", pero queremos renombrarlo como "Insert". Para ello lo primero que hay que hacer es pulsar con el botón derecho sobre la zona del nombre o hacer clic sobre el botón con el siguiente aspecto, ambos situados a los extremos superiores del panel. Entonces se mostrará el siguiente menú, en el que habrá que elegir la opción Cambiar nombre de grupo de paneles... Después de esto se mostrará una ventana en la que se podrá introducir el nuevo nombre del panel

19 Cambiar la agrupación de los paneles La mayoría de los paneles y los inspectores aparecen agrupados junto a otros en una misma ventana flotante. Para cambiar la agrupación de un panel o de alguna de sus pestañas es necesario, en primer lugar, seleccionar el panel y la pestaña deseados. Por ejemplo, vamos a ver cómo cambiar la agrupación de la pestaña Capas del panel Diseño. Como puede apreciarse en la imagen, la pestaña Capas ya está activa. Seguidamente hay que hacer clic sobre el botón con el siguiente aspecto, o pulsar con el botón derecho sobre la zona del nombre del panel o de la pestaña. Para cambiar la agrupación del panel a otro grupo diferente es necesario dirigirse a Agrupar Capas con, después de lo cual debe mostrarse una lista de todos los paneles, pudiendo seleccionar uno de ellos. De este modo Capas dejaría de estar incluida en el panel Diseño, y aparecería en ese otro panel. Personalizar el área de trabajo (II) Cambiar los métodos abreviados de teclado Los métodos abreviados de teclado son las combinaciones de teclas que permiten acceder a algunas opciones sin la necesidad de moverse a través de los menús. Para modificar las combinaciones de teclas hay que dirigirse al menú Edición, a la opción Métodos abreviados de teclado. En esta nueva ventana es necesario seleccionar un comando y una de las combinaciones de la lista de Métodos abreviados, situar el cursor en el campo Pulse tecla, seguidamente pulsar la combinación de teclas deseada, y por último hacer clic sobre el botón Cambiar. Es posible que no se permita modificar las combinaciones de teclas del conjunto seleccionado, por ser combinaciones que provienen de fábrica, por lo que se pedirá confirmación para crear una copia modificable del conjunto. Hay que tener también en cuenta que no se permite asignar a un comando una combinación de teclas que ya está asignada a otro diferente.

20 Acoplar y desacoplar grupos de paneles Para facilitar la organización de los paneles flotantes es posible acoplarlos a la derecha o izquierda del área de trabajo, en un grupo de paneles. Para mover un panel, ya sea para acoplarlo o desacoplarlo de un grupo de paneles, simplemente hay que pulsar sobre la zona de puntos que se encuentra junto al nombre del panel, y mantener pulsado el ratón mientras se arrastra el panel hacia el lugar deseado. Los grupos de paneles pueden mostrarse y ocultarse pulsando sobre el botón que tiene el siguiente aspecto. También pueden mostrarse y ocultarse todos los paneles pulsando la tecla F4, o a través de una opción del menú Ventana. Al ocultar los paneles la ventana de trabajo queda más grande, por lo que estas opciones son de gran utilidad.

21 Unidad 2. El entorno de trabajo (II) Pag 2.2 Vistas de un documento Puedes cambiar la vista del documento a través de la barra de herramientas de documento. La vista Diseño La vista Diseño permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente. La vista Código La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código.

22 La vista Código y Diseño La vista Código y Diseño permite dividir la ventana en dos zonas. La zona superior muestra el código fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.

23 La ayuda A través del menú Ayuda puedes: Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por temas, por índice o por contenido, si seleccionas la opción Utilización de Dreamweaver o simplemente pulsando F1. Acceder a tutoriales (opción Primeros pasos con Dreamweaver). encontrarás la sintaxis y descripción de las etiquetas HTML. Abrir el panel Referencia en el que Acceder al Centro de servicio técnico de Dreamweaver en la web. Acceder al Foros en línea de Dreamweaver.

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

25 En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad. Por supuesto, pueden existir varios sitios locales en un mismo ordenador. Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir las características del sitio. Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda. Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella. Vamos a ver los datos que hay que editar para la categoría Datos locales. Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local. Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto. Estas tres características son las imprescindibles para definir un sitio local. Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es

26 necesario establecer los datos del servidor en el que estará el sitio remoto. Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio. Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vez de la pestaña Avanzadas. Abrir un sitio Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo. También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable de la pestaña Archivos.

27 Unidad 3. Configuración de un sitio local (II) Pag 3.2 Vistas del sitio Es posible visualizar un sitio en el panel Archivos o en una ventana. El panel Archivos se puede abrir a través del menú Ventana, opción Archivos. También pulsando F8. Para cambiar de una vista a otra hay que pulsar sobre el botón y de la ventana. que aparece en la parte superior del panel Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio. En esta imagen se visualizan el mapa del sitio y el sitio local. En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm, ya que éste ha sido definido como página principal del sitio y contiene vínculos hacia los otros dos. Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc.

28 En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a través del sitio, es posible actualizar automáticamente las páginas para que si hacen referencia a un objeto que ha cambiado, después no se produzcan problemas al visualizarlas. Al modificar algún objeto que es referenciado por algún otro documento, se muestra una ventana similar a esta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados. Simplemente hay que pulsar sobre el botón Actualizar. Subir Archivos al servidor Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) deberás subir los archivos al sitio que hayas contratado o conseguido gratuitamente. Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que deberás ir subiendo uno a uno cada archivo y creando las carpetas tú mismo. Este proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Sino los enlaces no funcionarán correctamente y es posible que algunas imágenes no se muestren. Para subir los archivos via web deberás seguir las instrucciones que te proporcionará tu servidor. La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior. Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en el Explorador de Windows) y, obviamente, nos es mucho más útil para subir los archivos. Uno de los programas gratuitos (si no es con fines comerciales) más utilizados es SmartFTP, desdesu página web podrás descargarte el programa y su traducción al español. Una vez instalado, abre el programa y haz clic en Archivo y luego en Nuevo Navegador Remoto para crear una nueva cuenta FTP.

29 Aquí deberás introducir los datos que te facilitó el servidor donde vas a alojar tus páginas: Host, Usuario y Contraseña. Rellena los campos y haz clic en OK. Se conectará automáticamente y podrás ver una carpeta donde podrás copiar los archivos que hayas creado. Para ello, haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos de tu disco duro. Busca la carpeta que definiste como Sitio local y copia todos los archivos que quieras subir seleccionándolos a la vez y arrastrándolos a la carpeta (remota) del servidor.

30 Verás como el programa empieza a copiar la información de tu disco a Internet. Cuando haya finalizado, sólo tendrás que introducir tu dirección de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer...) y verás el sitio en Internet! Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta public_html y sube tus archivos allí. Propiedades del documento Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página. Este cuadro se puede abrir de tres modos diferentes: Pulsar la combinación de teclas Ctrl+J. Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página. Se abrirá el cuadro de diálogo siguiente:

31 Las propiedades están organizadas en categorías. En la categoría Aspecto, como ves en la imagen anterior, encontramos las propiedades: Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo. Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo. Tamaño: permite definir el tamaño de la letra. Color del texto: es el color de la fuente. Márgenes: permiten establecer márgenes en el documento. Los márgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de márgen solo funcionan para Netscape Navigator. Ninguno de estos márgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarán en los navegadores. En la categoría Título/Codificación encontramos la propiedad: Título: es el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver. En la categoría Vínculos encontramos las propiedades: Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas. Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al usuario si unos vínculos ya han sido visitados o no. Vínculos activos: es el color de los vínculos activos. Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado. En la categoría Imagen de rastreo encontramos las propiedades:

32 Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento. Transparencia: permite establecer la opacidad de la imagen de rastreo. Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse en el navegador. Para ver cómo comprobar el tamaño de los documentos, pulsa aquí. Comprobar tamaño para optimizar la carga Si las páginas tienen muchos elementos (imágenes, tablas, etc.) y son muy grandes, posiblemente tarden mucho tiempo en mostrarse totalmente en el navegador. Esto no es nada recomendable, ya que los usuarios pueden perder la paciencia, y no visitar más nuestra página. Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy elevado. Dreamweaver permite calcular automáticamente el tiempo de descarga de las páginas. Para ello hay que dirigirse al menú Edición, a la opción Preferencias.

33 En esta nueva ventana lo primero que hay que hacer es seleccionar una Categoría. En este caso nos interesa la de Barra de estado. En ella habrá que establecer una Velocidad de conexión. En España 56,0 es la velocidad de los módems normales, pero podemos elegir otra diferente, por ejemplo si pensamos que la mayoría de nuestros posibles clientes tienen conexiones rápidas. Una vez establecida una velocidad de conexión, y aceptados los cambios, Dreamweaver calculará el tamaño y el tiempo de descarga de la páginas a partir de esa velocidad de conexión. Hay que tener en cuenta que el tamaño de descarga de una página no solo se calcula a partir del tamaño de esa página en disco, sino que hay que considerar también el tamaño de las imágenes que aparecen en ella, y del resto de elementos. Cuando en la ventana de documento de Dreamweaver esté abierta alguna página, se mostrarán su tamaño y su tiempo de descarga en la barra de estado. Por ejemplo, esta página que estás viendo tiene un tamaño de descarga de 19K, y se presupone un tiempo de descarga de 5 segundos, ya que en la barra de estado de la ventana de documento aparecen estos datos entre el tamaño de la ventana de documento y el panel de propiedades, representados por 19K/5 s.

34 Los colores Para asignar colores es posible desplegar una paleta de colores como ésta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior. Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. También es posible personalizar los colores a través del botón parte superior de la paleta. de la Los colores pueden asignarse a través de los botones:. Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la página, que tienes más arriba. El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris, lo que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el número hexadecimal del color en el recuadro blanco. Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color azul con valor #3399FF, el botón quedaría del siguiente modo:. Ejercicio 2 Web deportes Enunciado Deportes. 1 Crear un sitio local con el nombre Deportes, cuya carpeta raíz sea la carpeta deportes, que se encuentra dentro de la carpeta ejerciciossinresolver. 2 Abrir el documento menu.htm. 3 Modificar sus propiedades para que el color de los vínculos, sea cual sea su estado, sea # y nunca se encuentren subrayados. 4 Asígnale el color de fondo # y la imagen fondo5.gif que se encuentra en la carpeta imagenes del sitio aparezca como fondo sin repetición. 5 Haz que la fuente del documento sea Verdana 18px Negrita. 6 Abre los archivos donde.htm, instalaciones.htm, quienes.htm y reservas.htm. 7 Establece el color de fondo como #999999, selecciona la imagen fondo.gif de la carpeta imagenes del sitio como fondo y que se repita sobre el eje de las x. 8 Haz que la fuente de estos documentos sea Arial. 9 Abrir el documento marcos.htm y darle el título Tu Tienda de Deportes.

35 10 Guardar todos los cambios y cerrar los documentos. A partir de este momento, realizando los ejercicios propuestos, vamos a crear una página como la que aparece si pulsas aquí. Carpeta archivos Carpeta solucion Ejercicio 3 web animales 1 Crear un sitio local con el nombre Animales, cuya carpeta raíz sea la carpeta animales, que se encuentra dentro de la carpeta ejerciciossinresolver. 2 Abrir el documento consultas.htm y modificar sus propiedades, para que su título sea Consultas. 3 Abrir el documento gatos.htm y modificar sus propiedades, para que su título sea Gatos. 4 Abrir el documento perros.htm y modificar sus propiedades, para que su título sea Perros. 5 Abrir el documento inicio.htm y modificar sus propiedades, para que su título sea Inicio. 6 Guardar los cambios y cerrar los documentos. A partir de este momento, realizando los ejercicios propuestos, vamos a crear una página como la que aparece si pulsas aquí. Carpeta archivos Carpeta solución

36 Unidad 4. El texto (I) Pag 4.1 A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto estilos creados por nosotros mismos, no predefinidos. Características del texto Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, aunque sean menos que las que se nos ofrecen a través del menú Texto. Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o preformateado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetará que hayan varios espacios en lugar de solo uno. Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica. Tamaño: Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, centímetros, etc... Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro. Estilo: Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A través del menú Texto también se puede, entre otras cosas, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya

37 que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Alinear: A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Lista: Estos botones permiten crear listas con viñetas o listas numeradas. Sangria: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de márgen que se establece a ambos lados del texto. En este caso caso los botones se refieren a sangría a la izquierda del texto. Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades. Listas Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas. Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Texto. La lista con viñetas (desordenada) se selecciona a través del botón, mientras que la lista numerada

38 (ordenada) se selecciona a través del botón. Ejemplo de lista numerada (ordenada): 1. Preparar la mochila 1. Sacar los libros de ese día 2. Introducir los libros del día siguiente 2. Ponerme el pijama 3. Lavarme los dientes 4. Poner el despertador Ejemplo de lista con viñetas (desordenada): Perro Gato Aves o o Hamster Canario Loro Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. A través del menú Texto, opción Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active este submenú. En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las listas ordenadas, el número por el que comenzará el recuento. Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.

39 Unidad 4. El texto (II) Pag 4.2 Caracteres Especiales A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como á, ê, ì, ö, ç.. de forma rápida por si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación. Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen de la derecha. Sólo coloca el puntero del ratón sobre Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado. Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño. Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia: