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

Transcripción

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. Para mostrar/ocultar la barra Insertar: menú Ventana -> Insertar. Profesor: Juan Luis Marruecos López 1

2 Barra de herramientas Documento: contiene botones y menús emergentes que proporcionan diferentes vistas de 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. Para acceder a la ventana Preferencias: menú Edición -> Preferencias. Profesor: Juan Luis Marruecos López 2

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. 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 ). Figura 2: Estructura de archivos 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: Figura 3: Página index.htm, portada del sitio web Sistema Solar Profesor: Juan Luis Marruecos López 3

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. Profesor: Juan Luis Marruecos López 4

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 ): Figura 6: Ventana Insertar tabla Profesor: Juan Luis Marruecos López 5

6 Se insertará en la página web la tabla. Si nos fijamos ahora en el Inspector de Propiedades éste habrá cambiado de 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 El Sol -> sol.htm Botón Mercurio -> mercurio.htm Botón Venus -> venus.htm Botón La Tierra -> tierra.htm Botón La Luna -> luna.htm NOTA: Los nombres de los archivos es conveniente escribirlos sin espacios, acentos ni caracteres extraños, como ñ. Profesor: Juan Luis Marruecos López 6

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: Figura 10 Profesor: Juan Luis Marruecos López 7

8 Ahora insertamos una tabla debajo de la imagen con una fila y una columna, donde colocaremos la imagen del 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. Figura 12 Profesor: Juan Luis Marruecos López 8

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. NOTA: El resto de páginas se hace de un modo similar. Profesor: Juan Luis Marruecos López 9