Web. Microsoft Excel: Capítulo 1 Creación de páginas web con Dreamweaver

Transcripción

1 Web Microsoft Excel: Capítulo 1 Creación de páginas web con Dreamweaver Álvarez, S., Bravo, S., Departamento de Informática y automática Universidad de Salamanca Sumario 1. Qué es Dreamweaver? 2. El entorno de trabajo 3. Configuración del sitio 4. Mi primera página web 5. Trabajando con la página web 1. Aplicar formato 2. Insertar imágenes 3. Insertar tablas 6. Estructura del sitio 1. Hipervínculos Álvarez, S., Bravo, S. Universidad de Salamanca -2-1

2 1. Qué es Dreamweaver? Dreamweaver es un editor WYSIWYG de páginas Web, creado por Macromedia y actualmente adoptado por Adobe Se trata de un editor WYSISYG ("lo que ves es lo que obtienes"). Permite crear la página sobre una vista preliminar, similar a la de un procesador de textos, sin necesidad de preocuparse del código HTML (HyperText Marked Language) en que se escriben las páginas web Es el programa más utilizado en el sector del diseño y la programación Web, por sus funcionalidades, su integración con otras herramientas como Macromedia Flash y por su soporte de los estándares del W3C (World Wide Web Consortium) Álvarez, S., Bravo, S. Universidad de Salamanca -3- El entorno de trabajo (I): barras de herramientas Barra de título Barra de menú Barra de insertar Barra de documento Barra estándar Barra de estado Álvarez, S., Bravo, S. Universidad de Salamanca -4-2

3 El entorno de trabajo (II): vistas de un documento 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 (vista predeterminada de Dreamweaver) La vista Código: permite trabajar directamente con el código fuente en que se escriben las páginas web La vista Código y Diseño permite dividir la ventana en dos zonas. La parte 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 Álvarez, S., Bravo, S. Universidad de Salamanca -5- El entorno de trabajo (III): paneles o inspectores Panel de archivos Panel de propiedades Álvarez, S., Bravo, S. Universidad de Salamanca -6-3

4 El entorno de trabajo (IV): la ayuda La aplicación dispone de una ayuda muy completa que permite 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 y tutoriales) Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML Acceder al Centro de servicio técnico de Dreamweaver en la Web de Adobe Acceder al Foros en línea de Adobe Álvarez, S., Bravo, S. Universidad de Salamanca -7- Configuración del Sitio (I): Conceptos generales Un sitio Web es el conjunto de archivos y carpetas muy relacionados con un tema u objetivo concreto. Por ejemplo: una tienda virtual, la web de una empresa, mi página personal, La forma habitual de crear un sitio Web es Crear los archivos HTML del sitio Web en mi ordenador. También se pueden crear carpetas e incorporar todo tipo de medias (imágenes, vídeos, etc.). Esto se hace dentro del denominado Sitio Local Una vez completado el Sitio Local, hay que publicarlo. Esto significa copiar todo el sitio local en el servidor de Internet donde vamos a dejarlo, el Sitio Remoto Dreamweaver asiste completamente el proceso de publicación de un Sitio Local al Sitio Remoto correspondiente, a través del Panel de archivos. Álvarez, S., Bravo, S. Universidad de Salamanca -8-4

5 Configuración del Sitio (II): nuevo sitio (paso 1) Ir al menú: Sitio > Nuevo Sitio Álvarez, S., Bravo, S. Universidad de Salamanca -9- Configuración del Sitio (III): nuevo sitio (pasos 2 y 3) Álvarez, S., Bravo, S. Universidad de Salamanca -10-5

6 Configuración del Sitio (IV): nuevo sitio (paso 4) Datos especiales de configuración del servidor web donde vas a dejar tu sitio web Álvarez, S., Bravo, S. Universidad de Salamanca -11- Configuración del Sitio (IV): nuevo sitio (pasos 5 y 6) Álvarez, S., Bravo, S. Universidad de Salamanca -12-6

7 Configuración del Sitio (IV): resultado Panel de archivos Álvarez, S., Bravo, S. Universidad de Salamanca -13- Mi primera página web Botón para publicar index.html es la página de entrada a todo sitio web Aquí para personalizar esta página web A medida que vamos creado nuevos archivos van apareciendo aquí Álvarez, S., Bravo, S. Universidad de Salamanca -14-7

8 Trabajando con la página web: Aplicar formato al texto El formato del texto se define a través del menú Texto o bien desde el inspector de propiedades color Negrita, cursiva Podemos crear nuestros propios estilos Alineación del texto: izquierda, centrado, derecha, justificado Tabulaciones a drcha. e izqda. Poner el texto en forma de lista: sin ordenar, ordenada, etc. Álvarez, S., Bravo, S. Universidad de Salamanca -15- Trabajando con la página web: Insertar imágenes Antes de insertar una imagen Copiar la imagen a la carpeta del Sitio Local Es recomendable guardar previamente el archivo HTML en el que se va a insertar la imagen Para insertar una imagen ir al menú Insertar > Imagen o a través de la vista Común de la barra Insertar Cuando se inserta una imagen en un archivo HTML, lo que se realmente se hace es crear un vínculo a la localización (exacta o relativa) de la imagen Álvarez, S., Bravo, S. Universidad de Salamanca -16-8

9 Trabajando con la página web: Insertar tablas (I) La tabla es una herramienta eficaz para presentar datos de forma tabular Para insertar una tabla ir al menú Insertar > Tabla ó desde la barra de Insertar (Diseño) Características Tamaño de tabla Encabezado Accesibilidad Álvarez, S., Bravo, S. Universidad de Salamanca -17- Trabajando con la página web: Insertar tablas (II) Observar como las celdas designadas como encabezado se resaltan del resto con el texto en negrita Utilizaremos el tabulador [TAB] para avanzar a otra celda También se pueden modificar las propiedades de una celda en particular (e incluso de toda una fila) Álvarez, S., Bravo, S. Universidad de Salamanca -18-9

10 Estructura del sitio: Hipervínculos (I) Un hipervínculo es el mecanismo para establecer enlaces entre archivos HTML (del mismo u otros sitios web) Desde un punto de vista visual, los hipervínculos se detectan porque el puntero del ratón cambia cuando el cursor se coloca encima El hipervínculo debe estar asociado a un elemento de la página web, como por ejemplo: texto o imagen Podrá crear un vínculo con: una página web, una dirección de correo, un archivo PDF, imágenes, vídeos, programas, etc Álvarez, S., Bravo, S. Universidad de Salamanca -19- Estructura del sitio: Hipervínculos (II) Para especificar el destino de un vínculo hay que construir una ruta desde el origen Existen varias forma de especificarla: Referencia absoluta: dirección completa del recurso en Internet, incluyendo los protocolos adecuados ( y ftp://) Por ejemplo: Referencia relativa a la página de origen: dirección para llegar desde el documento origen hasta el destino, omitiendo la parte común del camino. Ambos documentos deben estar en el mismo sitio Por ejemplo: imagen/foto.jpg Referencia relativa a la raíz: dirección relativa del destino con respecto a la carpeta raíz (aquella que en la estructura de árbol está arriba de todas) Álvarez, S., Bravo, S. Universidad de Salamanca

11 Estructura del sitio: Hipervínculos (III) La manera más simple de hacer un hipervínculo es con el inspector de propiedades 1. Seleccionar el texto u objeto (imagen, etc.) que va a estar asociado al hipervínculo 2. Completar el vínculo en el inspector de propiedades Álvarez, S., Bravo, S. Universidad de Salamanca -21- Estructura del sitio: Hipervínculos (IV) El destino especifica la ventana donde se abrirá el vínculo Destino válidos _blank: abre el vínculo en una ventana nueva _parent: abre el vínculo en el marco que lo contiene o conjunto de marcos _self: abre el vínculo en la misma ventana (o marco) que el archivo de origen _top: abre el vínculo en la ventana completa del navegador Álvarez, S., Bravo, S. Universidad de Salamanca

12 Estructura del sitio: Hipervínculos (V) Ejemplo de vínculo externo asociado a una imagen Ejemplo de vínculo a un correo electrónico Álvarez, S., Bravo, S. Universidad de Salamanca -23- Estructura del sitio: Hipervínculos (VI) También se pueden crear vínculos a partes de una página En primer lugar hay que definir las secciones de la página por medio de marcadores El marcador se representa en Dreamweaver como un ancla Ahora ya podemos crear el vínculo a una parte de una página. Este tiene la siguiente sintaxis: pagina#marcador Ej.: leccion1.html#capitulo0 Álvarez, S., Bravo, S. Universidad de Salamanca

13 Web Microsoft Excel: Capítulo 1 Creación de páginas web con Dreamweaver Álvarez, S., Bravo, S., Departamento de Informática y automática Universidad de Salamanca 13