Creación de páginas web con Dreamweaver

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
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
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
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
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
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
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
© Álvarez, S., Bravo, S.
A medida que vamos
creado nuevos archivos
van apareciendo aquí
Universidad de Salamanca
-14-
7
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
Alineación del texto:
izquierda, centrado,
derecha, justificado
Negrita,
cursiva
Tabulaciones a
drcha. e izqda.
Podemos crear
nuestros propios
estilos
© Álvarez, S., Bravo, S.
Poner el texto en forma
de lista: sin ordenar,
ordenada, etc.
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
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
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 (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)
© Álvarez, S., Bravo, S.
Universidad de Salamanca
-20-
10
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
-22-
11
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
-24-
12
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