DiseodepginasWebcon

MICROSOFTEXPRESSIONWEB4

I.E.S.FERNANDODEMENA
INFORMTICA4ESO
CURSO2013/2014

Alumno:_________________________

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

TABLADECONTENIDOS

1. OPERACIONES BSICAS ...............................................................................................................................................1

Cambiar el aspecto del programa................................................................................................................................1
Abrir/cerrar paneles........................................................................................................................................................1
Ver un Web ya existente................................................................................................................................................1
Pasos para crear la estructura de nuestro Web.........................................................................................................2
2. UTILIZAR PLANTILLAS....................................................................................................................................................3
Seleccionar una plantilla................................................................................................................................................4
Crear pginas basadas en la plantilla..........................................................................................................................5
3. OTRA OPCIN: UTILIZAR MARCOS.............................................................................................................................5
Crear marcos...................................................................................................................................................................5
Ver propiedades del marco ..........................................................................................................................................6
Dividir un marco..............................................................................................................................................................6
Eliminar un marco ..........................................................................................................................................................6
Crear un hipervnculo a un marco................................................................................................................................6
Insertar un marco flotante .............................................................................................................................................7
4. DAR FORMATO A LAS PGINAS..................................................................................................................................7
Dar formato a los caracteres.........................................................................................................................................7
Dar formato a los prrafos.............................................................................................................................................7
Aplicar bordes y sombreado a un prrafo....................................................................................................................7
Aplicar numeracin o vietas a una serie de lneas...................................................................................................7
Crear una lista anidada .................................................................................................................................................8
Insertar lnea horizontal..................................................................................................................................................8
Modificar las propiedades de una lnea horizontal

..................................................................................8

Agregar un sonido de fondo en una pgina ..............................................................................................................8

Insertar una imagen como fondo de una pgina........................................................................................................8
Agregar un color de fondo a la pgina.........................................................................................................................8
5. HIPERVNCULOS................................................................................................................................................................8
Crear un hipervnculo a una pgina ya existente de nuestro Web..........................................................................8
Crear un hipervnculo a una pgina que se crear automticamente....................................................................9
Hipervnculos a marcadores..........................................................................................................................................9
Insertar marcadores..................................................................................................................................................9
Crear un hipervnculo a un marcador .................................................................................................................10
Insertar un hipervnculo a otro Web existente..........................................................................................................10
Insertar un hipervnculo de correo..............................................................................................................................10
Insertar un hipervnculo para la descarga de archivos............................................................................................10
Agregar colores a los hipervnculos de una pgina.................................................................................................11

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

6. TABLAS .............................................................................................................................................................................11
Insertar una tabla..........................................................................................................................................................11
Ver propiedades de la tabla........................................................................................................................................11
7. IMGENES.........................................................................................................................................................................12
Insertar una imagen......................................................................................................................................................12
Ubicar correctamente en la pgina una imagen insertada.....................................................................................12
Editar una imagen insertada.......................................................................................................................................12
Definir color transparente de una imagen GIF..........................................................................................................12
Insertar un GIF animado..............................................................................................................................................12
Crear un mapa-imagen que contenga varios hipervnculos...................................................................................12
8. MEJORAR EL WEB..........................................................................................................................................................13
Insertar botones interactivos.......................................................................................................................................13
Animar la transicin de pginas..................................................................................................................................13
Incrustar sonidos/canciones en una pgina..............................................................................................................13
a) Poner un sonido de fondo a la pgina..............................................................................................................14
b)Crear un hipervnculo a un archivo de sonido.................................................................................................14
c)Insertar un botn interactivo vinculado a un archivo de sonido....................................................................14
d)Insertar un archivo de sonido que sonar al hacer clic en un texto, imagen, etc.......................................14
Agregar un vdeo .........................................................................................................................................................14
a) Incrustar el vdeo en la pgina.........................................................................................................................14
b) Insertar un archivo de vdeo.............................................................................................................................15
c)Insertar una pelcula en formato .swf...............................................................................................................15
d) Pegar el cdigo HTML del vdeo desde Youtube..........................................................................................15
Mensaje emergente .....................................................................................................................................................16
Insertar ventana emergente o pop-up ......................................................................................................................17
Insertar un efecto a un texto........................................................................................................................................17
Hacer que al pasar el ratn por una imagen aparezca otra imagen (imagen de reemplazo)............................17
Revisar ortografa.........................................................................................................................................................18
9. PUBLICAR EL WEB.........................................................................................................................................................18
Herramientas gratuitas para crear nuestro web gratis......................................................................................................18
Hosting (alojamiento web).....................................................................................................................................................18
Alojamiento web gratuito..............................................................................................................................................18
Recurrir a nuestro proveedor de servicios de Internet.......................................................................................20
Alojamiento web de pago............................................................................................................................................20
10. AADIR UN FAVICON...................................................................................................................................................21
Colocar un icono en un Web de manera global........................................................................................................21
Colocar un icono especfico en una pgina..............................................................................................................21
11. POSICIONAMIENTO WEB............................................................................................................................................22
ACTIVIDAD FINAL: DISEO DE UN WEB DE TEMA A ELEGIR................................................................................24

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

1. OPERACIONES BSICAS

(pgs. 128 y 129 del libro de ed. Bruo)

Para disear pginas Web vamos a utilizar Microsoft Expression Web 4, uno de los editores de
pginas Web ms populares1, de muy sencillo manejo pero con el que se pueden lograr grandes
efectos. Un Web se compone de un conjunto de archivos relacionados (pginas HTML,
imgenes, sonidos, vdeos, etc.) sobre un tema determinado. Abre en tu ordenador Microsoft
Expression Web 4 e investiga las siguientes acciones:

Cambiar el aspecto del programa: Selecciona el men HerramientasOpciones de la aplicacin... y

activa la opcin Usar la combinacin de colores actual de Windows.

Abrir/cerrar

paneles: Cierra todos los paneles a izquierda y derecha del rea de trabajo central,
haciendo clic sobre las respectivas x, excepto el panel Lista de carpetas. Si ms adelante quieres
visualizar algn panel, selecciona el Men Paneles y activa el panel en cuestin... Si lo que quieres es
recuperar el diseo predeterminado de paneles, selecciona el Men Paneles y activa Restablecer
diseo de rea de trabajo.

Ver un Web ya existente:

1. Haz clic en la lista desplegable situada a la dcha. del botn

y selecciona Abrir sitio....

y busca en tu pendrive el Web Frmula 1 de ejemplo.

2. Haz clic en el botn

3. Seleccinalo y haz clic en el botn

4. Abre la pgina index.htm haciendo doble clic sobre ella

Las carpetas y archivos que componen el web aparecen a la izquierda, en el panel Lista de carpetas:
Barra de ttulo

Barra de mens

Pestaas de pginas activas

Barra de
herramientas

rea de
trabajo

Panel
Lista de
carpetas

Barra de
estado
Barra de vistas
1

Existen otros editores Web, como Dreamweaver CS 6, que es de pago, o KompoZer, Mozilla Composer, etc. en
software libre.

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

Para ver el contenido de una pgina html en cuestin basta con hacer doble clic sobre ella. El panel
Lista de carpetas nos permite organizar todos los elementos del Web cmodamente.
Ejercicio 1: Descrgate en tu pendrive el Web Frmula 1 de ejemplo de la web del profesor,
descomprime la carpeta, e investiga todo lo anterior.

Pasos para crear la estructura de nuestro Web:

(pg. 130 del libro de ed. Bruo)

Como habrs observado en el web del ejemplo anterior, un sitio web se compone de una serie de
carpetas para guardar ordenadamente la informacin (carpetas imgenes, vdeos, msica, botones,
etc.) y de archivos; la mayor parte de estos ltimos tienen la extensin html2, y la ms importante es
index.html, que es como la pgina de inicio o bienvenida. Vamos a crear la estructura de nuestro web
(para ello, previamente tendremos que haber decidido qu tema trata...):
1. Crea en tu pendrive una carpeta que alojar todas las subcarpetas y archivos de tu futuro web,
y asgnale un nombre autoidentificativo.
2. Abre el programa y haz clic en el botn
3. Clic en botn

(Nuevo sitio) GeneralSitio web de una pgina

y navega hasta encontrar la carpeta que creaste en el paso 1.

Seleccinala y haz clic en

4. Observars que la ruta de acceso a tu carpeta aparece a la derecha del cuadro Ubicacin:
Haz clic en
.
El programa, por defecto, crea la carpeta raz del web, de la cual cuelga el archivo
Ese pequeo icono que aparece a la izquierda de su nombre indica que es la pgina principal. Es
conveniente que lo renombres como index.html; para ello, haz clic con el botn derecho sobre l y
selecciona Cambiar nombre.
Este es el momento en que debemos crear carpetas individuales y ordenadas para guardar en
el futuro sonidos, vdeos, imgenes, etc. Para ello, haz clic con el botn derecho sobre la carpeta
raz del web y selecciona NuevoCarpeta. Crea todas las carpetas que necesites de momento (no
uses tildes!), como por ejemplo:

Carpeta raz

Ambas extensiones, htm y html vienen a ser lo mismo; HTML (HyperText Markup Language, es decir,

Lenguaje de marcado de hipertexto) es el lenguaje predominante para la elaboracin de pginas Web.

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

Seguidamente, tendremos que agregar las pginas que compondrn nuestro web:
1. Selecciona de nuevo la carpeta raz del web.
2. Clic en la lista desplegable situada a la derecha del botn
Pgina...GeneralHTML

(Nuevo documento)

3. Clic en
La pgina se crea en blanco, y su nombre (Sin_ttulo_1.html) aparece en la pestaa de las pginas
activas. Una vez la editemos, aparecer un * a la derecha de su nombre, indicando que ha sido
modificada. Para guardar los cambios podemos hacer clic con el botn derecho sobre su nombre,
elegir la opcin Guardar y darle un nombre autoidentificativo.
AVISO IMPORTANTE: Se recomienda vivamente, a la hora de nombrar archivos o carpetas, no utilizar

palabras separadas, maysculas, caracteres poco corrientes y/o tildes3.

Ejemplos:
DESACONSEJADO:

RECOMENDADO:

Imgenes

imagenes

Mi msica

mi_musica

4 ESO

4_eso

Ms adelante, desde la lista de carpetas, ser muy fcil modificar sobre la marcha la estructura del
Web.

Para

guardar el Web, hay que guardar todas y cada una de las pginas; lo ms rpido es:
ArchivoGuardar todo. Otra opcin es cerrar el programa, y cuando nos pregunte si queremos
guardar los cambios, responder afirmativamente.

Ejercicio 2: Una vez elegido el tema de tu Web, crea en tu pendrive, y dentro de la carpeta 3
evaluacin, una carpeta denominada Diseo Web y, dentro de ella, otra con un nombre
alusivo al tema del Web elegido. A continuacin, y siguiendo los pasos explicados arriba,
crea en sta ltima tu Web especificando la ubicacin de la carpeta anterior. Finalmente,
crea las pginas que constituirn la estructura provisional del Web.
En cualquier caso, la mayor parte de las pginas que acabamos de crear las vamos a eliminar ya que,
como veremos en el prximo apartado, es ms recomendable trabajar con plantillas. Otra opcin,
menos recomendable, es trabajar con marcos, lo cual veremos en el apartado 3.

2. UTILIZAR PLANTILLAS
Se recomienda elegir una de las mltiples plantillas ya hechas que nos ofrece el programa. Estas
plantillas presentan un atractivo diseo, y adems es muy fcil realizar cambios en ellas. La idea es
3

As evitaremos que nuestro Web pueda presentar problemas en determinados entornos, como por ejemplo
servidores basados en Linux o Unix, que distinguen maysculas y minsculas -no as Windows-.

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

elegir una de las plantillas y, posteriormente, crear pginas basadas en ella. De esta forma, nuestro
web tendr un diseo atractivo y uniforme.

Seleccionar una plantilla:

(Nuevo sitio) Plantillas.

1. Clic en botn

2. Seleccionar una de las plantillas en el panel central.

3. Marcar la casilla
4. Clic en

Veremos que el programa crea entonces una serie de carpetas (images, styles, etc.) y dos pginas:
es la nueva pgina principal.
es la plantilla. No la borres!

La carpeta

contiene la informacin relacionada con el vnculo Acerca de.

La carpeta

contiene la informacin relacionada con el vnculo Calendario.

La carpeta

contiene la informacin relacionada con el vnculo Contacto.

La carpeta
La carpeta

contiene la informacin relacionada con el vnculo P+F.

contiene las imgenes del web.

La carpeta
La carpeta

contiene la informacin relacionada con el vnculo Vnculos.

contiene la informacin relacionada con el vnculo Noticias.

La carpeta
No borrar la carpeta

contiene la informacin relacionada con el vnculo Galera de fotografas.

, pues contiene pginas de estilos css!

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

Por lo tanto, podemos borrar las carpetas employees, employment, press, products, promotions,
services y site_map, la carpeta imgenes que creamos en el ejercicio 2, la pgina inicial antigua
index.html, y renombrar default.html como index.html.
Ejercicio 3: Selecciona una plantilla que te guste, y sigue los pasos explicados arriba.

Crear pginas basadas en la plantilla:

Seguidamente, crearemos una serie de pginas a partir de la plantilla recin elegida:
.

1. Clic con botn derecho sobre

2. Seleccionar Nuevo a partir de plantilla web dinmica.

Vemos que se crea una nueva pgina basada en la plantilla. Tanto en
como en esta
pgina recin creada observamos que hay zonas que no pueden ser editadas: al intentar situar el
cursor sobre ellas, aparece un crculo indicando que son zonas no editables. Se suele tratar,
habitualmente, de la cabecera y de la barra lateral. La zona central s puede ser editada. Ahora bien,
esos cambios s pueden ser realizados en la plantilla
. Y lo ms importante: si
guardamos esos cambios en la plantilla mediante el men ArchivoGuardar todo y respondiendo
afirmativamente cuando el programa nos pregunta si queremos actualizar los archivos asociados,
podremos ver que los cambios se han validado en el resto de pginas! De esta forma se consigue
cmodamente cierta uniformidad en todas las pginas del web.
NOTA: Es fcil reconocer una pgina creada a partir de la plantilla por su icono

, el mismo que el

de
Ejercicio 4: Crea varias pginas a partir de la plantilla elegida en el ejercicio anterior. A continuacin,
realiza cambios en la plantilla master.dwt y comprueba que se validan en el resto de
pginas. Seguidamente, realiza cambios en las zonas editables de las pginas
asociadas a la plantilla.
Si decides adoptar este sistema de plantillas para tu web que es hoy en da lo ms recomendable-,
puedes saltar directamente al apartado 4. Por el contrario, si piensas que vas a inclinarte ms bien
por un diseo a base de marcos lo cual ya est un poco obsoleto...-, pasa al siguiente captulo.

3. OTRA OPCIN: UTILIZAR MARCOS

Los marcos permiten dividir la pgina Web en varias zonas independientes, cada una con una
informacin distinta y con su propia barra de desplazamiento. Ahora bien, de acuerdo con los ltimos
estndares de diseo, los marcos estn desaconsejados.

Crear marcos:
1. Selecciona de nuevo la carpeta raz del web.
2. Clic en la lista desplegable situada a la derecha del botn
Pgina...Pginas de marcos.
3. Selecciona el marco que ms te guste (Se recomienda Titular y contenido)
4. Clic en

(Nuevo documento)

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

5. En cada uno de los marcos recin creados aparecern dos botones, para seleccionar qu
pgina se visualizar en ellos:
para insertar en ese marco una pgina ya existente
para insertar una pgina en blanco (en la que podremos comenzar a aadir
elementos)
Elige una de las dos opciones anteriores para cada marco (se recomienda la segunda).
6. Al guardar los cambios realizados (men ArchivoGuardar todo), el programa nos preguntar
los nombres de las pginas de cada marco, y de la pgina que engloba a todos los marcos. Es
importante que asignes a cada marco parcial un nombre autoidentificativo
(marco_izquierdo.html, marco_central.html, etc.), y al marco total el que engloba a los
otros- lo conviertas en la pgina principal
(Para ello, haz clic con botn
derecho sobre lEstablecer como pgina principal).
Ntese que, una vez creados, se pueden cambiar las dimensiones de los marcos arrastrando su
borde.

Ver propiedades del marco (nombre, mostrar barras de desplazamiento, no mostrar bordes, insertar
sonido, etc.) para su posible modificacin: Botn derecho sobre el marcoPropiedades de
marco
NOTA: Es interesante la opcin

, que permite a los visitantes de

nuestro Web modificar el tamao de los marcos desde su explorador.

Dividir

un marco: Seleccionarlomen FormatoMarcosDividir marco (o bien, arrastrar uno de

sus bordes mientras pulsamos Ctrl )

Eliminar un marco: Seleccionarlomen FormatoMarcosEliminar marco

Crear un hipervnculo4 a un marco:

1. Insertar y seleccionar el texto, imagen u objeto que constituir el hipervnculo.
2. Botn derecho sobre lo anteriorClic en
3. Seleccionar la pgina a la que apuntar el hipervnculo.
4. Clic en
para seleccionar en qu marco se abrir la pgina anteriormente
seleccionada: en el panel izquierdo podemos elegir cualquiera de los marcos, mientras que en
el derecho podemos seleccionar que se abra en el mismo marco, que ocupe toda la pgina sin
marcos, etc.
NOTA: En todo momento, mediante el botn
(Vista previa), que nos permite adems elegir el
navegador que deseemos, podemos publicar el Web y ver cmo se van aplicando
nuestros cambios.
4

En la prxima seccin trataremos los hipervnculos ms en profundidad.

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

Insertar un marco flotante (es un marco que podemos situar en cualquier parte de la pgina):
1. Situar el cursor en el punto deseado de la pgina deseada
2. Men InsertarHTMLMarco flotante
NOTA: Para modificar las propiedades de un marco flotante (p. ej. para quitarle la barra de

desplazamiento) hay que situar el cursor en cualquiera de sus bordes y hacer clic con el botn
derecho.

Ejercicio 5: Si te has decidido por un diseo a base de marcos, elimina las carpetas y plantillas que
se crearon en el ejercicio 4. A continuacin crea, al menos, una pgina de marcos que
contenga algo parecido a lo siguiente: un marco en su parte superior para informacin
que siempre aparezca (logotipo, direccin, etc.), un marco en la parte izquierda donde
posteriormente ubicaremos hipervnculos a las distintas pginas, y un marco principal en
la parte central donde deber aparecer la pgina principal. Por ejemplo:

4. DAR FORMATO A LAS PGINAS

En Expression Web 4, el formato del texto, prrafos, vietas, etc. se cambia cmodamente de forma
similar a un procesador de textos:
Dar formato a los caracteres: Seleccionar texto men Formato Fuente...
Dar formato a los prrafos: Seleccionar prrafo(s)men FormatoPrrafo
Aplicar bordes y sombreado a un prrafo: Seleccionar prrafomen FormatoBordes y sombreado.
Aplicar

numeracin

vietas

una

serie

de

lneas: Seleccionar prrafosmen

FormatoNumeracin y vietas

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

NOTA: Al igual que con un procesador de textos, se puede elegir como vieta una imagen

previamente guardada en un archivo, si seleccionamos la opcin Especificar imagen: de la

ficha Vietas de imagen.

Crear una lista anidada (para estructurar mejor la informacin):

1. Situar el cursor en el punto de la lista principal donde deseamos insertar la lista secundaria y
pulsar Intro .
2. Clic dos veces sobre el botn

(Aumentar sangra) en todos los prrafos de la sub-lista.

Insertar lnea horizontal: InsertarHTMLLnea horizontal

Modificar las propiedades de una lnea horizontal:

Agregar un sonido de fondo en una pgina5:

Botn derecho sobre la lnea (o doble clic sobre

ella)Propiedades de la lnea horizontal

Botn derecho sobre la pginaPropiedades de

pginaFicha General

NOTA: Procrese utilizar archivos MIDI, ya que poseen menor tamao.

Insertar una imagen como fondo de una pgina: Botn derecho sobre la pginaPropiedades de
pginaFicha Formato
Agregar un color de fondo a la pgina: Botn derecho sobre la pginaPropiedades de
pginaFicha Formato
NOTA: Es posible que alguno de los elementos anteriores pueda ser reproducido en unos

navegadores y no en otros
Ejercicio 6: Investiga en tu Web todos y cada uno de los elementos anteriormente explicados. Una
vez hecho esto, incorpora slo aquellos que te interesen.

5. HIPERVNCULOS
Un hipervnculo es un enlace que relaciona las pginas de nuestro Web o que conecta con
otros Web de Internet.

Crear un hipervnculo a una pgina ya existente de nuestro Web:

(pg. 133 del libro de ed. Bruo)

1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo6.

2. Botn derecho sobre lo anterior
3. Seleccionar la pgina a la que apuntar el hipervnculo.

En las pginas 13 y 14 veremos, en profundidad, varios mtodos alternativos para insertar sonidos.
En la pgina 13 se explica cmo asignar un hipervnculo a un botn.

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

4. Clic en
para seleccionar en qu marco se abrir la pgina anteriormente
seleccionada: en el panel izquierdo podemos elegir cualquiera de los marcos, mientras que en
el derecho podemos seleccionar que se abra en el mismo marco, que ocupe toda la pgina sin
marcos, etc7.
5. Se recomienda, adems, hacer clic en
para poder escribir un texto que se
mostrar al situar el puntero del ratn sobre el hipervnculo, o bien cuando no sea posible
cargar la imagen o se navegue sin ellas (este texto a modo de etiqueta es muy til cuando el
hipervnculo est sobre una imagen!).
NOTA: Existe otra forma alternativa de crear un hipervnculo, ms rpida y cmoda pero quiz no tan

completa, que consiste en arrastrar la pgina en cuestin desde el panel de tareas.

Ntese que, como cualquier otro objeto, una vez creado el hipervnculo podemos modificarlo
haciendo clic con el botn derecho sobre l.

Crear un hipervnculo a una pgina que se crear automticamente:

1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo.
2. Botn derecho sobre lo anterior

3. Clic sobre el botn

situado en el panel izquierdo.

4. Escribir el nombre de la nueva pgina que se crear (Si, adems, queremos cambiar la
ubicacin de esa nueva pgina, seleccionaremos el botn
)
Ejercicio 7: Crea algunos hipervnculos necesarios para poder navegar por tu Web.

Los

hipervnculos a marcadores son de gran utilidad cuando se incluyen datos ordenados

alfabticamente. En primer lugar hay que insertar los marcadores, y a continuacin crear los
hipervnculos que apuntarn a cada uno de ellos:

a) Insertar marcadores:

(pg. 134 del libro de ed. Bruo)

1. Situar el cursor en el punto en que se desea insertar el marcador, o seleccionar el texto, imagen
u objeto que constituir el marcador.
2. Men InsertarMarcador
3. Escribir un nombre autoidentificativo para el marcador.
4.
5. Guardar la pgina donde se ha insertado el marcador.
7

Las opciones son:

Valor pred. (ninguno): Se abre en el mismo marco.
El mismo marco: Se abre en el mismo marco.
Toda la pgina: Se abre ocupando toda la pgina.
Nueva ventana: Se abre en una nueva ventana del navegador.
Marco primario: Se abre ocupando toda la pgina.

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

(Para borrar un marcador, basta con seleccionarlo y pulsar Supr, o bien acceder al men
InsertarMarcador y borrarlo de la lista)

b) Crear un hipervnculo a un marcador situado en la misma pgina, o en otra:

1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo.
2. Botn derecho sobre lo anterior
3. Seleccionar

dependiendo de si el marcador est en la misma pgina

o en otra.
4. Seleccionar (la pgina y) el marcador en cuestin (y el marco de destino).

Ejercicio 8: Crea una pgina que contenga en su parte superior las 26 letras del abecedario, y asigna
los correspondientes marcadores que accedan a una lista alfabtica relacionada con el
tema de tu web.

Insertar un hipervnculo a otro Web existente:

(pg. 135 del libro de ed. Bruo)

1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo.

2. Botn derecho sobre lo anterior
3. Seleccionar

4. Escribir en el campo Direccin: la direccin del Web en cuestin.

5. Clic en
para seleccionar en qu marco se abrir la pgina anteriormente
seleccionada: en el panel izquierdo podemos elegir cualquiera de los marcos, mientras que en
el derecho podemos seleccionar que se abra en el mismo marco, que ocupe toda la pgina sin
marcos, etc.

Insertar un hipervnculo de correo (para que nos enven sugerencias, pedidos, etc):
1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo.
2. Botn derecho sobre lo anterior
3. Seleccionar
4. Escribir nuestra direccin de correo.

Insertar un hipervnculo para la descarga de archivos8:

1. Seleccionar el texto, imagen u objeto que constituir el hipervnculo.
2. Botn derecho sobre lo anterior
8

En la pgina 13 veremos una forma alternativa de hacer esto, utilizando un botn de accin.

10

(pg. 135 del libro)

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

3. Seleccionar
4. Acceder al archivo en cuestin (Si no se conoce su ubicacin exacta, se recomienda hacer clic
en
)
NOTA: Cuando hemos insertado bastantes hipervnculos, puede ser interesante verlos todos

seleccionando

Ejercicio 9: a) Crea en tu Web al menos un hipervnculo a otro Web interesante de tema anlogo.
b) Inserta un hipervnculo de correo para que los usuarios de tu Web se puedan
comunicar contigo.
c) Inserta al menos un hipervnculo para que cualquiera que visite tu Web se pueda bajar
a su ordenador un archivo relacionado con el tema.

Agregar colores a los hipervnculos de una pgina:

Siempre que no se haya aplicado una plantilla, es posible configurar la pgina para que los
hipervnculos cambien de color segn hayan sido visitados, o el usuario site el puntero del ratn
sobre ellos, etc.:
1. Botn derecho sobre la pginaPropiedades de pginaFicha Formato
2. Seleccionar el color deseado.
NOTA: El efecto elegido se aplicar a todos los hipervnculos de la pgina.

Cambiar el nombre de la pgina (el nombre que aparece en la pestaa del navegador):
1. Botn derecho sobre la pginaPropiedades de pginaFicha General
2. Ttulo: escribir el nombre deseado.
3.

6. TABLAS

(pgs. 131 y 132 del libro de ed. Bruo)

Una tabla permite organizar la informacin (imgenes, texto, etc.) cmoda y ordenadamente.

Insertar una tabla: Situar el cursor en el lugar deseadoMen Tabla

Resulta til tener visible la barra de herramientas Tabla (para borrar lneas, insertar filas o columnas,
combinar celdas, alinear texto, distribuir texto, cambiar formato, etc. cmodamente): Men
VerBarras de herramientasTablas

Ver propiedades de la tabla: Botn derecho sobre la tabla

(Por ejemplo, puede ser interesante asignar un grosor de 0 pxeles para organizar una serie de
imgenes)
Ejercicio 10: Investiga en tu Web todo lo anterior e incorpora al menos una tabla que contenga
imgenes, texto, etc.

11

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

7. IMGENES
Los formatos GIF (8 bits hasta un mximo de 256 colores; permite animaciones) y JPEG (de alta
definicin; 24 bits hasta un mximo de 16.777.216 colores) son los ms difundidos, compatibles y
rpidos de cargar. Tambin existen otros formatos: BMP, TIFF, PNG, etc.

Insertar una imagen:

Si

lo ms cmodo y rpido, como siempre, es copiar y pegar la imagen. En este

caso, cuando salgamos del programa o guardemos el trabajo, se nos pedir un
nombre y una ubicacin para dicha imagen (Se recomienda guardar las
distintas imgenes ordenadamente en un sistema de carpetas y subcarpetas!
Cuidado: Si posteriormente cambiamos la ruta de acceso a esa imagen, el
programa no la encontrar).

la imagen est previamente almacenada en un archivo, otro procedimiento alternativo para

insertarla es: Men InsertarImagen
(O bien, arrastrar la
imagen en cuestin desde la lista de carpetas hasta la pgina).

Para poder ubicar correctamente en la pgina una imagen insertada: Botn derecho sobre la imagen
 Propiedades de imagen... Apariencia

Para poder editar una imagen insertada: Botn derecho (o doble clic) sobre la imagen  Propiedades
de imagen... Ficha General

Definir color transparente de una imagen GIF:

1. Seleccionar la imagen.
2. Mostrar la barra de herramientas Imagen: Men VerBarras de herramientasImgenes
3. Clic en botn
formato)

(Si la imagen no es GIF, nos preguntar si queremos convertirla a este

4. Clic sobre la zona de la imagen que deseamos hacer transparente.

Ejercicio 11: Inserta en las pginas de tu Web imgenes alusivas al tema elegido.

Insertar un GIF animado: Se inserta de la misma forma que una imagen usual.
Ejercicio 12: Entra
en
una
pgina
de
gifs
animados,
como
por
ejemplo
www.gifanimados.com/rotulos/nuevo, escoge el rtulo que ms te guste, e insrtalo en
tu Web. No te olvides de guardar la imagen del gif animado en la carpeta
correspondiente. Puedes insertar varios gif animados ms

Crear un mapa-imagen que contenga varios hipervnculos:

1. Insertar la imagen.
2. Mostrar barra de herramientas Imagen.
3. Seleccionar

para definir una zona rectangular

para definir una zona circular
para definir una zona poligonal

12

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

4. Delimitar con el ratn la regin deseada. Una vez hecho esto, aparecer el cuadro de dilogo
Insertar hipervnculo, y procederemos como ya se ha explicado en el apartado 5
(Hipervnculos). Repetir los pasos 3 y 4 para cada una de las regiones del mapa-imagen.
NOTA: Aqu es muy recomendable utilizar el botn

para indicar un texto que

aparecer cuando el usuario site el puntero del ratn encima de cada regin en cuestin.

Ejercicio 13: Construye un mapa-imagen en tu Web, preferentemente en la pgina principal.

8. MEJORAR EL WEB

Insertar botones interactivos:

1. Situar el cursor en el punto deseado.
2. Men Insertar
3. Seleccionar el diseo del botn; en el cuadro Texto: podemos escoger el texto del botn.
4. Clic en
para seleccionar dnde apuntar el botn al hacer clic sobre l; hay varias
opciones: podemos elegir otra pgina de nuestro web, o un web externo, o un archivo de
texto, sonido, pelcula, etc., en cuyo caso se le preguntar al usuario si desea ejecutarlo
o guardarlo...

Animar la transicin de pginas:

1. Men Formato
2. Seleccionar en la lista desplegable Evento: cundo se desea que se produzca el efecto: al
entrar o salir de la pgina, o cuando se entre o salga del Web.
3. Seleccionar en el cuadro Efecto de transicin: el tipo de transicin deseado.
4. Escribir en el cuadro Duracin: cuntos segundos durar la transicin.
5. Guardar la pgina en cuestin y cerciorarse de que se ha validado la transicin.
NOTA: El efecto slo es visible, en principio, en Internet Explorer.

Incrustar sonidos/canciones en una pgina: permite al usuario controlar la reproduccin del sonido o
cancin utilizando el reproductor asociado a su navegador, el cual se abrir automticamente. Con
esta opcin se pueden incrustar varios archivos de sonido en una misma pgina.
1. Imprescindible copiar previamente el archivo de sonido (extensiones posibles: .midi, .wav, etc.;
IMPORTANTE!: para que funcione, el nombre de archivo no puede contener palabras
separadas, maysculas, caracteres poco corrientes y/o tildes) en una carpeta de nuestro
Web (p. ej. Msica).
2. Situar el cursor en el punto deseado.
3. Men InsertarMultimedia
4. Seleccionar archivo de sonido
5. Se incrustar en nuestra pgina un cuadro reproductor de Windows Media. Si hacemos clic con
el botn derecho sobre l y seleccionamos Propiedades del control ActiveX... podremos elegir,
en las distintas pestaas que se muestran, los parmetros del cuadro reproductor; por ejemplo,
se recomienda deseleccionar la opcin Inicio automtico de la ficha General.

13

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

Si guardamos y publicamos el web, observaremos en nuestro web algo parecido a esto:

de modo que el usuario de nuestra pgina podr utilizar los controles del reproductor a voluntad.
NOTA: Otras opciones para insertar sonido en una pgina pueden ser, entre otras:

a) Poner un sonido de fondo a la pgina, como se explic en la pg. 8: tiene el inconveniente

de que slo se puede asignar un nico sonido a la pgina.
b) Crear un hipervnculo a un archivo de sonido, como se vio en la pg. 10, de forma que el
usuario pueda descargarlo y reproducirlo cuando desee (vale con arrastrar el archivo).
c) Insertar un botn interactivo vinculado a un archivo de sonido (ver pg. 13), de modo que
cuando el usuario haga clic sobre l se reproducir dicho archivo.
d) Insertar un archivo de sonido que sonar al hacer clic en un texto, imagen, etc.:
1. Seleccionar el texto, imagen, etc. en cuestin.
2. Con el texto o imagen seleccionado, ir a FormatoComportamientos
3. En el panel derecho que se abre a continuacin seleccionar
sonido.
4. Clic en

/ Reproducir

hasta seleccionar el archivo de sonido en cuestin

NOTA: Con esta opcin el sonido se escuchar hasta el final, sin botones de control, hasta
el momento en que salgamos de la pgina.
En cualquier caso, se recomienda utilizar archivos MIDI, ya que poseen menor tamao.

Agregar

un vdeo: Tngase en cuenta que un archivo de vdeo ocupa demasiado espacio y, por
consiguiente, el tiempo de espera puede ser excesivo. Siempre que se pueda, se recomienda indicar
en la pgina su tamao, para que el usuario decida su reproduccin. Los formatos ms extendidos, y
por tanto que presentan menos problemas, son: .AVI o WMA o .WMV (utilizados por el reproductor de
Windows Media), .MOV o .QT (se abre con Quick Time, de Apple), .MPEG (de formato comprimido,
por lo cual tiene un tamao menor, pero sin prdida de calidad), .FLV (flash vdeo de Macromedia),
etc.

Tenemos las siguientes posibilidades de agregar un vdeo en Microsoft Expression Web 4:

a) Incrustar el vdeo en la pgina: el procedimiento es anlogo al recin explicado en el epgrafe
anterior para incrustar archivos de sonido: Men InsertarMultimedia
NOTA: Se recomienda guardar todos los vdeos en una carpeta, p. ej. Vdeos.

14

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

Con esta opcin, en la pgina aparecer el cuadro reproductor con el primer fotograma del vdeo,
junto con los controles necesarios para que el visitante pueda reproducirlo, detenerlo, etc.
NOTA: Es probable que esta opcin no funcione en Mozilla Firefox o en otros navegadores...
b) Insertar un archivo de vdeo: en este caso el vdeo se reproducir sin controles ni ventanas aparte:
1. Imprescindible copiar previamente el archivo del vdeo en una carpeta de nuestro Web (p. ej.
Vdeos).
2. Arrastrar el vdeo desde el panel de archivos hasta la pgina en cuestin, o bien crear un
hipervnculo al archivo de vdeo, o bien un botn interactivo vinculado al archivo de vdeo (al
igual que hicimos para insertar un archivo de sonido...).
Una vez publicado el Web, el usuario podr visualizar el vdeo haciendo clic sobre l.
c) Insertar una pelcula en formato .swf (es decir, Flash): tiene el inconveniente de que, para poder
verlo, quien acceda a nuestro web tendr que tener instalado Adobe Flash Player (cuya descarga,
en cualquier caso, es gratuita...).
1. Imprescindible copiar previamente el archivo .swf en una carpeta de nuestro Web (p. ej.
Vdeos).
2. Situar el cursor en el punto deseadoMen InsertarMultimedia
3. Seleccionar archivo swf.
4. Se incrustar en nuestra pgina el archivo flash. Si hacemos clic con el botn derecho sobre l
y seleccionamos Propiedades de Flash SWF ... podremos elegir, en las dos pestaas que se
muestran, los parmetros a la hora de reproducirlo; por ejemplo, se recomienda deseleccionar
la opcin Reproduccin automtica de la ficha General.
Si guardamos y publicamos el web, observaremos que, para reproducir el vdeo, hay que hacer clic
con el botn derecho y escoger Reproducir.
d) Pegar el cdigo HTML del vdeo (o cualquier otro componente) desde Youtube o similares en
nuestra pgina:
1. Abrir la pgina (Youtube, Google videos, etc.) donde est el vdeo.
2. Copiar el cdigo HTML del vdeo (p. ej. en Youtube hay que hacer clic sucesivamente sobre los
botones
e
, y copiar el cdigo que figurar en azul; en otros portales,
suele estar situado en un cuadro llamado Embed, Insertar, o similar)
3. Colocar el cursor en el punto de nuestra pgina donde queremos copiar el vdeo.
situado en la barra de vistas, en la parte inferior de la pantalla. Se
4. Clic en el botn
abrir entonces debajo del rea de trabajo la ventana para visualizar el cdigo HTML de la
pgina.
5. Pegar el cdigo HTML del vdeo (p.ej. mediante CTRL-V )
En nuestra pgina se ver algo parecido a esto:

15

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

Ntese que el usuario dispone de controles para visualizar el vdeo. La ventaja de este mtodo es
que ahorramos espacio, pero la desventaja clara es que si el vdeo es retirado de Youtube dejar
de verse en nuestra pgina.
NOTA: En realidad este procedimiento sirve para poder pegar todo tipo de componentes
(presentaciones Powerpoint, objetos flash, relojes, gif animados, etc.). A continuacin mostramos una
serie de portales en los que podemos encontrar interesantes utilidades:

URL:

DESCRIPCIN:

OBSERVACIONES:

http://www.cbox.ws/index.php

Permite a nuestros visitantes

dejar mensajes o chatear

Hay que registrarse

previamente

http://clustrmaps.com/getone.php

Permite pegar mapas

Hay que registrarse

previamente

http://www.slideshare.net/
http://www.ispringsolutions.com/

Permiten incrustar
presentaciones Powerpoint

No precisa registrarse
previamente
Es un programa de pago,
pero hay disponible
versin gratuita de prueba

http://www.micontador.es/
http://www.contador-de-visitas.com

Ofrecen contadores gratis

www.forogratis.es
www.foromania.com

Desde nuestro web podemos

enlazar a alguno de estos
foros gratuitos

www.forosgratis.net

Permite crear un foro

Hay que registrarse

previamente

www.jirox.net/AsButtonGen/

Permite crear botones

generalizados

Gratuito

Alguno puede requerir

registro previo

Mensaje

emergente: es una ventana de Windows que se mostrar con el mensaje de texto que
deseemos al hacer clic sobre un objeto, o al cargar la pgina, etc.: Seleccionar el objetoMen
FormatoComportamientos
Mensaje emergenteRedactar el mensaje

Ejercicio 14: a) Inserta botones interactivos (por ejemplo, para volver a la pgina anterior o a la
principal, o a otra pgina de nuestro web, o un web externo, o un archivo de texto,
sonido, pelcula, etc.).
b) Elige algn tipo de transicin entre las distintas pginas del Web.
c) Inserta al menos una cancin.
d) Inserta al menos un vdeo.
e) Inserta un mensaje emergente.

16

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

Insertar ventana emergente o pop-up: Una ventana emergente (pop-up, en ingls) es una ventana
con el tamao e informacin (texto, tabla, imagen, etc.) que deseemos, que se abre cuando hacemos
clic sobre una imagen, texto, etc.
1. Crear archivo nuevo .html, el cual constituir la ventana emergente, e insertar en l la
informacin que queramos. Guardarlo.
2. Seleccionar el texto, imagen, etc. tal que, al hacer clic sobre l, aparezca la ventana emergente.
3. Con el texto o imagen seleccionado, ir a FormatoComportamientos
4. En el panel derecho que se abre a continuacin seleccionar
explorador.

/ Abrir ventana de

5. Clic en
hasta seleccionar la pgina html del paso 1; seleccionar tambin el tamao
de la ventana emergente, etc.
NOTA: Por defecto, la ventana emergente se abrir al pasar el puntero del ratn sobre el texto
seleccionado. Si queremos cambiar esto, hay que hacer clic sobre
en el panel derecho
y cambiarlo.
NOTA: Ms adelante, si queremos cambiar el comportamiento, bastar con hacer doble clic sobre l
en el panel derecho, y seleccionar los cambios.
NOTA: Si queremos eliminar un comportamiento, hay que seleccionar

en el panel derecho.

Insertar un efecto a un texto de forma que, por ejemplo, al pasar el ratn por l, cambie de formato
(esta opcin es muy recomendable en una barra de vnculos):
1. Seleccionar el texto que deseamos que cambie.
2. FormatoComportamientos
3. En el panel derecho que se abre a continuacin, clic en
4. Seleccionar
, y cambiar el color, tamao, etc. en
que se aada borde, sombreado, etc. en
.
IMPORTANTE!: Si elegimos
retirar el puntero del ratn.

/ Cambiar propiedad.
; podemos hacer

, el texto retornar a su formato original al

NOTA: Al igual que en el caso anterior, por defecto, el efecto se producir al pasar el puntero
del ratn sobre el texto seleccionado. Si queremos cambiar esto, hay que hacer clic sobre
en el panel derecho y cambiarlo.

Hacer que al pasar el ratn por una imagen aparezca otra imagen (imagen de reemplazo):
1. Insertar la imagen original y seleccionarla.
2. FormatoComportamientos
3. En el panel derecho que se abre a continuacin seleccionar
4. Clic en

/ Intercambiar imagen.

para seleccionar la imagen de reemplazo; si seleccionamos la opcin

, una vez el usuario de nuestra pgina deje de pasar el puntero del

ratn por la imagen se volver a la imagen original.

17

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

NOTA: Por defecto, la imagen de reemplazo aparecer al pasar el puntero del ratn sobre el texto
seleccionado. Si queremos cambiar esto, hay que hacer clic sobre
en el panel derecho
y cambiarlo.
NOTA: Otra variante es hacer que, al pasar el ratn por un determinado texto, se cambie una imagen
original por otra de reemplazo; para ello, basta seleccionar el texto en cuestin en el paso 1.

Revisar ortografa: HerramientasOrtografa

(o bien, pulsar F7)

Ejercicio 15: a) Inserta al menos una ventana emergente.

b) Inserta efectos en algunos textos.
c) Inserta alguna imagen de reemplazo.
d) Revisa la ortografa de todas las pginas.

9. PUBLICAR EL WEB

En primer lugar, conviene saber que existen herramientas gratuitas para crear nuestro web gratis,
como por ejemplo: http://www.creatupropiaweb.com/publicar/publicar.htm

Hosting

(alojamiento web): Consiste en, una vez ultimado, enviar la totalidad de nuestro Web
(archivos, sonido, imgenes, vdeos, etc) a un determinado proveedor, el cual nos garantizar que
cualquier usuario de Internet a nivel mundial podr acceder a l desde cualquier ordenador conectado
a la red. Para ello, tendremos que enviar todos los archivos que componen nuestro Web
(IMPORTANTE!: Suele ser necesario llamar index a la pgina principal) al proveedor elegido por
medio de cualquier programa de transmisin de archivos (tambin llamado ftp: file transfer protocol),
del tipo filezilla, cute ftp, WS ftp, etc., los cuales pueden encontrarse gratis en la red. Existen varias
posibilidades de hosting:
1. Alojamiento web gratuito: Es ms limitado que el de pago, y suele agregar publicidad, pero es
gratis He aqu una lista de servidores (algunos pueden estar obsoletos a da de hoy):

http://260mb.net/

100 MB de espacio

50 MB de espacio

15 MB de espacio

Ofrecen hasta 10 GB de espacio en disco.

www.iespana.es.
Ofrecen 100Mb de espacio, acceso va Web o FTP
,trfico ilimitado, herramientas para principiantes, libros de visita,
estadsticas detalladas de tus visitas, etc. Tienes que soportar su
publicidad, un banner enorme debajo de la pgina o, mandndoles un
correo a esta direccin (popup@iespana.es), una ventana popup al entrar
en tu pgina. Direccin URL que obtienes: http://tu_nombre.iespana.es.
www.tripod.lycos.es.
Ofrecen 50Mb, acceso FTP EN LA PROPIA
WEB, herramientas para principiantes, la publicidad es personalizable; lo
que tiene de malo es que es muy difcil subir tu sitio si tienes que
manejarte con varias carpetas, ya que no te permite abrirlas. URL tipo
http://usuarios.lycos.es/tu_nombre. Soporte php y sql,
http://galeon.hispavista.com/
Ofrecen 15Mb, acceso Web, asistente
para principiantes, plantillas ya creada , y recursos para tus pginas como
libro de visitas, foro, Chat, formularios, lbum de fotos, etc.. URL tipo
http://tu_nombre.galeon.com

18

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

GratisWeb.
Te dan 50Mb de espacio gratuito, asistente que te guiar
paso a paso, gestor de archivos; soporta ftp.
50 MB de espacio
www.telepolis.com.
Ofrecen 50Mb, acceso Web, herramientas y
asistente para principiantes. Tienes que soportar publicidad tipo popup al
entrar en tu Web; tienes que instalarte un pack al registrarte (noticias en
tu email, boletn de pginas en telepolis, asistente para navegacin, la
pagina de telepolis como inicio) que luego puedes desinstalar. URL tipo
http://club.telepolis.com/tu_nombre .

50 MB de espacio


500 Mb de espacio

http://miarroba.com.
Ofrecen 25Mb, acceso Web FTP, transferencia
ilimitada, estadsticas completa. Tienes que soportar su publicidad (Nada
molesta). URL tipo http://tu_nombre.webcindario.com. Bases de datos,
php, etc. Muchos recursos gratuitos para crear tu sitio (PHP5, MySql5.x).

UnLugar.com 25Mb de espacio gratuito, ftp, cuentas de correo,

alojamiento por tiempo ilimitado.

25Mb de espacio

Ilimitado

Sin especificar

50Mb de espacio


50Mb de espacio

ijijiji ,com Diseo propio, transferencia ilimitada, espacio ilimitado,

recursos, nombre tipo http://hippo.ijijiji.com - http://hippo.cute.ijijiji.com http://hippo.album.ijijiji.com
Personales.com Te ofrecen 30Mb, plantillas prediseadas, gestor de
imgenes texto y fotos, mltiples subdominios y dominios para elegir.
Amigar.com.
Ms que un sitio para alojar tu Web se trata de un
servidor privado, donde crear tu espacio, con asistente, recursos; tienes
que ser mayor de 18 aos para registrarte.
En ingls. 50 Megas Gratis para tu Web. URL
www.atspace.com.
tipo http://atspace.tu nombre
http://freeservers.com.
Te dan 50Mb, herramientas bsicas para
iniciados y Web ftp; lo malo de este hosting es la publicidad. URL del tipo
http://tu_nombre.4t.com o http://tu_nombre.freeservers.com, o cualquier
otro, ya que puedes elegir entre varias opciones.

Tresuvesdobles

Alojamiento gratuito con soporte PHP y ASP, bases de datos MySQL y

Access. Sin publicidad. Espacio en disco y transferencia ajustados a cada
necesidad.

Metropoli 2000

Es un lugar donde te ofrecen espacio gratuito para tu pgina y un montn

de recursos: PHP, MySQL, espacio ilimitado, promocin...

Tripod Espaa

Tambin para pginas PHP y base de datos MySQL.

comunalia

Ofrecen espacio ilimitado y gratuito para alojar una web con tecnologas
PHP, MySQL y otras.

Galen

Es otro gran sitio donde publicar. Ofrecen espacio de 20 Mb y no colocan

banners en las pginas.

Aldea Virtual

Alojamiento 100% gratis. Espacio web ilimitado con ftp y todo lo

necesario. Tambin hosting vip GRATIS con mysql, php, cgis y mas...

Vivelared

Servicios de alojamiento gratuito de calidad, transferencia ilimitada,

servicios de dns, mail, php y mysql sin restricciones.

(Busca por ti mismo ms sitios; slo tienes que poner en Google, por ejemplo, hosting gratis)

19

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

Por ejemplo, para subir nuestro web al portal de hosting gratuito FTP 260MB:
1 Entrar en www.260mb.com
2 Clic en Quiero registrarme
3 Elegir nombre de dominio y contrasea, e indicar la direccin de correo donde queremos
que nos enven los datos de nuestra cuenta.
4 Ir a nuestro correo, abrir el mensaje que contiene los datos de nuestra nueva cuenta (Ojo!
En Hotmail se va a Correo no deseado), y activar sta (elegir DO NOT INSTALL SCRIPT).
Conviene copiar los datos a un archivo de texto:

.
5 A continuacin tenemos que descargarnos un programa gestor de FTP, como por ejemplo
Filezilla (https://filezilla-project.org/download.php), que no necesita instalacin.
6 Una vez instalado, lo abrimos, e indicamos los datos que nos han enviado del servidor ftp:
Servidor: ftp.260mb.org

Nombre de usuario: mb260_13289870 Contrasea: **********

Observamos dos paneles: el izquierdo es nuestro ordenador, y el derecho es el servidor

remoto, donde tenemos que subir los archivos de nuestro web. Para ello, seleccionamos
stos en el panel izquierdo y los movemos a la carpeta htdocs. Es importante que exista la
pgina index.html.
7 Si hemos seguido los pasos anteriores correctamente, podremos ingresar en un navegador
la URL que nos han enviado (http://cristianeivan.260mb.org en este ejemplo) y ver
nuestro web.
2. Otra posibilidad puede ser recurrir a nuestro proveedor de servicios de Internet (Telefnica,
Jazztel, Ono, etc.), el cual, adems de la propia conexin a Internet, generalmente ofrece dentro
del importe del contrato la posibilidad de almacenamiento web, si bien con bastantes limitaciones
en la mayora de los casos.
3. Alojamiento web de pago: La mayor parte de los proveedores ofrecen, adems, otros servicios:
compra de dominios, correo electrnico, etc.
www.guebs.com/

Desde slo 3 al mes nos oferecen 100 MB de espacio

www.arsys.es

Por 18 al trimestre ofrecen 200 MB

www.1and1.es/hosting

Desde 3 /mes; 250 MB

20

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

www.piensasolutions.com

Desde 2 /mes; 100 MB

www.hostalia.com/

Por 4 /mes slo ofrecen 30 MB

www.evidaliahost.com/

Desde 2 /mes; 100 MB

www.interdominios.com/

Desde 6 /mes ofrecen 800 MB

(Busca por ti mismo ms sitios; slo tienes que poner en Google, por ejemplo, hosting)

10. AADIR UN FAVICON

Vamos a ver cmo conseguir que, una vez publicado nuestro Web, en la barra de direcciones
del navegador aparezca, junto a la URL de nuestro Web, un icono identificativo previamente escogido
por nosotros. Tambin, este icono se ver en Favoritos de Explorer, o Marcadores de Mozilla. Este
icono se suele llamar favicon:

Un favicon es un archivo de imagen que suele tener extensin .ico. El que funcione o no
nuestro favicon en los distintos navegadores suele ser, a veces, algo impredecible, errtico e
inestable, sobre todo en Explorer. Para asegurarnos de que funcione, se recomienda que tenga un
tamao de 16x16 pxeles, 16 colores (4 bits), y extensin .ico (no .bmp, gif o jpg). En primer lugar,
tendremos que crear el archivo favicon. He aqu una lista de programas para ello:
http://tools.dynamicdrive.com/favicon/
http://www.genfavicon.com/es/
http://www.favikon.com/

Si queremos tener posibilidades de que funcione siempre, no se recomienda crearlo con Paint,
PhotoShop, etc. Una vez creado el favicon, para conseguir nuestro objetivo de que se vea en la barra
de direcciones tenemos dos posibilidades. La primera se trata de colocar un icono a todo un sitio Web
entero. Con la segunda opcin podremos asignar un icono en una pgina de manera independiente:
1. Colocar un icono en un Web de manera global:
Para ello, debemos editar un archivo .ico y darle el nombre "favicon.ico". Este archivo lo
colocaremos en el directorio raz del dominio. Cuando se introduzca en favoritos cualquier pgina del
sitio, en principio se ver el icono seleccionado.
Ahora bien, en general el procedimiento anterior suele funcionar con Mozilla, pero no con
Explorer. En tal caso, tenemos una segunda opcin:
2. Colocar un icono especfico en una pgina
En este caso tenemos que colocar una etiqueta en la cabecera del documento HTML (entre
<head> y <head>). Esta etiqueta la tenemos que colocar en cada pgina que queramos asociar
con un icono:
<link rel="shortcut icon" href="myicono.ico">

21

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

En el atributo href de la etiqueta anterior, se ha de colocar el nombre del icono que queremos
utilizar y la ruta para acceder a l. En el caso del ejemplo anterior se supone que un archivo llamado
myicono.ico estar en el mismo directorio que la pgina web.
Ahora bien, no siempre tenemos acceso al directorio raz del dominio. Imaginemos que
publicamos nuestro web en Guebs; en este caso nunca tendremos acceso al directorio raz,
www.guebs.com, sino que tendremos acceso al directorio que nos hayan asignado, por ejemplo
www.guebs.com/mipagina. Para este caso, tenemos una segunda manera de insertar el icono.
<link rel="shortcut icon" href="http://www.alfonsogonzalez.es/favicon.ico" type="image/x-icon">
Es decir, hemos indicado la ruta de acceso completa, y aadido el atributo type. De esta
manera, es ms probable que funcione.

11. POSICIONAMIENTO WEB

Consiste en conseguir, una vez realizado nuestro Web y publicado, que ste se agregue a las bases
de datos de los motores y directorios de bsqueda ms utilizados en la red (Google, Yahoo, Altavista,
etc.). Por cierto, hay que tener en cuenta que Google responde a alrededor del 60 % de las
bsquedas en la red. De nuevo, existen dos posibilidades para ello: gratis, o pagando. En el primer
caso, he aqu algunos ejemplos:

http://www.cyler.com/agregaWeb/

Elegir search engine submission, y a

continuacin, free URL submission; tras una
descripcin nuestra de nuestro web, generar
las metaetiquetas para pegar a nuestro cdigo
HTML.

http://docs.yahoo.com/info/suggest/

Para posicionarse en el buscador de yahoo.

http://www.google.com/addurl.html

Para posicionarse en el buscador de google

(ahora bien, ya nos avisan de que no nos
prometen resultados inmediatos).

http://www.google.com/intl/es/addurl.html
http://google.dirson.com/posicionamiento.net/

Se trata de un interesante tutorial que nos da

consejos para posicionarnos en google con un
alto grado de xito.

Usualmente los resultados sern ms cmodos y quiz mejores en el caso de que estemos
dispuestos a pagar una cantidad; el problema es que esta cantidad suele ser elevada para el bolsillo
de un particular, por lo que es ms frecuente su uso en el caso de empresas. SEO son las siglas de
"Search Engine optimizar" (Optimizador de Buscadores). Se trata de una persona o empresa que se
encarga de que una pgina web aparezca en las primeras posiciones dentro de los resultados de un
buscador, en relacin a una serie de palabras o trminos. Hay una gran oferta en la red (basta con
poner posicionamiento web en cualquier buscador):
www.canalip.com

www.Hurra.com/Posicionamiento

www.posicionamientoweb.com/

www.serviweb.es/

www.xeoweb.com/

22

www.davilac.es/posicionamiento
www.seoposicion.com/

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

Pero, adems de la posibilidad de que nuestra Web est presente en las bases de datos de los
navegadores, tambin es muy recomendable poner las cosas fciles a los buscadores,
fundamentalmente intentando que en el ttulo de cada pgina aparezcan las palabras claves
deseadas (con las que queremos que encuentren nuestro web desde cualquier buscador); a ello
podemos aadir la utilizacin de metaetiquetas: etiquetas HTML que se insertan en la cabecera de la
pgina (entre <HEAD> y </HEAD>) y que nos permiten incluir en ellas la informacin que posibilitar a
los buscadores localizar nuestra pgina:
1. Botn derecho sobre la pgina principal>Propiedades de pgina>Ficha General
2. Escribir en el campo Ttulo: un ttulo de la pgina que sirva adems como palabra clave
descriptiva del web. Se recomienda no usar maysculas.9
3. Escribir en el campo Palabras clave: las palabras que resumen el contenido de nuestro Web,
separadas por comas; no conviene usar maysculas, ni extenderse mucho.
4. Escribir en el campo Descripcin de la pgina: una breve descripcin de nuestro Web, la cual
aparecer, por ejemplo, en Google cada vez que ste encuentre nuestro Web.
Si activamos el panel Cdigo para visualizar el cdigo HTML de la pgina, podremos observar:
<title>titulo_de_la_pagina</title>

Ttulo de la pgina

junto con las siguientes metaetiquetas en la cabecera de la pgina:

<META name="keywords" content="" />

Palabras clave de bsqueda

< META name="Description" content="" />

Descripcin del contenido del Web

Finalmente, hay que resear que lo que se recomienda vivamente para poder aumentar nuestro
pagerank -una especie de ndice de popularidad en Google- es lograr un gran nmero de enlaces a
nuestro web en otros webs.

No todos los buscadores funcionan igual: Google, por ejemplo tiene ms en cuenta las palabras clave en el
ttulo de la pgina (paso 2), y no las metaetiquetas de los pasos 3 y 4

23

Alfonso Gonzlez
I.E.S. Fernando de Mena
Curso 2013-2014

ACTIVIDAD FINAL: DISEO (por parejas) DE UN WEB DE

TEMA A ELEGIR
En primer lugar, cada alumno o pareja deber elegir el tema de su Web (deportes, msica, cine,
cultura, ciencia, etc.) y, una vez recibido el visto bueno del profesor, pensar qu estructura
tendr dicho Web.
A continuacin, habr que crear la estructura de carpetas y subcarpetas (imgenes, vdeos,
msica, etc.) del Web y sus distintas pginas (ver pgs. 2 y 3), utilizando obligatoriamente
plantillas (pgs. 3 a 5) o marcos (pg. 5).
Dicho Web deber implementar algunos de los siguientes aspectos (en negrita figuran aquellos
que debern ser incorporados obligatoriamente):
1. Utilizar tablas (pg. 11) para organizar la informacin.
2. Listas anidadas (pg. 8)
3. Lneas horizontales (pg. 8)
4. Marcadores para acceder a una lista alfabtica (pg. 9)
5. Hipervnculo a Web de tema relacionado (pg. 10)
6. Hipervnculo de correo (pg. 10) para que los que accedan a nuestro Web puedan
mandarnos algn mensaje, sugerencia, etc.
7. Hipervnculo para la descarga de archivos (pg. 10)
8. Insertar imgenes (pg. 12)
9. Insertar gif animados (pg. 12)
10. Mapa imagen con hipervnculos (pg. 12)
11. Botones interactivos (pg. 13)
12. Sonidos (pg. 13) y vdeos (pg. 14)
13. Contador de visitas (pg. 16)
14. Incorporar animaciones y efectos dinmicos a los distintos elementos (letras, texto,
imgenes, etc.) del Web (pg. 17)
15. Transiciones atractivas entre las distintas pginas del Web (pg. 13)
16. Una presentacin PowerPoint incrustada (pg. 16)
17. Incorporar un foro de discusin (pg. 16)
18. Mensajes emergentes (pg. 16)
19. Insertar ventana emergente (pg. 17)
20. Insertar una imagen de reemplazo (pg. 17)
21. Revisar la ortografa de todo el Web (pg. 18)
(Evidentemente, cuantos ms tems de los anteriores incorpore el Web, de forma armonizada y
atractiva, mejor nota se obtendr)
Finalmente, se conseguir la mxima nota si se consigue publicar el Web siguiendo las
recomendaciones de las pg. 18 y ss., y ms an, si se consigue asociarle un favicon (pg. 20).

Socullamos, marzo de 2014

24