UNIVERSIDAD FRANCISCO GAVIDIA FACULTAD DE INGENIERIA Y ARQUITECTURA TECNOLOGIA DE LA INFORMACION DE LAS COMUNICACIONES II Gua # 2 administracin de carpetas, hipervnculos, botones

interactivos.
Un Sitio Web Un sitio Web se compone del conjunto de pginas Web que diseemos para un objetivo concreto. Sin embargo, no es lo mismo disear un sitio Web para un uso personal que para una empresa. Cada uno tiene sus necesidades y planificar con antelacin 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 ms utilizados: Sitio personal: Son los sitios diseados para conocer la vida y obra de alguien. Es el ms sencillo, podemos usar un alojamiento Web gratuito (normalmente incluyen publicidad) y se compone de unas pocas pginas. Sitio de una empresa: Son los sitios diseados para dar a conocer una empresa. Pueden ser sencillos, en el caso de empresas pequeas, o muy complejos, en el caso de grandes empresas. Normalmente tienen una direccin propia

(www.nombre_de_la_empresa.com) y almacenan informacin corporativa. Sitio de una tienda online: Son los sitios diseados para vender por Internet. Cualquier empresa, grande o pequea, pueden llegar a cualquier cliente del planeta gracias a Internet. Este puede tambin estar incluido en el sitio de una empresa. Sitio para un portal: Son los sitios especializados en recopilar recursos sobre un tema o temas determinados. Cada sitio requiere una planificacin previa. Lo ms usual es dibujar un esquema en papel sobre cada parte de nuestra Web, y basarnos en l a la hora del diseo. Naturalmente es conveniente seguir una determinada esttica relacionada con la clase de sitio Web que estemos diseando, as como evitar recargar en exceso las pginas. FrontPage nos proporciona diversos temas ya definidos que nos ayudarn a dotar de una apariencia adecuada a nuestro sitio Web.

Estructura de Archivos de un Sitio Web A la hora de disear un sitio Web, es conveniente disear un croquis sobre cmo va a ser la Web. Tenemos que decidir cmo vamos a estructurarla. Lo ms sencillo es no estructurarla, poniendo 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, acabaremos perdidos en un mar de archivos.

Por ello es conveniente hacer, por lo menos, una pequea divisin, colocando los archivos de cada clase en un directorio determinado. Es decir, los archivos de fotos en un directorio llamado por ejemplo imgenes, 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 Exploracin en la barra de vistas. Como es natural, el destino de un sitio Web es ser visitado por personas a travs de Internet, pero para disearlo no hace falta que tengamos conexin 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 hara 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 Gua 1, lo recuerda?

2. Despus haremos clic en Nuevo Sitio, elegimos Sitio Web de una pgina, indicamos la ubicacin de la web y para terminar clic en Aceptar.

Hemos creado el sitio Web. Consta tan slo de una hoja en blanco.

3. Para crear nuevos directorios: En la Lista de carpetas y pulsamos con el botn derecho del ratn sobre cualquier parte vaca 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 espaoles, y esto har que nuestra Web no funcione bien, tambin hay que tener cuidado con utilizar minsculas y maysculas combinadas, algunos servidores las distinguen, en este caso si una carpeta
1

(por

ejemplo) la hemos nombrado en maysculas y luego hacemos referencia a ella en minsculas, algunos servidores la encontrarn y otros no. Y de esa forma podemos crear cuantas carpetas sean necesarias para la organizacin del sitio web. Se pueden crear ms carpetas dentro de las carpetas pero eso depender de la estructura que usted desee, tambin pueden tener imgenes, sonido, paginas por supuesto, como es nuestro objetivo.

Para crear sub carpetas dentro de una carpeta basta con que aplique clic derecho sobre la raz y luego siga el procedimiento visto anteriormente (clic derecho, nuevo, carpeta).
1

Mas adelante se ver que una referencia es equivalente a un ENLACE o LINK

A continuacin cree la siguiente estructura de carpetas:

Elabore una nueva pgina Web (aplquele un color de fondo) dentro de la carpeta Paginas (abra esta carpeta primero) utilizando el botn Nuevo documento

Se crear un nuevo documento HTML de nombre Sin ttulo.html

Ahora guarde la pgina (dentro de la carpeta Paginas) utilizando el botn guardar.

1. Abra esta capeta

2. mantenga el nombre

Observe el cambio en la estructura de carpetas Con la ayuda del men Formato Fondo, cambie color de fondo a su pgina Web. Ahora haga lo mismo y cree tres pginas mas de tal forma que su carpeta Paginas contenga 3 pginas Web en distinto color de fondo cada una.

Abra la pgina default (doble clic), vamos a crear en ella un link de texto a las dems pginas recin agregadas a nuestro sitio. Crearemos tambin link por medio de botones que hagan referencia a otras pginas o a la misma pgina.

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

(Primero digite la frase)

Luego de hacer clic a la opcin hipervinculo el el cuadro de dialogo buscaremos la pagina1 que es la que queremos que sea el destino del link. Si no recuerda el lugar donde guard su sitio, lo encontrar en la carpeta Mis sitios Web dentro de Documentos de su PC.

Luego hacemos clic al botn Aceptar y 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 en el nos llevara a la pagina1 (una vez se cargue la pgina en el navegador).

Haremos ahora mediante un botn un link a la pagina2, como primer paso en el Men Insertar seleccionaremos botones interactivos.

En el cuadro de dialogo seleccionaremos el botn a nuestro gusto y en el botn examinar buscaremos la pgina Web a enlazar.

Ir a pagina dos

El resultado sera 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 imgenes que forman el botn. Se recomienda especificarle que ser dentro de nuestra carpeta creada con nombre Imagenes.

Cambiar la carpeta, y en el cuadro de dialogo cambiar carpeta crear una nueva llamada botones para luego hacer clic en guardar

Ahora haga un nuevo link para la tercera pgina utilizando texto o botn interactivo. Al finalizar, guarde los cambios, comprima la carpeta que contiene su sitio Web.

Pginas web de una Organizacin por medio de plantillas.

Plantillas: Son formatos ya establecidos paginas y pagina maestra. El programa Expression Web nos brinda 3 opciones cada una con varios estilos, estn los sitios personales, los sitios de organizacin y sitios de pequea empresa. Ahora crearemos un sitio web a travs de las plantilla de organizacin. Presionamos el botn Nuevo Sitio y tomamos una plantilla Organizacin 5. de sitios web los cuales contienen estilos,

Ahora veremos que se generan ms carpetas que las que contena el Sitio Web personal de la gua #1, esto es porque los Sitios Web de organizacin son ms Completas dependiendo del rubro de la organizacin y del tamao de la empresa.

Ahora ingresaremos a la carpeta about, Para ver el contenido. Como hemos dicho antes, esta plantilla de sitio nos genera una estructura de carpetas.

Como podemos observar la carpeta contiene una pgina Web de forma automtica. De modo que cada una de las dems carpetas que contienen una pgina est igualmente estructurada.

Veremos el contenido de la pagina haciendo doble clic en default.html

De esta pgina solamente se puede modificar la zona marcada, ya que lo dems es parte de la Pgina Maestra mencionada en la gua #1.

Para modificar la pgina maestra solamente se abre el archivo master.dwt como cualquier otra pgina. Archivo de pgina maestra.

Asi

se

muestra

la

pagina

maestra, aqu es donde se modifica lo que nosotros querramos modificarle al estilo que rije las demas paginas, el color de fondo, las letras, los botones y el espacio donde se ubican los link. Cuando haya modificado cada pgina por separado puede cerrarla con la pestaa:

Luego los cambios deben ser guardados para poder verse en las demas paginas. Es importante tomar en cuenta que la estetica es el principal objetivo de la pgina maestra para establecer un estilo coherente a todas las paginas del Sitio Web. Algunas reas si son

modificables directamente con la barra estndar pero otros no, por ejemplo la zona del men:

De esta barra directamente se puede modificar el color, tamao y tipo de letra pero el fondo no. Pero existe otra opcin para modificar. Estos elementos, ya que las pginas maestras ocupan el estilo CSS2 en el panel de tareas Propiedades de CSS podemos modificar otros aspectos de los elementos de la pgina mster. Solo es necesario ubicarse sobre el elemento que se quiere modificar y buscar la propiedad que se desea transformar.

Basndose en una Organizacin real o ficticia llenar la informacin de las pginas generadas y dar formato a todas las paginas. Cada pgina debe contener imgenes. Luego las carpetas que se generen de los dos ejercicios comprimirlas en una sola carpeta y subirlas a la U-virtual

hojas de estilo en cascada (Cascading Style Sheets, o sus siglas CSS)