PÁGINA WEB DEL INSTITUTO Manual de utilización. ¿Cómo colgar información en la página web? Para colgar información se necesita: Un programa de confección.

Presentación del tema: "PÁGINA WEB DEL INSTITUTO Manual de utilización. ¿Cómo colgar información en la página web? Para colgar información se necesita: Un programa de confección."— Transcripción de la presentación:

1 PÁGINA WEB DEL INSTITUTO Manual de utilización

2 ¿Cómo colgar información en la página web? Para colgar información se necesita: Un programa de confección de páginas web (en el Instituto se ha utilizado el programa Frontpage Office de Microsoft) Un programa que te permita subir información, o bajarla, de o desde el servidor (en el Instituto se ha utilizado el programa File Zilla) Una hoja de estilos, para que todas las páginas web de los departamentos o de las distintas secciones del estilo tengan el mismo formato.

3 ¿Cómo se confecciona la página web con la información que quiero subir al servido? Antes de utilizar Frontpage que es el programa que nos permite confeccionar la página web conviene que abramos una carpeta en nuestro pendrive con el nombre de nuestro departamento de la manera siguiente:

4 Carpeta de descargas de documentos, presentaciones… Carpeta de imágenes Páginas que se van introduciendo y que se incorporarán según se van guardando

5 La carpeta con toda esta información y a la que le dáis el nombre que queráis lo guardáis en vuestro pendrive

6 Ahora ya se puede abrir el programa de confección de páginas web Frontpage

7

8 Lo primero es crear la página utilizando la plantilla de la página general del Instituto: lo que se llama HOJA DE ESTILO. Esto se hace vinculando la página que estás haciendo con la hoja de estilo de la página web del Instituto Para ello necesitas guardar en tu pendrive la hoja de estilo del Instituto

9 ¿Cómo se vincula la página con el estilo? Formato Vínculos de Hojas de Estilos Se pincha en Formato y al desplegarse el menú se elige Vínculos de Hojas de Estilos

10

11 Aparecerá el siguiente Menú:

12 Al elegir agregar se desplegará otro menú

13 Nuevo menú desplegado: Se elige esta opción

14 Y se le da a ACEPTAR

15 Ahora vamos a poner el fondo de la página web que estamos creando de acuerdo con el estilo de la página web del Instituto. Para ello seleccionamos Body y al lado aparacerá una flecha que nos permite desplegar un menú donde seleccionaremos PROPIEDADES DE ETIQUETA

16

17 En el menú que nos sale seleccionamos PROPIEDADES AVANZADAS

18

19 Se nos abre otro nuevo menú donde seleccionamos ESTILO DE CUERPO

20

21 Se nos despliega otro nuevo menú donde desplegamos la flecha que hay en clase

22

23 Seleccionamos FONDO DE APLICACIÓN y le damos a ACEPTAR

24

25 Al aceptar aparece el fondo en negro pero al presionar sobre el fondo aparece ya el fondo de la página web del Instituto.

26

27 Ahora vamos a introducir la información que queremos en nuestra página web con el fondo que hemos creado Aunque podemos introducir la información escribiendo directamente sobre este fondo para mayor comodidad vamos a crear una tabla donde iremos poniendo enlaces para acceder a la información que queremos

28 Para crear esta tabla lo vamos a hacer en dos fases: Primero crearemos la cabecera de la tabla donde pondremos el nombre de nuestro departamento Luego crearemos otra tabla con la información que vamos a introducir

29 Creación de la tabla de cabecera Primero vamos a tabla

30 Desplegamos el Menú y vamos a INSERTAR y elegimos la opción de TABLA. Se nos despliega un nuevo menú

31

32 Hacemos CLICK sobre ESTILO y en el nuevo menú que sale que se llama MODIFICAR ESTILO desplegamos la pestaña y elegimos la opción de FONDO TABLA CABECERA y damos a ACEPTAR

33 1 2 3

34 Luego podemos modificar las tablas que hemos creado haciéndolas más estrechas o con las celdas más anchas, centrándolas o no. El resultado final será:

35

36 Podemos eliminar filas o columnas o marcar previamente si queremos una o dos filas o más y lo mismo con las columnas. Como estamos creando una cabecera para la página principal de nuestro departamento sólo vamos a crear una fila donde pondremos el nombre de nuestro departamento. Lo mismo haremos con las columnas de las que nos quedaremos con sólo una. Como hemos creado una tabla de cabecera con dos filas y dos columnas vamos a eliminar una fila y una columna.

37 Primero pasamos el ratón por la primera fila que se coloreará de azul y seleccionamos en el menú de tabla la opción combinar celdas. Así habremos eliminado la columna de esta fila. Lo mismo hacemos con la segunda fila pero damos a SUPRIMIR del teclado y así eliminamos la segunda fila con su respectiva columna. Nos quedará lo siguiente

38

39 Ponemos el nombre de nuestro departamento en la celda que hemos creado

40

41 Ahora vamos a crear otra tabla pero esta vez ya no utilizamos en la opción de clase de estilo FONDO TABLA CABECERA sino la opción de FONDO TABLA Pera antes marcaremos el numero de filas que necesitamos en función de la información que queramos introducir en la página principal de nuestro departamento, por ejemplo si queremos introducir: componentes del departamento, información sobre las asignaturas que imparte el departamento (imaginemos que por ejemplo imparte seis asignaturas distintas), información sobre pendientes y enlaces que consideremos de interés para los alumnos necesitaríamos 9 filas, el número de columnas lo dejamos en 2

42

43 1 2 3

44 Al final quedaría:

45 En la columna izquierda pondremos el nombre de las diferentes informaciones que hemos mencionado antes. En la columna derecha pondremos algún símbolo que al pulsarlo nos lleve a una nueva página que contenga la información sobre este apartado. Este símbolo o imagen tenemos que guardarlo en la carpeta de imágenes que hemos creado al principio en nuestro pendrive

46

47 Sólo nos queda guardar esta página con un nombre como iniciosociales, por ejemplo, en nuestro pendrive en la carpeta que hemos creado para este fin

48 Vamos a crear, igual que lo hemos hecho con esta página, una nueva página que luego vincularemos a la inicial que hemos creado al principio. Por ejemplo vamos a crear la página de componentes

49

50 Sobre la flecha verde que aparece a la derecha de la primera fila insertamos un hipervínculo a la página iniciosociales que hemos creado antes lo que nos permitirá retroceder.

51 1 2 3 4

52 Guardamos esta página con el nombre de componentes en la carpeta de siempre

53 Ahora tenemos que vincular esta página con la página de inicio que hemos creado Para ello abrimos de nuevo la página iniciosociales con Frontpage y pinchamos sobre el botón amarillo de la derecha de la palabra componentes y abrimos insertar y elegimos Hipervínculo y seleccionamos la página componentes

54

55 Al cerrar la página nos preguntará si guardamos los cambios. Le diremos que si y ya está

56 Solo nos queda colgar toda esta información en la página web del Instituto. Para eso emplearemos el último de los programas: el FileZilla

57 Se hace CLICK sobre FILE y se escoge SITE MANAGER

58

59 Se abre la siguiente ventana

60 Se elige educamadrid

61 Se presiona Connect

62 Ya estamos dentro del servidor Nuestro PentdriveEl servidor

63 Ahora se trata de poner en paralelo la información del servidor y de nuestro pendrive para poder bajar información desde el servidor a nuestro pendrive o subir información desde el pendrive al servidor

64 Para ello seleccionamos en el servidor y hacemos doble clic para abrirlo y seleccionamos nuestro departamento

65

66 Y hacemos lo mismo en nuestro pentdrive

67 Ahora si nos situamos sobre el archivo que queremos subir (Parte derecha de la pantalla de FileZilla) y presionamos con el botón derecho del ratón damos a UPLOAD y subirá el archivo (SIEMPRE Y CUANDO ESTÉN EN PARALELO LA INFORMACIÓN DEL PENTDRIVE Y DEL SERVIDOR PARA QUE LA OPERACIÓN SEA CORRECTA)

68 Lo mismo podemos hacer para bajar información desde el servidor, pero en este caso situándonos sobre el archivo a bajar en el servidor y dando al botón derecho del ratón damos a DOWNLOAD (TENIENDO EL MISMO CUIDADO DE ANTES)

69 Si queremos bajar o subir archivos desde las carpetas de Imágenes o Descargas (donde podemos poner archivos Word o PowerPoint) tendríamos que abrir previamente dichas carpetas y ponerlas también en paralelo para hacer las operaciones antes mencionadas

70 Para subir en el directorio del servidor o del pendrive hacemos doble clic sobre la carpeta con dos puntos

71