Tema 8. Creación y diseño de un sitio web

(1)

Profesor: Juan Luis Marruecos López – 1–

1. Interfaz de Dreamweaver MX

El entorno de trabajo de Dreamweaver está compuesto por una serie de ventanas, paneles y otros elementos configurables por el usuario. En la Figura 1 podemos ver una posible configuración del entorno de trabajo, donde aparecen los principales elementos.

Barra Insertar Barra de Menús Grupo de Paneles

Barra de herramientas Documento Ventana de Documento

Selector Nombre de la página Inspector de Propiedades Panel Sitio

etiquetas

Figura 1: Entorno de trabajo de DW

Pasemos a comentarlos:

° Barra de Menús: Barra típica donde se encuentran los menús que contienen las diferentes acciones que podemos realizar con el programa. La mayoría son similares a otros conocidos, como el procesador de textos Word.

° Barra Insertar: Contiene botones para la inserción de diversos tipos de “objetos”, como imágenes, tablas y formularios, en un documento. Los objetos están organizados por categorías. Podemos acceder a las distintas categorías haciendo clic sobre cada uno de los nombres.

Cada objeto es un fragmento de código HTML que nos permite establecer diversos atributos al insertarlo. Por ejemplo, podemos insertar una imagen haciendo clic en el icono “Imagen” de la categoría “Común”. También podemos insertar los objetos utilizando el menú Insertar en lugar de la barra Insertar.

(2)

la ventana de documento (como la vista Diseño y la vista Código), diversas opciones de visualización y algunas operaciones comunes como la obtención de una vista previa en un navegador.

Por ejemplo, si hacemos clic en el botón (Mostrar vista de código) veremos el código HTML del documento.

Para mostrar/ocultar la barra de herramientas Documento: menú Ver -> Barra de herramientas -> Documento.

° Ventana de Documento: muestra el/los documento/s mientras los estamos creando y editando. Un documento es una página web (extensión: .htm, .html, .php, …). Podemos tener abiertas varias páginas web para su edición. Si están organizadas en forma de cascada su nombre aparece en la pestaña inferior.

Si ponemos el cursor sobre el nombre de la página, y hacemos clic en el botón secundario del ratón obtendremos un menú contextual donde podemos realizar diferentes acciones sobre el documento: nuevo, abrir, guardar, ….

° Inspector de Propiedades: nos permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades, y por lo tanto el inspector de propiedades tendrá distinto aspecto y opciones según el tipo de objeto seleccionado.

Para mostrar/ocultar el inspector de propiedades: menú Ventana -> Propiedades.

° Grupos de Paneles: son conjuntos de paneles relacionados apilados bajo un encabezado común. Para

ampliar/reducir un grupo de paneles haremos clic en la flecha de ampliación situada a la izquierda del nombre del grupo; para desacoplar/acoplar un grupo de paneles, lo arrastraremos por los puntos situados en el borde izquierdo de la barra de título del grupo; para cerrar un grupo de paneles haremos clic en la flecha de selección situada a la derecha del nombre del grupo.

También desde el menú Ventana podemos mostrar/ocultar los distintos paneles, e incluso mostrar/ocultar todos los paneles (tecla de acceso rápido: F4)

° Panel Sitio: desde este panel podemos administrar los archivos y carpetas que forman nuestro sitio web. También ofrece una vista de todos los archivos del disco duro local, de manera semejante a como lo hace el Explorador de Windows.

Oros elementos útiles en la configuración de nuestro entorno de trabajo son:

° Reglas: muy útiles para considerar las distintas resoluciones y situar los elementos en la página.

Para mostrar/ocultar las reglas: menú Ver -> Reglas -> Mostrar (es conveniente usar como unidad píxeles).

° Preferencias: Podemos configurar el espacio de trabajo, los paneles, los colores de las etiquetas, el navegador para la vista previa y multitud de otros factores.

(3)

2. Primeros pasos

Una vez que ya hemos planificado la estructura de páginas y archivos para nuestro sitio web (al menos es bueno dibujar sobre papel un esquema básico: estructura, páginas, elementos de las páginas, etc; posteriormente lo iremos mejorando y ampliando) es hora de ponerse al desarrollo.

Nosotros vamos a elaborar el sitio web ”Sistema Solar”, dedicado a la divulgación de contenidos sobre el Sistema Solar y los planetas que lo forman. Nuestro sitio web va a tener la estructura de archivos que muestra la Figura 2.

Figura 2: Estructura de archivos

La carpeta “imagenes” contendrá las fotografías e imágenes de nuestro sitio web.

Los archivos “button1.swf”, “button2.swf”, “button3.swf”, etc son los botones flash para los menús de la barra de navegación.

La página “index.htm” es el inicio del sitio web. Contendrá una foto con todos los planetas del Sistema Solar

Los diferentes archivos “luna.htm”, “mercurio.htm”,

“sistemasolar.htm”, “sol.htm”, “tierra.htm” y “venus.htm” contendrán información y fotografías relativas a los diferentes planetas.

Todas las páginas estarán vinculadas entre sí mediante una barra de navegación que estará en la cabecera de cada una de las páginas, y una imagen de sustitución en el pie nos llevará a “INICIO” que es la portada (“index.htm”).

En la Figura 3 podemos observar la página de portada principal “index.htm”. El contenido global del web está en la siguiente dirección web:

http://www.lapresentacion.com/colegioguadix/departamentos/informatica/sistemasolar/index.htm

(4)

3. Definir un Sitio Local

Lo primero que tenemos que hacer es definir un sitio local en nuestro ordenador: cuál será la carpeta donde se alojarán los archivos y las páginas que hagamos. Elegimos menú Sitio -> Nuevo sitio. Aparece el cuadro de diálogo “Definición del sitio”. Si el cuadro de diálogo muestra la ficha Básicas (asistente para la definición del sitio), hacemos clic en Avanzadas y seleccionamos la categoría “Datos locales” del panel izquierdo de la ventana. Creamos una carpeta en “Mis Documentos” de nombre “Sistema Solar” y la elegimos como “Carpeta raíz local” (como muestra la Figura 4).

Figura 4: Datos locales para el sitio web Sistema Solar

Finalmente pulsamos el botón “Aceptar”. Dentro de la carpeta “Sistema Solar” es donde guardaremos TODOS los archivos del sitio web.

En la categoría “Datos remotos” podemos configurar los datos de acceso al servidor donde se alojará el sitio. Más adelante lo haremos, en el apartado “Publicación del sitio web”.

El panel Sitio muestra ahora la nueva carpeta raíz local para el sitio actual, y también veremos aquí los archivos que vayamos creando en una vista jerárquica de árbol.

(5)

4. Añadir páginas al Sitio

Podemos añadir páginas a nuestro sitio web de las siguientes formas:

1. Con el cursor del ratón situado sobre la carpeta raíz “Sitio – Sistema Solar” en el panel Sitio, hacemos clic en el botón derecho. Seleccionamos en el menú contextual que aparece la opción Nuevo Archivo. Aparecerá un nuevo archivo sin nombre (“untitled.htm”) en el panel Sitio. Lo renombramos por “index.htm” (será la primera página que hagamos). Haciendo clic sobre él con el botón derecho del ratón accederemos a un menú contextual con diferentes acciones para el archivo: abrir, colocar, copiar, borrar, cambiar nombre, etc. También podemos abrirlo haciendo doble clic sobre él (botón izquierdo del ratón).

2. Elegimos menú Archivo -> Nuevo. Aparecerá la ventana “Nuevo documento”, donde tenemos distintas opciones para crear una nueva página. Para empezar desde cero, elegimos ficha “General”, categoría “Página básica”, subcategoría “HTML” (Figura 5). Pulsamos en el botón “Crear” y obtendremos una nueva página en blanco sin nombre. Posteriormente, cuando la guardemos, le daremos el que queramos.

Figura 5: Ventana “Nuevo documento”

5. Creando la página index.htm

Para crear la página “index.htm” (ver Figura 3) realizamos la serie siguiente de acciones:

En primer lugar vamos a insertar una tabla de una fila y seis columnas donde insertaremos los botones de navegación. Para ello hacemos clic en menú Insertar -> Tabla y rellenamos la ventana como muestra la Figura 6: (alternativamente podemos insertar una tabla pulsando sobre el icono “tabla” de la barra INSERTAR ):

(6)

aspecto y mostrará las propiedades configurables del elemento “tabla” (Figura 7). Desde aquí podremos cambiar sus propiedades (manteniendo el cursor sobre los distintos ítems obtendremos “bocadillos” flotantes con información sobre los mismos). Dependiendo del elemento seleccionado, el Inspector de Propiedades tendrá un aspecto diferente (si tenemos muchos elementos en una misma página, una forma cómoda de seleccionar el que queramos es haciendo clic en el “Selector de etiquetas” sobre el elemento deseado).

Figura 7: Aspecto del Inspector de propiedades para la tabla insertada

Ahora crearemos los botones de navegación. Veamos el proceso para insertar el primer botón, “Sistema Solar”:

Nos situamos con el cursor en la primera celda de la tabla, y hacemos clic en Menú Insertar -> Imágenes interactivas -> Botón Flash. Nos aparecerá la pantalla de la Figura 8, que rellenaremos con los datos apropiados. Elegimos a nuestro gusto el estilo, pero es importante escribir bien la página que se abrirá cuando hagamos clic sobre el botón, en el campo “Vínculo” (por eso es imprescindible pensar bien al principio la “estructura” de páginas del sitio).

Figura 8: Ventana para insertar un botón flash

Terminamos de hacer el resto de botones de un modo similar. Los links para las páginas son:

Botón Sisema Solar -> sistemasolar.htm Botón Venus -> venus.htm Botón El Sol -> sol.htm Botón La Tierra -> tierra.htm Botón Mercurio -> mercurio.htm Botón La Luna -> luna.htm

(7)

Ahora procedemos a insertar la imagen del sistema solar:

(Previamente tendremos que haber copiado a esta carpeta todas las imágenes necesarias para nuestra web. Estas imágenes están disponibles en la página del Departamento de Informática, sección “Informática 4º de ESO”).

Situamos el cursor debajo de la tabla y seleccionamos menú Insertar -> Imagen (alternativamente pulsando en el icono “imagen” de la barra INSERTAR). En la ventana que aparece (Figura 9) hacemos doble clic sobre la carpeta “imagenes” para abrirla y elegimos el archivo “sistema-solar.jpg”.

Figura 9: Ventana “Seleccionar origen de imagen”

Aceptamos y ya habremos colocado la imagen. Nuestra página tendrá un aspecto similar a como muestra la Figura 10:

(8)

Ahora insertamos una tabla debajo de la imagen con una fila y una columna, donde colocaremos la imagen del email girando (“e_mail.gif”) y una dirección donde queramos que nos escriban. Para activar el link escribiremos la etiqueta “mailto” (Figura 11):

Figura 11

Finalmente, ya sólo nos queda añadir el fondo a la página. Se hace de la siguiente manera:

Hacemos clic en menú Modificar -> Propiedades de la página. Aparecerá la ventana que muestra la Figura 12, donde escribiremos el título de la página, y elegiremos el color de fondo de la página, o si queremos (como es nuestro caso) una imagen de fondo.

(9)

6. Creación de la página sistemasolar.htm

En primer lugar creamos una nueva página de nombre “sistemasolar.htm”. A continuación copiamos y pegamos en esta página la tabla con la botonera de navegación que habíamos creado en la anterior página “index.htm”.

Ahora ponemos el título a la página “EL SISTEMA SOLAR” del tamaño y color deseado. Nuestra página tendrá un aspecto similar al que se muestra en la Figura 13: (podemos observar en la vista código y diseño el código HTML que se va generando)

Figura 13

Ahora creamos una tabla con las filas y columnas apropiadas (o varias tablas, como queramos) donde iremos insertando las imágenes y el texto correspondiente a la página, con las propiedades adecuadas.

Finalmente, insertaremos la imagen que nos conducirá a la página de INICIO. Es una imagen de sustitución, que se inserta de la siguiente manera:

Hacemos clic en menú Insertar -> Imágenes interactivas -> Imagen de sustitución. Nos aparecerá una ventana donde elegiremos la “Imagen original”, la “Imagen de sustitución” y la “URL” donde iremos al hacer clic, en este caso “index.htm”.

Finalmente, añadimos el fondo de la página y ya tendremos terminada esta página.