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

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

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

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

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

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

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

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

le diremos que las guarde en la carpeta “images”. luego “Aceptar”.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. 10 . Para ello pulsamos sobre “Cambiar carpeta” y seleccionamos la carpeta “images”.

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

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

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

también estamos creando 3 imágenes por cada botón. Por lo tanto cuando creemos un botón. Consiste en un botón compuesto por 3 imágenes. Componente Web. otra para cuando ponemos el ratón encima y otra para cuando pulsamos sobre él. botón interactivo y finalmente sobre Finalizar. efectos dinámicos. 14 .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. Para crear un botón interactivo. pulsamos sobre Insertar. una estática.

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

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

pueden variar.64">. los números 64. debemos de agregar al final de esta línea lo siguiente. para quitar el grosor de nuestros marcos.64" border="0" frameborder="0" framespacing="0"> Para regresar a nuestra pantalla de edición pulsamos sobre “Diseño”. así que los dejamos como estén (son los tamaños de alto que tienen actualmente nuestros marcos…).*. la primera que empieza por <frameset rows="64.*. (antes del signo > ) border="0" frameborder="0" framespacing="0" Quedando la línea de la siguiente forma: <frameset rows="64. tal y como muestra la imagen siguiente: 17 .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.

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

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

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

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

Sign up to vote on this title
UsefulNot useful