CREACIÓN Y PUBLICACIÓN DE SITIOS WEB

Transcripción

1 Creación y publicación de sitios web CREACIÓN Y PUBLICACIÓN DE SITIOS WEB En este tutorial usted encontrará toda la información necesaria para crear y publicar un sitio web. Cada uno de los pasos descritos en este tutorial están basados en la creación del sitio web del Colegio El Aromo, que corresponde al ejemplo revisado en la etapa Demostración del presente módulo. 1.- Creación de sitios web Para comenzar el trabajo, es necesario que usted abra Microsoft Word. 1.1 Formato Web A través de Microsoft Word podemos crear páginas web simplemente utilizando la opción de Diseño Web. En esta opción los archivos que generemos serán guardados con la extensión.htm en vez del tradicional.doc Los archivos htm o html corresponden al tipo de archivo más usado en Internet para publicar información. VISTA DISEÑO WEB 1. Cree un nuevo documento. Para esto puede dirigirse al menú Archivo y elegir la opción Nuevo. 2. Diríjase al Menú Ver y elija la opción Diseño Web. Deberá cambiar la visualización del documento en la pantalla, viéndose solamente un fondo blanco. Vista Diseño Web Red de Profesores Innovadores 1

2 1.2 Creación de los componentes del sitio web Módulo: Creación y publicación de sitios web Para la creación de los componentes del sitio web: banner, menú principal, barra de información, cuerpo de página, etc. las opciones más simples que podemos utilizar son: insertar imágenes, cuadros de textos e hipervínculos. BANNER SUPERIOR Insertar imagen Alinear a la izquierda 1. Diríjase al menú Insertar y seleccione la opción Imagen y luego la opción Desde archivo. 2. Seleccione de los Recursos para trabajar el archivo banner.gift Debería aparecer la imagen seleccionada en el documento. 3. Seleccione la imagen con el mouse y haga clic en el botón Alinear a la izquierda. 4. Guarde el archivo en una nueva carpeta con el nombre index y en Tipo de archivo seleccione Página Web (*.htm; *html). Es importante recordar que siempre la página principal o portada debe guardarse con el nombre index. En cualquier sitio web que creemos. 5. Otra manera de guardar el archivo es dirigiéndose al menú Archivo y apretar la opción Guardar como página web, no olvide colocarle el nombre index al archivo. Opción Guardar como Opción Guardar como página Web Red de Profesores Innovadores 2

3 MENÚ PRINCIPAL Cuadro de texto 1. Diríjase al menú Insertar y seleccione la opción Cuadro de texto. Fíjese que el cursor del mouse en la pantalla es ahora una cruz. 2. Dibuje un rectángulo vertical. 3. Pinche el centro del cuadro de texto (Note que ahora el cursor le indica que puede escribir en su interior) y ahora pinche en el borde del cuadro de texto (Note que ahora puede mover el cuadro de texto como objeto) 4. Haga clic con el botón derecho del mouse sobre el cuadro de texto y seleccione la opción Formato del cuadro de texto. 5. En la configuración Colores y líneas seleccione el gris más claro de la paleta de colores en la opción Color de la categoría Relleno. Red de Profesores Innovadores 3

4 6. En la opción de Color de la categoría Línea, seleccione la opción Sin línea. 7. Diríjase a la opción Tamaño, ubicada en la parte superior de la ventana. En Ancho coloque 3,33 cm y en Alto coloque 9,79 cm. Apriete Aceptar. Note que el aspecto del cuadro de texto ha cambiado. (Si no está en cm la unidad de medida en este cuadro lo puede cambiar desde el menú Herramientas en Opciones, active la ficha general y encontrará la opción Unidades de medida, déjela en centímetros) Red de Profesores Innovadores 4

5 8. En la ficha Diseño seleccione la opción Delante del texto: 9. Pinche al interior del cuadro de texto y escriba lo siguiente: Finalmente su trabajo hasta ahora debería verse así, si es necesario mueva el cuadro de texto para que quede como en la imagen: Red de Profesores Innovadores 5

6 BARRA DE INFORMACIÓN 1. Diríjase al menú Insertar y seleccione Cuadro de texto. 2. Ingrese los siguientes textos y déjelos alineados a la derecha: 3. Configure el cuadro de texto con las siguientes características: Color del Relleno: Gris Color de la Línea: Sin línea Alto: 0,7 cm Ancho: 17,85 cm Diseño: Delante del texto 3. Ubique el cuadro de texto debajo del banner en el lugar correspondiente a la barra de información. Red de Profesores Innovadores 6

7 CUERPO DE PÁGINA Debe crear el siguiente cuerpo de página: Para esto necesita crear tres cuadros de textos más: 1. Cuadro 1: Color del Relleno: Sin color Color de la Línea: Sin línea Alineación: Centrado Texto interior: Bienvenidos al sitio web del colegio El Aromo! Aquí encontrarás toda la información sobre nuestro colegio y las últimas noticias sobre las actividades y eventos que realizamos. 2. Cuadro 2: Color del Relleno: Amarillo claro Color de la Línea: Sin línea Texto interior: Atención Apoderados: Recuerde que este miércoles los alumnos salen a las 14 hrs. 3. Cuadro 3: Color del Relleno: Sin color Color de la Línea: Sin línea Texto interior: Educación Pre-escolar y Enseñanza Básica de excelencia Red de Profesores Innovadores 7

8 HIPERVÍNCULOS A continuación usted deberá crear hipervínculos para navegar a través de las diferentes páginas que tendrá relacionadas este sitio. 1. Del Menú principal seleccione la palabra Inicio, en ella crearemos un hipervínculo a la Portada o página de inicio que tiene el nombre de index.htm. Recordemos que este menú es el mismo para todas las páginas del sitio. 2. Haga clic con el botón derecho del mouse y seleccione la opción Hipervínculo. 3. En la opción Dirección de la ventana emergente escriba index.htm 4. Repita la misma acción para crear hipervínculos con los demás textos de acuerdo a la información que se presenta en la tabla a continuación: Componente Texto Dirección Proyecto educativo proyecto.htm Menú Principal Actividades actividades.htm Admisiones admisiones.htm Barra de Quienes somos somos.htm información Contáctenos contacto.htm ** Las direcciones que aparecen en el cuadro corresponden a las páginas que crearemos a continuación.** NO OLVIDE GUARDAR EL TRABAJO REALIZADO Red de Profesores Innovadores 8

9 Generación de páginas web Para crear páginas que van a compartir algunos componentes del sitio (banner, menú principal, barra de información, etc. ) la manera más fácil de hacerlo sin tener que crear estos componentes en cada una de las páginas, es guardando la portada con el nombre de la página que queremos crear y luego modificar el cuerpo de página. PROYECTO.HTM 1. Estando en el archivo index.htm y habiendo guardado los cambios sacaremos una copia de el, para esto: diríjase al menú Archivo y seleccione la opción Guardar como, poniéndole como nombre del archivo proyecto.htm 2. Ahora elimine los cuadros de textos del cuerpo de página que corresponden a la portada. 3. Cree un nuevo cuadro de texto con la información correspondiente. Entre los Recursos para trabajar hay un documento llamado textos_sitio_web.doc en donde están todos los textos para que usted pueda copiarlos. HIPERVINCULAR UN DOCUMENTO 1. Descargue de los Recursos para trabajar el archivo proyecto_educativo.doc y ubíquelo en la carpeta proyecto_archivos. Esta carpeta es generada automáticamente por el programa Word. Cada vez que usted guarde una página se creará una carpeta con el nombre de esa página. 2. Seleccione el texto Descargar Proyecto Educativo Colegio el Aromo y cree un hipervínculo. 3. En la ventana emergente seleccione en Buscar en la carpeta proyecto archivos y seleccione el documento que acaba de copiar en la carpeta. 4. Apriete Aceptar. Red de Profesores Innovadores 9

10 Finalmente la página debe quedar así: OTRAS PÁGINAS WEB A continuación genere las demás páginas de acuerdo a las indicaciones que se presentan a continuación: **Recuerde guardar las nuevas páginas con sus respectivos nombres y en la misma carpeta** Red de Profesores Innovadores 10

11 Página Recursos para trabajar Cuadros de textos paseo1.jpg 2 cuadros de textos, uno para cada actividades.htm paseo2.jpg actividad. Página Recursos para trabajar Cuadros de textos admisiones.htm 1 cuadro de texto Red de Profesores Innovadores 11

12 Página Recursos para trabajar Cuadros de textos somos.htm 1 cuadro de texto Página Recursos para trabajar Cuadros de textos escudo.gif 2 cuadros de textos, uno para la contacto.htm imagen y otro para la información. Red de Profesores Innovadores 12

13 Una vez terminadas todas las páginas que componen el sitio web podemos verlo funcionando de manera local utilizando el Internet Explorer. Para hacer esta vista previa existen dos opciones: 1. Utilizar la vista previa de Word: Para esto es necesario seleccionar la opción Vista previa de la página web en el menú Archivo. 2. Cargar los archivos htm: Esta opción permite visualizar los archivos y carpetas que componen nuestro sitio web, ya que podemos revisarlo haciendo doble clic sobre el archivo index.htm en la carpeta donde hemos guardado el sitio web. Red de Profesores Innovadores 13

14 2.- Publicación del sitio web Para la publicación del sitio web que hemos creado necesitamos tener una Cuenta FTP donde podamos alojar todos los archivos que componen el sitio. En Internet podemos encontrar varios servicios gratuitos de cuentas FTP y plataformas on-line, pero para la realización de este módulo se ha seleccionado el servicio que ofrece Wanadoo debido a su simplicidad. 2.1 Creación de cuenta FTP Para crear la Cuenta FTP lo primero que debemos hacer es registrarnos en el sitio web de Wanadoo. 1. Abrir el Internet Explorer e ir al sitio 2. Pinchar en la opción Registra Aquí 3. Completa los datos del formulario de inscripción. Red de Profesores Innovadores 14

15 4. No olvide poner atención al nombre de usuario y contraseña que usted ha creado. 5. Anote los datos que aparecen en la pantalla de confirmación. Estos datos corresponden a: -Correo electrónico: cuenta de gratuita que se generó debido a la inscripción -Página personal gratuita: corresponde a la dirección web del sitio. Para todos los servicios Wanadoo (cuenta FTP, correo electrónico, etc.) debemos usar el Nombre de Usuario y Contraseña que indicamos en el formulario de inscripción. Red de Profesores Innovadores 15

16 2.2 Carga del sitio en la cuenta FTP Para cargar nuestro sitio web debemos transferir a nuestra cuenta FTP los archivos que componen nuestro sitio. Esto lo podemos hacer utilizando Internet Explorer. 1. Abra el Internet Explorer. 2. Escriba en la barra de dirección ftp.wanadoo.es 3. Le aparecerá una ventana emergente solicitándole su nombre de usuario y contraseña. Coloque los mismos datos que puso en el formulario de inscripción. 4. Se le cargará una ventana vacía ya que usted ha ingresado a su cuenta FTP. En el caso de que aparezca algún archivo no se preocupe, simplemente bórrelo. 5. Copie todos los archivos y carpetas que componen su sitio web a su cuenta FTP. Esta acción puede realizarla arrastrando los archivos de una ventana a otra. 6. Le aparecerá una ventana indicándole el tiempo estimado que se demorará la transferencia. 7. Una vez terminada la transferencia debería poder ver los archivos en su cuenta FTP. 8. Cierre la ventana de su cuenta FTP. 2.3 Visitar el sitio we 2.4 b publicado Red de Profesores Innovadores 16

17 Para visitar su sitio web abra el Internet Explorer y escriba en la barra de información la dirección web de su página personal (La que aparecía en los datos del mensaje de confirmación). Si usted ha olvidado su dirección web, utilice el siguiente formato para visitarla: ***FELICITACIONES USTED HA CREADO Y PUBLICADO UN SITIO WEB*** Red de Profesores Innovadores 17