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


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)


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


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


El entorno de trabajo (III):paneles o inspectores

Panel de archivos

Panel de propiedades

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 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


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


Configuración del Sitio (II):nuevo sitio (paso 1)

Ir al menú: Sitio > Nuevo Sitio


Configuración del Sitio (III):nuevo sitio (pasos 2 y 3)

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


Configuración del Sitio (IV):nuevo sitio (pasos 5 y 6)

7


Configuración del Sitio (IV):resultado

Panel de archivos


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


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


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


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


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


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


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


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


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


Estructura del sitio:Hipervínculos (V)

Ejemplo de vínculo externo asociado a una imagen

Ejemplo de vínculo a un correo electrónico


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

Web - Cap 1 - Creación de páginas web con...

Documents

Transcript of Web - Cap 1 - Creación de páginas web con...