P. 1
Manual Para Crear Una Pagina Web

Manual Para Crear Una Pagina Web

|Views: 2|Likes:
Publicado porBtoTco

More info:

Published by: BtoTco on Jun 12, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

06/12/2013

pdf

text

original

Francisco José Peláez Aguilera

Crear una Página Web:
Esquema básico:  Pasos para crear una página web 1 - Editar la página (Frontpage): a) Crear sitio web en nuestro pc – P2 b) Abrir sitio web en nuestro pc – P4 c) Conocer Frontpage – P5 d) Estructura de archivos y carpetas – P5 e) Esqueleto Index – P6 f) Insertar imágenes – P8 g) Galería Fotográfica – P9 h) Hipervínculos – P11 i) Tablas, marquesinas y capas – P13 j) Botones interactivos para menú – P14 k) Quitar grosor a los marcos – P16 2 - Solicitar un espacio Web en un Servidor:  Alojamiento gratuito – P18  Alojamiento profesional de pago – P19 3 - Subir nuestra página Web a nuestro espacio web (FileZilla) – P20 4.- Comprobar nuestra página web – P21
VOLVER

Esquema básico - Pasos para crear una página web:

1 - Editar nuestra
página web con un editor web. Ej.: Frontpage.

3- Subir nuestra
página al Servidor elegido, con los datos que este nos dio. Utilizaremos un cliente ftp para subirla. Ej.: FileZilla.

2 - Solicitar un
espacio Web en un Servidor gratuito o uno de pago. Ej: Zobyhost (gratuito) Arsys, GoDaddy (de pago).

4 - Ahora comprobamos que nuestra página
web funciona, accediendo a nuestra dirección web, (nos la da el Servidor web elegido). Podremos visitar nuestra página con un cliente web. Ej.: Firefox. 1

Francisco José Peláez Aguilera

1.- Editar la página (Frontpage): a) Frontpage – Crear y abrir sitio web en nuestro pc:
VOLVER

1 - Lo primero es crear nuestro espacio web en nuestro pc, para ello pulsamos sobre la “flecha” que hay al lado del icono de nuevo documento y en el menú elegimos “Sitio Web”.

2 – Ahora le indicamos que queremos un “Sitio Web de una página” y le indicamos (pulsando sobre examinar) la carpeta de nuestro pc que tendrá nuestra página.

3 – Elegimos como ubicación “Mis Documentos” y dentro creamos una carpeta pulsando sobre la carpeta amarilla.

2

5 – Para terminar pulsamos “Abrir” y luego “Aceptar” para concluir. 3 .Francisco José Peláez Aguilera 4 – La nueva carpeta se llamará “Proyecto Integrado [Curso Nivel Grupo]” y luego pulsamos sobre “Aceptar”.

Francisco José Peláez Aguilera b) Frontpage – Abrir sitio web: VOLVER 1. debemos de pulsar sobre la “flecha” del icono abrir y luego “Abrir sitio”. pero si no fuera nuestro sitio.Al abrir Frontpage. 2.A continuación buscamos dentro de “Mis documentos”. buscamos y entramos con doble click en la carpeta que contiene nuestro sitio web. 4 . se abrirá el último sitio web que se utilizó. Y una vez que estemos dentro pulsamos sobre “Abrir”.

4  Crear nueva carpeta dentro de nuestra web. 5  Lista de carpetas y archivos de nuestro sitio web. 5 . puntos o guiones. Nota: Nunca utilice como nombre de carpetas y archivos: tildes. que ya se creó previamente en nuestro pc. el marco de contenido y el marco inferior. el marco de menú. es que necesita ser guardada). no es necesaria y se puede borrar. el cual contendrá los distintos marcos que tendremos. Index. d) Frontpage – Estructura de archivos y carpetas: VOLVER Cuando trabajamos con Frontpage. para así localizar y corregir posibles errores de manera rápida y fácil. Images  Aquí guardaremos nuestras imágenes.htm  Es un archivo que siempre estará suelto en la raíz de nuestro sitio web. menú. Marcos  Aquí se almacenan los distintos marcos que formarán nuestro esqueleto web principal. el marco superior.: para esqueleto) o Nuevo sitio web 3  Abrir sitio Web. 7  Guarda la página web que actualmente esté abierta (siempre que el nombre de una página tenga un *. La estructura de carpetas ha de ser la siguiente: _private  Frontpage guarda aquí archivos de administración. “ñ”. 6  Zona donde se editarán nuestras páginas web. contenido e inferior.Francisco José Peláez Aguilera c) Frontpage – Conocer Frontpage: VOLVER 1  Nueva página normal 2  Nueva página especial (ej. superior. este archivo es el primero que se abre al entrar en nuestra página. por eso lo podemos utilizar como un esqueleto. paginas  Aquí guardamos las distintas páginas de contenido que creemos. tenemos que seguir una estructura ordenada de carpetas. es decir.

menú. 2. es una forma de estructurar de manera gráfica nuestro sitio web y así poder tener distintas secciones.Francisco José Peláez Aguilera e) Frontpage – Esqueleto Index: VOLVER El esqueleto. es el archivo que arranca nuestro sitio web). Para crear un esqueleto como base de nuestro sitio web.Pulsamos la pestaña “Páginas de marcos" y seleccionamos el esqueleto que más se adapte a nuestras necesidades.Para ello pulsamos en la flecha de creación y luego sobre “Página”. contenido e inferior.htm (el cual. lo crearemos en nuestro archivo index. 1. ej: marco superior. inicialmente utilizaremos el tipo “Encabezado. luego pulse “Aceptar”. 6 . pie de página y contenido”.

tenemos que seleccionar páginas que contendrán estos marcos. Para ello pulsaremos sobre el botón guardar y seguiremos los pasos siguientes. 4. para ello podemos crearlos desde cero o elegir páginas que ya tengamos creadas anteriormente con la opción “Establecer página inicial”.Ahora aparecerá el esqueleto que hemos elegido.A continuación guardaremos las distintas páginas que hemos creado: la de arranque (index. se crearán páginas en blanco en cada uno de los marcos.Francisco José Peláez Aguilera 3.htm) y los 4 nuevos marcos. pero con los marcos vacíos. para ello pulsaremos en cada marco “Nueva página”. Inicialmente las crearemos desde cero. 7 .

“contenido. copiaremos todos los archivos de imagen que necesitemos (seleccionamos los archivos .htm”. en el inicio. Haremos lo mismo con los otros 3 marcos “menú. se sombreará lo que se va a guardar a continuación. Llegados a este punto ya tendremos nuestro esqueleto index. (haciendo click con el botón derecho del ratón sobre “images” y luego elegiremos “pegar”). Cuando se sombree todo el exterior de los cuatro marcos. en este caso el marco superior. 8 . nos dirá que ya existe y que si lo queremos sobreescribir con este nuevo archivo. como indica esta imagen. como archivo único y suelto). Ahora tendremos las imágenes elegidas en la carpeta images.htm). será el momento de guardar el esqueleto de nuestra web. en este caso haremos doble click en marcos y luego pulsaremos “Guardar”. le diremos que sí.htm y con los distintos marcos guardados.htm” y en la raíz de nuestro sitio web (es decir. para ello y desde fuera de Frontpage. tal y como se muestra en la imagen. fuera de cualquiera de nuestras carpetas.htm”. f) Frontpage – Insertar imágenes: VOLVER Para insertar imágenes de la manera más rápida haremos lo siguiente. lo primero es que esas imágenes estén en nuestra carpeta “images”. Una vez copiados iremos a Frontpage y los pegaremos dentro de la carpeta “images”.Francisco José Peláez Aguilera En la casilla uno. por lo que elegiremos un nombre adecuado para la página “superior. (siempre se deja la extensión al final del nombre .copiar).htm en la raíz. luego elegiremos la carpeta adecuada en la cual se guardará.htm” e “inferior. por lo tanto se guardará como “index. Para insertarlas en nuestra página tan solo tendremos que abrir la página que contendrá las imágenes y luego las arrastraremos hacia la página.botón derecho . Como ya existe inicialmente un archivo llamado index.htm”.

9 . para buscarlas pulsamos agregar y en la nueva ventana seleccionamos las imágenes. significa que hay que guardar la página. no olvidemos que tenemos que dejar la extensión .. la cual contenga la galería.: galería.Para insertar en esta página nueva la galería. pulsamos sobre insertar.htm al escribir el nombre. la cual podemos ordenar (2). una vez añadimos la página nueva la guardamos dentro de la carpeta “páginas”. pulsamos sobre el botón de guardar página . Para finalizar “Aceptar”.htm . veremos que el nombre de la página tiene un *. ej.. podemos tenerlas ya en nuestra carpeta de “images” o en otra de nuestro pc. Luego elegimos el tipo de galería que queremos y Finalizar.. También podemos añadir a las imágenes un título y una descripción. 2.Una vez hecho esto. también no olvidemos 1.Ahora tenemos que “agregar” las imágenes que queremos tener en nuestra galería. con un nombre significativo.Francisco José Peláez Aguilera g) Frontpage – Galería Fotográfica: VOLVER Para crear una galería fotográfica lo primero es crear una página en blanco. componente web y galería de fotografías. 3. Una vez seleccionadas se irán añadiendo a la lista.

Para ello pulsamos sobre “Cambiar carpeta” y seleccionamos la carpeta “images”. 10 .Francisco José Peláez Aguilera Al guardar nos dirá (en el caso de que las imágenes estuvieran fuera de nuestro sitio web) que guardemos las imágenes. luego “Aceptar”. le diremos que las guarde en la carpeta “images”.

Luego la seleccionamos y la pulsamos con el botón derecho del ratón. en que marco de nuestro esqueleto principal. (la cual estará en nuestro marco de menú). para terminar pulsamos “Aceptar”. h) Frontpage – Hipervínculos: VOLVER Los hipervínculos son una propiedad que se le puede dar a una imagen o a un texto. Para insertar un hipervínculo tanto en un texto o imagen. nos lleve automáticamente a una nueva página o nos descargue un archivo. esta propiedad permite que al pulsar sobre esa imagen o texto. Ya tenemos las imágenes guardadas y la galería terminada. 1. tan solo debemos de pulsar sobre el/ella con el botón derecho del ratón y elegir la opción “Hipervínculo”. que es su destino correcto. insertaremos en la palabra “Galería”. que debe de abrir y dónde lo debe de mostrar. elegimos “Hipervínculo” 11 . ahora pone images/ .Francisco José Peláez Aguilera Veremos como en la columna “Carpeta”. es decir.Para mostrar cómo se hace. un hipervínculo que nos lleve a una página de galería que ya tenemos previamente creada en la carpeta “páginas”.. En el caso de hacer un hipervínculo que nos lleve a una página debemos de recordar que lo principal es decirle. pondremos el siguiente ejemplo.

tanto para mostrar (ej. para ello pulsamos “Marco de destino”. 3. un pdf. tenesmo que decirle en qué marco se debe mostrar. Funciona igual con archivos. tanto para descargar (la descargar comienza automáticamente). 12 . Una vez realizado volvemos a la pantalla anterior y volvemos a pulsar “Aceptar”.Francisco José Peláez Aguilera 2.. para ello pulsamos sobre el cuadrante central y luego “Aceptar”. le diremos que la muestre en el marco central de contenidos. (en nuestro ej.. Ya tenemos nuestro enlace hacia la página deseada y mostrándola en el marco que hemos elegido.Ahora buscaremos la página que queremos enlazar.En nuestro ej. “galería. una vez seleccionamos esta página.htm” que estaba en la carpeta “paginas”. el cual se mostrará en el marco deseado).

sino también el grosor de los bordes. su color.Para insertar una tabla básica.. en la cual podemos seleccionar manualmente el número de filas y columnas. 13 ..Sin embargo podemos utilizar una opción más completa. marquesinas y capas: VOLVER 1. accediendo desde el menú: Tabla – Insertar – Tabla… En esta ventana podremos no solo elegir el número de filas y columnas. una imagen o un color. y también el fondo de la tabla. 2. pulsamos sobre el icono Y a continuación aparece una ventana desplegable.Francisco José Peláez Aguilera i) Frontpage – Tablas.

Francisco José Peláez Aguilera VOLVER j) Frontpage – Botones interactivos para menú: Los botones interactivos son un recurso ideal para crear un menú en nuestra página web. botón interactivo y finalmente sobre Finalizar. pulsamos sobre Insertar. 14 . Por lo tanto cuando creemos un botón. Para crear un botón interactivo. Consiste en un botón compuesto por 3 imágenes. Componente Web. una estática. también estamos creando 3 imágenes por cada botón. otra para cuando ponemos el ratón encima y otra para cuando pulsamos sobre él. efectos dinámicos.

debería de poner sobre nuestro botón la palabra “Productos”. ya que antes debemos de decirle sobre qué marco queremos que se muestre. dependiendo del nombre que tenga o el que les halláis dado a vuestros 15 . ej “principal”. Luego pulsaremos sobre Aceptar. 3. tal y como muestra la imagen siguiente: Pero si lo hacemos directamente desde la página que tendrá los botones.htm.Elegimos el tipo de botón que queremos. si nuestro botón abrirá una página sobre “productos”. es decir. ¿qué hacemos…?.Francisco José Peláez Aguilera A continuación aparece el cuadro de configuración de nuestro botón. tipo y color. no aparecerá este esquema.Vínculo: Aquí hay que decir cuál es la página que debe de abrir al ser pulsado el botón. desde por ejemplo menu.. es decir. pues escribir manualmente en la casilla “Destino” el nombre del marco de destino. es muy importante que al seleccionarla no le demos ya a Aceptar. 1. si lo estamos haciendo trabajando con la página de index. Anotación: A la hora de seleccionar el marco de destino.. normalmente diremos que en el marco central de contenido. Debe de ser siempre algo orientativo. 2..Texto del botón. o “contenido”. un esquema gráfico para seleccionarlo manualmente. ponemos el nombre que deseemos que aparezca sobre nuestro botón. para ello se pulsa sobre Examinar y se busca la página correspondiente.htm. aparecerá en este punto.

tan solo debéis de abrir a la página index.: “contenido”.Francisco José Peláez Aguilera marcos. Ya siempre que queramos un marco de destino para nuestro botón interactivo. podremos escribir manualmente su nombre en la casilla “Destino”. VOLVER k) Frontpage . elegir “Propiedades del marco…” y aparecerá una ventana con el “Nombre” del marco seleccionado.Quitar grosor a los marcos: Quitar el grosor a los marcos de nuestra página es bastante estético y muy fácil de hacer. ej. tal y como muestra la imagen: 16 . ej. este lo podemos cambiar por el nombre que queramos. Para ver el nombre que tienen vuestros marcos actualmente o incluso modificarlos.htm y pulsar sobre cada marco con el botón derecho del ratón.: “principal”. para ello abriremos nuestra página de index.htm y pulsaremos sobre la opción “Código”.

debemos de agregar al final de esta línea lo siguiente.Francisco José Peláez Aguilera Y aparecerá algo similar a la imagen siguiente: Nosotros solo nos fijaremos en la línea señalada en la imagen. así que los dejamos como estén (son los tamaños de alto que tienen actualmente nuestros marcos…).*. tal y como muestra la imagen siguiente: 17 .*. (antes del signo > ) border="0" frameborder="0" framespacing="0" Quedando la línea de la siguiente forma: <frameset rows="64. la primera que empieza por <frameset rows="64. los números 64. para quitar el grosor de nuestros marcos.64">. pueden variar.64" border="0" frameborder="0" framespacing="0"> Para regresar a nuestra pantalla de edición pulsamos sobre “Diseño”.

espacio web gratuito.fcojosepelaez.es/gmail). es decir. Un proveedor de servicios hosting o espacio web gratuito.zobyhost. como por ejemplo megas de espacio o transferencia. Si quisiéramos hacernos un espacio web gratuito en Zobyhost. 18 . no les aparezcan mensajes de publicidad. La clave es encontrar el hosting o espacio web gratuito. Durante el registro en Zobyhost iremos siguiendo los pasos que nos indique. ej. que cuando nuestros visitantes entren en nuestra página.com Dirección ftp. en el cual nos indicarán nuestros datos principales de acceso a nuestro espacio web. con bastantes megas de espacio y otros servicios como bases de datos. será un registro utilizando nuestro correo de Gmail. es decir. que más servicios nos dé. los básicos son los siguientes: Dirección de la página. Una vez termine el registro en Zobyhost. debemos de saber que inicialmente tenemos que tener una cuenta de correo electrónico.google. nos enviarán un email final. ej.Solicitar un espacio Web en un Servidor: a) Alojamiento gratuito: Existen en internet empresas que ofrecen productos gratuitos como espacios web. Con estos datos ya podremos acceder por ftp. los cuales sirven para confirmar la cuenta de Zobyhost. con nuestro programa FileZilla y así subir nuestras páginas web a nuestro hosting.Francisco José Peláez Aguilera VOLVER 2 . para encontrar estos servicios podemos escribir en google como palabras clave “hosting gratuito” y aparecerán muchas empresas que lo ofrecen. también hay que tener en cuenta que no tenga publicidad.zobyhost.: www. ej.com). en Gmail (http://www. en este proceso nos enviarán correos a Gmail.zobyhost.com Nombre de usuario.: ftp.: zoby_3986433 Contraseña: La que le dijimos en el registro. email. tan solo debemos de seguir las instrucciones que nos den en los correos electrónicos. o hosting. algo muy típico en este tipo de servicios gratuitos. es Zobyhost (http://www.

que es algo muy importante. No publicidad.com/Spain (Podemos contratarla desde España. pero en este caso de pago.es (España). . nos registraremos en un proveedor de servicios hosting. en un servidor gratuito podría ser www. Capacidad de almacenamiento de datos mucho más elevado. es el tipo de dirección que tendrá nuestra página. será mucho más profesional.arsys.com). .org (Para organizaciones). ya que es extremadamente económica y da unos servicios muy superiores.fcojosepelaez.fcojosepelaez.En España es muy conocida la empresa Arsys http://www. por ejemplo.com .  De las dos recomiendo GoDaddy. Podemos incluso elegir el tipo de dominio .GoDaddy.edu (Para educación).net (el sustituto más utilizado al .Francisco José Peláez Aguilera VOLVER b) Alojamiento profesional de pago: De la misma forma que en el apartado anterior. La diferencia. . etc… También hay que tener en cuenta que el tipo de servicio es mejor.com y en uno de pago podría ser http://www. tan solo necesitaremos una cuenta de pago de PayPal).es/ - En América es muy conocida la empresa GoDaddy http://www. espacio web. 19 .com (el más usado internacionalmente). . atención al cliente ante problemas técnicos. Etc… Proveedores de servicios importantes: .zobyhost.

También se puede utilizar el botón derecho del ratón sobre los archivos o carpetas y elegir entre subir y descargar. como para bajar archivos. ej. Como se ve en la imagen. Tan solo debemos de arrastrar nuestros archivos de un lado a otro. Estos datos se introducen en el lugar indicado en la imagen siguiente. tanto para subir. Lo podemos descargar en http://filezilla-project.com Nombre de usuario. 20 .org Tan solo seguiremos los pasos que nos diga la instalación. nos ayudará a conectarnos con nuestro hosting o espacio web. una vez puestos pulsamos sobre “Conexión rápida” y se conectará de inmediato. ej. A la hora de utilizarlo necesitaremos para conectarnos a nuestro hosting o espacio web. a la derecha nuestro hosting o espacio web.Francisco José Peláez Aguilera VOLVER 3 .: zoby_3986433 Contraseña: La que le dijimos en el registro. a la izquierda nuestro pc.Subir nuestra página Web a nuestro espacio web (FileZilla): FileZilla es un cliente ftp.: Dirección ftp. ej.: ftp.zobyhost. los datos básicos de conexión. aparecen dos ventanas. para poder subir nuestro espacio web.

como: . es decir un explorador de internet.. la dirección de nuestra página web.Mozilla Firefox Y escribiremos en su barra de direcciones.Internet Explorer .fcojosepelaez.Francisco José Peláez Aguilera VOLVER 4. ej.com o http://www.fcojosepelaez.Comprobar nuestra página web: Para ello tan solo debemos de acceder a nuestro hosting o espacio web.: www.com 21 .zobyhost. utilizando un cliente web.

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->