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

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:
http://creativecommons.org/licenses/by-nc-nd/2.5/es/deed.es

www.alaquas.org
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: http://www.alaquas.net/cursosnntt/creacionweb/
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

www.alaquas.org
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

www.alaquas.org
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

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

www.alaquas.org
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
Índice
Imagen
Texto
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

www.alaquas.org
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

www.alaquas.org
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

www.alaquas.org
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

www.alaquas.org
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

www.alaquas.org
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

www.alaquas.org
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

www.alaquas.org
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 e-mail”, 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

www.alaquas.org
14