Práctica1: Crear una página web con Nvu

Transcripción

1 Práctica1: Crear una página web con Nvu Vamos a diseñar una web desde el principio. Nuestro tema a desarrollar va a ser Deportes de aventuras. 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. Vamos a crear una carpeta en el lápiz USB que se llamará web_nuestronombre, y con la que a partir de ahora trabajaremos. Y en esta carpeta crearemos TRES carpetas, una con el nombre de IMÁGENES, y otra con el nombre de FONDOS y la última con el nombre BOTONES. Es muy importante, a la hora de hacer una web, tener muy bien estructurada nuestro directorio. Ahora desde el NVU, crearemos 11 webs, que son las que componen nuestra página web. Informática. Bloque de contenidos: Edición de páginas web. 1 de 14

2 Para crear una página: Elegimos la opción Nuevo en el menú Archivo, y pulsamos Crear. Elegimos un fondo de la página, Vamos a Colores y fondo de la página y en el apartado Imagen de fondo elegimos el archivo fondo1.gif que habrás descargado a la carpeta FONDOS.. Por último nos queda ponerle nombre a título a la página Esto se hace en Formato Título y propiedades de la página. Guardamos nuestra página con el nombre de index.html. Está será nuestra página de inicio Escribimos el texto Entrar en la parte inferior de la página Cambiamos la fuente y el formato hasta que te queda algo parecido a los siguiente Para el resto de páginas: Puedes copiar el archivo index.html 10 veces (con esto tendrás 10 nuevos archivos con el mismo fondo) y abrirlos desde Nvu Una vez abiertos, tendrás que cambiar el título de la página por el procedimiento anterior y volver a guardarlos con el nombre nuevo. Informática. Bloque de contenidos: Edición de páginas web. 2 de 14

3 Práctica 2: Creando la página de Inicio Para poder transformar la página Index.html en lo que ves en la siguiente imagen tienes que hacer lo siguiente: Debes crear una tabla de 3 filas y 3 columnas con las siguientes propiedades Informática. Bloque de contenidos: Edición de páginas web. 3 de 14

4 En cada celda debes insertar la imagen correspondiente que encontrarás en las siguientes subcarpetas de la carpeta imágenes Informática. Bloque de contenidos: Edición de páginas web. 4 de 14

5 Las dimensiones de cada una de las imágenes serán: Desde cada imagen, tienes que crear un enlace con cada una de las páginas que ya tienes creadas. Para hacerlo debes cliclear en la ficha Enlace y hacer lo que se ve en la siguiente imagen Informática. Bloque de contenidos: Edición de páginas web. 5 de 14

6 Por encima de la tabla, debes insertar el texto que ves en la imagen. Puedes insertar el que tienes en la carpeta Logos, llamado Logo.png. Esa imagen fue creada en la web donde encontrarás muchos tipos. Puedes intentar hacer el tuyo propio. También podrías crear un logo usando el programa Gimp que ya conoces. Por último, tenemos que crear un enlace desde el texto Entrar a alguna de las páginas, por ejemplo, lo vamos a hacer con la página alpinismo.html. Puedes ver en la siguiente imagen como hacerlo Informática. Bloque de contenidos: Edición de páginas web. 6 de 14

7 Una vez hecho esto, guardas de nuevo el archivo Index.html para salvar los cambios Informática. Bloque de contenidos: Edición de páginas web. 7 de 14

8 Práctica 3: Editando el resto de páginas Abrimos una página cualquiera de las páginas ya creadas, por ejemplo alpinismo.html y trabajarla según las indicaciones que encontrarás a continuación, hasta dejarla con su formato definitivo Lo primero que vamos a hacer es la inserción de una tabla de 3 filas por 2 column Las dos primeras filas habría que combinarlas -, botón derecho- unir celdas combinadas, ya que es donde va a ir una imagen representativa del tema de la página.hacemos lo mismo con las dos últimas columnas de la izquierda,puesto que es donde va a ir el índice. Finalmente quedaría así: Informática. Bloque de contenidos: Edición de páginas web. 8 de 14

9 En la última celda de la derecha 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 11 filas, para nuestro índice, y así poder movernos por nuestra web. Tendríamos lo siguiente F i n a l m e n t e A falta de darle formato e insertar fotografías, nuestra web ya tiene el diseño más o menos definido. Ahora tendremos que ir añadiendo contenido. En la celda inferior derecha añadimos el texto y una imagen reprentativa del deporte del que hablamos ( encontrarás alguna en la carpeta Imágenes) En la celda intermedia derecha añadimos el título. En la celda superior añadimos la imagen aventura2.jpg Informática. Bloque de contenidos: Edición de páginas web. 9 de 14

10 En las tabla insertada en la celda de la izquierda, añadiremos 11 botones, (están en la carpeta Botones), modificamos su tamaño para dejarlo en Insertamos un enlace en cada botón, de la siguiente forma Informática. Bloque de contenidos: Edición de páginas web. 10 de 14

11 El resultado será que en la celda de la izquierda nos queda el siguiente menú Solo nos queda hacer los bordes de la tabla invisibles Informática. Bloque de contenidos: Edición de páginas web. 11 de 14

12 Y la página quedará: Informática. Bloque de contenidos: Edición de páginas web. 12 de 14

13 Como ves, ahora en la parte izquierda nos ha quedado un menú con 11 enlaces que nos han de dirigir a las 11 diferentes páginas que tiene nuestro proyecto. Como has de modificar las páginas restantes ( la index.html no hace falta), sería bueno que guardaras está página 9 veces, con 9 diferentes nombres, uno por cada página. Con esto conseguiríamos no tener que hacer de nuevo todo el proceso de insertar todos los botones del menú, así como de crear sus link. Solo quedaría cambiar el texto y las fotos, adaptándolo al del deporte que corresponda. También, sería necesario cambiar el título de la página (recuerda que es lo que aparece en la barra del navegador), porque ahora todas las páginas tendrán el título alpinismo. Por último, guarda todas las páginas y las imágenes ( sin cambiar esta de sitio) y comprímelas todas juntas. Súbelas a tu espacio de Google Drive, compártelas y copía el enlace para pegarlo en el Campus Moodle Informática. Bloque de contenidos: Edición de páginas web. 13 de 14

14 Informática. Bloque de contenidos: Edición de páginas web. 14 de 14