Web - Cap 1 - Creación de páginas web con...
Transcript of Web - Cap 1 - Creación de páginas web con...
1
WebMicrosoft 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
© Álvarez, S., Bravo, S. Universidad de Salamanca -2-
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 web1. Aplicar formato
2. Insertar imágenes
3. Insertar tablas
6. Estructura del sitio1. Hipervínculos
2
© Álvarez, S., Bravo, S. Universidad de Salamanca -3-
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 (HyperTextMarked 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 MacromediaFlash y por su soporte de los estándares del W3C (World Wide Web Consortium)
© Álvarez, S., Bravo, S. Universidad de Salamanca -4-
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
3
© Álvarez, S., Bravo, S. Universidad de Salamanca -5-
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 -6-
El entorno de trabajo (III):paneles o inspectores
Panel de archivos
Panel de propiedades
4
© Álvarez, S., Bravo, S. Universidad de Salamanca -7-
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 Dreamweavero 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 -8-
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 LocalUna 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.
5
© Álvarez, S., Bravo, S. Universidad de Salamanca -9-
Configuración del Sitio (II):nuevo sitio (paso 1)
Ir al menú: Sitio > Nuevo Sitio
© Álvarez, S., Bravo, S. Universidad de Salamanca -10-
Configuración del Sitio (III):nuevo sitio (pasos 2 y 3)
6
© Álvarez, S., Bravo, S. Universidad de Salamanca -11-
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 -12-
Configuración del Sitio (IV):nuevo sitio (pasos 5 y 6)
7
© Álvarez, S., Bravo, S. Universidad de Salamanca -13-
Configuración del Sitio (IV):resultado
Panel de archivos
© Álvarez, S., Bravo, S. Universidad de Salamanca -14-
Mi primera página web
index.htmles la página de entrada a todo sitio web A medida que vamos
creado nuevos archivos van apareciendo aquí
Botón para publicar
Aquí para personalizar esta página web
8
© Álvarez, S., Bravo, S. Universidad de Salamanca -15-
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
Podemos crear nuestros propios estilos
Negrita, cursiva
Alineación del texto: izquierda, centrado, derecha, justificado
Tabulaciones a drcha. e izqda.
Poner el texto en forma de lista: sin ordenar, ordenada, etc.
color
© Álvarez, S., Bravo, S. Universidad de Salamanca -16-
Trabajando con la página web:Insertar imágenes
Antes de insertar una imagenCopiar 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
9
© Álvarez, S., Bravo, S. Universidad de Salamanca -17-
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ísticasTamaño de tabla
Encabezado
Accesibilidad
© Álvarez, S., Bravo, S. Universidad de Salamanca -18-
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)
10
© Álvarez, S., Bravo, S. Universidad de Salamanca -19-
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 -20-
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 (http:// y ftp://)
Por ejemplo: http://avellano.fis.usal.es/~sergio/index.html
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)
11
© Álvarez, S., Bravo, S. Universidad de Salamanca -21-
Estructura del sitio:Hipervínculos (III)
La manera más simple de hacer un hipervínculo es con el inspector de propiedades1. 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 -22-
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
12
© Álvarez, S., Bravo, S. Universidad de Salamanca -23-
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 -24-
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
13
WebMicrosoft 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