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.Francisco José Peláez Aguilera 4 – La nueva carpeta se llamará “Proyecto Integrado [Curso Nivel Grupo]” y luego pulsamos sobre “Aceptar”. 3 .

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

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

1. inicialmente utilizaremos el tipo “Encabezado.htm (el cual. 2.Para ello pulsamos en la flecha de creación y luego sobre “Página”. 6 . contenido e inferior. luego pulse “Aceptar”. ej: marco superior.Francisco José Peláez Aguilera e) Frontpage – Esqueleto Index: VOLVER El esqueleto. pie de página y contenido”. menú. es una forma de estructurar de manera gráfica nuestro sitio web y así poder tener distintas secciones. lo crearemos en nuestro archivo index. 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. es el archivo que arranca nuestro sitio web).

Ahora aparecerá el esqueleto que hemos elegido. 7 . se crearán páginas en blanco en cada uno de los marcos. para ello pulsaremos en cada marco “Nueva página”. Para ello pulsaremos sobre el botón guardar y seguiremos los pasos siguientes. Inicialmente las crearemos desde cero. para ello podemos crearlos desde cero o elegir páginas que ya tengamos creadas anteriormente con la opción “Establecer página inicial”.Francisco José Peláez Aguilera 3. 4. 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. pero con los marcos vacíos.

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

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

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

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

tanto para mostrar (ej. tenesmo que decirle en qué marco se debe mostrar. Funciona igual con archivos. para ello pulsamos sobre el cuadrante central y luego “Aceptar”.En nuestro ej. le diremos que la muestre en el marco central de contenidos. tanto para descargar (la descargar comienza automáticamente). 3. el cual se mostrará en el marco deseado). Una vez realizado volvemos a la pantalla anterior y volvemos a pulsar “Aceptar”. (en nuestro ej. una vez seleccionamos esta página.htm” que estaba en la carpeta “paginas”.Francisco José Peláez Aguilera 2... “galería. 12 . 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. un pdf. para ello pulsamos “Marco de destino”.

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

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

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

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

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

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

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

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

Internet Explorer .com 21 .com o http://www. la dirección de nuestra página web.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.zobyhost.Francisco José Peláez Aguilera VOLVER 4. como: .fcojosepelaez.fcojosepelaez. ej.: www. es decir un explorador de internet. utilizando un cliente web.

Sign up to vote on this title
UsefulNot useful