Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Curso de Dreamweaver CC

58 views

Published on

Curso de Dreamweaver CC.
Curso de diseño de páginas web con la herramienta de Adobe Dreamweaver CC

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Curso de Dreamweaver CC

  1. 1. Monitor: Francisco Sánchez Guisado francisco@humantica.com www.humantica.com Curso de Dreamweaver CC Septiembre de 2015
  2. 2. Monitor: Francisco Sánchez GuisadoDiapositiva - 2CURSO DE DREAMWEAVER CC Curso de Dreamweaver CC 1. Introducción 2. Entorno de trabajo 3. Configurar un sitio 4. Texto 5. Hiperenlaces 6. Imágenes 7. Tablas 8. Widjets de JQuery 9. Formularios 10. Multimedia Plantillas HTML Otros Capas Comportamientos Recursos para tu Web
  3. 3. Monitor: Francisco Sánchez GuisadoDiapositiva - 3CURSO DE DREAMWEAVER CC 1. Introducción DW Dreamweaver CC, de la empresa ADOBE (antes Macromedia), es un programa fácil de usar que permite crear páginas Web profesionales • Las funciones de edición visual de Dreamweaver CC permiten agregar rápidamente diseño y funcionalidad a las páginas Web, sin la necesidad de programar manualmente el código HTML • Se pueden 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 trabajar con mapas visuales de los sitios Web, actualizando el sitio Web en el servidor sin salir del programa • Puedes descargarte una versión gratuita de DreamWeaver CC desde: http://www.adobe.com/downloads de prueba Dreamweaver CC significa “Creative Cloud”
  4. 4. Monitor: Francisco Sánchez GuisadoDiapositiva - 4CURSO DE DREAMWEAVER CC 1. Introducción DW • Dreamweaver CC forma parte de Familia Adobe Creative Suite, un conjunto de aplicaciones para la creación de “medios digitales”. • La última es la CC, incorpora estas nuevas características: – Vista en vivo – Vista rápida de elementos – Nuevo panel de control – Sincronización de equipos – Panel de diseñador de CSS – Plantilas responsive – Edge Web Fonts – Extract – Widgets de jQuery (sustituye a Spry) Busca “Dreamweaver” en la Wikipedia
  5. 5. Monitor: Francisco Sánchez GuisadoDiapositiva - 5CURSO DE DREAMWEAVER CC 1. Qué es el HTML • 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. • 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. • Además de Dreamweaver, existen otra serie de buenos editores de páginas Web, como pueden ser Microsoft Frontpage, Microsoft Expression Web, Microsoft Publisher, Amaya, Bluefish, NVU, KompoZer, Quanta Plus o BlueGriffon (código abierto), algunos tienen la ventaja de ser gratuitos. • Que tu profe te enseñe a crear páginas con código HTML con el Bloc de notas • Verás cómo lo sube a Internet en un momentito • Aprende a usar F12
  6. 6. Monitor: Francisco Sánchez GuisadoDiapositiva - 6CURSO DE DREAMWEAVER CC 1. Abrir y cerrar DW Veamos las dos formas básicas de abrir Dreamweaver: 1. 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 Adobe Design Premium CS4, seguidamente Adobe Dreamweaver CC 2015, hacer clic sobre él. 2. Desde el icono de Dreamweaver del escritorio: Para cerrar Dreamweaver, puedes utilizar cualquiera de las siguientes operaciones: 1. Hacer clic en el botón cerrar de la ventana 2. Pulsar la combinación de teclas ALT+F4 3. Hacer clic sobre el menú Archivo y elegir la opción Salir 4. Ctrl + Q Pon en práctica abrir y cerrar Dreamweaver
  7. 7. Monitor: Francisco Sánchez GuisadoDiapositiva - 7CURSO DE DREAMWEAVER CC 1. Tu primera página • Vamos a crear una página Web sencilla: 1. Empieza por abrir Dreamweaver: – Selecciona Archivo / Nuevo o Ctrl + N – Selecciona Nuevo documento – Tipo de documento: HTML – Botón Crear y se abrirá una página en blanco
  8. 8. Monitor: Francisco Sánchez GuisadoDiapositiva - 8CURSO DE DREAMWEAVER CC 1. Tu primera página (Asegúrate de que esté pulsado el botón “Diseño”) 2. Introduce, en el documento en blanco, el texto que aparece en la imagen 1ª 3. Modifica el título y el color de fondo del documento: • Haz clic sobre el menú Modificar y elegir la opción Propiedades de la página • Entonces se abrirá una ventana como la que aparece en la imagen 2ª • En Título/Codificación, Cambia el Título por "Mi primera página" • En Apariencia(CSS)/Color de Fondo escribe "#CCCCFF“ (color azul claro) • Seguidamente pulsa sobre el botón Aceptar… Pide a tu profe que te explique la codificación hexadecimal de los colores (RGB)* R G B
  9. 9. Monitor: Francisco Sánchez GuisadoDiapositiva - 9CURSO DE DREAMWEAVER CC 1. Colores RGB Numeración hexadecimal: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11…
  10. 10. Monitor: Francisco Sánchez GuisadoDiapositiva - 10CURSO DE DREAMWEAVER CC 1. Tu primera página 4. Ahora vamos a insertar una imagen: La imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro 5. 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, se abre una ventana con una opción similar a Guardar imagen como... que permite grabar dicha imagen en nuestro disco duro. 6. Guardar la imagen “arbol.gif” en la carpeta ”Ejercicios Dreamweaver” 7. 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 seleccionarla. No utilices caracteres especiales como acentos, eñes, apóstrofes, tildes, ni espacios en blanco ni mayúsculas en los nombres de archivos o carpetas
  11. 11. Monitor: Francisco Sánchez GuisadoDiapositiva - 11CURSO DE DREAMWEAVER CC 8. Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades. Si no te aparece, puedes mostrarlo a través del menú Ventana / Propiedades (Ctrl+F3) . Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraído. Para que te aparezca desplegado debes hacer doble clic sobre el nombre “Propiedades”: 9. Selecciona “HTML”. Selecciona la primera línea. Pon el Formato: "Encabezado 1“: 10.Selecciona “CSS”. En “Regla de destino” selecciona “Nuevo etilo de línea” y cambia el color del texto por "#009“ (azul), y selecciona la Fuente: “Gothan, Helvetica, Arial, sans-serif”. Centra el texto pulsando el botón “Alinear al centro”: 1. Tu primera página
  12. 12. Monitor: Francisco Sánchez GuisadoDiapositiva - 12CURSO DE DREAMWEAVER CC 11.Selecciona la segunda línea de texto, selecciona HTML / <Nuevo estilo en línea>. Pulsa sobre los botones para ponerla en negrita y cursiva 12.Selecciona la imagen, pulsa el botón “P” para seleccionar el párrafo que la contiene, CSS / <Nuevo estilo en línea> y pulsa el botón de centrar 13.Selecciona de nuevo la última línea, y en HTML / Vínculo introduce la URL "http://www.elpais.es", para crear un enlace a esa otra página: Punto 13: Comprueba que si el vínculo no comienza por ”http://...” el enlace no funcionará. 1. Tu primera página
  13. 13. Monitor: Francisco Sánchez GuisadoDiapositiva - 13CURSO DE DREAMWEAVER CC 14. Guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar en la misma carpeta “Ejercicios Dreamweaver” de la imagen 15. 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 "arbol.html” 16. Después de todos estos pasos, puedes ver cómo ha quedado el documento pulsando la tecla F12 (Archivo / Vista previa… / Explorer) 17. Prueba a Cerrar DW y abrir la página desde el Explorador de Windows Cuando termines, crea la página web “perro.html” partiendo de cero con un título, texto variado y coloreado, párrafos con formato, imágenes y vínculos a varias páginas web. 1. Tu primera página
  14. 14. Monitor: Francisco Sánchez GuisadoDiapositiva - 14CURSO DE DREAMWEAVER CC 2. Entorno de trabajo
  15. 15. Monitor: Francisco Sánchez GuisadoDiapositiva - 15CURSO DE DREAMWEAVER CC •Ajustes de FTP • Conmutador de espacio de trabajo • Barra de menús • Pestañas de documentos • Vista diseño • Vista código • Paneles y ventanas • Barra de estado • Panel de propiedades 2. Entorno de trabajo Ventana / Diseño del espacio de trabajo / Principiante
  16. 16. Monitor: Francisco Sánchez GuisadoDiapositiva - 16CURSO DE DREAMWEAVER CC 2. Entorno de trabajo Puedes cambiar la vista del documento a través de la barra de herramientas de documento: – 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 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. – La vista Dividir (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. Practica mostrando las vistas de documento y el botón Utiliza F4 para activar y desactivar todos los paneles.
  17. 17. Monitor: Francisco Sánchez GuisadoDiapositiva - 17CURSO DE DREAMWEAVER CC • La barra de estado nos da información sobre los elementos del documento. A la izquierda el selector de etiquetas HTML, que nos permite seleccionar etiquetas. A la derecha vista previa y tamaño de ventana: • En el menú Ver / Barras de Herramientas podemos seleccionar las barras que nos interesa mostrar: 1. La barra de herramientas estándar 2. La barra de herramientas de documento (abajo con la vista en vivo) 2. Entorno de trabajo Practica mostrando y ocultando las barras de herramientas. Comprime la imagen con el botón derecho / Optimizar
  18. 18. Monitor: Francisco Sánchez GuisadoDiapositiva - 18CURSO DE DREAMWEAVER CC 2. Entorno de trabajo • DW utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. • La apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. • El panel nos da acceso a opciones fijas. • 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. • F4 = Mostrar u ocultar paneles e inspectores Crea la página “mamiferos.html” practica las 6 opciones marcadas del Panel Insertar y crea un vínculo a la pagina “perro.html” Añade a “perro.html” el botón “Regresar” (encuéntralo con ayuda de Google) Panel Insertar: Inspector de Propiedades:
  19. 19. Monitor: Francisco Sánchez GuisadoDiapositiva - 19CURSO DE DREAMWEAVER CC 2. Entorno de trabajo – Cambiar elementos de sitio – Arrastrar y soltar imágenes – Cambiar propiedades del texto – Editar etiquetas HTML – Ahorras tiempo abriendo un navegador “Vista en Vivo” ofrece una representación “editable” más realista de la apariencia que tendrá la página en un navegador. La Vista en vivo no sustituye al comando “Vista previa en el navegador”, sino que proporciona otra forma de ver la página “en vivo” sin tener que abandonar el espacio de trabajo de Dreamweaver, donde además podrás realizar estas acciones:
  20. 20. Monitor: Francisco Sánchez GuisadoDiapositiva - 20CURSO DE DREAMWEAVER CC 2. La ayuda de DW A través del menú Ayuda puedes ir a varias opciones: 1. Accedes a tutoruales y ayudas online en la web de Adobe 2. Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por temas, por índice o por contenido (F1) 3. Acceder al Foros en línea de Adobe. 4. Ver la versión del programa Utiliza la página creada en el ejercicio anterior para practicar las opciones marcadas del menú Ayuda 1 2 3 4
  21. 21. Monitor: Francisco Sánchez GuisadoDiapositiva - 21CURSO DE DREAMWEAVER CC 3. index.html(o htm) • 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 CSS, 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 el sitio local. • Después se podrán copiar los archivos en un servidor Web, llamado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet. • Se utiliza FTP para cargar el sitio local en el servidor (sitio remoto). • La página inicial del sitio debe tener el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a la Web. • Por ejemplo, si escribiéramos la dirección genérica http://www.misitio.com en el navegador, éste intentaría cargar la página http://www.misitio.com/index.html, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.html. Abre las páginas www.elmundo.es y www.elmundo.es/index.html
  22. 22. Monitor: Francisco Sánchez GuisadoDiapositiva - 22CURSO DE DREAMWEAVER CC 3. Configurar un sitio local Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en DW. 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. 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. Para empezar a trabajar en un Sitio nuevo, no es necesario que estén creados antes los directorios. Mira cómo lo hace tu profe
  23. 23. Monitor: Francisco Sánchez GuisadoDiapositiva - 23CURSO DE DREAMWEAVER CC 3. Configurar un sitio local Las características avanzadas del sitio se agrupan en 10 categorías. Para visualizar las características de una Categoría basta con seleccionarla: • Datos locales: – Nombre del sitio: Nombre para la lista de sitios de Dreamweaver – Carpeta raíz local: Dónde están los archivos HTML – Carpeta predeterminada de imágenes: Dónde están las imágenes – Usar vínculos de distinción entre mayúsculas y minúsculas: Activarlo • Recuerda que tienes la opción para crear el nuevo sitio, la pestaña “Básicas” • Una vez rellenos estos datos podemos “Aceptar” y abrimos el sitio: – Vamos al menú Sitios / Administrar sitios – Seleccionar el sitio de la lista de sitios – Pulsar sobre el botón “Listo” – También podemos utilizar el panel Archivos y buscar y seleccionar el sitio en el menú desplegable de la pestaña Archivos:
  24. 24. Monitor: Francisco Sánchez GuisadoDiapositiva - 24CURSO DE DREAMWEAVER CC 3. Configurar un sitio local Configura el sitio “Animales vertebrados” siguiendo estos pasos. Después crea el archivo “vertebrados.html” y la imagen “imagenes/vertebrados.jpg” 1. Con DW cerrado, crea una carpeta llamada “Ejercicios Dreamweaver” 2. Crea en ella otra carpeta llamada “Vertebrados” para albergar tu web y dentro de esta crea otra llamada “imagenes” 3. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio 4. Haz clic sobre el menú Sitio / Administrar sitios / botón Nuevo Sitio 5. En la pestaña Sitio ponle el nombre “Animales vertebrados” y la carpeta del sitio local selecciona la carpeta “Vertebrados” 6. Selecciona la pestaña Configuración avanzadada / Información local y en carpeta de imágenes selecciona la carpeta “imagenes” 7. Activa la casilla “Comprobación de vínculos con distinción entre mayúsculas y minúsculas” 8. Haz clic sobre el botón Guardar y sobre el botón Listo 9. Cierra DW, copia los ejercicios anteriores a la carpeta “Vertebrados” 10. Abre DW, abre “vertebrados.html” y comprueba que todo va bien ;-)
  25. 25. Monitor: Francisco Sánchez GuisadoDiapositiva - 25CURSO DE DREAMWEAVER CC 3. Configurar un sitio con FTP 1. Servidor FTP: ftp.humantica.es 2. Directorio del servidor: /httpdocs 3. Usuario: usuario3 4. Contraseña: Abc123 Configura el sitio “Mamíferos”: www.humantica.es donde podrás “subir” tu web hasta 200 MB y probarla
  26. 26. Monitor: Francisco Sánchez GuisadoDiapositiva - 26CURSO DE DREAMWEAVER CC 3. El Panel Archivos 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 que aparece en la parte superior del panel y de la ventana. Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor prueba o la Base de datos del sitio. En esta imagen se visualizan el panel Archivos y parte de una página Web: Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de DW, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc. … Prueba a cambiar de carpeta un archivo HTML o JPG de tu sitio Web (con DW cerrado)
  27. 27. Monitor: Francisco Sánchez GuisadoDiapositiva - 27CURSO DE DREAMWEAVER CC 3. Actualizar tu sitio … En cambio, si estas modificaciones se hacen desde dentro de DW, 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, DW te mostrará 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 el botón Actualizar (F5). Prueba a cambiar de carpeta un archivo HTML o JPG de tu sitio Web (desde DW)
  28. 28. Monitor: Francisco Sánchez GuisadoDiapositiva - 28CURSO DE DREAMWEAVER CC 3. Propiedades de la página 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 de Propiedades de la página. Se puede abrir esta ventana 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 Muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica su configuración utilizando reglas de estilo, mientras que HTML lo hace con atributos HTML. Estos últimos están cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al diseño. Por eso, se desaconseja su uso.
  29. 29. Monitor: Francisco Sánchez GuisadoDiapositiva - 29CURSO DE DREAMWEAVER CC 3. Apariencia (CSS) • Fuente de página: es el tipo de letra que le aplicaremos al texto • Tamaño: es el tamaño de la fuente que aplicaremos al texto • Color del texto: es el color de la fuente • Color del 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. • Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. 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 • Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opción “no-repeat”. Si queremos que se repita o dejamos la opción en blanco o seleccionamos la opción “repeat”. Si queremos que se repita solo en horizontal seleccionamos la opción “repeat-x” y si queremos que se repita en vertical, entonces seleccionamos “repeat-y” • Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador Añade un “fondo suave” (fondo.jpg) a tu página vertebrados.html
  30. 30. Monitor: Francisco Sánchez GuisadoDiapositiva - 30CURSO DE DREAMWEAVER CC 3. Apariencia (HTML) • 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 (es de locos) • 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 • Texto: es el color de la fuente • Vínculos: es el color que mostrará el texto de los vínculos • Vínculos visitados: es el color que mostrará el texto de los vínculos visitados • Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el mismo • Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador Pon una imagen de fondo en HTML y otra en CSS ¿Quién gana?
  31. 31. Monitor: Francisco Sánchez GuisadoDiapositiva - 31CURSO DE DREAMWEAVER CC 3. Los colores • 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 DW 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 otros navegadores. También es posible personalizar los colores a través del botón de la parte superior de la paleta 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 (#39F), el botón quedaría del siguiente modo:
  32. 32. Monitor: Francisco Sánchez GuisadoDiapositiva - 32CURSO DE DREAMWEAVER CC • Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo • Tamaño: es el tamaño del texto de los vínculos • 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 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 de sustitución: es el color del texto del vínculo cuando situamos el ratón encima del vínculo • Vínculos activos: es el color de los vínculos activos (mientras se pulsa) • 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 3. Vínculos (CCS) Crea 5 archivos HTML para los tipos de animales vertebrados y enlázalos desde “vertebrados.html”
  33. 33. Monitor: Francisco Sánchez GuisadoDiapositiva - 33CURSO DE DREAMWEAVER CC 3. Más propiedades de página Categoría Encabezados: • Fuente de encabezado: permite establece el tipo de fuente de los encabezados. El resto propiedades hacen referencia al estilo cursiva o negrita, tamaño y color que queremos aplicar a cada tipo de encabezado. Categoría Título/Codificación: • Título: es el título del documento que aparecerá en el navegador Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de DW, 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.
  34. 34. Monitor: Francisco Sánchez GuisadoDiapositiva - 34CURSO DE DREAMWEAVER CC 4. Texto (HTML) 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. Estos estilos se guardarán en la propia página HTML (compruébalo). • 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. Veremos las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías, HTML y CSS: • 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, incluidos los espacios entre palabras. El texto normal, debería ir siempre en párrafos. Practica todas las posibilidades de HTML en el sitio “Vertebrados” y añade una imagen de cada uno de los cinco tipos
  35. 35. Monitor: Francisco Sánchez GuisadoDiapositiva - 35CURSO DE DREAMWEAVER CC 4. Texto (H1) 1. Abre el sitio llamado “Vertebrados” en el panel Archivos (F8). 2. Haz doble clic sobre el documento “vertebrados.html”, que aparece en los archivos desplegados en el panel de Archivos. Se abrirá el documento. 3. Sitúa el punto de inserción después de la última letra de la última línea. 4. Escribe el texto “Quiénes somos” y pulsa la tecla Intro para saltar de línea. 5. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades (Ctrl+F3). 6. Selecciona en el texto “Quiénes somos”. 7. En HTML / Formato, del inspector de propiedades, elige Encabezado 1. Observa como ahora el texto es de mayor tamaño. 8. Prueba el resto de opciones de Formato 9. Guarda el documento (Ctrl + S) Inserta un encabezado y modifica sus propiedades
  36. 36. Monitor: Francisco Sánchez GuisadoDiapositiva - 36CURSO DE DREAMWEAVER CC 4. Texto (HTML) • Estilo: Estos botones permiten establecer si el texto aparecerá en negrita <strong> o en cursiva <em>. A través del menú Formato / Estilo también se puede, entre otras cosas, subrayar el texto. • Sangría: Estos dos botones permiten sangrar el texto y anular la sangría <blockquote>. • Lista: Estos botones permiten crear listas con viñetas sin numerar <ul> o listas numeradas <ol> Practica estos cambios de atributo en la nueva página “vegetales.html” . Si necesitas insertar algún carácter especial utiliza el menú Insertar / HTML / Carácter / Otro…
  37. 37. Monitor: Francisco Sánchez GuisadoDiapositiva - 37CURSO DE DREAMWEAVER CC 4. Texto • Listas: …a su vez, la lista puede ser numerada o con viñetas. Para que un texto del documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre el tipo 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 (ordenada) se selecciona a través del botón . Lista numerada (ordenada) de los vertebrados: 1. Anfibios 2. Aves 3. Mamíferos 4. Peces 5. Reptiles Lista con viñetas (desordenada): • Marsupiales • Monotremas • Placentarios • Acuáticos • Voladores • Terrestres Añade una lista numerada en “vertebrados.html” del sitio “Animales vertebrados” y otra lista con viñetas con los tipos de mamíferos en “mamíferos.html”
  38. 38. Monitor: Francisco Sánchez GuisadoDiapositiva - 38CURSO DE DREAMWEAVER CC 4. Propiedades CSS • Los estilos en línea CSS (Cascading Style Sheets), se utilizan para combinar atributos del texto de una página HTML, como color o tamaño, de modo que no sea necesario asignar estos atributos cada vez que se desee repetir estos valores a otros elementos • Los estilos CSS cuentan con capacidad de actualización; cuando actualiza un estilo CSS, el formato de todos los elementos que usan ese estilo se actualiza automáticamente • Editar regla: Creación o modificación de estilos CSS • CSS Designer: Abre el panel si no estuviera abierto • Fuente, estilo, alineación, tamaño y color, imaginamos su uso Define un nuevo estilo en línea en “mamiferos.html” y llámalo “.estiloMam” Formato / Estilos CSS / Convertir…
  39. 39. Monitor: Francisco Sánchez GuisadoDiapositiva - 39CURSO DE DREAMWEAVER CC 4.- Clasificación de los seres vivos Seres vivos (index.html) Vegetales Hongos Animales Vertebrados Anfibios Aves Mamíferos Marsupiales Monotremas Placentarios Peces Reptiles Invertebrados Protistas Moneras • Artrópodos • Celentéreos • Equinodermos • Esponjas • Gusanos • Moluscos
  40. 40. Monitor: Francisco Sánchez GuisadoDiapositiva - 40CURSO DE DREAMWEAVER CC 4.- Crear un nuevo sitio Web 1. Cierra DW y crea una carpeta llamada “Seres vivos” y dentro del ella, crea otra carpeta llamada “imagenes” 2. Copia en ella todas las páginas html de “Vertebrados” y todas las imágenes a “imagenes” 3. Abre DW y crea el nuevo sitio “Seres vivos” y no olvides seleccionar la carpeta de imágenes 4. Crea un nuevo “index.html” con el título “Seres vivos” y enlaces a los cinco reinos de seres vivos 5. Crea las páginas html que faltan y enlázalas desde index.html con hipervínculos El objetivo de este ejercicio es crear un nuevo sitio Web completo partiendo de todos los ejercicios anteriores.
  41. 41. Monitor: Francisco Sánchez GuisadoDiapositiva - 41CURSO DE DREAMWEAVER CC 4.- Barra de navegación (sencilla) 7. Crea con Publisher o Word los botones de menú horizontal en la carpeta “imagenes” en dos versiones de diferentes colores 8. En index.html: Insetrar / Navegation, y dentro de él… 9. Insertar/ HTML / Imagen de sustitución (280x65) El objetivo de este ejercicio es crear un menú responsive con la herramienta “Barra de navegación” Animales Hongos Protistas Vegetales Animales Hongos Protistas Vegetales Obligatorios MonerasMoneras …
  42. 42. Monitor: Francisco Sánchez GuisadoDiapositiva - 42CURSO DE DREAMWEAVER CC 4.- Menú de salto (con submenús) 1. Insertar / Spry / Barra de menús Spry 2. 3. Crea una barra de navegación en animales.html con submenús para vertebrados e invertebrados y subsubmenús para vertebrados
  43. 43. Monitor: Francisco Sánchez GuisadoDiapositiva - 43CURSO DE DREAMWEAVER CC 4. Hoja de estilo CSS Definir un nuevo estilo en una hoja de estilo CSS: 1. Seleccionamos un texto cualquiera, por ejemplo un nombre 2. Seleccionaremos “CSS” del inspector de propiedades 3. Seleccionamos <Nueva regla CSS> y el botón “Editar regla” 4. Le damos un nombre al selector: (p.ej. “.clase-nombre”) 5. Definimos la regla: “Nuevo archivo de hoja de estilos” y botón “Aceptar” 6. Damos un nombre al archivo CSS: “mi-hoja-de-estilos.css” y “Guardar” 7. Definimos la nueva regla rellenando las 8 categorías a discreción 8. A partir de ahora podremos aplicar el estilo “clase-nombre” a cualquier documanto HTML de nuestro sitio Web, siempre y cuando tengan asociado el archivo CSS “mi-hoja-de-estilos.css” gracias a este código: 9. Para asociar este archivo CSS a un documento HTML desde el menú: Formato / Estilos CSS / Adjuntar hoja de estilos o desde el inspector de propiedades HTML / Clase / Adjuntar hoja de estilos Abre sólo mercurio.html y crea un archivo de estilos CSS y asócialo a todos los archivos del sitio “Sistema Solar”
  44. 44. Monitor: Francisco Sánchez GuisadoDiapositiva - 44CURSO DE DREAMWEAVER CC 4. Redefinir estilo etiqueta 1. Abre el sitio “Sistema Solar” y el documento “tierra.html” y asegúrate de que tiene asociada la hoja de estilos “mi-hoja-de-estilos.css” 2. Haz clic sobre cualquier texto que tenga la etiqueta <h2>, sin seleccionar 3. En el Inspector de propiedades CSS, selecciona la regla <Nueva regla CSS> 4. Pulsa el botón “Editar regla” y modifícala 5. Edita la etiqueta <h2> modificando estos valores: 6. A partir de ahora, cualquier etiqueta <h2> de nuestro Sitio Web que tenga asociada esta misma hoja de estilos CSS será influida por el estilo de la etiqueta <h2> allá donde se utilice 7. Estudia el contenido del archivo CSS Modifica el estilo de una etiqueta en el archivo de estilos CSS del sitio “Sistema Solar”. Verifica que funciona en varios archivos a la vez Formato / Estilos CSS / Adjuntar hoja de estilos
  45. 45. Monitor: Francisco Sánchez GuisadoDiapositiva - 45CURSO DE DREAMWEAVER CC Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen. • Tipos de enlaces: Existen cuatro diferentes clases de rutas de acceso a la hora de definir los vínculos: – Referencia absoluta: "http://www.google.com". – Referencia relativa al sitio: “../documentos/principal.htm” – *Referencia relativa al documento: “#nombre_de_marca” – Puntos de fijación:“nombre_documento#nombre_de_marca” 5. Hiperenlaces
  46. 46. Monitor: Francisco Sánchez GuisadoDiapositiva - 46CURSO DE DREAMWEAVER CC Crear enlaces: La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector. Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP:// Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo. 5. Hiperenlaces Crea un enlace a una foto del Sol en “index.html” usando una referencia absoluta a una foto del Sol en Wikipedia y otra a un archivo PDF para descargarlo
  47. 47. Monitor: Francisco Sánchez GuisadoDiapositiva - 47CURSO DE DREAMWEAVER CC 5. Hiperenlaces Destino del enlace: El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. Puede especificarse en el inspector de propiedades a través de Destino, o en la ventana que aparece a través del menú Insertar / Hipervínculo: – _blank: Abre el documento en una ventana nueva – _parent: Abre el documento en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre – _self: Es la opción predeterminada. Abre el documento en el mismo marco o misma ventana que el vínculo – _top: Abre el documento en la ventana completa del navegador, robando el espacio a los otros marcos. Lo normal es que los enlaces a páginas del mismo sitio Web se abran en la misma ventana y las páginas externas al sitio se abran en ventanas nuevas
  48. 48. Monitor: Francisco Sánchez GuisadoDiapositiva - 48CURSO DE DREAMWEAVER CC Enlace a correo electrónico: Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se desea que los visitantes de la Web puedan contactar con nosotros. La sintaxis del vínculo en este caso es mailto:francisco@hotmail.com Puede definirse el vínculo a través de Vínculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados. También es posible a través del menú Insertar, opción Vínculo de correo electrónico. En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el texto que contendrá el vínculo de correo: 5. Hiperenlaces Crea un enlace a un correo al final de la página “index.html” No es buena idea exponer el correo en la web, usa una imagen
  49. 49. Monitor: Francisco Sánchez GuisadoDiapositiva - 49CURSO DE DREAMWEAVER CC 1. Escribe al final del documento “vertebrados.html” un línea llamada “Quienes somos”, explica en un par de líneas “quienes somos” y pon debajo una foto 2. Sitúa el cursor a la izquierda de “Quienes somos” y pon “q-s” en el atributo ID: 3. Inserta en la primera línea del documento la frase “Ir a ¿Quiénes somos?” 4. Crea un enlace relativo a “Quienes som” escribiendo en el vínculo “#q-s” o “index.html#q-s” si lo haces desde index.html: 5. Referencias relativas
  50. 50. Monitor: Francisco Sánchez GuisadoDiapositiva - 50CURSO DE DREAMWEAVER CC 6. Imágenes • Veremos cómo crear algunas imágenes especiales, como los Rollovers y los botones flash. • Formatos de imagen: Las imágenes pueden ser de muchos formatos diferentes: bmp, png, gif, jpg, etc. Pero no todos estos formatos son adecuados para una Web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores. Los formatos más utilizados son: – Formato GIF: Máximo de 256 colores, son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos (colores planos). Permiten transparencias y animación. – Formato JPG: Las imágenes son de mayor calidad que las GIF al poder contener millones de colores, pero el tamaño de la imagen es mayor. Gran capacidad de compresión. Abre el PAINT y pulsa “Guardar como” BMP JPG PNG GIF Transparencia No No Sí Sí Movimiento No No No Sí Compresión No Sí Sí Sí
  51. 51. Monitor: Francisco Sánchez GuisadoDiapositiva - 51CURSO DE DREAMWEAVER CC 6. Imágenes Insertar una imagen: Para insertar una imagen hay que dirigirse al menú Insertar / Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana: Si por algún motivo se desea insertar un BMP, este no aparecerá a no ser que en Tipo se seleccione Todos los archivos. Crea la página “luna.html” e inserta una foto de la Luna en cuarto creciente
  52. 52. Monitor: Francisco Sánchez GuisadoDiapositiva - 52CURSO DE DREAMWEAVER CC 1. Selecciona la imagen donde vamos a crear el mapa 2. Selecciona “Zona interactiva circular” 3. Pincha y arrastra dentro de la imagen para crear la zona del hipervínculo 4. En “Destino” por la página enlazada 5. Añade más zonas interactivas: – Rectangulares – Circulares – Polígonos irregulares (Esc) 6. Mapas interactivos Crea un mapa de planetas en la imagen de la página index.html
  53. 53. Monitor: Francisco Sánchez GuisadoDiapositiva - 53CURSO DE DREAMWEAVER CC 6. Menús de salto Son menús emergentes cuyas opciones son vínculos a otras páginas o a otras Webs: 1. Crea las páginas hongos-superiores.html y hongos- inferiores.html 2. Insertar / Formulario / Seleccionar 3. Botón Valores de lista 4. Ventana / Comportamientos / Añadir / Menú de salto
  54. 54. Monitor: Francisco Sánchez GuisadoDiapositiva - 54CURSO DE DREAMWEAVER CC Se puede cambiar alguna propiedad desde el inspector de propiedades • Se pueden seleccionar tipo menú o tipo lista • El nombre (por si tengo varios por página) • Se pueden elegir varios elementos de la lista, pero no te recomiendo activarlo 6. Menús de salto
  55. 55. Monitor: Francisco Sánchez GuisadoDiapositiva - 55CURSO DE DREAMWEAVER CC 6. Cerrar una ventana • Si queremos que una ventana se cierre, seleccionamos el texto o imagen y escribiremos en el cuadro de texto de vínculo: javascript:window.close(); Crea un enlace “Cerrar ventana”
  56. 56. Monitor: Francisco Sánchez GuisadoDiapositiva - 56CURSO DE DREAMWEAVER CC 6. Película Flash • Películas Flash: Para insertar una película Flash hay que dirigirse al menú Insertar / Media / SWF. Suelen ser banners publicitarios o botones. Es preferible guardar los objetos Flash en el mismo directorio que los documentos HTML, en lugar de la carpeta destinada a almacenar imágenes, de no ser así pueden suceder errores. El usuario tiene que tener instalado el “pug-in” de Flash Player
  57. 57. Monitor: Francisco Sánchez GuisadoDiapositiva - 57CURSO DE DREAMWEAVER CC 6. Película Flash • A través del inspector de propiedades del objeto Flash es posible editar sus atributos: • Desde la opción “Vista en vivo” de DW puedes comprobar el funcionamiento del objeto Flash, sin la necesidad de tener que abrir la página con algún navegador. También tienes el botón “Reproducir” • Debes tener instalado “Adobe Flash Player” DW añadirá archivos en la carpeta Scripts que habrá que subir a la Web:
  58. 58. Monitor: Francisco Sánchez GuisadoDiapositiva - 58CURSO DE DREAMWEAVER CC 6. Película Flash Propiedades del objeto Flash: • Editar: Para hacer cambios sobre el archivo original (.fla) • Bucle: Al finalizar volverá a comenzar desde el principio • Rep. autom.: Nada más cargarse la página se reproducirá • Calidad: Cuanto más baja, antes se cargará y peor se verá • Escala: Permite elegir cuanto se verá del archivo: • Predeterminada: se verá toda la película • Ajuste exacto: se verán sólo los objetos, sin el fondo • Alinear: Permite alinear la película en relación con el texto • Wmode: Es el modo de ventana: • Opaco: Otros elementos pueden aparecer sobre el Flash • Transparente: El fondo se verá transparente Coge un objeto Flash de: http://www.taringa.net/posts/h umor/13408297/Los-Mejores- Botones-SWF.html e insértalo en la página de Inicio
  59. 59. Monitor: Francisco Sánchez GuisadoDiapositiva - 59CURSO DE DREAMWEAVER CC 6. Marquesinas Marquesinas: Son texto, imágenes, o una mezcla de ambas, que pueden desplazarse de un lado a otro de la ventana horizontalmente Esto es una marquesina • Se insertan a través de código HTML con las etiquetas <MARQUEE> y </MARQUEE>, puedes hacer un cambio: •<marquee behavior="slide">, la marquesina hará el desplazamiento una sola vez •<marquee behavior="alternate">, la marquesina rebotará en los extremos, como en este ejemplo: <marquee behavior="alternate"> Esto es una marquesina <img src="imagenes/logo_animales.gif"> </marquee>
  60. 60. Monitor: Francisco Sánchez GuisadoDiapositiva - 60CURSO DE DREAMWEAVER CC 6. Fechas • DW permite insertar la fecha de última modificación de las páginas. Conviene insertar la fecha de modificación cuando la página ha de contener información actualizada cada poco tiempo, para que los usuarios puedan saber cuando fue la última vez que se actualizaron los datos. Para insertar la fecha hay que dirigirse al menú Insertar / Fecha. En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea que se actualice o no automáticamente al modificar y guardar la página de nuevo. Inserta la fecha de “Página actualizada:” al final de la página de Inicio (index.html)
  61. 61. Monitor: Francisco Sánchez GuisadoDiapositiva - 61CURSO DE DREAMWEAVER CC 6. Regla horizontal • Regla horizontal: El elemento que se usa para separar secciones dentro de una misma página es la regla horizontal. Para insertar una regla hay que dirigirse al menú Insertar / HTML / Regla horizontal. El inspector de propiedades para las reglas es el siguiente: A través de sus campos es posible modificar en cierta medida la apariencia de las reglas. A continuación tienes cuatro ejemplos de reglas horizontales: Inserta varias reglas horizontales en la página “jupiter.html” para separar sus cuatro lunas
  62. 62. Monitor: Francisco Sánchez GuisadoDiapositiva - 62CURSO DE DREAMWEAVER CC 7. Tablas Introducción: • Gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar. • Muchas páginas Web se basan en tablas. • Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas, por ejemplo: Cuando termines el tema de Tablas podrás crear la tabla del ejemplo de abajo. ¿Cuántas filas y columnas tiene?
  63. 63. Monitor: Francisco Sánchez GuisadoDiapositiva - 63CURSO DE DREAMWEAVER CC 7. Tablas • Grosor del Borde: Grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1) • Relleno de celda: Distancia entre el contenido de las celdas y los bordes de éstas • Espacio entre celdas: Distancia entre las celdas • Se puede establecer si se quiere un encabezado • Texto: Si queremos incluir un título (fuera de la tabla) • Resumen: Descripción (no aparecerá en el navegador) Insertar una tabla: • Menú: Insertar / Tabla: • Especificar Filas y Columnas • Especificar Ancho de la tabla, se define en Píxeles o porcentaje
  64. 64. Monitor: Francisco Sánchez GuisadoDiapositiva - 64CURSO DE DREAMWEAVER CC 7. Tablas Seleccionar elementos de una tabla: • Puedes seleccionar una tabla a través del menú Modificar estando el cursor en la tabla, o desplegando el menú contextual de la tabla al pulsar con el botón derecho sobre ella. • En ambos casos aparece la opción Tabla / Seleccionar tabla. También es posible seleccionar una tabla pulsando con el ratón sobre el borde que la rodea, o pulsando sobre la etiqueta <table> que aparece en la barra de estado de la ventana de documento.
  65. 65. Monitor: Francisco Sánchez GuisadoDiapositiva - 65CURSO DE DREAMWEAVER CC 7. Tablas Formato de tabla: Desde el inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. También pueden indicarse otros como: • Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha) • Color de fondo o de borde de la tabla • Imagen de fondo Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores:
  66. 66. Monitor: Francisco Sánchez GuisadoDiapositiva - 66CURSO DE DREAMWEAVER CC 7. Tablas • Cambiar tamaño de tabla y celdas: El Ancho de una tabla se define en Píxeles o Porcentaje en los valores de An (anchura) y Al (altura). Normalmente solo se especifica la anchura. En valor An y Al de las celdas siempre en Píxeles. También es posible establecer el tamaño de las celdas manteniendo pulsado el ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada. • Insertar una fila o una columna: Pulsar en Insertar fila o Insertar columna (previa selección de celda, fila o columna). También tenemos otra opción, Insertar filas o columnas. • Eliminar una fila o una columna: Posicionar el cursor en la fila o columna a eliminar y elegir Eliminar fila o Eliminar columna del menú Tabla. También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr).
  67. 67. Monitor: Francisco Sánchez GuisadoDiapositiva - 67CURSO DE DREAMWEAVER CC 7. Tablas • Anidar tablas: Es posible insertar tablas dentro de las celdas de otras tablas como en el ejemplo: Para anidar tablas sólo tienes que posicionar el cursor en la celda deseada e insertar una tabla. • Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que dejará de haber borde de separación entre una celda y otra ya que serán una sola. Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón del inspector de propiedades. • Dividir celdas consiste en partir en dos una celda. Una de las formas de dividir es a través del inspector de propiedades. Para dividir una celda hay que pulsar sobre el botón del inspector de propiedades, o sobre la opción Dividir celda de la opción Tabla. Crea una tabla en “index.html” con tablas anidadas dentro de sus celdas y que muestre las diferentes regiones del Sistema Solar con los objetos más grandes de cada región.
  68. 68. Monitor: Francisco Sánchez GuisadoDiapositiva - 68CURSO DE DREAMWEAVER CC 7. Tablas Añade una tabla compleja en “index.html” para explicar las principales características de los planetas del sistema solar (Usa Wikipedia)
  69. 69. Monitor: Francisco Sánchez GuisadoDiapositiva - 69CURSO DE DREAMWEAVER CC 8. Widgets de jQuery • jQuery UI es un conjunto de pequeños programas escritos en Javascript que sirven para dar más vida y funcionalidad a las páginas Web • Estos componentes reciben el nombre de widgets • Puedes añadirlos desde el menú Insertar / Jquery UI Acordeón: • Crea paneles desplegables en vertical que permiten ofrecer información en poco espacio de pantalla En la página de mamíferos.html, crea un widget acordeón para describir brevemente cada uno de los tres tipos de mamíferos
  70. 70. Monitor: Francisco Sánchez GuisadoDiapositiva - 70CURSO DE DREAMWEAVER CC 8. Tabs Tabs: • Crea paneles desplegables en horizontal que permiten ofrecer información en poco espacio En la página de vegetales.html, crea un widget tab para describir brevemente cada uno de los tipos de vegetales
  71. 71. Monitor: Francisco Sánchez GuisadoDiapositiva - 71CURSO DE DREAMWEAVER CC 9. Formularios Introducción: Los formularios se utilizan para recoger datos de los usuarios, para realizar un pedido en una tienda virtual, crear encuestas, conocer las opiniones, recibir preguntas… • Una vez el usuario rellena los datos y pulsa el botón para “enviar” se enviarán los datos al el elemento “Acción” del formulario. • No Veremos cómo crear el formulario, (insertar campos y botones en el formulario y validarlos), lo haremos mucho más fácil utilizando una herramienta de Google… Crea la página “cotacto.html” y enlázala desde “index.html”
  72. 72. Monitor: Francisco Sánchez GuisadoDiapositiva - 72CURSO DE DREAMWEAVER CC 9. Incrustar Formulario de Google 1. Accede a Drive.Google.com 2. Archivo / Nuevo / Formulario 3. Escribe el título 4. Escribe las instrucciones 5. Elige tipo Texto 6. Botón “Enviar formulario” 7. Incrustar 8. Luego insertas el código HTML en una página Web de tu proyecto o llamas a la URL Necesitarás una cuenta de Gmail
  73. 73. Monitor: Francisco Sánchez GuisadoDiapositiva - 73CURSO DE DREAMWEAVER CC 10. Multimedia (sonido) • Incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva, con la posibilidad de activarlo o desactivarlo. • Los formatos de sonido más habituales son: – MP3 - WAV - MIDI • Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio. • Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar / Media / Plug-in • En DW no se mostrarán los controles de audio. • Los archivos insertados como plug-in se mostrarán con una imagen como esta: Pon música a la página “tierra.html”. Tienes archivos MID en C:Program FilesMicrosoft OfficeCLIPARTPUB60COR
  74. 74. Monitor: Francisco Sánchez GuisadoDiapositiva - 74CURSO DE DREAMWEAVER CC 10. Multimedia (sonido) • En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarán los controles de audio: Al y An. • Para que se escuche el sonido en la página, pero que no se vean los controles de audio, los campos Al y An deben valer cero. • La canción se reproducirá al cargarse la página una sola vez. • Los valores pueden cambiarse a través del través de HTML: <embed src=“mp3/audio.mid" autostart="false" loop="true"></embed> • Para poner música de fondo en una página Web, sin que aparezcan los controles de audio, puedes escribir este código después de la etiqueta </title> directamente: <bgsound src=“mp3/audio.mid" loop=“1"> Pon música de fondo a la página “luna.html”
  75. 75. Monitor: Francisco Sánchez GuisadoDiapositiva - 75CURSO DE DREAMWEAVER CC 10. Multimedia (vídeo) • Los vídeos ocupan mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. • Los formatos de vídeo son: AVI, MPEG y MOV. • Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar / Medía / Plug-in: • Los vídeos insertados como plug-in se mostrarán por una imagen como esta: Puedes descargar vídeos de prueba desde la página: http://www.humantica.com/servicios_informaticos/curso_dreamweaver.htm
  76. 76. Monitor: Francisco Sánchez GuisadoDiapositiva - 76CURSO DE DREAMWEAVER CC 10. Multimedia (vídeo) El inspector de propiedades para los archivos de vídeo insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in: Los vídeos se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores pueden cambiarse añadiendo autostart="false" y loop="true". Todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga instalado un plug-in. En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse en el campo URL plg una página en la que pueda encontrarlo. Si necesitas un vídeo para poder probarlo, aprende a descargarlos de YouTube desde la página www.descargaryoutube.com
  77. 77. Monitor: Francisco Sánchez GuisadoDiapositiva - 77CURSO DE DREAMWEAVER CC 11. Capas • Pueden moverse de una posición a otra de la ventana: • Pueden ser redimensionadas: • Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones flash y cualquier elemento HTML. • La capa no solo aparece representada por el recuadro anterior, sino que también aparece un recuadro en el documento. Este recuadro sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa. Introducción: • Las capas son unos recuadros que pueden situarse en cualquier parte de la página y en los que podemos insertar contenido HTML. • Pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.
  78. 78. Monitor: Francisco Sánchez GuisadoDiapositiva - 78CURSO DE DREAMWEAVER CC 11. Capas Insertar una capa: • Pueden insertarse desde: Insertar / Objeto de diseño / Div PA • Pueden editarse sus atributos. Hay que seleccionarla primero: – pulsando sobre el icono correspondiente – a través de la pestaña Capas del panel Diseño, que puede abrirse a través del menú Ventana / Elementos PA • Si la opción Capas no aparece directamente en este menú, estará dentro de la opción Otros. • También puedes abrir el panel pulsando F2 PA significa “Posición Absoluta”
  79. 79. Monitor: Francisco Sánchez GuisadoDiapositiva - 79CURSO DE DREAMWEAVER CC 11. Capas Formato de una capa: Se especifica a través de su inspector de propiedades: • ID de capa: nombre de la capa. • Iz y Sup: distancia entre los límites izquierdo y superior del documento y la capa. • An y Al: anchura y la altura de la capa. • Índice Z: número de orden de colocación de las capas. Se solapan las de índice menor. • Vis: visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: • Default: visibilidad según el navegador • Inherit: se muestra la capa si la página a la que pertenece también se muestra • Visible: muestra la capa, aunque la página no se esté viendo (ojo abierto) • Hidden: la capa está oculta (ojo cerrado) • Con Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa. Desb: cómo aparecen las capas cuando el contenido excede su tamaño especificado. Pon una imagen de fondo a una capa PA
  80. 80. Monitor: Francisco Sánchez GuisadoDiapositiva - 80CURSO DE DREAMWEAVER CC 11. Incrustar Mapa de Google 1. Accede a www.google.com/maps 2. Localiza el mapa exacto tal y como lo quieres mostrar en la Web 3. Pulsa el botón “Enlazar” 4. Selecciona y Copia el código HTML 5. Ve a DW y sitúa el cursor en el punto de inserción del documento HTML 6. Insertar / Objeto de diseño / Div PA 7. Pega el código entre <div id="apDiv2"> y </div> en “Vista Código” 8. Redimensiona el objeto PA 9. Pruébalo Inserta un Mapa de Google en una capa de posición absoluta PA en “contacta.html”
  81. 81. Monitor: Francisco Sánchez GuisadoDiapositiva - 81CURSO DE DREAMWEAVER CC 11. Incrustar Vídeo de YouTube 1. Accede a www.youtube.com 2. Localiza y abre un vídeo 3. Pulsa el botón “Compartir” 4. Pulsa el botón “Insertar” 5. Configura las opciones de visualización 6. Selecciona y Copia el código HTML 7. Ve a DW y sitúa el cursor en el punto de inserción del documento 8. Insertar / Objeto de diseño / Etiqueta Div 9. Pega el código HTML 10.Pruébalo Inserta un vídeo de Youtube en una Etiqueta DIV de tu Web
  82. 82. Monitor: Francisco Sánchez GuisadoDiapositiva - 82CURSO DE DREAMWEAVER CC 12. Plantillas 1. www.freewebtemplates.com / Website Templates / HTML5 Water / Download 2. Descomprime el archivo ZIP en tu carpeta del curso (html5-water-498616428.zip) 3. Renombra la carpeta (Sitio-agua) 4. Crea sitio nuevo en DW y ábrelo 5. Pon el menú principal en español 6. Añade dos imágenes más al banner Diseñemos una Web basada en una plantilla HTML gratuita
  83. 83. Monitor: Francisco Sánchez GuisadoDiapositiva - 83CURSO DE DREAMWEAVER CC 12. El coste de crear una Web Los precios que ves son aproximados y muy variables 1. Diseñar una Web en tu ordenador: gratis  60 €  miles € 2. Registrar un nombre de dominio: gratis  9 €  20 € / año 3. Alojar la Web en un servidor: gratis  36 €  cientos € / año
  84. 84. Monitor: Francisco Sánchez GuisadoDiapositiva - 84CURSO DE DREAMWEAVER CC • Menús CSS: – http://www.cssportal.com – www.cssmenumaker.com • Plantillas: – www.freewebtemplates.com • Utilidades URL: – Dar de alta las páginas: www.google.com/addurl – Recortador de URLs: http://goo.gl/ 12. Recursos gratis en Internet Internet está lleno de “recursos gratis para webmaster”
  85. 85. Monitor: Francisco Sánchez GuisadoDiapositiva - 85CURSO DE DREAMWEAVER CC 12. Recursos para webmasters • El icono principal de la Web se llamará “favicon.ico” y lo debes guardar en el directorio raíz • Puedes crear el icono en: www.online-convert.com • Crear GIFs animados: www.gifninja.com • Reconocedor fuentes: www.myfonts.com • Contador de visitas: www.contadorvisitasgratis.com • Usuarios conectados: www.usuarios-online.com/es • Generar códigos QR: www.codigos-qr.com • Retoque de fotos de caras: http://makeup.pho.to/es
  86. 86. Monitor: Francisco Sánchez GuisadoDiapositiva - 86CURSO DE DREAMWEAVER CC 12. Recursos para webmasters • Imágenes libres: Google / Imágenes / Opciones / Búsqueda avanza / Derechos de uso / 5 opciones • Dar de alta las páginas: www.google.com/addurl • Recortador de URLs: http://goo.gl/ • Recursos Google para webmasters: • Google Analytics: Estadísticas de las visitas a tu web • Google AdWowds: Poner anuncios de Google (gastar €) • Google AdSense: Poner anuncios en mi Web (ganar €) • Pide a tu profesor que te enseñe a “robar” ideas para enriquecer tu página, por ejemplo, una galería fotográfica Para algunos recursos de Google necesitarás correo de Gmail
  87. 87. Monitor: Francisco Sánchez GuisadoDiapositiva - 87CURSO DE DREAMWEAVER CC 12. Atajos de Dreamweaver • Ctrl+Q Salir de Dreamweaver • Ctrl+J Propiedades de la página • Ctrl+F2 Panel Insertar • Ctrl+F3 Inspector de propiedades • F2 Muestra/oculta Elementos PA • F4 Mostrar/Ocultar Paneles • F8 Vista de archivos del sitio • F12 Vista previa en el navegador
  88. 88. Monitor: Francisco Sánchez GuisadoDiapositiva - 88CURSO DE DREAMWEAVER CC 12. Posicionamiento en Google (SEO) • Poner nombres adecuados a las páginas • Rellenar los datos extra de cada página • Conseguir enlaces de otras Webs a la mía (intercambio de enlaces) • Poner contenido extra a las imágenes • Cuidar mucho todo el contenido • Tener la Web actualizada y sin enlaces rotos • Centrar el contenido en un par de frases para que Google nos encuentre por ese criterio (repetirlas) • Lo último: el alta en www.google.com/addurl • Alta en redes sociales: facebook, linkedin…
  89. 89. Monitor: Francisco Sánchez GuisadoDiapositiva - 89CURSO DE DREAMWEAVER CC ¡Muchas gracias a todos!

×