Unidad

3. Configurar un sitio local

En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo
modificar las propiedades de los documentos, como puede ser el color de fondo.

3.1. Introduccin

Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un
diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes
de crear las pginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para
contener las imgenes, las animaciones, archivos de tipos especfico, etc., se deben
crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacin
de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.

Despus se podrn copiar los archivos en un servidor web, en el denominado sitio
remoto, lo que equivale a publicar el sitio, de modo que la gente podr verlo en
Internet.

Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la
copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio
remoto.

La organizacin de los archivos en un sitio permite administrar y compartir archivos,
mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el
servidor, etc.

La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya
que cuando se intenta acceder a una URL genrica, el servidor devuelve la pgina con
ese nombre.

Por ejemplo, si escribiramos la direccin genrica http://www.infop.hn en el
navegador, ste intentara cargar la pgina http://www.infop.hn/index.htm, por lo
que se producira un error en el caso de que no existiera ninguna pgina con el
nombre index.htm, y no se podra navegar por el sitio a no ser que se escribiese
exactamente http://www.infop.hn/nombrepagina.htm.

3.2. Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos
la carpeta raz, ya es posible definir el nuevo sitio.

Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o
directamente a Nuevo sitio.

Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los sitios
definidos.

Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin
a la opcin Administrar sitios o Nuevo sitio...

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana

que contiene la lista de sitios locales definidos

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la
misma ventana en la que definir o modificar las caractersticas del sitio.

Las opciones del sitio se agrupan en diferentes categoras que aparecen en la parte
izquierda.

Para visualizar las caractersticas de una categora basta con seleccionarla de la lista
haciendo clic en ella.


Las dos nicas opciones imprescindibles son las que encontramos en la categora Sitio,
y de momento son las nicas que cambiaremos:

Vamos a ver los datos que hay que editar para la categora Datos locales, que ser lo
nico que empleemos de momento:

Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la
lista de sitios.
La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro
local. La carpeta puede contener ya archivos o no.
Estas dos caractersticas son las imprescindibles para definir un sitio local. El resto
son opcionales, y de momento no nos interesan.

Las dems opciones en este momento no nos interesan, ya que estamos definiendo el
sitio local, y no es necesario establecer los datos del servidor en el que estar el sitio
remoto.

Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.

3.3. Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar
sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo.

Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el
men desplegable Archivos.

Para practicar realiza el Ejercicio paso a paso Crear un sitio web local. En este
ejercicio, configuraremos un sitio que iremos completando ms adelante.

Unidad 3. Crear un sitio web local (Ejercicio)

Objetivo

Practicar las operaciones que hay que realizar para crear un sitio sin conexin a
Internet.

En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es
importante que realices los ejercicios por orden, sin saltarte ninguno. Estos ejercicios
estn diseados para ir construyendo una pgina web completa y si intentas realizar
un ejercicio sin haber hecho los anteriores puede que no veas un resultado muy
coherente o no puedas seguir el ejercicio.

Crea una carpeta en tu disco duro, dentro de la carpeta ejercicios donde
guardar los archivos de los distintos que vayamos creando. Llmala mis sitios.
Copia a ella la carpeta cocina que encontrars en la carpeta ejercicios del curso.
Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
Haz clic sobre el men Sitio.
Elige la opcin Administrar sitios. Se abrir una nueva ventana.
Pulsa el botn Nuevo....
Se abrir una nueva ventana, selecciona la opcin Sitio.
En Nombre del sitio escribe Cocina.
En Carpeta del sitio local busca la carpeta cocina que acabas de copiar, y que se
encuentra dentro de la carpeta mis sitios. Seleccinala. Puedes hacerlo a travs
del botn con forma de carpeta.
Pulsa el botn Guardar y el sitio estar listo.

3.4. Ver el sitio

El panel Archivos (men Ventana Archivos o tecla F8) es uno de los paneles ms
importantes de Dreamweaver, ya que nos da acceso a los archivo del sito.

















En este caso vemos todos los documentos creados en nuestro sitio buscar.htm,
paraplantilla.htm, platossemana.htm, postresemana.htm y las carpetas imgenes y
varios.

Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de
una vista a otra hay que pulsar sobre el botn que aparece en la parte superior del
panel y de la ventana.

Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el
del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. Tambin
el servidor de pruebas o las bases de datos.

En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a

la derecha) con nuestros archivos.

Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos y se
relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta
desde Dreamweaver, automticamente actualizar todas las referencias a ese archivo
(enlaces desde otras pginas, origen de la imagen, etc).

En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las pginas no
se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc, ya
que Dreamweaver simplemente no encontrar la pgina.

Al modificar algn objeto que es referenciado por algn otro documento, se muestra
una ventana similar a sta, que indica los documentos que hacen referencia a dicho
objeto, y que pueden ser actualizados para que no se produzcan los problemas antes
mencionados.


Simplemente hay que pulsar sobre el botn Actualizar, aunque esto depender de si
tenemos configurada la opcin Mensaje al actualizar vnculos si movemos archivos. Lo
cual podemos establecer desde el men Edicin, opcin Preferencias, categora
General.

3.5. Subir archivos al servidor

Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer
pruebas) debers subir los archivos al sitio que hayas contratado o conseguido
gratuitamente.

Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers
ir subiendo uno a uno cada archivo y creando las carpetas t mismo. Este proceso
puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y
como se encuentra en tu carpeta del disco duro. Si no los enlaces no funcionarn
correctamente, y es posible que algunas imgenes no se muestren.

Para subir los archivos va web debers seguir las instrucciones que te proporcionar
tu servidor.

La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en
algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.

Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el
Explorador de Windows) y, obviamente, nos es mucho ms til para subir los
archivos.

Uno de los programas gratuitos ms utilizados es FileZilla, desde su pgina web
podrs descargarte el programa y su traduccin tu idioma.

Una vez instalado, abre el programa y haz clic en Archivo Gestor de sitios y luego en
Nuevo sitio para configurar un nuevo sitio FTP



Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus
pginas: Servidor, Usuario y Contrasea.

Rellena los campos y haz clic en Conectar. Se conectar automticamente y podrs ver
una carpeta donde podrs copiar los archivos que hayas creado.

La parte central de la pantalla estar dividida en dos columnas. A la izquierda, la
marcada como Sitio local, nos permite explorar la estructura de archivos y carpetas de
nuestro sitio. A la derecha encontramos Sitio remoto, con los archivos ubicados en el
servidor FTP.



Ahora no tenemos ms que arrastrar los archivos del sitio local al remoto para
subirlos, o del remoto al local, para descargarlos al equipo.

Vers como el programa empieza a copiar la informacin de tu disco a Internet.

Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la
barra de direcciones de tu navegador (Firefox, Internet Explorer...) y vers el sitio en
Internet!

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con
el servidor. Busca la carpeta public_html y sube tus archivos all.




3.6. Propiedades del documento

Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un
mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.

Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo
Propiedades de la pgina.

Este cuadro se puede abrir de tres modos diferentes:

Pulsar la combinacin de teclas Ctrl + J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al
final del men contextual la opcin Propiedades de la pgina.
Se abrir el cuadro de dilogo siguiente:

Las propiedades estn organizadas en categoras.

En la categora Apariencia (CSS), como ves en la imagen anterior, encontramos las
propiedades:

Fuente de pgina: es el tipo de letra que le aplicaremos al texto.
Tamao: es el tamao de la fuente que aplicaremos al texto.
Color del texto: es el color de la fuente.
Color del fondo: permite especificar un color de fondo para el documento, pero dicho
color solo se mostrar en el caso de no haber establecido ninguna imagen de fondo.

Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha
imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en
cuenta que segn los colores de la imagen ser necesario establecer unos u otros

colores para el texto, as como que no es conveniente tener un gif animado como
fondo.

Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no
queremos que se repita, seleccionamos la opcin no-repeat. Si queremos que se repita
o dejamos la opcin en blanco o seleccionamos la opcin repeat. Si queremos que se
repita solo en horizontal seleccionamos la opcin repeat-x y si queremos que se repita
en vertical, entonces seleccionamos repeat-y.

Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre
donde empieza el contenido de la pgina y la ventana del navegador.

En la categora Apariencia (HTML), como vemos en la imagen siguiente, encontramos
las propiedades:

Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha
imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en
cuenta que segn los colores de la imagen ser necesario establecer unos u otros
colores para el texto, as como que no es conveniente tener un gif animado como
fondo.

Fondo: permite especificar un color de fondo para el documento, pero dicho color solo
se mostrar en el caso de no haber establecido ninguna imagen de fondo.
Texto: es el color de la fuente.
Vnculos: es el color que mostrar el texto de los vnculos.

Vnculos visitados: es el color que mostrar el texto de los vnculos visitados.

Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace
clic sobre el mismo.

Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre
donde empieza el contenido de la pgina y la ventana del navegador.

Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia
es que CSS aplica nuestra configuracin utilizando reglas de estilo, mientras que
HTML lo hace con atributos HTML. Estos ltimos estn cayendo en desuso, ya que se
tiende a limitar el HTML al contenido, y no al diseo. Por eso, te desaconsejamos su
uso.

En la categora Vnculos (CSS) encontramos las propiedades:

Fuente de vnculo: es el tipo de letra que mostrar el texto del vnculo.
Tamao: es el tamao del texto de los vnculos.

Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el
texto normal y los vnculos que sirven de enlace a otras pginas.

Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al
usuario si unos vnculos ya han sido visitados o no.

Vnculos de sustitucin: es el color del texto del vnculo cuando situamos el ratn
encima del vnculo.

Vnculos activos: es el color de los vnculos activos.

Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el
texto aparece subrayado, con esta opcin podemos elegir otro tipo de estilo por
ejemplo para que no aparezca subrayado.


En la categora Encabezados (CSS) encontramos la propiedad:

Fuente de encabezado: permite establece el tipo de fuente de los encabezados.
El resto propiedades hacen referencia al estilo cursiva o negrita, as como al tamao y
color que queremos aplicar a cada tipo de encabezado.

En la categora Ttulo/Codificacin encontramos la propiedad:

Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y
de la ventana de documento de Dreamweaver
En la categora Imagen de rastreo encontramos las propiedades:

Imagen de rastreo: permite establecer una imagen como fondo del documento, pero
que slo se mostrar en la ventana de documento de Dreamweaver, y nunca en un
navegador. Dicha imagen se utiliza como plantilla grfica sobre la que crear el
documento.

Transparencia: permite establecer la opacidad de la imagen de rastreo.






Comprobar tamao para optimizar la carga:

Si las pginas tienen muchos elementos (imgenes, tablas, etc.) y son muy grandes,
posiblemente tarden mucho tiempo en mostrarse totalmente en el navegador. Esto no

es nada recomendable, ya que los usuarios pueden perder la paciencia, y no visitar

ms nuestra pgina.

Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy
elevado.

Dreamweaver permite calcular automticamente el tiempo de descarga de las
pginas. Para ello hay que dirigirse al men Edicin, a la opcin Preferencias.

3.7. Los colores

Para asignar colores es posible desplegar una paleta de colores como sta. Al
seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la
parte superior.

Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para
web. stos son los colores que se muestran de la misma forma en cualquier navegador
bajo cualquier sistema operativo.

Esto no quiere decir que slo podamos utilizar estos colores. Podemos personalizarlos
a travs del botn d de la parte superior de la paleta.



Los colores pueden asignarse a travs de los botones:



Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y
tambin en algunas ventanas que permiten especificar propiedades (sobre todo
propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades
de la pgina, que vimos en este tema.

El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro
gris , l lo que hace que se despliegue la paleta de colores. El otro modo es
introduciendo directamente el nmero hexadecimal del color en el recuadro blanco.

Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color
azul con valor #39F, el botn quedara del siguiente modo:





En la web, los colores se representan por la cantidad que contienen de los colores
primarios aditivos (Rojo, Verde y Azul).

Para indicar la cantidad de cada uno, se utilizan nmeros hexadecimales, que van del 0
a la F (A=10, B=11, ..., F=16).

El valor mnimo (00) indica la ausencia total de ese color, y el mximo (FF) su
intensidad total.

Para indicar que nos referimos a un color, utilizamos el smbolo # la principio del
cdigo.

Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde
al rojo, el segundo al azul y el ltimo al verde.

En Dreamweaver observars muchas veces que se emplean slo tres valores. En este
caso, se interpreta que los valores de los pares estn repetidos. Es decir, los colores
#FF22AA y #F2A son el mismo.