PÁGINA WEB DEL INSTITUTO

Manual de utilizaciónManual de utilización

¿Cómo colgar información en la ¿Cómo colgar información en la página web?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.

¿Cómo se confecciona la página web con ¿Cómo se confecciona la página web con la información que quiero subir al la información que quiero subir al

servido?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:

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

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

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

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

¿Cómo se vincula la página con el ¿Cómo se vincula la página con el estilo?estilo?

Se pincha en FormatoFormato y al desplegarse el menú se elige Vínculos de Hojas de EstilosVínculos de Hojas de Estilos

Aparecerá el siguiente Menú:

Al elegir agregar se desplegará otro menú

Nuevo menú desplegado:

Se elige esta opción

Y se le da a ACEPTAR

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

En el menú que nos sale seleccionamos PROPIEDADES AVANZADAS

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

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

Seleccionamos FONDO DE APLICACIÓN y le damos a ACEPTAR

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

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

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

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

Desplegamos el Menú y vamos a INSERTAR y elegimos la opción de TABLA.

Se nos despliega un nuevo menú

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

1

2

3

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á:

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.

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

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

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

1

2

3

Al final quedaría:

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

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

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

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.

1

2

34

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

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

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

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

Se hace CLICK sobre FILE y se escoge SITE MANAGER

Se abre la siguiente ventana

Se elige educamadrid

Se presiona Connect

Ya estamos dentro del servidor

Nuestro Pentdrive El servidor

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

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

Y hacemos lo mismo en nuestro pentdrive

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)

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)

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

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