UNIVERSIDAD FRANCISCO GAVIDIA

FACULTAD DE INGENIERIA Y SISTEMAS

TECNOLOGIA DE LA INFORMACION DE LAS COMUNICACIONES II

Guía # 2 administración de carpetas, hipervínculos, botones interactivos.

Un Sitio Web

Un sitio Web se compone del conjunto de páginas Web que diseñemos para un objetivo
concreto. Sin embargo, no es lo mismo diseñar un sitio Web para un uso personal que para
una empresa. Cada uno tiene sus necesidades y planificar con antelación qué es lo que
vamos a hacer nos puede evitar muchos problemas posteriores.

¿Qué clase de Web vamos a crear? Existen muchos tipos, pero vamos a nombrar algunos
de los más utilizados:

Sitio personal: Son los sitios diseñados para conocer la vida y obra de alguien. Es el más
sencillo, podemos usar un alojamiento Web gratuito (normalmente incluyen publicidad) y se
compone de unas pocas páginas.

Sitio de una empresa: Son los sitios diseñados para dar a conocer una empresa. Pueden
ser sencillos, en el caso de empresas pequeñas, o muy complejos, en el caso de grandes
empresas. Normalmente tienen una dirección propia (www.nombre_de_la_empresa.com) y
almacenan información corporativa.

Sitio de una tienda online: Son los sitios diseñados para vender por Internet. Cualquier
empresa, grande o pequeña, pueden llegar a cualquier cliente del planeta gracias a Internet.
Este puede también estar incluido en el sitio de una empresa.

Sitio de un portal: Son los sitios especializados en recopilar recursos sobre un tema o
temas determinados.

Cada sitio requiere una planificación previa. Lo más usual es dibujar un esquema en papel
sobre cada parte de nuestra Web, y basarnos en él a la hora del diseño. Naturalmente es
conveniente seguir una determinada estética relacionada con la clase de sitio Web que
estemos diseñando, así como evitar recargar en exceso las páginas. FrontPage nos
proporciona diversos temas ya definidos que nos ayudarán a dotar de una apariencia
adecuada a nuestro sitio Web.

Estructura de Archivos de un Sitio Web

A la hora de diseñar un sitio Web, es conveniente diseñar un croquis sobre cómo va a ser
la Web. Tenemos que decidir cómo vamos a estructurarla.

Lo más sencillo es no estructurarla, poniendo todos los archivos en el mismo directorio.

Esto se suele hacer en sitios personales, ya que el número de archivos es pequeño. Sin
embargo este es un mal hábito, ya que si la Web crece, acabaremos perdidos en un mar
de archivos.

Por ello es conveniente hacer, por lo menos, una pequeña división, colocando los archivos
de cada clase en un directorio determinado. Es decir, los archivos de fotos en un directorio
llamado por ejemplo “imágenes”, los archivos de audio en otra carpeta “audios” y así
sucesivamente.

Naturalmente si el sitio Web es de cierta amplitud, nos acabará sucediendo lo mismo. Por
ello en los sitios Web complejos se suele dividir el sitio Web en partes y cada parte se
almacena en un lugar distinto. Cada uno de estos lugares posee sus propias carpetas.

Expression web nos proporciona las herramientas adecuadas para poder estructurar
nuestro sitio Web. Estas herramientas son los iconos Carpetas y Exploración en la barra de
vistas.

Como es natural, el destino de un sitio Web es ser visitado por personas a través de Internet,
pero para diseñarlo no hace falta que tengamos conexión a Internet.

Podemos construir nuestro sitio en una computadora y luego almacenarlo directamente en

un servidor, para que pueda ser visto inmediatamente por cualquier persona en Internet.
Esto es, trabajando directamente en Internet.
Sin embargo, podemos construir nuestro sitio en nuestra computadora y sin tenerlo
almacenado en un servidor visitarlo tal como lo haría una persona por Internet. Para ello
haremos que Expression Web aloje nuestro sitio Web en nuestra computadora, y trabaje
con él como si fuera una computadora remota de Internet. Esto es perfecto para probar el
buen funcionamiento de nuestro sitio Web y depurar errores.

Crear un Sitio Web con estructura de carpetas

1. Para crear el sitio, lo primero que debemos hacer es aplicar lo visto en la Guía 1,
¿lo recuerda?

2. Después haremos clic en Sitio Web vacío del apartado Nuevo, a continuación
elegimos Web de una página, indicamos la ubicación de la web y para terminar clic
en Aceptar.

Hemos creado el sitio Web. Consta tan sólo de una hoja en blanco.
4. Para crear nuevos directorios (carpetas) :

En la Lista de carpetas y pulsamos con el botón derecho del ratón sobre cualquier parte
vacía de la parte izquierda y hacemos clic en Nuevo – Carpeta con lo cual nos pedirá el
nombre de la nueva carpeta.

Panel de lista de carpetas

No es conveniente usar espacios en blanco, acentos ni la letra ñ en los nombres de

carpetas y archivos, ya que en Internet, los servidores en el que se guarde todo nuestro
trabajo puede que no soporte caracteres españoles, y esto hará que nuestra web no
funcione bien, también hay que tener cuidado con utilizar minúsculas y mayúsculas
combinadas, algunos servidores distinguen entre minúsculas y mayúsculas, en este caso
si una carpeta (por ejemplo) la hemos nombrado en mayúsculas y luego hacemos
referencia1 a ella en minúsculas, algunos servidores la encontrarán y otros no.

Y de esa forma podemos crear cuantas carpetas sean necesarias para la organización del
sitio web.

Se pueden crear más carpetas dentro de las carpetas pero eso dependerá de la estructura
que usted desee, también pueden tener imágenes, sonido, paginas por supuesto, como es
nuestro objetivo.

1
Mas adelante se verá que una referencia es equivalente a un ENLACE o LINK
Para crear sub carpetas dentro de una carpeta basta con que aplique clic derecho sobre la
raíz y luego siga el procedimiento visto anteriormente (clic derecho, nuevo, carpeta).

A continuación cree la siguiente estructura de carpetas:

Elabore una nueva página Web (aplíquele un color de fondo) dentro de la carpeta Páginas
utilizando el botón Nuevo documento

Se creará un nuevo documento HTML de nombre Sin título.html

Ahora guarde la página dentro de la carpeta “Paginas” utilizando el botón guardar.

1. Abra esta capeta

2. mantenga el nombre

Observe el cambio en la estructura de carpetas

Ahora haga lo mismo y cree tres páginas mas de tal forma

que su carpeta Paginas contenga 3 páginas Web con
distinto color de fondo cada una.

Ingresaremos a la página default (doble clic) y crearemos link de texto a las demás páginas.
Crearemos también link por medio de botones que hagan referencia a otras páginas o a la
misma página.

Para crear un link de texto solamente es necesario sombrear el texto que deseamos como
link, en este caso la frase ir a la página 1

Luego de hacer clic a la opción hipervinculo el el cuadro de dialogo buscaremos la pagina1

que es la que queremos que sea el resultado del link.
Luego hacemos clic al botón aceptar el link quedará de la siguiente manera:

El texto quedará subrayado y de otro color indicando que se ha realizado el link, al dar clic
llevaría a la pagina1 (una vez se cargue en el navegador).

Haremos ahora mediante un botón un vínculo (link) a la pagina2, como primer paso en el
menú insertar seleccionaremos botones interactivos.

En el cuadro de dialogo seleccionaremos el botón a nuestro gusto y en el botón examinar

buscaremos el archivo (página Web) a enlazar.
Ir a pagina dos
El resultado sería similar al que se muestra en la
imagen

Ahora vamos a guardar los cambios con lo cual el

programa nos preguntará en que carpeta
queremos guardar las imágenes que “forman” el botón. Se recomienda especificarle que
será dentro de nuestra carpeta creada con nombre Imágenes.

Presione “Cambiar carpeta…”, y en el cuadro de

dialogo “cambiar carpeta” crear una nueva
llamada botones para luego hacer clic en
guardar. De esta forma las imágenes de los
botones quedarán guardadas en una sola
carpeta independientemente de cuantos
botones insertemos.

Por último abra cada página restante y cree vínculos entre ellas de tal forma que se pueda
navegar entre cada página Web.

Ahora comprima su sitio Web con su número de carné UFG y súbalo a U-Virtual.