Francisco Jos Pelez Aguilera

Crear una Pgina Web:

Esquema bsico: Pasos para crear una pgina web 1 - Editar la pgina (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 imgenes P8 g) Galera Fotogrfica P9 h) Hipervnculos 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 pgina Web a nuestro espacio web (FileZilla) P20 4.- Comprobar nuestra pgina web P21
VOLVER

Esquema bsico - Pasos para crear una pgina web:

1 - Editar nuestra
pgina web con un editor web. Ej.: Frontpage.

3- Subir nuestra
pgina 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 pgina

web funciona, accediendo a nuestra direccin web, (nos la da el Servidor web elegido). Podremos visitar nuestra pgina con un cliente web. Ej.: Firefox. 1

Francisco Jos Pelez Aguilera

1.- Editar la pgina (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 pgina y le indicamos (pulsando sobre examinar) la carpeta de nuestro pc que tendr nuestra pgina.

3 Elegimos como ubicacin Mis Documentos y dentro creamos una carpeta pulsando sobre la carpeta amarilla.

Francisco Jos Pelez 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.

Francisco Jos Pelez Aguilera

b) Frontpage Abrir sitio web:

VOLVER

1- Al abrir Frontpage, se abrir el ltimo sitio web que se utiliz, pero si no fuera nuestro sitio, debemos de pulsar sobre la flecha del icono abrir y luego Abrir sitio.

2- A continuacin buscamos dentro de Mis documentos, buscamos y entramos con doble click en la carpeta que contiene nuestro sitio web. Y una vez que estemos dentro pulsamos sobre Abrir.

Francisco Jos Pelez Aguilera

c) Frontpage Conocer Frontpage:

VOLVER

1 Nueva pgina normal 2 Nueva pgina especial (ej.: para esqueleto) o Nuevo sitio web 3 Abrir sitio Web, que ya se cre previamente en nuestro pc. 4 Crear nueva carpeta dentro de nuestra web. 5 Lista de carpetas y archivos de nuestro sitio web. 6 Zona donde se editarn nuestras pginas web. 7 Guarda la pgina web que actualmente est abierta (siempre que el nombre de una pgina tenga un *, es que necesita ser guardada). d) Frontpage Estructura de archivos y carpetas:
VOLVER

Cuando trabajamos con Frontpage, tenemos que seguir una estructura ordenada de carpetas, para as localizar y corregir posibles errores de manera rpida y fcil. La estructura de carpetas ha de ser la siguiente: _private Frontpage guarda aqu archivos de administracin, no es necesaria y se puede borrar. Images Aqu guardaremos nuestras imgenes. Marcos Aqu se almacenan los distintos marcos que formarn nuestro esqueleto web principal, es decir, el marco superior, el marco de men, el marco de contenido y el marco inferior. paginas Aqu guardamos las distintas pginas de contenido que creemos. Index.htm Es un archivo que siempre estar suelto en la raz de nuestro sitio web, este archivo es el primero que se abre al entrar en nuestra pgina, por eso lo podemos utilizar como un esqueleto, el cual contendr los distintos marcos que tendremos, superior, men, contenido e inferior. Nota: Nunca utilice como nombre de carpetas y archivos: tildes, , puntos o guiones.
5

Francisco Jos Pelez Aguilera

e) Frontpage Esqueleto Index:

VOLVER

El esqueleto, es una forma de estructurar de manera grfica nuestro sitio web y as poder tener distintas secciones, ej: marco superior, men, contenido e inferior. Para crear un esqueleto como base de nuestro sitio web, lo crearemos en nuestro archivo index.htm (el cual, es el archivo que arranca nuestro sitio web). 1- Para ello pulsamos en la flecha de creacin y luego sobre Pgina.

2- Pulsamos la pestaa Pginas de marcos" y seleccionamos el esqueleto que ms se adapte a nuestras necesidades, inicialmente utilizaremos el tipo Encabezado, pie de pgina y contenido, luego pulse Aceptar.

Francisco Jos Pelez Aguilera

3- Ahora aparecer el esqueleto que hemos elegido, pero con los marcos vacos, tenemos que seleccionar pginas que contendrn estos marcos, para ello podemos crearlos desde cero o elegir pginas que ya tengamos creadas anteriormente con la opcin Establecer pgina inicial. Inicialmente las crearemos desde cero, para ello pulsaremos en cada marco Nueva pgina, se crearn pginas en blanco en cada uno de los marcos.

4- A continuacin guardaremos las distintas pginas que hemos creado: la de arranque (index.htm) y los 4 nuevos marcos. Para ello pulsaremos sobre el botn guardar y seguiremos los pasos siguientes.

Francisco Jos Pelez Aguilera

En la casilla uno, se sombrear lo que se va a guardar a continuacin, en este caso el marco superior, por lo que elegiremos un nombre adecuado para la pgina superior.htm, (siempre se deja la extensin al final del nombre .htm), luego elegiremos la carpeta adecuada en la cual se guardar, en este caso haremos doble click en marcos y luego pulsaremos Guardar. Haremos lo mismo con los otros 3 marcos men.htm, contenido.htm e inferior.htm. Cuando se sombree todo el exterior de los cuatro marcos, tal y como se muestra en la imagen, ser el momento de guardar el esqueleto de nuestra web, por lo tanto se guardar como index.htm y en la raz de nuestro sitio web (es decir, fuera de cualquiera de nuestras carpetas, en el inicio, como archivo nico y suelto). Como ya existe inicialmente un archivo llamado index.htm en la raz, nos dir que ya existe y que si lo queremos sobreescribir con este nuevo archivo, le diremos que s. Llegados a este punto ya tendremos nuestro esqueleto index.htm y con los distintos marcos guardados.

f) Frontpage Insertar imgenes:

VOLVER

Para insertar imgenes de la manera ms rpida haremos lo siguiente, lo primero es que esas imgenes estn en nuestra carpeta images, para ello y desde fuera de Frontpage, copiaremos todos los archivos de imagen que necesitemos (seleccionamos los archivos - botn derecho - copiar). Una vez copiados iremos a Frontpage y los pegaremos dentro de la carpeta images, (haciendo click con el botn derecho del ratn sobre images y luego elegiremos pegar). Ahora tendremos las imgenes elegidas en la carpeta images. Para insertarlas en nuestra pgina tan solo tendremos que abrir la pgina que contendr las imgenes y luego las arrastraremos hacia la pgina, como indica esta imagen.

Francisco Jos Pelez Aguilera

g) Frontpage Galera Fotogrfica:

VOLVER

Para crear una galera fotogrfica lo primero es crear una pgina en blanco, la cual contenga la galera, una vez aadimos la pgina nueva la guardamos dentro de la carpeta pginas, con un nombre significativo, ej.: galera.htm , no olvidemos que tenemos que dejar la extensin .htm al escribir el nombre, tambin no olvidemos 1.- Para insertar en esta pgina nueva la galera, pulsamos sobre insertar, componente web y galera de fotografas. Luego elegimos el tipo de galera que queremos y Finalizar.

2.- Ahora tenemos que agregar las imgenes que queremos tener en nuestra galera, podemos tenerlas ya en nuestra carpeta de images o en otra de nuestro pc, para buscarlas pulsamos agregar y en la nueva ventana seleccionamos las imgenes. Una vez seleccionadas se irn aadiendo a la lista, la cual podemos ordenar (2). Tambin podemos aadir a las imgenes un ttulo y una descripcin. Para finalizar Aceptar. 3.- Una vez hecho esto, veremos que el nombre de la pgina tiene un *, significa que hay que guardar la pgina, pulsamos sobre el botn de guardar pgina .

Francisco Jos Pelez Aguilera

Al guardar nos dir (en el caso de que las imgenes estuvieran fuera de nuestro sitio web) que guardemos las imgenes, le diremos que las guarde en la carpeta images.

Para ello pulsamos sobre Cambiar carpeta y seleccionamos la carpeta images, luego Aceptar.

10

Francisco Jos Pelez Aguilera

Veremos como en la columna Carpeta, ahora pone images/ , que es su destino correcto, para terminar pulsamos Aceptar. Ya tenemos las imgenes guardadas y la galera terminada. h) Frontpage Hipervnculos:
VOLVER

Los hipervnculos son una propiedad que se le puede dar a una imagen o a un texto, esta propiedad permite que al pulsar sobre esa imagen o texto, nos lleve automticamente a una nueva pgina o nos descargue un archivo. En el caso de hacer un hipervnculo que nos lleve a una pgina debemos de recordar que lo principal es decirle, que debe de abrir y dnde lo debe de mostrar, es decir, en que marco de nuestro esqueleto principal. Para insertar un hipervnculo tanto en un texto o imagen, tan solo debemos de pulsar sobre el/ella con el botn derecho del ratn y elegir la opcin Hipervnculo. 1.- Para mostrar cmo se hace, pondremos el siguiente ejemplo, insertaremos en la palabra Galera, (la cual estar en nuestro marco de men), un hipervnculo que nos lleve a una pgina de galera que ya tenemos previamente creada en la carpeta pginas. Luego la seleccionamos y la pulsamos con el botn derecho del ratn, elegimos Hipervnculo
11

Francisco Jos Pelez Aguilera

2.- Ahora buscaremos la pgina que queremos enlazar, (en nuestro ej. galera.htm que estaba en la carpeta paginas, una vez seleccionamos esta pgina, tenesmo que decirle en qu marco se debe mostrar, para ello pulsamos Marco de destino. 3.- En nuestro ej. le diremos que la muestre en el marco central de contenidos, para

ello pulsamos sobre el cuadrante central y luego Aceptar.

Una vez realizado volvemos a la pantalla anterior y volvemos a pulsar Aceptar. Ya tenemos nuestro enlace hacia la pgina deseada y mostrndola en el marco que hemos elegido. Funciona igual con archivos, tanto para mostrar (ej. un pdf, el cual se mostrar en el marco deseado), tanto para descargar (la descargar comienza automticamente).
12

Francisco Jos Pelez Aguilera

i) Frontpage Tablas, marquesinas y capas:

VOLVER

1.- Para insertar una tabla bsica, pulsamos sobre el icono Y a continuacin aparece una ventana desplegable, en la cual podemos seleccionar manualmente el nmero de filas y columnas.

2.- Sin embargo podemos utilizar una opcin ms completa, accediendo desde el men: Tabla Insertar Tabla

En esta ventana podremos no solo elegir el nmero de filas y columnas, sino tambin el grosor de los bordes, su color, y tambin el fondo de la tabla, una imagen o un color.

13

Francisco Jos Pelez Aguilera

VOLVER

j) Frontpage Botones interactivos para men: Los botones interactivos son un recurso ideal para crear un men en nuestra pgina web. Consiste en un botn compuesto por 3 imgenes, una esttica, otra para cuando ponemos el ratn encima y otra para cuando pulsamos sobre l. Por lo tanto cuando creemos un botn, tambin estamos creando 3 imgenes por cada botn. Para crear un botn interactivo, pulsamos sobre Insertar, Componente Web, efectos dinmicos, botn interactivo y finalmente sobre Finalizar.

14

Francisco Jos Pelez Aguilera

A continuacin aparece el cuadro de configuracin de nuestro botn. 1.- Elegimos el tipo de botn que queremos, tipo y color. 2.- Texto del botn, ponemos el nombre que deseemos que aparezca sobre nuestro botn. Debe de ser siempre algo orientativo, es decir, si nuestro botn abrir una pgina sobre productos, debera de poner sobre nuestro botn la palabra Productos. 3.- Vnculo: Aqu hay que decir cul es la pgina que debe de abrir al ser pulsado el botn, para ello se pulsa sobre Examinar y se busca la pgina correspondiente, es muy importante que al seleccionarla no le demos ya a Aceptar, ya que antes debemos de decirle sobre qu marco queremos que se muestre, normalmente diremos que en el marco central de contenido. Luego pulsaremos sobre Aceptar.

Anotacin: A la hora de seleccionar el marco de destino, si lo estamos haciendo trabajando con la pgina de index.htm, aparecer en este punto, un esquema grfico para seleccionarlo manualmente, tal y como muestra la imagen siguiente: Pero si lo hacemos directamente desde la pgina que tendr los botones, es decir, desde por ejemplo menu.htm, no aparecer este esquema, qu hacemos?, pues escribir manualmente en la casilla Destino el nombre del marco de destino, ej principal, o contenido, dependiendo del nombre que tenga o el que les hallis dado a vuestros
15

Francisco Jos Pelez Aguilera

marcos. Para ver el nombre que tienen vuestros marcos actualmente o incluso modificarlos, tan solo debis de abrir a la pgina index.htm y pulsar sobre cada marco con el botn derecho del ratn, elegir Propiedades del marco y aparecer una ventana con el Nombre del marco seleccionado, ej.: principal, este lo podemos cambiar por el nombre que queramos, ej.: contenido.

Ya siempre que queramos un marco de destino para nuestro botn interactivo, podremos escribir manualmente su nombre en la casilla Destino.
VOLVER

k) Frontpage - Quitar grosor a los marcos: Quitar el grosor a los marcos de nuestra pgina es bastante esttico y muy fcil de hacer, para ello abriremos nuestra pgina de index.htm y pulsaremos sobre la opcin Cdigo, tal y como muestra la imagen:

16

Francisco Jos Pelez Aguilera

Y aparecer algo similar a la imagen siguiente:

Nosotros solo nos fijaremos en la lnea sealada en la imagen, la primera que empieza por <frameset rows="64,*,64">, los nmeros 64, pueden variar, as que los dejamos como estn (son los tamaos de alto que tienen actualmente nuestros marcos), para quitar el grosor de nuestros marcos, debemos de agregar al final de esta lnea lo siguiente, (antes del signo > ) border="0" frameborder="0" framespacing="0" Quedando la lnea de la siguiente forma: <frameset rows="64,*,64" border="0" frameborder="0" framespacing="0"> Para regresar a nuestra pantalla de edicin pulsamos sobre Diseo, tal y como muestra la imagen siguiente:

17

Francisco Jos Pelez Aguilera

VOLVER

2 - Solicitar un espacio Web en un Servidor: a) Alojamiento gratuito: Existen en internet empresas que ofrecen productos gratuitos como espacios web, o hosting, para encontrar estos servicios podemos escribir en google como palabras clave hosting gratuito y aparecern muchas empresas que lo ofrecen. La clave es encontrar el hosting o espacio web gratuito, que ms servicios nos d, como por ejemplo megas de espacio o transferencia, tambin hay que tener en cuenta que no tenga publicidad, es decir, que cuando nuestros visitantes entren en nuestra pgina, no les aparezcan mensajes de publicidad, algo muy tpico en este tipo de servicios gratuitos. Un proveedor de servicios hosting o espacio web gratuito, con bastantes megas de espacio y otros servicios como bases de datos, es Zobyhost (http://www.zobyhost.com). Si quisiramos hacernos un espacio web gratuito en Zobyhost, debemos de saber que inicialmente tenemos que tener una cuenta de correo electrnico, email, en Gmail (http://www.google.es/gmail). Durante el registro en Zobyhost iremos siguiendo los pasos que nos indique, ser un registro utilizando nuestro correo de Gmail, es decir, en este proceso nos enviarn correos a Gmail, los cuales sirven para confirmar la cuenta de Zobyhost, tan solo debemos de seguir las instrucciones que nos den en los correos electrnicos. Una vez termine el registro en Zobyhost, nos enviarn un email final, en el cual nos indicarn nuestros datos principales de acceso a nuestro espacio web, los bsicos son los siguientes: Direccin de la pgina, ej.: www.fcojosepelaez.zobyhost.com Direccin ftp, ej.: ftp.zobyhost.com Nombre de usuario, ej.: zoby_3986433 Contrasea: La que le dijimos en el registro. Con estos datos ya podremos acceder por ftp, con nuestro programa FileZilla y as subir nuestras pginas web a nuestro hosting, espacio web gratuito.

18

Francisco Jos Pelez Aguilera

VOLVER

b) Alojamiento profesional de pago: De la misma forma que en el apartado anterior, nos registraremos en un proveedor de servicios hosting, espacio web, pero en este caso de pago. La diferencia, es el tipo de direccin que tendr nuestra pgina, ser mucho ms profesional, por ejemplo, en un servidor gratuito podra ser www.fcojosepelaez.zobyhost.com y en uno de pago podra ser http://www.fcojosepelaez.com . Podemos incluso elegir el tipo de dominio .com (el ms usado internacionalmente), .es (Espaa), .org (Para organizaciones), .net (el sustituto ms utilizado al .com), .edu (Para educacin), etc Tambin hay que tener en cuenta que el tipo de servicio es mejor, atencin al cliente ante problemas tcnicos. Capacidad de almacenamiento de datos mucho ms elevado. No publicidad, que es algo muy importante. Etc

Proveedores de servicios importantes: - En Espaa es muy conocida la empresa Arsys http://www.arsys.es/

En Amrica es muy conocida la empresa GoDaddy http://www.GoDaddy.com/Spain (Podemos contratarla desde Espaa, tan solo necesitaremos una cuenta de pago de PayPal).

De las dos recomiendo GoDaddy, ya que es extremadamente econmica y da unos servicios muy superiores.

19

Francisco Jos Pelez Aguilera

VOLVER

3 - Subir nuestra pgina Web a nuestro espacio web (FileZilla):

FileZilla es un cliente ftp, nos ayudar a conectarnos con nuestro hosting o espacio web, para poder subir nuestro espacio web. Lo podemos descargar en http://filezilla-project.org Tan solo seguiremos los pasos que nos diga la instalacin. A la hora de utilizarlo necesitaremos para conectarnos a nuestro hosting o espacio web, los datos bsicos de conexin, ej.: Direccin ftp, ej.: ftp.zobyhost.com Nombre de usuario, ej.: zoby_3986433 Contrasea: La que le dijimos en el registro. Estos datos se introducen en el lugar indicado en la imagen siguiente, una vez puestos pulsamos sobre Conexin rpida y se conectar de inmediato.

Como se ve en la imagen, aparecen dos ventanas, a la izquierda nuestro pc, a la derecha nuestro hosting o espacio web. Tan solo debemos de arrastrar nuestros archivos de un lado a otro, tanto para subir, como para bajar archivos. Tambin se puede utilizar el botn derecho del ratn sobre los archivos o carpetas y elegir entre subir y descargar.

20

Francisco Jos Pelez Aguilera

VOLVER

4.- Comprobar nuestra pgina web: Para ello tan solo debemos de acceder a nuestro hosting o espacio web, utilizando un cliente web, es decir un explorador de internet, como:

- Internet Explorer

- Mozilla Firefox

Y escribiremos en su barra de direcciones, la direccin de nuestra pgina web, ej.: www.fcojosepelaez.zobyhost.com o http://www.fcojosepelaez.com

21