Añadir
páginas a la
Web
Vamos a
enlazar
otras
páginas a
nuestra Web.
Vamos a
hacer
un motivo
navideño
para ésta
página, los
elementos
que he usado
los puedes
descargar
aquí.
Para
enlazar las
cuatro
páginas de
ejercicios
que hemos
hecho, vamos
a hacer un
<Menú>.
Usualmente
está en el
index que es
la portada
de nuestra
web, pero
por motivos
didácticos
lo hemos
dejamos para
el final.
A
continuación
voy a
diseñar un
conjunto de
Tablas para
elaborar un
menú, hay
distintos
diseños que
podemos
realizar:
Con bordes
visibles o
invisibles,
del color
del fondo o
colores
distintos; o
simple y
llanamente
colocar los
botones que
enlazarán
nuestras
páginas sin
tablas e
incluso no
usar botones
sino texto.
Podemos
utilizar los
botones que
trae el
programa,
hacerlos
nosotros
mismos o
buscarlos
por la red,
en las
secciones de
gif animados
hay unos muy
bonitos. Aquí un video donde describo cómo hice la del ejercicio:
1.
Hacemos
cuatro
tablas, con
un color
distinto al
fondo, para
poder
hacerlo
debemos
cambiar al
fondo que
deseamos en
las
propiedades
de la tabla.
Colocamos la
primera,
Autojustar
al
contenido,
colocas el
cursos fuera
y bajas otra
línea; van a
quedar
cuatro
tablas una
debajo de la
otra como se
muestra en
el Punto 1
de la
imagen.
Luego vas a
colocar un
botón dentro
de cada uno
de los
espacios
como en el
2. A
continuación
con el
puntero al
lado del
botón,
seleccionando
el nuevo
objeto como
se muestra
en el Punto
3 , vamos
añadiendo
columnas,
con los
valores que
observamos
del punto 4:
Una vez
hecha esas
Columnas,
como quería
el mismo
fondo de la
tabla, he
colocado el
cursor
dentro de la
nueva
columna
y en
Tablas/
Propiedades
de la celda,
he puse la
dirección
htm del
fondo verde.
Luego
escribí con
la <Font
Vivaldi> el
número de
ejercicio,
ya estamos
listos para
enlazar cada
página.
2. Vamos
a tener a
mano la
dirección
htm de cada
una de las
web de los
ejercicios.
Pinchamos el
botón para
seleccionarlo
y en
<Insertar
hipervínculo>.
Al abrir el
cuadro de
diálogo
ponemos la
dirección
correspondiente
y sí
queremos que
cambie en la
misma página
a la otra,
seleccionamos
<El mismo
marco>cuyo
destino es
<_self> .
Cuando
hacemos
referencia a
enlaces
externos a
nuestra
propia
página es
mejor usar
una Nueva
ventana, en
ese caso el
destino es <
_blank>.
Enlazamos
las cuatro
páginas de
ejercicios
ahora.
3. Vamos
a añadir
elementos:
Colocamos
las Scrollbar
a juego con
la página,
lo
colocaremos
antes de la
última
etiqueta
</body> .
<style
type="text/css">
html
{
scrollbar-face-color:
#FF0000
;
/*barra*/
scrollbar-arrow-color:
#999900;
/*flecha*/
scrollbar-track-color:
#069606
;
/*fondo*/
scrollbar-shadow-color:
#E8C8DF;
/*sombra*/
scrollbar-highlight-color:
#999900;
/*sombra
fondo*/
scrollbar-3dlight-color:
#FF66FF
;
/*sombra
3D*/
scrollbar-darkshadow-color:
#666600;
/*sombra
fondo
oscura*/
}
</style>
|
4.
Colocaremos
el nombre de
la Web,
coloqué dos
puntos antes
y después
del nombre
de la Web y
coloca
también el
archivo midi
que viene
con los
Materiales:
5. Hay
elementos
útiles en el índex
de una web. Vamos a
incorporar
Mandar un
correo desde
tu página web.
Sustituye mi
dirección de
correo por
la tuya.
Cambia el
color de la
letra en la
vista de
Diseño. Ya
tiene un gif
incorporado
el código.
<img
border="0"
src="http://pspcongeisa.webcindario.com/Correo.png"
width="25"
height="17">Puedes
mandarme
un
correo
a la
siguiente
dirección:</font> </font>
<a
href="clementinageisa@hotmail.com"><A
HREF="mailto:clementinageisa@hotmail.com?&subject=Consulta">
clementinageisa@hotmail.com</A></a> |
Colocar
el código en
este lugar:
6.
Como es un
tema
navideño le
daremos un
efecto muy
bonito de
nieve. Para
ello vamos a
pegar el
código antes
de </body>.
Esta vez es
un efecto de
nieve que
cae por la
página que
vamos a
copiar de
aqui.
Primero
vamos a
guardar el gif de la
nieve que
viene con
los
materiales
llamado
snow.gif
y
guardarlo en
nuestro
alojamiento...puedes
usar otro gif de tu
agrado, luego
pegamos el
código
debajo del
código que
pusiste en
el paso
anterior:
7. Guarda
y cuelga la
página en tu
espacio web.
La página
debe tener
un aspecto
parecido al
que verás
pinchando
aquí.
Puede que no
se vea bien
el menú en
el
explorador
Mozilla
Firefox,
preferentemente
míralo en
Internet
Explorer
.
Hay
muchas
formas de
hacer un
fondo,
infinidad de
códigos que
puedes
incorporar y
muchos
portales
para alojar
tus páginas.
Esta serie
de
tutoriales
son sólo las
bases para
comenzar a
elaborar
páginas web.
