Como Crear Paginas Web

10,259 views
9,921 views

Published on

De una forma sencilla podemos ver como y siguinedo los pasos podremos crear y subir a internet una pagina web

Published in: Education

Como Crear Paginas Web

  1. 1. Microsoft Office es una suite ofimática. <ul><li>Microsoft Windows </li></ul><ul><li>Apple Mac OS </li></ul><ul><li>Linux si se utiliza un emulador como Wine o CrossOver Office. </li></ul>Desarrollada por Microsoft Funciona bajo las plataformas operativas:
  2. 2. ALGUNAS APLICACIONES DE <ul><li>OneNote: Toma de Notas, la recopilación de información </li></ul><ul><li>Publisher: Publicaciones de negocios y mercadotecnia </li></ul><ul><li>Outlook: Administrar el correo electrónico </li></ul><ul><li>PowerPoint: Crear presentaciones </li></ul><ul><li>Excel: Hoja o planilla de cálculo </li></ul><ul><li>Word: Procesador de textos </li></ul><ul><li>Access: Base de datos </li></ul><ul><li>Frontpage: Diseño de páginas web </li></ul><ul><li>Photo Editor: Editor de fotografías </li></ul>.
  3. 3. Internet Internet es una red global de equipos informáticos que se comunican mediante un lenguaje común y que se conectan entre si formando una gran red.
  4. 4. World Wide Web (el Web o WWW) Proporciona una interfaz gráfica por la que es fácil desplazarse para buscar documentos en Internet. Estos documentos, así como los vínculos entre ellos, componen una red de información. <ul><li>Permite saltar mediante un &quot;hipervínculo&quot; de una página a otra. </li></ul><ul><li>Las páginas pueden contener noticias, imágenes, películas, sonidos, gráficos en tres dimensiones. </li></ul><ul><li>La información en cualquier lugar del mundo. </li></ul><ul><li>Tiene una dirección exclusiva llamada URL (Universal Resource Locator) </li></ul><ul><li>Un &quot;explorador&quot; es una herramienta que se utiliza para ver las páginas de Web. </li></ul>CARACTERÍSTICAS
  5. 5. ¿Cómo creo una página Web con Frompage? <ul><li>Lo primero: crear una carpeta en nuestro sistema y darle un nombre para identificarla ( mis webs ). Aquí guardaremos los documentos creados con Frontpage. </li></ul><ul><li>Dentro de dicha carpeta creamos otra para guardar nuestras fotos (mis imágenes). </li></ul>
  6. 6. <ul><li>Abrimos el programa y seleccionamos nuevo </li></ul><ul><li>Aparece una hoja en blanco. </li></ul><ul><li>Aquí vamos a introducir el texto, las imágenes, etc. </li></ul>Estas imágenes deben de guardarse en la carpeta que hemos creado anteriormente !!!!!
  7. 7. Para guardar nuestra página <ul><li>Frontpage nos va a pedir un nombre de archivo y un nombre de título de página. Al dar a guardar se nos abre la siguiente ventana: </li></ul>
  8. 8. El nombre de archivo (index en el ejemplo) no admite espacios en blanco,sín guiones bajos. Sólo se admiten letras del alfabeto inglés, es decir no se admiten ni eñes ni acentos. Es mejor no utilizar mayúsculas porque algunos servidores dan problemas. En el título se puede utilizar espacios, eñes, acentos, mayúsculas, etc. Escribimos un nombre de archivo y en &quot;Cambiar...&quot; un título de página .
  9. 9. DISEÑO DE LA PÁGINA WEB <ul><li>Para acceder a las propiedades de cualquier elemento hay que pulsar sobre cualquier parte de la página con el botón derecho del ratón y pinchar en “propiedades de página”: </li></ul>
  10. 10. A continuación se abre esta ventana: Podemos personalizar el fondo de la página, los márgenes, etc. Si seleccionamos la segunda pestaña (fondo), podemos colocar como fondo de la página alguna imagen o un color. También podemos seleccionar el color, de texto y de hipervínculos.
  11. 11. La estructura: tablas y celdas <ul><li>Para poder colocar los diferentes elementos que componen la página, el recurso más utilizado son las tablas, que pueden o no ser invisibles. </li></ul><ul><li>Para insertar una tabla pinchamos en el menú tabla y después en insertar/tabla: </li></ul>
  12. 12. Aparece una ventana como la siguiente: Podemos seleccionar el numero de columnas y de filas de la tabla. Alinear las celdas, ponerles un borde o quitárselo, etc. Si ponemos los bordes a 0 la tabla no se verá en la vista previa.
  13. 13. Una vez elegidas las propiedades le damos a aceptar y ya podemos trabajar sobre nuestra tabla. Esta nos servirá de plantilla para construir nuestra página Web
  14. 14. Si pinchamos con el botón derecho del ratón dentro de una celda y seleccionamos opciones de celda, se nos abre una ventana en donde podemos modificar las características, ponerle un color de fondo, una imagen, etc. De la misma manera también podemos modificar las propiedades de la tabla y de la página pinchando sobre estas opciones.
  15. 15. Vamos a crear una página sobre nuestras mascotas
  16. 16. A continuación: abrimos, más o menos, el número de páginas que pensamos utilizar y les damos un nombre . A medida que la vamos creando podemos añadir nuevas páginas. Por ejemplo, añadimos tres páginas más a parte de la principal a las que llamaremos perros, gatos y fotos respectivamente.
  17. 17. Hipervínculos Los hipervínculos es lo que nos permite establecer los saltos de una página a otra. Una forma de crearlos, es seleccionar con el ratón el trozo de texto que queremos que salte. Por ejemplo, seleccionamos la palabra perros, y con el cursos pinchamos sobre el logo hipervínculo:
  18. 18. Pulsamos sobre la página a la que queramos ir por ejemplo perros.htm y aceptamos. Ya está el vínculo creado, cada vez que pinchemos sobre la palabra perros nos llevará a una página nueva (la que creamos con el nombre de perros)
  19. 19. <ul><li>Se pueden vincular también las imágenes de la misma manera o haciendo clic sobre la imagen con el botón derecho del ratón y seleccionando hipervínculo. </li></ul><ul><li>Importante!!! para que en la vista previa tome efecto de todo lo que hacemos, debemos ir guardando los cambios. Ahora podemos hacer lo mismo con la palabra gatos, para que al pinchar en ella nos lleve a la página correspondiente. </li></ul><ul><li>Poco a poco podemos ir diseñando las diferentes páginas como si trabajásemos con el Word e ir estableciendo vínculos entre ellas y enlazarlas unas con otras. </li></ul>
  20. 20. LAS IMÁGENES <ul><li>Las imágenes que queramos poner en nuestra página debemos guardarlas antes en la carpeta “ mis imagenes ” que creamos al principio, (la que creamos inicialmente dentro de la carpeta mi web ). Una vez guardadas en nuestra carpeta, desde Frompage podemos insertarla pinchando en insertar / imagen / desde archivo: </li></ul>
  21. 21. De esta manera se abre la siguiente ventana: En “ Buscar en” seleccionamos la carpeta “ My Web” , y en el submenú aparece la carpeta “ imágenes”. Pinchando en ésta se nos muestran las imágenes que tenemos guardadas. Sólo tenemos que seleccionar la que queramos y darle a insertar. Vista previa
  22. 22. También existe la opción de “ Imágenes prediseñadas” o la de “nueva galería de fotografías” desde las que también podemos insertar imágenes Las imágenes pueden colocarse en una tabla, en una parte de la página o utilizarla como fondo tanto de tabla como de página
  23. 23. En nuestra página fotos hemos colocado estas imágenes con la ayuda de una tabla: Podemos enlazar esta página con la página de “ inicio” o con las otras dos páginas “ perros ” y “ gatos ”
  24. 24. Podemos cambiar las propiedades de la imagen una vez insertada. Para ello hacemos clic sobre la imagen con el botón derecho del ratón y pinchamos en propiedades de imagen :
  25. 25. <ul><li>Se abre una ventana en la que se observan las diferentes opciones que podemos utilizar con la imagen. </li></ul><ul><li>Pinchamos en “ general” . Entre otras opciones aparece “ texto ” esto sirve para escribir un mensaje que aparecerá sobre un fondo amarillo cuando apoyemos el cursor sobre la imagen. (sólo en vista previa o en el navegador). Útil para facilitar información al visitante. </li></ul><ul><li>También podemos añadir un hipervínculo para que cuando pinchemos en la imagen nos lleve a un enlace determinado. </li></ul>
  26. 26. Haciendo doble clic con el botón izquierdo del ratón sobre la imagen aparecerá una barra de herramientas con la que podremos añadir un marco, cambiar el color, aumentar o disminuir el brillo, recortarla, establecer un color transparente de la imagen, mapear la imagen, etc
  27. 27. ¿Cómo publicamos nuestra página? <ul><li>Con Fronpage (sólo vale para servidores con los que se han contratado extensiones de Frontpage) </li></ul><ul><li>A través de FTP (protocolo de transferencia de ficheros) </li></ul>Dos opciones:
  28. 28. A través de FTP (protocolo de transferencia de ficheros) <ul><li>Lo primero: contratar un espacio gratis en cualquiera de los servicios que se ofrecen ahora mismo: terra, inicia, iespana, etc. </li></ul><ul><li>Estos contratos que se hacen a través de rellenar un formulario sencillo, nos dan una cuenta de correo y un espacio gratis en la Red. </li></ul>
  29. 30. Rellenamos el formulario
  30. 31. Al crear la cuenta nos envían un correo con los datos que necesitamos para poder disfrutar de nuestro espacio en Internet Pinchar para activar el espacio
  31. 32. Activamos nuestro espacio web
  32. 33. Una vez contratado el espacio tenemos que buscar un programa de FTP que también sea gratuito y bajárnoslo de Internet. Uno de ellos se llama Filezilla - FTP . Lo podemos encontrar en diferentes sitios, por ejemplo, en www.softonic.com . En esa dirección buscamos filezilla-ftp y nos bajamos el programa a nuestro disco duro o a un disquete y después lo instalamos.
  33. 36. Cuando abrimos el programa nos aparece la siguiente pantalla: Lo primero que hay que hacer rellenar con los datos que nos ha dado el servidor, la dirección donde debemos dirigirnos (Host Name/Address), el nombre de usuario (user ID) y la contraseña (password).
  34. 37. La pantalla de la izquierda es nuestro ordenador y la de la derecha el espacio que nos dejan en el ordenador conectado a Internet. En la pantalla de la izquierda nos vamos a la carpeta donde está nuestra web y seleccionamos todos los archivos que componen la web y los arrastramos a la ventana de la derecha.
  35. 38. <ul><li>Hay que mantener el mismo esquema que tenemos en nuestra página. Si,  por ejemplo,  las imágenes están dentro de una carpeta habrá que meterlas en una carpeta con el mismo nombre. Si no respetamos el mismo esquema no funcionará bien la página porque el código html remitirá a un lugar que si no se llama igual y está en el mismo nivel nos dará error. </li></ul><ul><li>Una vez que el programa nos diga que se han pasado correctamente los archivos de una lado a otro, ya se pueden ver publicados en Internet. </li></ul>RECORDAR QUE…
  36. 39. Por último <ul><li>Con un ordenador, un poco de creatividad y originalidad, cualquiera puede crear su página web!!! </li></ul>
  37. 40. COMO SE HACE UNA WEB <ul><li>Este power point fue preparado por: </li></ul><ul><li>Iria Rodriguez Vega, para una de sus clases presenciales en el IES A Pinguela de Monforte, para la asignatura de Ciencias del Mundo Contemporaneo. </li></ul><ul><li>Febrero de 2009 </li></ul>

×