UNIVERSIDAD FRANCISCO GAVIDIA

Objetivos:

Aprender a como organizar el contenido de un sitio Web

mediante el uso de carpetas
Aplicar formato de texto en una pgina Web utilizando
las herramientas de Expression Web
Aprender a insertar hipervnculos y botones interactivos
para enlazar las pginas que formarn el sitio.

A la hora de disear un sitio Web, es conveniente disear un boceto sobre

cmo va a ser la Web. Tenemos que decidir cmo vamos a estructurarla.
Lo ms sencillo es no estructurarla, colocando todos los archivos en el
mismo directorio. Esto se suele hacer en sitios personales, ya que el
nmero de archivos es pequeo. Sin embargo este es un mal hbito, ya
que si la Web crece, terminaremos perdidos en un mar de archivos.

Para Insertar texto lo nico que debemos hacer es

escribir en la pantalla, como si estuviramos en un
procesador de textos como Word.

BARRA DE FORMATO
5
1

Estilos
Tipo de letra
3. Tamao de fuente
4. Deshacer y rehacer
5. Negrita, cursiva y subrayado
1.
2.

6
Alineacin del texto:
izquierda, centrado y derecha
7. Numeracin y Vietas
8. Sangra
9. Bordes
6.

Desde el panel de tareas

propiedades de css.
fondo

Configuracin de
listas y tablas

Tipo de letra

Corrector ortogrfico
Con Microsoft Expression Web puede buscar y corregir palabras con
errores de ortografa en una o varias pginas o carpetas, o en un sitio
Web entero. Tambin puede corregir o pasar por alto los errores
ortogrficos directamente en la vista Diseo de una pgina Web.
Si no desea que Expression Web marque una palabra concreta como
incorrecta, puede agregarla al diccionario personalizado predeterminado.

Como notar en la imagen, puede ejecutar la correccin por medio del

men Herramientas o directamente con la tecla F7.

Sin errores

Nuestro sitio Web no debe mostrar errores ya que causara una

mala impresin en nuestros visitantes. Por ello, es recomendable
pasar el corrector ortogrfico y corregir cualquier error.

INTRODUCIR VIETAS

Insertar vietas

La utilizacin de las vietas es exactamente como

en Word.

Imgenes

Para mostrar fotos o dibujos, se suelen usar

principalmente dos formatos de imagen: GIF y
JPG. El primero se suele usar para dibujos y
pequeas fotos de pocos colores e imgenes
animadas.
JPG es usado para presentar fotos a todo color.

Hipervnculos
Vamos a ver qu son los hipervnculos y como
usarlos para hacer navegable nuestro sitio Web

de

forma que los usuarios puedan ir de una pgina Web a

otra. Aprenderemos qu tipos de hipervnculos existen
y para qu sirven.

Qu es un hipervnculo?
Un hipervnculo es un enlace, normalmente
entre dos pginas web de un mismo sitio, pero
un enlace tambin puede apuntar a una
pgina de otro sitio web, a un fichero, a una
imagen, etc. Para navegar al destino al que
apunta el enlace, hemos de hacer clic sobre
l. Tambin se conocen como hiperenlaces,
enlaces o links.

Cont.
Normalmente el destino se puede conocer mirando la
barra de estado del navegador cuando el ratn est
sobre el hipervnculo. Dependiendo de cual sea el
destino, hacer clic en un hipervnculo puede hacer que
ocurran varias cosas. Si el destino es otra pgina web,
el navegador la cargar y la mostrar, pero si el destino
es un documento de Word, el navegador nos dar la
posibilidad de abrir una sesin de Word para visualizarlo
o de guardar el archivo.

Cont.

Por lo tanto, podemos usar los hipervnculos para

conducir a los visitantes de nuestro sitio web por
donde queramos. Adems, si queremos que se
pongan en contacto con nosotros, nada mejor que
ofrecerles

un

hipervnculo

nuestro

correo

electrnico. Vamos a ver cmo hacer todo esto.

Tipos de Hipervnculos.

Hipervnculo de texto.
Un hipervnculo de texto es un enlace que se encuentra
asociado a un texto, de forma que si hacemos clic sobre ese
texto, navegamos dnde indique el hipervnculo. Por defecto,
cuando creamos un hipervnculo de texto, el texto aparece
subrayado y en un color distinto al del texto normal, de forma
que el visitante sepa que existe ese enlace. Si volvemos a la
pgina despus de visitar el enlace, este aparecer con otro
tono tambin. Aunque es interesante diferenciar el hiperenlace,
es posible que no queramos que aparezca as. Ms adelante
veremos cmo hacer esto.

Cont.

Hipervnculo de Imagen.
Un hipervnculo de imagen es un enlace que se encuentra
asociado a una imagen, de forma que si hacemos clic sobre esa
imagen, navegamos dnde indique el hipervnculo. Por defecto.
cuando creamos un hipervnculo de imagen, la imagen aparece
rodeada de un borde con un color llamativo para que el visitante
sepa que existe ese enlace.
Al igual que con el texto, ms adelante veremos cmo podemos
modificar este comportamiento.
Por otra parte, los hipervnculos pueden referirse a pginas del
mismo sitio web o de otros sitios web.

Hipervnculo a una pgina del propio sitio web (pgina local).

Un hipervnculo local

Es un vnculo a una pgina que se encuentra en el mismo sitio web. Esto

significa que el archivo de la pgina web a la que se refiere el vnculo
se encuentra en el mismo disco que la pgina que contiene el vnculo.
As, para referirnos a ella tan solo basta con poner la ruta o direccin
en el disco duro. Si se encuentra en la misma carpeta, basta con poner
su nombre. Si se encuentra en una carpeta que cuelga de la actual,
hay que poner el nombre de la carpeta y el del archivo.
Por ejemplo, supongamos que tenemos un vnculo desde esta pgina
a otra llamada curso que est en la carpeta access.
El vnculo sera: access/curso.htm

Cont.

Hipervnculo a otro sitio web (pgina externa).

Un hipervnculo externo es un vnculo a una pgina

en Internet. Es un vnculo a cualquier otro lugar
fuera del sitio actual. Cuando ponemos un vnculo
externo, escribimos la direccin completa de la
pgina incluido http://www.... As,
http://www.ufg.edu.sv

Cont.
Vamos a explicar las partes de las que se compone una
direccin web completa:

http --> es el protocolo utilizado para pginas web

(HiperText Transfer Protocol)

www.ufg.edu.sv --> es el nombre DNS del servidor de

UFG

Mas ejemplos: http://www.mined.gob.sv/

Cont.
Hipervnculo a una direccin de correo electrnico.

Un hipervnculo a una direccin de correo electrnico es un vnculo

que contiene una direccin de correo. Al pulsar en l, automticamente
se abre el programa de correo que tenga el usuario instalado para
poder escribir a esa direccin de correo. Por ejemplo, si nuestra
direccin de correo es juanperez@ufg.edu.sv, escribiremos esta
direccin de correo como direccin al insertar el hipervnculo.

La direccin de correo se descompone en:

juanperez--> nombre del usuario

ufg.edu.sv --> nombre del servidor de correo

Introducir hipervnculos en el texto.

Para

introducir

un

hipervnculo

tenemos

opciones:
Seleccionamos el texto asociado al enlace.
A continuacin podemos :

Pulsar en el men Insertar y despus, en

Hipervnculo.

Pulsar el botn de la barra formato .

Presionar desde el teclado Alt + Ctrl + K.

Cont.

Veamos un ejemplo siguiendo la primera

opcin.

Aparecer el cuadro de dilogo Insertar hipervnculo

Cont.

En Texto: aparece el texto que hemos seleccionado. Podemos cambiar

este campo para que aparezca otro texto, cambiando entonces el texto de
la pgina.

En Direccin: escribiremos la direccin a dnde nos tiene que llevar el

hipervnculo, por ejemplo: http://www.ufg.edu.sv De esta forma crearemos
un vnculo a otra pgina Web, a la que podremos viajar si disponemos de
conexin a Internet.

Pulsamos en Aceptar.

Ntese que el texto cambia de color y aparece subrayado para indicar que
es un hipervnculo. Si quisiramos introducir un enlace al correo,
escribiramos la direccin de correo en Direccin.

Cont.

La pantalla nos mostrar algo similar a esto:

Hipervnculo a la
UFG
Note como
hipervnculo
subrayado.

el texto que convertimos en

cambia de color y aparece

Botones para desplazarse

Vamos a ver cmo crear algunos botones bsicos que
son muy usados en la mayora de las pginas web,
botones que atreves de un estilo, ya sea color o
imgenes.

Como primer paso hacemos clic en el men Insertar en

el recuadrado desplegado seleccionamos la opcin
Botn interactivo.

Cont.
En sus

propiedades,

ponemos

lo

que

queramos que salga en el botn en Texto del

botn:

Para crear un vnculo al ancla, escribimos su

nombre predecido del smbolo #. Supongamos
que el ancla que hemos creado se llama ancla
(en un alarde de originalidad). Como vemos en
el dibujo en el campo Vnculo, hemos escrito
#ancla.

El resto de opciones las configuramos como

queramos.

Podemos poner tantas anclas como queramos,

siempre que no mezclemos sus nombres.

Como ejemplo, al pulsar este botn iremos

hacia arriba, al principio del apartado.

Botn para una web externa a nuestro sitio

Texto
dentro
del botn

Direccin web
a la que se
hace referencia

Y de este modo tenemos ya un botn con un vinculo a

una pagina externa, nuestra pagina quedara mas o
menos de la siguiente manera.