TALLER CREACIÓN PÁGINAS WEB - NVU Prácticas

Transcripción

1 TALLER CREACIÓN PÁGINAS WEB - NVU Prácticas Departament: Societat de la Informació Data del document: 20/03/2007 Esta obra está bajo la licencia Reconocimiento-NoComercial-SinObraDerivada 2.5 de Creative Commons. Puede copiarla, distribuirla y comunicarla públicamente siempre que especifique su autor y no la utilice para fines comerciales; y no haga con ella obra derivada. La licencia completa se puede consultar en:

2 Práctica 1 Crear mi página web Vamos a diseñar una web desde el principio. Nuestro tema a desarrollar va a ser Deportes de aventuras. Nos va a quedar igual que la web: Para ello lo primero que tenemos que hacer es crear nuestra web, con lo que hemos visto hasta ahora. Con lo que sabemos podemos darle nombre, para que nos salga en la barra del título, y ponerle el color de fondo a la página. Nos vamos a crear una carpeta en T:\, que se llamará web_nuestronombre, y con la que a partir de ahora trabajaremos. Y en esta carpeta crearemos dos carpetas, una con el nombre de IMÁGENES, y otra con el nombre de FONDOS. Es muy importante, a la hora de hacer una web, tener muy bien estructurada nuestro directorio. Ahora desde el NVU, crearemos 12 web, que son las que componen nuestra página web. 2

3 Como ya sabemos para crear una página elegimos la opción Nuevo en el menú Archivo, y pulsamos Crear, como se explica en las fotocopias. Le damos fondo a la página, como queremos hacerla exactamente igual a la del ejemplo, lo que vamos a hacer es trabajar con las mismas imágenes, por lo que nos guardaremos el fondo de la web del ejemplo en nuestra carpeta de FONDOS, para poder usarlo. Y nos vamos a Colores y fondo de la página y en el apartado Imagen de fondo elegimos el archivo que acabamos de guardar como fondo. Y por último nos queda ponerle nombre a título a todas nuestras páginas. Esto se hace en Formato Título y propiedades de la página. Guardamos todas nuestras páginas, con los mismos nombre que nos muestra la figura de arriba, y ya tenemos la estructura creada. 3

4 Práctica 2 Formato del Texto En esta práctica vamos a empezar a insertar el contenido en la página. Para ello abrimos una por una con el Nvu, y lo que vamos a hacer es seleccionar el texto de la web de ejemplo, copiarlo, y pegarlo en nuestra página. Nos quedará de la siguiente manera: En posteriores clases, cuando veamos la inserción de tablas, y de imágenes, conseguiremos que se asemeje más a nuestra web de ejemplo. Ahora es el momento de probar, lo visto en las fotocopias de Formatos del Texto, y aunque cuando lo hemos copiado, ya lo hemos hecho con el mismo formato que queremos obtener, podemos observar que podemos variar el mismo. 4

5 Práctica 3 - Tablas Para poder pasar de esta vista: a esta otra: 5

6 Es necesaria la inserción de una tabla o de marcos, en este taller vamos a ver lo primero. En nuestro caso, si nos fijamos bien, necesitaremos una tabla de 3 filas por 2 columnas: Las dos primeras filas habría que combinarlas - unir celdas combinadas, ya que es donde va a ir el título Deportes de Aventura. Y la dos últimas columnas de la izquierda también cabría combinarlas puesto que es donde va a ir el índice. Finalmente quedaría así: Imagen con título Imagen Texto Índice En la última celda es donde vamos a insertar nuestro texto, por lo que nos situamos sobre ella e insertamos el texto. Y en la celda de la izquierda vamos a insertar una nueva tabla con 1 columna y 10 filas, para nuestro índice, y así poder movernos por nuestra web. 6

7 Finalmente tendríamos lo siguiente: A falta de darle formato e insertar fotografías, nuestra web ya tiene el diseño más o menos definido. Tendremos que hacer esto con cada una de las web s que componen nuestra página. 7

8 Práctica 4 - Imágenes Ahora vamos a poner en práctica lo visto en la teoría de cómo insertar imágenes. Para ello y antes de nada tendremos que guardarnos todas las imágenes que vamos a utilizar. Nos las guardamos desde nuestra página de ejemplo, y cómo sabemos la importancia de tener bien estructurado nuestro directorio, dentro de imágenes, crearemos una estructura de carpetas como la que nos muestra la siguiente figura: Con lo aprendido en la teoría sobre imágenes, abriremos todas nuestras web s e iremos insertando las imágenes correspondientes, teniendo en cuenta poner el título emergente, el texto alternativo, y muy importante indicar La URL es relativa a la dirección de la página. También tendremos en cuenta las dimensiones y la apariencia, ya que algunas de las fotos sitas en la web de ejemplo tienen borde. 8

9 Práctica 5 - Enlaces En esta práctica lo que vamos a hacer es crear todos los enlaces existentes en la web. Tenemos enlaces en todas las páginas, así que abriremos una por una, y tal y como hemos visto en la teoría iremos creando todos los enlaces, tanto en las imágenes como en el texto. En la primera página, tenemos dos enlaces, ambos nos abrirá la misma pagina: alpinismo.html 9

10 Las sucesivas páginas serán todas por un estilo, tal y como muestra la siguiente figura: En el menú de la izquierda hay 10 enlaces, uno por cada línea del menú, los crearemos tal y como ya sabemos, uno a uno. Y en la imagen del final, la que es una flecha amarilla, también hay un enlace que nos lleva a un menú. 10

11 También tenemos una página de enlaces externos, la cual nos facilita direcciones de páginas de interés, Creamos los enlaces externos, tal y como hemos visto en la teoría. 11

12 Por último tenemos un página en la que todo son imágenes con enlaces: Lo que tendremos que hacer es especificarle el enlace a cada una de las imágenes, teniendo en cuenta qué páginas es la que tiene que abrir cada una de las imágenes. 12

13 Práctica 6 - Formulario Crear el formulario, siguiendo de ejemplo, como siempre nuestra página de ejemplo: Teniendo en cuenta que en las propiedades del formulario especificaremos como URL de la acción: mailto: y nuestra dirección de , para que una vez la persona interesada, haya rellenado los campos, nos la haya llegar a través del correo electrónico. Una cosa muy importante es que el envío de este formulario lo hace a través del programa preestablecido como programa de correo electrónico, que suele ser el Outlook Express y que si no tenemos nuestra cuenta de correo configurada el envío será erróneo. 13

14 14