pagína web con openoffice

IES EL TABLERO CURSO DE REVISIÓN / ACTUALIZACIÓN

Página 1

Creación de una página web usando OpenOffice 1.- Crear una carpeta nueva en tu cuenta de usuario llamada WEB donde se alojará la página web que vamos a crear.

2.- Dentro de la carpeta creada en el punto 1 vamos a crear una nueva carpeta llamada IMÁGENES donde iremos guardando las imágenes de nuestra web.

3.- Abrir el editor de páginas web de OpenOffice.

4.- Una regla básica a la hora de crear páginas web es “GUARDAR NUESTRA PÁGINA ANTES DE NADA” esto es debido a que las páginas web usan direcciones relativas a la ubicación de la propia página y si la página no se ha guardado con anterioridad en disco todos los enlaces que pongamos no funcionarán correctamente cuando colguemos nuestra página en Internet.

Vamos a guardar el archivo en nuestra carpeta WEB con el nombre index (al igual que en los libros de texto lo primero que solemos encontrarnos es el índice, en el diseño de páginas web la primera página de todas las que componen nuestra web suele llamarse index.html)


Página 2

5.- Poner un título a la página usando el estilo de letra ENCABEZADO o ENCABEZADO1.

6.- Las páginas web están escritas en un lenguaje llamado HTML, lo que ocurre es que existen aplicaciones como la que estamos usando que nos permiten crear páginas web sin tener que conocer dicho lenguaje.

Ver el código html de la página (pulsa el botón TEXTO FUENTE HTML que se encuentra en la barra de botones de la izquierda).

Seguidamente en donde pone <TITLE> poner vuestro nombre.

Esa línea quedaría así:

<TITLE>Francisco Aguilera</TITLE>

Pulsar el mismo botón que pulsamos antes para volver a la vista de diseño.

Si te fijas ahora aparece nuestro nombre en la barra principal de nuestra ventana.

7.- Buscar en Internet una imagen (puedes usar google->imágenes) y guardarla en la carpeta IMÁGENES que creaste en el punto 2.

8.- Insertar la imagen en nuestra página web.

a) Insertar->Imagen

b) Buscar la imagen y añadirla.


Página 3

9.- Modificar el tamaño de la imagen usando los cuadros verdes que aparecen en las esquinas de la imagen (si no ves los cuadros verdes es que no tienes seleccionada la imagen)

10.- Alinear la imagen a la izquierda. (Botón derecho del ratón sobre la imagen->alineación->a la izquierda.

11.- Dos líneas debajo de la foto escribir el texto “ir a google” con el estilo de letra predeterminado.

12.- Seleccionar dicho texto e insertar un hipervínculo a la página de google.

a) Insertar -> Hiperenlace

b) Poner en el campo destino la URL de google: http://www.google.es

13.- Comprobar el correcto funcionamiento de nuestra página.

a) Antes de nada grabar la página.

b) Ir a la carpeta donde tenemos guardada nuestra web.

c) Pinchar dos veces con el ratón sobre el icono de nuestra página web.

d) Una vez que se haya abierto la página con nuestro navegador web vamos a pulsar con el ratón sobre el hipervínculo “ir a google” para comprobar si de verdad va a la página de google.


Página 4

14.- Tablas

Las tablas son uno de los elementos más útiles a la hora de crear páginas web, entre otras cosas porque nos añaden nuevas posibilidades de alineación ya que cada celda de nuestra tabla se comporta a todos los efectos como una nueva página web.

Debajo del enlace a google vamos a insertar una tabla con 4 columnas y 5 filas.

(Insertar->tabla; poner columnas = 4, filas = 5 y desmarcar la casilla bordes para que la tabla tenga los bordes invisibles)

NOTA: Aunque parezca que los bordes se están viendo cuando probemos nuestra página en nuestro navegador estos no se verán.

15.- En la celda F1,C1 -> Fila 1, Columna 1 vamos a poner nuestro Nombre alineado a la izquierda.

En la celda F1,C2 vamos a poner nuestro primer apellido alineado a la derecha

En la celda F1,C3 pondremos nuestro segundo apellido alineado al centro

Guardar nuestra página y probarla en el navegador como hicimos en el paso 13.

Si te fijas bien los bordes de la tabla no están visibles, este tipo de tablas (con bordes invisibles) suelen usarse para tener más posibilidades de alineación.

16.- En la celda F3,C4 vamos a insertar un gif-animado en forma de flecha.

a) Abrir nuestro navegador (Mozilla)

b) En google poner “gif animados”

c)Pinchar en el enlace con URL = http://gifsanimados.espaciolatino.com/

d)Elegir la opción CORREO. Pinchar después en adelante.

e) Guardar uno de los gif-animados en nuestra carpeta WEB->IMÁGENES

Usar el botón derecho del ratón -> Guardar imagen.

f) Insertar la imagen en la celda F3,C4

NOTA: Aunque la imagen parezca inmóvil cuando ejecutemos la página en el navegador web esta saldrá animada.

17.- Seleccionar la última imagen e insertar un hipervínculo a nuestro correo.


Página 5

a) Pinchar en el icono CORREO

b) En Destinatario poner vuestra dirección de correo

c) En asunto poner lo que se desee. Pulsar aplicar.

18.- Grabar y ejecutar en el navegador.

Cuando pinchemos sobre el gif-animado se nos debe abrir nuestro cliente de correo (en guadalinex es evolution). Cerrar evolution. (botón cancelar)

19.- Crear una nueva página web sin cerrar la página actual.

Pulsa sobre el botón nuevo

20.- Lo primero de todo guardar la nueva página en nuestra carpeta con el nombre “pagina1”

21.- En la nueva página debe aparecer un texto que ponga “PÁGINA 1” y debemos insertar un hipervínculo a la página anterior.


Página 6

en el campo destino tenemos que poner “./index.html” que es la dirección de nuestra otra página web.

Grabarlo todo.

La nueva página debe quedar como se muestra en el imagen anterior.

Cerrar la nueva página. Archivo->Cerrar.

22.- Teniendo en cuenta lo aprendido en el punto anterior añadir un enlace en nuestra página principal (index.html) que nos lleve a la nueva página (PAGINA1.html)

23.- Grabarlo todo y probarlo en el navegador web.

24.- Cambiar el color de fondo de nuestra web.

a) Formato->página

b) Fondo

c) Elegir un color o una foto bajada de internet.

25.- Ir a la página del instituto y descargar la plantilla de la página web de los departamentos.

a) Ir a la página del instituto. www.ieseltablero.org

b) Departamentos->Matemáticas->Recursos->Grupo Web->Plantilla

c)Guardarlo en disco en nuestra carpeta web

d)Extraer el fichero. (botón derecho del ratón->extraer aquí)

26.- Si te fijas se ha creado una nueva carpeta “NOMBRE DE DEPARTAMENTO” (si no la ves pulsa el botón “Recargar”)

27.- Cambiarle el nombre a la carpeta y ponerle el nombre de tu departamento.

28.- Abrir la carpeta y ejecutar el fichero index.htm con mozilla.


Página 7

29.- Lo que te has descargado es una plantilla para poder crear la web de tu departamento usando como plantilla la página del departamento de matemáticas.

30.- Leer el fichero “INSTRUCCIONES.doc”

31.- Modificar el aspecto de la página principal (fondo, textos, imágenes...) usando todo lo que ya sabes de diseño web.

El fichero a modificar es principal.htm

32.- Comprobar que todo funciona ejecutando con Mozilla el fichero “index.htm”

33.- Modificar la página de enlaces para añadir hipervínculos a páginas relacionadas con tu departamento.

pagína web con openoffice

Documents