Creacin y gestin de pginas Web para EEOOII

Creación y gestión de páginas Web para EEOOII EOI Chiclana 15/02/08 © Rafael Moreno Esteban 2008

Contenidos: Creación de páginas Web con Word Hipervínculos a otras páginas o sitios Web Hipervínculos a archivos (marcos) Hipervínculos a direcciones de e-mail Creación de tablas Formato de páginas Web: gráficos, fuentes, colores… La importancia del árbol de carpetas, estructura de la Web de Chiclana Actualización de contenidos (Front. Page) Contenidos multimedia: www. youtube. com © Rafael Moreno Esteban 2008

Creación de páginas Web con Word Crear una página Web es tan simple como crear un documento en Word, simplemente lo tenemos que guardar como página Web en vez de cómo texto. En Mis documentos crearemos una carpeta que llamaremos Web_de_Prueba Abrimos un documento en Word y haced lo siguiente: EOI Chiclana Páginas Web interesantes para las EEOOII Mis datos (doc) www. elpuerto. es rmeuk@hotmail. com © Rafael Moreno Esteban 2008

Ahora abrimos otro documento en Word y poned vuestro nombre completo, dirección, teléfono y correo electrónico. Guardar como: datos. doc (texto) Guardar como: datos. htm (página Web) Volved al documento anterior, que guardaremos como principal. htm Y a continuación haremos los hipervínculos Por último, visualizamos en el navegador. © Rafael Moreno Esteban 2008

Creación y formato de tablas Las tablas son importantes para condensar información en nuestra Web Son difíciles de manejar, ya que al moverlas o modificarlas, podemos tener resultados inesperados Además, hemos de aprender a añadir o quitar columnas/filas, ponerles o quitarles los bordes, y dar color a las celdas. Ahora, le damos formato a datos. htm © Rafael Moreno Esteban 2008

Dar formato a una página Web Una Web difiere de un archivo de texto en el formato (no tiene páginas por ejemplo) Se debe hacer sangría de todos los párrafos Obviamente debe haber color, tanto en las fuentes como los fondos. Las fuentes deben ser coherentes Podemos insertar gráficos © Rafael Moreno Esteban 2008

Creamos la carpeta imagenes en nuestra carpeta Web_de_Prueba IMPORTANTE: ¡Las carpetas y archivos nunca deben contener espacios, ni acentos ni caracteres extraños! Buscamos un archivo gráfico o foto cualquiera y lo copiamos en imagenes En datos. htm vamos a insertar este gráfico o foto y le vamos a cambiar el tamaño. A continuación lo seleccionamos y le añadimos un hipervínculo a un sitio web. © Rafael Moreno Esteban 2008

La importancia del árbol de carpetas Lo más importante para gestionar un sitio Web es que el árbol de carpetas y ficheros sea idéntico en nuestro ordenador y en el servidor. Cambiar una carpeta supone que todos los hipervínculos dejen de funcionar (si no los cambiamos manualmente). A continuación os presentamos la estructura de la Web de Chiclana. © Rafael Moreno Esteban 2008

Actualización de contenidos Una vez tenemos nuestros archivos perfectamente confeccionados y los hemos visualizado para comprobar los enlaces y posibles fallos, tenemos que subirlos al servidor. Hay dos formas de subirlos: usar el ftp del Explorer y copiar manualmente, o bien utilizar un programa de edición de ftp como Front. Page o Dream. Weaver. © Rafael Moreno Esteban 2008

Front. Page El Front. Page es el programa de Microsoft Office para confección y actualización de Webs. Es más complejo que Word, pero también permite hacer más gestiones. Podemos crear nuestras Webs en Word y luego terminar de maquetar y subir en Front. Page. Tiene 3 interfaces: modo edición, código y previsualización. Se pueden hacer casi todas las operaciones que se hacen con el Word, y además podemos subir luego los archivos. © Rafael Moreno Esteban 2008

El código html El Hyper-text marked-up language es utilizado por los navegadores para leer Webs. Un documento html tiene 3 partes principales: título, encabezamiento y cuerpo. El título es fácil de cambiar. Todas las demás modificaciones irán en el cuerpo del documento. Si tocamos algo y la fastidiamos… CTRL+Z © Rafael Moreno Esteban 2008

Contenidos multimedia Front. Page nos permite incluir video y audio en nuestras páginas. Si no sabemos html, lo mejor es tomar prestado el código y realizar las modificaciones oportunas. Vamos a realizar un ejemplo con www. youtube. com para incluir un video musical en nuestra página Web. Por último le cambiamos el nombre a nuestra Web en el interfaz de código, y previsualizamos. © Rafael Moreno Esteban 2008

Y para terminar… Ésta presentación está disponible en www. rafamoreno. com Para cualquier duda, mi e-mail es: rmeuk@hotmail. com ¡Muchas gracias! © Rafael Moreno Esteban 2008