EPW

EPW

ELABORACIÓN DE PÁGINAS WEB

COLEGIO MARISTA
CENTRO ESCOLAR DEL NOROESTE
MC. Daniel Solano

MC. DANIEL SOLANO 2

1. Dreamweaver. Conceptos Básicos

1.1. ¿Qué es Dreamweaver?

Dreamweaver CS5 es un software fácil de usar que permite crear páginas web
profesionales. Las funciones de edición visual de Dreamweaver CS5 permiten
agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de
programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar
comportamientos JavaScript, etc.., de una forma muy sencilla y visual. Además incluye un software
de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios
web, actualizando el sitio web en el servidor sin salir del programa.

1.2. Editar páginas Web

Cualquier editor de texto permite crear
páginas web. Para ello sólo es necesario crear
los documentos con la
extensión HTML o HTM, e incluir como
contenido del documento el código HTML
deseado. Puede utilizarse incluso el Bloc de
notas incluido en Windows para hacerlo.

Pero crear páginas web mediante el código
HTML es más costoso que hacerlo utilizando
un editor gráfico. Al no utilizar un editor
gráfico cuesta mucho más insertar cada uno
de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia
profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML.
Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al
principio, nos ayudará a aprenderlo rápidamente.

Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que
destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.

Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser
Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales
tienen la ventaja de ser gratuitos.

MC. DANIEL SOLANO 3

1.3. Cómo tener una página en Internet

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con
servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por
disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen
de transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio
de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también
en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a
vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a
incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa,
aunque sí es aceptable para una página personal, sobre todo al comienzo.

Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio,
tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste
en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha
de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo
nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com.

En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra
página no será más que un archivo dentro de la de la empresa contratada.

A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de
cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de
datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil
sólo para usuarios avanzados.

Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás
que se encuentre a disposición de todo el mundo en Internet.

Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu
servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y como
aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas.
Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán.

Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios en
blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que el servidor
puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.

Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los
nombres en minúscula. Algunos servidores (los que utilizan linux) distinguen entre mayúsculas y
minúsculas, por lo que si en tu página quieres mostrar la imagen foto1.jpg deberás guardarla con
ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.

MC. DANIEL SOLANO 4

1.4. Arrancar y cerrar Dreamweaver

Veamos las dos formas básicas de arrancar Dreamweaver CS5.

Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la
pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Puedes
comenzar a escribir el nombre del programa, y aparecerá directamente. O puedes pulsar
en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu
ordenador. Buscar Adobe Dreamweaver CS5 y haz clic sobre él para arrancar el programa.

Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes .

Para cerrar Dreamweaver CS5, podemos utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier
ventana de Windows.
Pulsar la combinación de teclas Alt + F4.
Hacer clic sobre el menú Archivo y elegir la opción Salir.

Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se
te pedirá confirmación para guardar o no cada uno de ellos.

1.5. Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).
Pulsar la combinación de teclas Ctrl + O.
Hacer clic sobre el menú Archivo y elegir la opción Abrir....
Hacer doble clic sobre el archivo en la ventana del sitio.
Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir
con → Adobe Dreamweaver CS5.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible).
Pulsar la combinación de teclas Ctrl + N.
Hacer clic sobre el menú Archivo y elegir la opción Nuevo.

Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en
blanco.

MC. DANIEL SOLANO 5

En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que
podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación
pulsamos el botón Crear.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botón Guardar de la barra de herramientas estándar.
Pulsar la combinación de teclas Ctrl + S.
Hacer clic sobre el menú Archivo y elegir la opción Guardar.

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios
documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar
todo puedes realizar cualquiera de las siguientes operaciones.

Hacer clic en el botón Guardar todo de la Barra de herramientas estándar.
Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.

Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada
uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es
posible no desear guardar los cambios en todos los documentos modificados. Por ello es
conveniente que al principio no utilices esta opción, al menos hasta que te hayas habituado a
manejar el programa. De todas formas, observa que cuando hay cambios sin guardar aparece un *
tras el nombre del documento

MC. DANIEL SOLANO 6

1.6. Mi primera página

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como
puede hacerse. Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la
columna Diseño dejamos la opción por defecto: <ninguno>.

Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:

www.cen.edu.mx

Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento.

Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
Entonces se abrirá una ventana como la que aparece a continuación:

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color
azul. Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primera página. Para
aplicar los cambios, pulsa sobre el botón Aceptar.

MC. DANIEL SOLANO 7

Ahora vamos a insertar una imagen. Para insertar la imagen, debemos tenerla en la carpeta donde
estamos creando nuestras páginas, habitualmente en una subcarpeta dedicada a las imágenes.

Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el
botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con
una opción similar a Guardar imagen como... (Dependiendo del navegador que utilices) que
permite grabar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que si piensas
publicar la página en Internet, hay que respetar los derechos de autor de la imagen.

Para insertar la imagen que aparece a continuación en la página web
que estamos creando., debe estar guardada en la misma carpeta donde
guardaste la página que acabas de crear.

Ahora vamos a insertar la imagen debajo de la segunda línea de
texto. En primer lugar, situamos el cursor al final de la segunda
línea y creamos un salto de línea (tecla Enter). Después nos
dirigimos al menú Insertar, opción Imagen.

En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías
guardado, seleccionarla y pulsar Aceptar.

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de
propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el
siguiente aspecto:

Si no te aparece, puedes mostrarlo a través del menú Ventana,
opción Propiedades.

Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraído. Para
que te aparezca desplegado debes hacer doble clic en Propiedades.

Selecciona la primera línea de texto. En el inspector de propiedades pulsa HTML y aplica el
formato Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.

MC. DANIEL SOLANO 8

Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS
a la izquierda. Mediante el inspector de propiedades en Dreamweaver CS5 accedemos tanto a las
propiedades de CSS como a las propiedades de HTML.

Podemos decir que en una página web, HTML se encarga de estructurar el contenido, la
información, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado.

Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante
hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseño de la página
Web y reducen el tamaño del archivo.

Selecciona la primera línea. En Regla de destino selecciona <Nuevo estilo en línea>, para aplicar el
formato solo al texto seleccionado. También aplica el estilo de Fuente Arial, Helvetica, sans-serif,
color azul #009 y centra el texto, tal y como muestra la imagen siguiente:

Observa que hemos centrado el texto pulsando en el botón . Selecciona la segunda línea de
texto, y seleccionando como antes <Nuevo estilo en línea>, marca los botones para
ponerlo en negrita y cursiva respectivamente. Vamos a centrar también la imagen. Para ellos
selecciónala. Lo que hay que centrar es el contenido del párrafo que la contiene. Para hacerlo, en
la barra de estado, encima de las propiedades nos aparece la jerarquía de etiquetas. Haz clic

sobre p.

Ahora, en Regla de destino selecciona <Nuevo estilo en línea> y centra el párrafo como hemos visto
hasta ahora, pulsando en .

Por último vamos a crear el enlace. Selecciona el
texto de la última línea, y cambia el panel
de Propiedades a las propiedades de HTML. En el
campo Vínculo, escribe la URL de la página a
enlazar, como se ve en la imagen:

Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la
opción Guardar. Puedes llamar al documento como lo desees, pero la extensión ha de ser htm o
html. Por ejemplo, lo hemos llamado miprimerapagina.htm, y la hemos guardado en la misma
carpeta que la imagen descargada.

Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.

MC. DANIEL SOLANO 9

2. Entorno de Dreamweaver

2.1 Pantalla Inicial
Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes
fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil
entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de
este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario
puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más
adelante.

2.2 Las barras
A. Barra de la Aplicación

La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana
maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos
líneas, como en la imagen superior.

Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios
botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas
para obtener ayuda on line.

MC. DANIEL SOLANO 10

Los botones propios de la aplicación, que aparecen junto al icono, nos
permiten (de derecha a izquierda) cambiar entre la vista de diseño o
código, acceder a las extensiones que se pueden añadir, o al
administrador de sitios, que ya veremos.

Los menús, están agrupados en categorías.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes
elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son
accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.

B. Las pestañas de documento
Cada archivo que tengamos abierto, mostrará
una pestaña con su nombre, lo que nos
permitirá cambiar de uno a otro fácilmente. Si
junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar
cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el
botón derecho, como Cerrar otros archivos.

Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de
estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante
tiempo.

C. La barra de estado

Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el
mismo.

A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas
completas. Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (para
desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su
codificación.

Hasta aquí las barras que siempre
veremos en la aplicación. A parte,
existen otras que podemos ver u
ocultar desde el menú Ver →
Barras de herramientas.


D. Barra de herramientas estándar

La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del
menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge,
Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta
barra puede ser muy útil, pero en realidad casi todo el mundo usa esos comandos directamente
con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.)

E. Barra de herramientas de documento

La contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo,
acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos
ofrece el programa.

F. Barra de representación de estilos

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos,
si estamos utilizando hojas distintas que dependan del eso. En esta nueva versión se han añadido
más opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el
cursor está sobre un elemento.

G. Barra de navegación como navegador

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de
nuestro sitio, aunque sólo tiene sentido con la Vista en vivo.

2.3 Inspectores y paneles

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen
como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia
y opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel
nos da acceso a opciones generales.


A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los
paneles o inspectores. Vamos a ver los más importantes.

A. El inspector de propiedades

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado,
permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en
Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrará su
ubicación, dimensiones, peso, clase, etc...

Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los
diferentes elementos de la página Web que estemos diseñando.

B. Panel insertar

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú
Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces,
multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.

Como vemos en las imágenes, es posible configurar este panel para verlo como menú, como panel
flotante o como una barra de herramientas integrada en la ventana de trabajo. Personalizar el
área de trabajo es bastante intuitivo, pero si necesitas ayuda, da clic Aquí

2.4 Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de
documento:


A. La vista de diseño

La vista Diseño permite trabajar con el editor visual. Nos ofrece un aspecto muy similar al
resultado final, pero totalmente editable.

CEN
2013

B. La vista código

La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de
código fuente. No permite tener directamente una referencia visual de cómo va quedando el
documento según se va modificando el código. El código que vemos es el que genera
Dreamweaver al editar el contenido en la vista Diseño.


C. La vista dividir

La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona izquierda muestra
el código fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas,
este cambio se aplica directamente sobre la otra.

CEN
2013

D. La vista en vivo

La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado final
no editable. A diferencia de la vista Diseño, que nos permite editar los elementos, esta vista nos
permite interactuar con ellos, tal como lo haríamos con el navegador. La función de esta vista es la
de ahorrarnos tiempo, al no tener que comprobar que pequeños cambios se previsualizan
correctamente en el navegador.

No obstante, siempre hay que comprobar la página con los principales navegadores del mercado,
que serán los que emplearán nuestros visitantes. De hecho, a lo largo del curso verás cómo
algunos elementos se ven de forma muy distinta si los vemos en la vista de diseño, en la vista en
vivo o en el navegador.

E. La vista código en vivo

Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir,
pero sin que podamos editar el código. Lo que hace es que al seleccionar partes de la web en la
Vista en vivo, se seleccione su correspondiente código fuente.


3. Configurar un sitio local

3.1 Introducción
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o
un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas 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 imágenes,
las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta,
con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo
que se conoce como sitio local.

Después se podrán 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 organización de los archivos en un sitio permite administrar y compartir archivos, mantener los
vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.

La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando
se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.

Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.es en el navegador, éste
intentaría cargar la página http://www.aulaclic.com/index.htm, por lo que se produciría un error
en el caso de que no existiera ninguna página con el nombre index.htm, y no se podría navegar
por el sitio a no ser que se escribiese exactamente http://www.aulaclic.es/nombrepagina.htm

3.2 Crear o editar un sitio web sin conexión a Internet

Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta
raíz, ya es posible definir el nuevo sitio.

Para ello hay que dirigirse al menú Sitio, a la opción
Administrar sitios... o directamente a Nuevo sitio.

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


También podemos acceder desde el icono de acceso rápido de
la barra de la aplicación a la opción Administrar sitios o Nuevo
sitio...

En el caso de haber seleccionado la opción
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 opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma
ventana en la que definir o modificar las características del sitio.

Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.
Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic
en ella.

Las dos únicas opciones imprescindibles son las que encontramos en la categoría Sitio, y de
momento son las únicas que cambiaremos. Vamos a ver los datos que hay que editar para la
categoría 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 características son las imprescindibles para definir un sitio local. El resto son opcionales,
y de momento no nos interesan.

Las demás 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. Después de
rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

3.3 Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios....
seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.

También podemos utilizar el panel Archivos, buscar y seleccionar el
sitio a abrir en el menú desplegable Archivos.

3.4 Ver el sitio

El panel Archivos (menú Ventana → Archivos o tecla F8) es uno
de los paneles más 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 imágenes 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 botón 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. También el servidor de
pruebas o las bases de datos.

En esta imagen, se visualiza el remoto (a la
izquierda) todavía vacío, y el sitio local (a la
derecha) con nuestros archivos.


Dreamweaver guarda la caché de nuestro sitio, cómo se organizan los archivos y se relacionan
entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde
Dreamweaver, automáticamente actualizará todas las referencias a ese archivo (enlaces desde
otras páginas, origen de la imagen, etc).

En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las páginas no se mostrarán
correctamente: no aparecerán imágenes, no funcionarán enlaces, etc, ya que Dreamweaver
simplemente no encontrará la página.

Al modificar algún objeto que es referenciado por algún 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
botón Actualizar, aunque esto dependerá
de si tenemos configurada la opción
Mensaje al actualizar vínculos si
movemos archivos. Lo cual podemos
establecer desde el menú Edición, opción
Preferencias, categoría General.

3.5 Subir archivos al servidor

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

Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que deberás 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 funcionarán correctamente, y es posible que algunas
imágenes no se muestren.

Para subir los archivos vía web deberás 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.

Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en el Explorador de
Windows) y, obviamente, nos es mucho más útil para subir los archivos.

Uno de los programas gratuitos más utilizados es FileZilla, desde su página web podrás descargar
el programa y su traducción 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í deberás introducir los
datos que te facilitó el
servidor dónde vas a alojar
tus páginas: Servidor,
Usuario y Contraseña.

Rellena los campos y haz clic
en Conectar. Se conectará
automáticamente y podrás
ver una carpeta donde
podrás 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 más que arrastrar
los archivos del sitio local al remoto
para subirlos, o del remoto al local,
para descargarlos al equipo.

Verás como el programa empieza a
copiar la información de tu disco a
Internet.

Cuando haya finalizado, sólo tendrás
que introducir tu dirección de
Internet en la barra de direcciones
de tu navegador (Firefox, Internet
Explorer...) ¡y verás el sitio en
Internet!


3.6 Propiedades del documento

Es conveniente definir sitios homogéneos, que todas las páginas 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 páginas a través del cuadro de diálogo Propiedades
de la página. Este cuadro se puede abrir de tres modos diferentes:

Pulsar la combinación de teclas Ctrl + J.
Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final
del menú contextual la opción Propiedades de la página.

Se abrirá el cuadro de diálogo siguiente:

Las propiedades están organizadas en categorías:

2.1.Categoría Apariencia (CSS)
Como ves en la imagen anterior, encontramos las propiedades:

Fuente de página: es el tipo de letra que le aplicaremos al texto.
Tamaño: es el tamaño 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 según 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 opción no-repeat. Si queremos que se repita o
dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se repita
solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita en
vertical, entonces seleccionamos repeat-y.
Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre
donde empieza el contenido de la página y la ventana del navegador.

2.2.Categoría 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 según 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.
Vínculos: es el color que mostrará el texto de los vínculos.
Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.
Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic
sobre el mismo.
Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre
donde empieza el contenido de la página y la ventana del navegador.

Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS
aplica nuestra configuración utilizando reglas de estilo, mientras que HTML lo hace con atributos
HTML. Estos últimos están cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y
no al diseño. Por eso, te desaconsejamos su uso.


2.3.Categoría Vínculos (CSS)

Encontramos las propiedades:

Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo.
Tamaño: es el tamaño del texto de los vínculos.
Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el texto
normal y los vínculos que sirven de enlace a otras páginas.
Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al usuario si
unos vínculos ya han sido visitados o no.
Vínculos de sustitución: es el color del texto del vínculo cuando situamos el ratón encima
del vínculo.
Vínculos activos: es el color de los vínculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto
aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para
que no aparezca subrayado.

2.4.Categoría Encabezados (CSS)


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 tamaño y color
que queremos aplicar a
cada tipo de
encabezado.


2.5. Categoría Título/Codificación
Encontramos la propiedad: Título: es el título del documento, que aparecerá en la barra de título
del navegador y de la ventana de documento de Dreamweaver

2.6.Categoría Imagen de rastreo

Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que
sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador.
Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento.
Transparencia: permite establecer la opacidad de la imagen de rastreo.

Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse en el navegador.
Para ver cómo comprobar el tamaño de los documentos, pulsa aquí

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 sólo podamos utilizar estos colores. Podemos personalizarlos a través del
botón de la parte superior de la paleta.

Los colores pueden asignarse a través de los botones: .

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también 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 página, que vimos en este tema.

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

Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color azul con

valor #39F, el botón quedaría 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 números hexadecimales, que van del 0 a la F
(A=10, B=11, ..., F=16).

El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su intensidad total.

Para indicar que nos referimos a un color, utilizamos el símbolo # la principio del código.

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 observarás muchas veces que se emplean sólo tres valores. En este caso, se
interpreta que los valores de los pares están repetidos. Es decir, los colores #FF22AA y #F2A son el
mismo.


4. El texto: propiedades y formato

4.1 Características del texto

Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a
través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del
inspector de propiedades, que están clasificadas en dos categorías HTML y CSS.

A. Propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el
navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como
queramos.

Formato:

Permite seleccionar un formato de párrafo ya definido para HTML,
que puede ser encabezado, párrafo o formato predeterminado. Los
encabezados se utilizan para establecer títulos dentro de un
documento. El formato predeterminado sirve para que el texto
aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se
introducen varios espacios solo se considera uno, pero al establecer
el formato predeterminado se respetará que hayan varios espacios
en lugar de solo uno. El texto normal, debería ir siempre en párrafos,
salvo que esté en otros elementos, como tablas o listas.

Es importante emplear correctamente los encabezados, ya que se organizará mejor el
contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes
por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.

Estilo:

El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en
negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva.

Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a
través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel
de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen


subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un
vínculo. Además, emplea etiquetas que están en desuso.

Lista:

Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas
en el siguiente apartado.

Sangría:

Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de
margen que se establece a ambos lados del texto. En este caso los botones se refieren a
sangría a la izquierda del texto.

Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>,
que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista,
creará una sublista dentro de ésta.

B. Propiedades CSS.

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra
página y darle el diseño que queramos. Podemos cambiar desde propiedades simples, como el
color de fondo, hasta cosas más vistosas, como hacer que un bloque se muestre en una posición
determinada o que un elemento cambie al pasar el cursor sobre él. Profundizaremos en esto más
adelante, por ser una parte fundamental en la creación de páginas web.

Tenemos más posibilidades a la hora de aplicar formatos. Dreamweaver CS5 nos proporciona
numerosas funciones para la creación de estilos mediante hojas de estilos en cascada

Regla de destino:

Las reglas CSS sirven para definir a qué elemento aplicamos el
estilo, y cómo lo hacemos.

Podemos definir una Nueva Regla, eliminarla o aplicar una
clase. Veremos esto antes de acabar el tema.


Editar regla:

Mediante este botón accedemos a las opciones para la creación o modificación de estilos
CSS, de la regla seleccionada.

Panel CSS:

Este botón abre el panel CSS si no lo tuviéramos abierto.

Fuente:
Permite seleccionar un conjunto de
fuentes. Aparecen conjuntos de fuentes
en lugar de una sola, ya que es posible
que al establecer una única fuente el
usuario no la tenga en su ordenador. El
seleccionar un conjunto de fuentes
posibilita que en el caso de que el usuario
no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial,
Helvetica, sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en
Helvetica.

Estilo:

Estos botones ponen el texto en negrita y cursiva respectivamente. Pero en este caso,
generan un estilo css en línea.

Alineación:

A través de estos botones es posible establecer la alineación del texto de una de estas
cuatro formas distintas: izquierda, centrada, derecha y justificada.

Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por
ejemplo sobre un párrafo.

Tamaño:

Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades,
en píxeles, porcentajes del tamaño base, etc...

Color:

Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las
propiedades de la página. Si no se ha establecido ningún color en las propiedades de la
página ni aquí, el color del texto por defecto será el negro.


4.2 Listas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas. Para
que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente
hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través
del inspector de propiedades, o a través del menú Formato.
La lista con viñetas (sin ordenar) se selecciona a través del botón , mientras que la lista
numerada (ordenada) se selecciona a través del botón .

Ejemplo de lista numerada (ordenada):

1. Preparar la mochila
1. Sacar los libros de ese día
2. Introducir los libros del día siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador

Ejemplo de lista con viñetas (sin ordenar):
o Perro
o Gato
o Aves
 Canario
 Loro
o Hámster

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario
añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista
anidada.

A través del menú Formato, opción Lista, es posible acceder a las propiedades de la lista
seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar
de la lista para que se active este submenú.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con
viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las
listas ordenadas, el número por el que comenzará el recuento.


4.3 Caracteres especiales

A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor
de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir
caracteres como á, ê, ì, ö, ç.. de forma rápida. Pero si quieres poner dos espacios en blanco y los
introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando la
opción que vamos a ver a continuación. Lo mismo ocurrirá con los caracteres que no tenemos en
el teclado.

Haz clic en el menú Insertar y selecciona la
opción HTML verás el desplegable de la imagen
de la derecha.

Sólo coloca el cursor del ratón sobre Caracteres
especiales y verás una lista rápida de los
caracteres más utilizados que no pueden ser
introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus
textos sólo selecciónalo en la lista y aparecerá en
la vista de Diseño.

Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde
donde podrás seleccionar caracteres entre una lista bastante más amplia:


4.4 Estilo CSS. Introducción

Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color
o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se
desee repetir la asignación de esos mismos valores a otras partes del texto.

También permiten, como veremos más adelante, definir prácticamente cualquier propiedad de los
elementos que contendrán nuestra web.

Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>, <h2>...),
párrafos (<p>), enlaces (<a>), etc... Lo que formateará todas las apariciones de esta etiqueta en el
ámbito del estilo.

También podemos crear clases. Algo así como definir un estilo y darle un alias. El estilo afectará a
todos los elementos a los que apliquemos esa clase.

Por otro lado, al crear el estilo, podemos definirlo como un estilo en línea (afectará sólo al
elemento seleccionado) o crear una regla, que puede afectar a toda la página, o a todo el sitio si la
guardamos en un archivo CSS.

Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del
contenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto
que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y
estilos concretos.

Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de
actualización; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese
estilo se actualiza automáticamente.

4.5 Crear un estilo personalizado

Con Dreamweaver CS5, las características que apliquemos a un texto a través del Inspector de
propiedades CSS crearán automáticamente estilos CSS. Aunque tenemos que decidir a qué
elementos afecta.

A. Crear un estilo en línea.
Por ejemplo, si queremos que un determinado estilo afecte a un único elemento y en un caso
puntual, podemos crearlo como un estilo en línea. Esto incrustará el estilo en la propia etiqueta
HTML, por lo que si alguna vez queremos modificarlo, deberemos de ir al elemento.

En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nuevo estilo en línea>.


B. Crear una regla de estilo:

Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, sólo a las que estén contenidas
en determinados elementos o una clase.

Para ello, En el Inspector de propiedades CSS,
en Regla de destino, seleccionamos <Nueva
regla CSS>.

Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos
aparecerá la siguiente ventana:

Tipo de selector: el tipo de selector es fundamental, ya que determina a qué elementos afectará el
estilo.

Podemos elegir entre cuatro tipos de selector:

Clase. Es el alias que tomará el estilo, y
para que afecte a un elemento, debemos
de aplicarle esa clase. El nombre de la
clase va precedido por un punto, y si no lo
ponemos lo hará Dreamweaver.
ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de
forma única y concreta. Por tanto, el estilo sólo puede afectar a un elemento en cada
página, al que tenga ese ID. En el selector, se escribe precedido por #.
Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada.


Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta
únicamente a los párrafos con la clase resaltado, pero no a los encabezados con esa clase.
También se pueden anidar. Por ejemplo ul#menu li p afecta sólo a los párrafos que estén
dentro de un elemento de una lista con el id menu.

Nombre del selector: esta opción permite asignar un nombre al selector.

Depende íntimamente del tipo de selector, pues aquí introduciremos el nombre de la clase, id,
etiqueta, etc... Por defecto, indicará el elemento seleccionado, pero podemos escribir el que
queramos.

Definición de regla: esta opción nos permite guardar el estilo en el documento actual o en un
nuevo archivo .css.

Si elegimos (Sólo este documento) la definición del estilo se guardará en la cabecera de la página,
por lo que sólo estará disponible dentro de ésta.

Si elegimos (Nueva hoja de estilo) se creará un archivo CSS. Podremos emplear estos estilos en
cualquier página del sitio sólo con vincular la hoja de estilos. Deberemos de indicar dónde guardar
el archivo css que contendrá los estilos. Normalmente en la misma carpeta que las páginas.

Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aquí y los estilos se añadirán
ella.

4.6 Definir o editar un estilo

Una vez creado, tenemos que definir las propiedades que formarán el estilo. Para ello,
encontramos las opciones básicas en el Inspector de propiedades CSS.

Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos
editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vez creadas se van
añadiendo a la lista.


Si queremos acceder a todas las propiedades, podemos pulsar en el botón Editar regla. Se abrirá la
ventana Definición de regla.

Aquí encontramos todas las
propiedades CSS agrupadas por
Categorías. Esta ventana es la
opción más cómoda nada más
crear el estilo, cuando tenemos
que cambiar varias propiedades.

Para pequeños cambios que no podamos hacer desde el Inspector
de propiedades y otras funciones extras, disponemos del panel
Estilos CSS. Podemos acceder a él desde el menú Ventanas o
pulsando en el botón Panel CSS.

En la parte superior vemos las propiedades que afectan al
elemento, en medio las reglas aplicadas, y en la parte inferior las
propiedades del estilo actual.

También se puede cambiar el nombre del estilo, es mejor que el
estilo tenga un nombre que indique a qué tipo de texto se va a
aplicar. Para ello accedemos al panel Estilos, hacemos clic con el
botón derecho sobre el estilo y seleccionamos la opción Cambiar
nombre...

Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen
inferior.


A. Panel de estilos

Hemos visto como Dreamweaver nos permite crear estilos de una forma muy rápida y sencilla, los
estilos creados de esta manera se pueden guardar en nuestro documento, pero también podemos
utilizar estilos que se encuentren en hojas externas al documento. Esta particularidad es muy útil
cuando diseñamos un sitio web con varias páginas ya que permite definir una sola hoja de estilos
que utilizarán todas las páginas del sitio y así facilitar el diseño.

Vamos a ver cómo funcionan las hojas de estilo a través del panel CSS que puede abrirse a través
del menú Ventana, opción Estilos CSS. Existen otras alternativas para abrir este panel, una es
pulsando Mayús + F11, o puedes hacer clic en el botón Panel CSS que aparece en el Inspector de
Propiedades CSS.

El panel tiene dos modos de visualización, representados por dos botones bajo el nombre del
panel. Veámoslos:

EL MODO ACTUAL.

Este modo nos ofrece información sobre qué estilos están afectando a la selección. Se divide en
tres secciones:

En Resumen de la selección, se muestran las propiedades
aplicadas sobre la selección, aunque estas provengan de
distintas reglas. Por ejemplo, a un texto le pueden afectar
las reglas generales de la página, las del párrafo, etc.
La parte central muestra la sección Reglas / Acerca de,
pudiendo cambiar entre ellas con los botones .

La vista Reglas muestra las reglas que afectan a la
selección.

La vista Acerca de nos dice dónde está definida la
propiedad seleccionada.

La vista Propiedades de nos muestra las propiedades de la
regla seleccionada. Aquí podemos editarlas.

Una opción muy interesante del panel es que nos permite
activar/desactivar propiedades solo con hacer clic a la izquierda de
su nombre.

Esto nos permite comprobar rápidamente cómo afectan los estilos
a nuestra página.


EL MODO TODO.

En este modo obtenemos información sobre los estilos
disponibles en el documento actual, independientemente de
la selección.

Tenemos dos secciones:

En Todas las reglas, aparece un listado de las reglas
disponibles, definidas en el propio documento o en
hojas de estilo enlazadas.
En Propiedades de encontramos las propiedades de la
regla seleccionada, pudiendo editarlas.

En ambos modos, en la parte inferior encontramos las mismas opciones.

Desde los botones podrás ordenar las propiedades de diferentes maneras. Con el
primer botón mostrarás todas las propiedades ordenadas por categorías
(Fuente,Fondo, Bloque, Borde, etc.); también puedes mostrarlas ordenadas de la A a la Z con el
segundo botón.

En la esquina inferior derecha encontramos los controles que nos permiten gestionar las
reglas: De izquierda a derecha, estos controles nos sirven para adjuntar una hoja de
estilo, crear una regla, editar la regla seleccionada o borrarla.

B. Gestionar estilos CSS

Añadir una nueva regla de estilo desde el panel
Basta con pulsar el icono , y seguir los pasos que vimos para definir estilos desde el Inspector
de Propiedades CSS.

Otra opción es ir al final de la lista de propiedades, y pulsar en Añadir propiedad.

En este caso deberemos introducir el nombre de la propiedad en la columna de la izquierda
(podremos seleccionarlo de la lista) y su valor en la columna de la derecha.


Modificar un estilo ya existente

Para modificar un estilo ya existente, seleccionamos el estilo a modificar en la lista de estilos del
panel y hacemos clic en el botón , se abrirá la ventana donde se puede definir las
características del estilo.

También podemos abrir esta ventana pulsando con el botón derecho sobre el estilo en el
panel CCS, y seleccionar del menú desplegable la opción Edición. O incluso modificarlo
directamente desde la lista de propiedades que se encuentra en el panel, editando la columna
derecha que contiene el valor.

Ten en cuenta que si modificas un estilo CSS que pertenezca a una hoja de estilos vinculada, es
decir, a un archivo CSS externo, todas las páginas que contengan ese estilo serán actualizadas al
instante.

Borrar un estilo de una hoja de estilos

Para borrar un estilo de una hoja de estilos, seleccionamos el estilo en la lista de estilos del panel y
hacemos clic en el botón .

4.7 Aplicar un estilo

En el caso de haber creado una regla para una etiqueta, no será necesario aplicarla, ya que
directamente afecta a todas las etiquetas de ese tipo.

Por tanto lo que tendremos que aplicar serán los estilos que definamos como clases. Veamos
cómo hacerlo:

En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto de
inserción, pero sin seleccionar, el estilo se aplicará a la primera etiqueta que contenga el texto
(por ejemplo el párrafo).

En el inspector de Propiedades seleccionamos la opción CSS y seleccionamos el estilo creado por
nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las
propiedades HTML también podemos hacerlo, utilizando el desplegable Clase.


Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barra de
estado, y seleccionar la clase deseada del menú Establecer clase.

Todas las reglas disponibles aparecen al desplegar el submenú Formato → Estilos CSS. Observa
que existe una clase llamada ninguna. Lo que hace esta opción es quitar la clase al elemento.

La barra de estado nos ayudará a saber qué clase tiene aplicada un elemento. La clase aparecerá
junto al nombre de la etiqueta, separada por un punto.

4.8 Hojas de estilos
A. Exportar estilos

Es frecuente que comencemos creando los estilos en la propia
página, y después al ver que los necesitaremos en otras páginas del
sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite
exportar estos estilos fácilmente.

Utilizamos el panel Estilos CSS (Mayús + F11). En este caso nos
será más útil la vista Todo. Agrupados en <style> encontramos los
estilos creados en la página.

Seleccionamos las reglas que queramos exportar, y en las
propiedades del panel (el icono de la esquina superior derecha)
seleccionamos Mover Reglas CSS....

Nos aparecerá la siguiente ventana:


Encontramos dos opciones para ubicar los estilos:

Hoja de estilos nos permite seleccionar una hoja ya existente. Las reglas se añadirán a
ella.
Una nueva hoja de estilos... creará una hoja nueva para las reglas exportadas.
Deberemos de indicar dónde queremos guardar el archivo, normalmente en la misma
carpeta que las páginas.

Los estilos seleccionados se quitarán de la página actual, y se vinculará con la hoja de estilos.

B. Vincular una hoja de estilos

Si queremos utilizar una hoja de estilos ya existente en nuestra página, debemos vincularla.
Podemos hacerlo desde el menú Formato → Estilos CSS → Adjuntar hoja de estilos... o desde el
panel Estilos CSS. Lo único que tendremos que hacer es seleccionar el archivo a vincular. Las hojas
de estilo tienen la extensión .css.

Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier archivo del equipo,
todos los archivos que utilicemos deben de estar dentro del sitio.


5. Hipervínculo

5.1 Introducción

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una
página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una imagen, o
a parte de una imagen.

Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta <a></a> que es la
que en HTML se encarga de definir los enlaces. Esto podrás observarlo en la barra de estado:

5.2 Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no
se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de una imagen, de
un archivo Flash, de la hoja de estilo, etc.

Referencia absoluta:

Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo,
incluyendo el protocolo http://.

Por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/seccion2/pagina1.html.

La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, y será
válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria si
pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).

Referencia relativa al documento (por defecto):

La ubicación del archivo enlazado se toma en relación con la ubicación del la página. Es decir,
partimos de la carpeta en la que se encuentra el documento.

Si queremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que
utilizar su nombre. Por ejemplo, pagina2.htm.

Si está en una subcarpeta de la página actual, no tenemos más que indicar el nombre de la carpeta
antes del archivo, y separarlos por una barra (/). Por ejemploimagenes/miimagen.gif.

Si queremos referirnos a carpetas que están por encima del nivel donde nos encontramos
deberemos utilizar ../


Por ejemplo, imagina que estamos en la siguiente
dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos
mostrar una imagen que se encuentra en la
carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo?
Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/)
para poder ir luego a la carpeta secciones.

El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta información, subimos un nivel y luego nos
movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.

Esta opción depende de la ubicación del archivo, y pueden no funcionar correctamente si
alteramos la estructura de carpetas.

Esta es la opción por defecto de Dreamweaver, y es la forma más habitual para enlazar archivos
dentro del sitio.

Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual. Tomando
como origen la carpeta raíz del sitio.

Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /.

En el ejemplo anterior si tuviésemos definido como sitio la carpeta http://www.misitio.com/, un
enlace en cualquier página del sitio ahttp://www.misitio.com/pagina/secciones/seccion1.html se
crearía como /pagina/secciones/seccion1.html.

Por tanto, podríamos poner ese vínculo en cualquier página del sitio y funcionaría
independientemente de su ubicación.

Estos enlaces no funcionarán en el sitio local, a no ser que configuremos un servidor de pruebas
como veremos más adelante, ya que Windows interpretará como raíz la raíz del disco duro.

Marcadores o Puntos de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para
ello, indicamos el nombre del punto de fijación a continuación de la ruta del archivo (relativa o
absoluta) separados por una almohadilla (#).

El formato sería nombre_de_documento.extension#nombre_de_punto.

Si el punto de fijación está en la propia página, basta con indicar únicamente el punto en el enlace,
por ejemplo #apartado2

Podemos definir el punto dentro de un documento a través del menú Insertar, opción Anclaje con
nombre. O podemos utilizar el atributo ID de cualquier elemento (se puede establecer desde
el Inspector de Propiedades HTML). En cualquier caso, los nombres no deben de estar repetidos
en la página.


Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a
los nombres de los archivos y carpetas en el servidor (local o remoto).

Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces.

También deberás evitar utilizar caracteres especiales como acentos o espacios, así no tendrás
problemas a la hora de referenciar tus objetos.

5.3 Crear enlaces

La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es
necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer
el Vínculo en el inspector HTML.

Por ejemplo, en la siguiente imagen hay un enlace a www.cen.edu.mx, que al ser un archivo
externo es de referencia absoluta, por eso contiene http://

http://www.cen.edu.mx

Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan
comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla #.
Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.

Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que explicaremos a
continuación y el enlace se colocará en el lugar en el que estaba situado el cursor.

Texto: es el texto que mostrará el enlace.
Si teníamos un texto seleccionado, aparecerá ahí.

Destino: la ventana donde se abrirá la
página, este campo se explica en el siguiente
apartado.

Vínculo: es la página a la que irá redirigida
el enlace, si se trata de un enlace externo deberás
escribirla empezando siempre por http://. Haz clic
sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto
Dreamweaver te creará un enlace relativo al documento.

Haciendo clic en el menú Sitio y seleccionando la opción Administrar sitios... podemos
editar la configuración del sitio. Bastará con seleccionarlo en el cuadro de diálogo y pulsa
Editar.


Se abrirá la ventana de Configuración del Sitio. Allí selecciona la categoría Información
local dentro del grupo Configuración avanzada, y podrás ver las siguientes opciones:

Estas opciones te ayudarán a crear los enlaces de forma relativa.

Selecciona Documento o Raíz
del sitio en Vínculos relativos
a: para que se creen los enlaces
relativos al documento donde
se halla situado el enlace o
desde la raíz del sitio.

Si seleccionas la opción Raíz del
sitio, los enlaces se
establecerán respecto a la
carpeta seleccionada en el
campo Carpeta raíz local:. Pero
recuerda que en nuestro sitio
local no funcionarán a no ser
que instalemos un servidor de
pruebas.

Título: se trata de la ayuda contextual del vínculo, que aparecerá al mantener un instante
el cursor sobre el enlace.

Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al
enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada.

Índice de tabulador: Como habrás podido observar puedes saltar a través de los enlaces
pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la
prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus
diferentes saltos. Por defecto, se tabularán por orden de aparición.

5.4 Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar
dependiendo de si el documento está basado en marcos.

Puede especificarse en el inspector de propiedades HTML a través
de Destino, o en la ventana que aparece a través del menú Insertar,
opción Hipervínculo.

_blank: Abre el documento vinculado en una nueva ventana o pestaña del navegador.
_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o
en el conjunto de marcos padre. Tiene sentido si se emplean marcos.
_self: Es la opción predeterminada, y la que se produce si no indicamos otra cosa. Abre el
documento vinculado en el mismo marco o ventana que el vínculo.


_top: Abre el documento vinculado en la ventana completa del navegador. Tiene sentido
si se emplean marcos.

Si la página no usa marcos (lo habitual hoy en día) simplemente no especificaremos nada para
abrirlo en la misma ventana, y emplearemos _blank para abrir ventanas nuevas.

Lo habitual es abrir las los enlaces a páginas del sitio en la misma ventana, y los enlaces externos
en ventanas nuevas. Otra tendencia dice que una página nunca debería de abrir nuevas ventanas,
y que debe de ser el usuario el que decida qué enlaces quiere abrir en ventanas nuevas. En la
mayoría de navegadores, para abrir un enlace un una ventana nueva, basta con hacer clic con la
ruedecilla del ratón.

5.5 Formato del enlace

En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo,
puede adquirir cuatro colores diferentes que pueden especificarse a través de las propiedades de
la página. Estos cuatro colores diferentes corresponden a los tres estados del vínculo: vínculo
normal, vínculo activo (el último pulsado), vínculo visitado o vínculo de sustitución (cuando el
cursor está sobre el vínculo).

Aquí tienes dos vínculos de ejemplo:

www.cen.edu.mx www.elpais.es

Si has visitado alguno, verás que sale en un tono morado, si no sale en azul.

Recuerda que como todo en nuestra página, los vínculos tienen un formato por defecto, pero es
totalmente personalizable por CSS. Para ello, basta con crear una Regla de estilo para la
etiqueta a.

Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes selectores:

a:link para los enlaces normales.
a:visited para los enlaces visitados.
a:active para los enlaces activos.
a:hover para los enlaces con el cursor encima.

Aunque recuerda que en las propiedades del documento teníamos la categoría Vínculos CSS que
nos permite establecer estos valores.

Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al
pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa),
aparece el contorno de esa zona.

Aquí tenemos dos vínculos en una imagen:


Como puedes ver, la primera imagen que hace de vínculo contiene un recuadro alrededor. Este es
el formato por defecto, pero no suele quedar bien, sobre todo en imágenes con el fondo
transparente.

Veamos como quitarlo utilizando CSS: En el Inspector de propiedades CSS seleccionamos Nueva
regla CSS en Regla de destino, y pulsamos Editar regla.

En Tipo de selector, elegimos Compuesto, y en Nombre de
selector escribimos a img, es decir, imágenes que estén
dentro de una etiqueta a (de enlace).

Se abrirá la ventana Definición de regla para a
img:

En ella, seleccionamos la categoría Borde, y
en Style seleccionamos none. Pulsamos Aceptar.

Esta regla hará que las imágenes con enlace se
muestren sin borde.

Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse
encima del vínculo. Suele adquirir la apariencia de una mano señalando.

5.6 Enlace a correo electrónico

Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se
desea que los visitantes de la web puedan contactar con nosotros. La sintaxis del vínculo en este
caso es mailto:direccióndecorreo.

Puede definirse el vínculo a través de Vínculo, del inspector
de propiedades, seleccionando previamente el texto o la
imagen deseados. También es posible a través del
menú Insertar, opción Vínculo de correo electrónico. En
este caso no es posible asignar el vínculo a una imagen, solo
permite introducir el texto que contendrá el vínculo de
correo.

Lo que hace esta opción es abrir el cliente de correo predeterminado del usuario (Outlook,
Firebird...). Por lo que puede no ser práctica si el usuario no lo tiene, se conecta en un ordenador
público, o emplea el correo web directamente.

Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerirá una
página dinámica como veremos a lo largo del curso. Otra opción sería mostrar nuestra dirección


de correo, para que el usuario pueda enviarnos el correo como quiera. Si publicamos nuestra
dirección en la web es mejor hacerlo como una imagen, o escribiéndola de forma que la pueda
entender un humano (por ejemplo micorreo(arr)sitio.com) para evitar que sea reconocida por
robots que la emplearán para el envío de correo no deseado.

5.7 Enlaces rotos

A. Comprobación de vínculos rotos

Los Vínculos rotos son vínculos que no siguen una ruta válida, o que enlazan a archivo que no
existe. La existencia de estos vínculos en nuestras páginas es un error, ya que no permite navegar
correctamente a los usuarios por nuestro sitio, además del efecto negativo que causa.
Los servidores de tipo UNIX/Linux distinguen entre mayúsculas y minúsculas. Así, por ejemplo, si
enlazas a un archivo Perros.htm puede que el servidor no lo encuentre porque en realidad lo
hayas llamado perros.htm (en minúsculas).

Trabajando con Windows este tipo de
errores no se presentan porque no hace
esta distinción. En el ejemplo anterior
Dreamweaver consideraría el
enlace Perros.htm correcto aunque no lo
fuese. Para evitar esto puedes activar la
opción Comprobación de vínculos con
distinción entre mayúsculas y
minúsculas que se encuentra en la
ventana de Configuración del Sitio,
dentro de Configuración avanzada en la
categoría Información local.

Configuración del Sitio. Allí selecciona la categoría Información local dentro del
grupo Configuración avanzada

Para comprobar si nuestro sitio tiene Vínculos rotos hay que abrir el Verificador de vínculos.

Accedemos a él desde el menú Sitio → Comprobar vínculos en todo el sitio o con las
teclas Ctrl + F8.

Entonces se muestra un nuevo panel, en el que ya es posible comprobar si existen vínculos rotos.

En la imagen vemos
que no se ha
encontrado un
archivo enlazado,
posiblemente porque
el nombre esté mal
escrito, y una
imagen.


Lo primero que hay que hacer es pulsar sobre el botón , a través del cual se ofrece la
posibilidad de elegir dónde se comprobarán los vínculos rotos. Puede ser en el documento actual,
en todo el sitio, o en los archivos o carpetas del sitio seleccionados previamente.

A través de Mostrar hay que especificar si han de mostrarse los Vínculos rotos, los Vínculos
externos o Archivos huérfanos.

Los Vínculos rotos son los vínculos que no siguen una ruta válida, o que enlazan a archivo
que no existe.
Los Vínculos externos son los vínculos a documentos que se encuentran fuera del sitio,
pero que no necesariamente son vínculos erróneos. No comprueba si estos vínculos son
correctos o no, simplemente los enumera.
A través de Vínculos huérfanos se muestran todos aquellos archivos del sitio que no están
siendo vinculados por otros, a la vez que tampoco contienen vínculos a otros documentos.
Estos documentos, en ocasiones, pueden no estar siendo utilizados para nada, por lo que
simplemente están ocupando espacio en disco innecesariamente. Pero en otras ocasiones,
tal vez si que los empleamos, sólo que en vez de enlazarlos, accedemos a ellos por
javascript u otros medios. En este caso sí son necesarios, aunque se marquen como
huérfanos.
De estos tres tipos de vínculos, el que más nos interesa ahora es el de los Vínculos rotos. En el
panel se mostrarán todos los documentos que tienen un vínculo roto, y el documento al que cada
uno de esos vínculos hace referencia.

B. Reparación de vínculos rotos

Podemos reparar los vínculos rotos de dos formas:

Una de ellas es pulsando dos veces sobre el nombre del documento que aparece en la lista de
archivos del panel. De este modo, dicho documento se abre. Entonces es posible buscar dentro del
documento el vínculo erróneo y modificarlo a través del Inspector de propiedades.

La otra forma es pulsando sobre el vínculo roto, en lugar de sobre el nombre del archivo. En este
caso es posible modificar directamente el nombre del documento en el panel, o buscarlo a través
del icono con forma de carpeta que aparecerá a su derecha.


6. Imágenes

6.1 Introducción

Las imágenes son un aspecto muy importante de la web. Ya sea como complementos a la
información o parte del diseño, la hacen mucho más atractiva a ojos del visitante. No obstante, no
conviene abusar, ya que aumentarán mucho el tamaño final de la web.

Los formatos más utilizados para web son el GIF, el PNG y el JPG, que a pesar de ser imágenes de
menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos
memoria. Vamos a ver un poco más sobre estos formatos:

Formato GIF: Utilizan un máximo de 256 colores, y son recomendables para dibujos con
grandes áreas de un mismo color o de tonos no continuos. También si se muestra texto.
Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y
animaciones. En cambio, no están recomendados para fotografías, ya que se perderían
colores, y al no tener áreas de color continuo, el archivo final sería mayor que por ejemplo
un JPG.
Formato JPG: Estas imágenes pueden contener millones de colores, en un archivo
comprimido de tamaño razonable. Por ejemplo, las imágenes que obtenemos de una
cámara digital suelen estar en este formato. Por tanto, son especialmente indicadas para
fotografías, o gráficos complejos, obteniendo mejores resultados que el GIF. En cambio, en
gráficos con pocos colores y continuos, generará un archivo mayor que el GIF, y podremos
apreciar pérdida de calidad.
Formato PNG. Se trata de un formato de compresión sin perdida. Tiene varias versiones:
PNG 8 es un formato de 256 colores muy similar al GIF, que en teoría obtiene archivos
algo menores. También admite transparencias.
PNG 24 y PNG 36. Es un formato de color verdadero (34 o 36 bits), lo que hace que sea
un archivo de tamaño algo mayor. Admite canal de transparencia alfa, lo que quiere
decir que puede obtener distintos niveles de transparencia, a diferencia de PNG 8 o
GIF que pueden ser totalmente transparentes o no. El resultado es el de mayor
calidad, pero también de mayor tamaño. Este formato es el más adecuado cuando
necesitamos distintos niveles de transparencia, o requerimos que una imagen muestre
correctamente todos sus colores y detalles, evitando la pérdida de calidad que puede
producir JPG. También resulta especialmente indicado para imágenes con degradados
de color.

Lo habitual es utilizar GIF o PNG para pequeños gráficos, normalmente elementos del diseño o
imágenes simples, y JPG para fotografías, sean del tamaño que sean. Nos limitaremos al uso de
estos formatos. Ya que aunque algunos navegadores soportan otros, no lo hacen todos. Y hemos
de asegurarnos de que cualquier visitante de nuestra página pueda ver las imágenes.

Si introduces una imagen no soportada en Dreamweaver, te aparecerá un cuadrado gris en
su lugar.


Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de
tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, o incluso desde el
propio Dreamweaver, como veremos en el siguiente avanzado.

Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora
de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes
y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.

6.2 Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto,
ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te
será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del
sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la página de carpeta, lo
habitual es cambiar también sus imágenes.

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo. La ruta en la que se
encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y
en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como
relativa a la carpeta raíz del sitio o relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la
carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen,
llamada animales.jpg, se encuentra dentro de la carpeta imágenes.


En el caso de insertar la imagen como relativa al Documento la ruta sería:

imagenes/animales.jpg

Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:

/imagenes/animales.jpg

Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la
carpeta raíz del sitio.

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el
documento.

Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en

Dreamweaver aparecerá así indicando que el enlace al archivo está roto.

En ese caso, la imagen que aparecerá en el navegador será similar a ésta:

Aparece un recuadro blanco con una X roja, junto con el nombre de la
imagen o el contenido del campo Alt del inspector de propiedades

6.3 Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Desde aquí podremos establecer distintos atributos a la imagen:

Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondrá directamente.
Como pasaba con el texto, podemos crear un hipervínculo en la imagen escribiendo la
dirección en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino.
Podemos hacer que cada zona de la imagen tenga un vínculo distinto, creando un Mapa
de imagen
En el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede
mostrarse. Es un atributo muy importante que deberíamos incluir siempre para hacer
páginas accesibles. Por ejemplo, el texto que se escribe será leído por los programas
lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el
usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No

EPW

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a EPW

Similar a EPW (20)

EPW