Unidad 1. CONCEPTOS BÁSICOS DE DREAMWEAVER CS4

1.1. Qué es Dreamweaver CS4

Dreamweaver CS4 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver CS4 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 Java Script,

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. Novedades de Dreamweaver CS4

En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.

Nueva interfaz de usuario. Dreamweaver CS4 presenta una nueva interfaz que permite

cambiar fácilmente de espacio de trabajo y adaptar los paneles de forma rápida y cómoda. Esta

nueva interfaz es muy parecida a los demás programas de Adobe, como Photoshop, Illustrator,

etc. Existen distintos espacios de trabajo adecuados para cada ocasión (clásico, programador,

diseñador, etc.) pero también tenemos la posibilidad de crear el nuestro propio de forma muy

sencilla.

Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, tal y como veríamos la

página en un navegador. Si hemos incluido elementos interactivos en nuestra página, como

menús desplegables, menús tipo acordeón, widgets, etc, podremos interactuar con ellos en la

vista en vivo, de la misma forma que lo haríamos en un navegador.

Navegador de código. La función de Navegador de código muestra las fuentes de código que

afectan a la selección que tengamos activa, pueden ser CSS (hojas de estilos en cascada),

funciones JavaScript externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc.

La nueva barra de Archivos relacionados. Muestra todos los archivos que de una forma u otra

contribuyen al diseño final de nuestra página, como hojas de estilo css, archivos javascript, etc.

Mediante esta nueva utilidad podemos pasar de un archivo a otro cómodamente y tener una

visión mucho más clara de todos los archivos con los que estamos trabajando en nuestro sitio

web.

Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, queda dividido en

propiedades HTML (el que conocíamos de otras versiones) y CSS. Éste último nos permite crear

y editar nuestros estilos de forma cómoda y sencilla.

1.3. 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.

1.4. 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 inicio.

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.

En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.

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.

1.5. Arrancar y cerrar Dreamweaver CS4

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

Desde el botón Inicio (Windows Vista) 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ú. Al colocar el cursor sobre Todos los programas aparece otra lista con los programas que

hay instalados en tu ordenador, buscar Adobe Dreamweaver CS4 y haz clic sobre él para

arrancar el programa.

Desde el icono de Dreamweaver CS4 del Escritorio .

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

1. Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana de Windows.

2. Pulsar la combinación de teclas Alt + F4.

3. 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.6. Abrir y guardar documentos

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

1. Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).

2. Pulsar la combinación de teclas Ctrl + O.

3. Hacer clic sobre el menú Archivo y elegir la opción Abrir. 4. Hacer doble clic sobre el archivo en la ventana del sitio. 5. Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción

Abrir con → Adobe Dreamweaver CS4.

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

1. Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible).

2. Pulsar la combinación de teclas Ctrl + N.

3. 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.

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.

1. Hacer clic en el botón Guardar de la barra de herramientas estándar.

2. Pulsar la combinación de teclas Ctrl + S.

3. 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.

1. Hacer clic en el botón Guardar todo de la barra de herramientas estándar. 2. 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.

1.7. Mi primera página

Vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a

otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con

los elementos básicos con los que están hechas la mayoría de las páginas web.

Lo primero que hay que hacer es abrir Dreamweaver. Ya hemos visto 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, hacer clic sobre la zona blanca del documento y escribir lo siguiente:

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

www.espoch.edu.ec

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.

Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de 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 utilicemos)

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.

Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que

estamos creando. Guárdala en la carpeta donde vas a guardar 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.

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 CS4 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 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 < 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, 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.

Unidad 2. EL ENTORNO DE DREAMWEAVER CS4

Vamos a ver cuáles son los elementos básicos de Dreamweaver CS4, la pantalla, las barras, los

paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman,

dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento

no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición

de empezar a crear páginas web.

2.1. La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes

fundamentales. Así conoceremos los nombres de los diferentes. La pantalla que se muestra a

continuación (y en general todas las que veremos) 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

La barra de la aplicación.

La barra la aplicación es una novedad en Dreamweaver CS4. 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.

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.

Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable.

Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que

podemos guardar y cargar. Lo veremos más adelante.

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.

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, o acceder a otras

acciones haciendo clic con el botón derecho, como Cerrar otros archivos.

Dreamweaver CS4 añade una novedad. 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.

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.

La 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.

La barra de herramientas de documento.

La barra de herramientas de documento 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.

La barra de representación de estilos.

Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en distintos

dispositivos, si estamos utilizando hojas distintas que dependan del eso.

Como veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo

como otra barra de herramientas.

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.

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.

El 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, hagámoslo:

Personalizar el área de trabajo (Ejercicio)

Abrir y cerrar paneles

Todos los paneles son accesibles a través del menú Ventanas.

Para cerrar un panel, basta con hacer clic derecho sobre su pestaña y elegir Cerrar del menú.

Un comando que puede resultarnos útil es la tecla F4. Al pulsarla, todos los paneles se ocultan.

Para mostrarlos, la volvemos a pulsar.

Acoplar y desacoplar paneles

A la derecha (por defecto) encontramos la pila de paneles, algunos paneles aparecen

acoplados. Eso quiere decir que se muestran como pestañas, pudiendo ver el que queramos

haciendo clic, pero sin poder ver dos a la vez.

Para desacoplarlos, basta con hacer clic sobre la pestaña y arrastrar.

Al mover el panel sobre distintos elementos, veremos que lo podemos acoplar en otros lugares

(zonas de colocación), que aparecerán resaltados en azul (imagen anterior). Esto nos permite

intercambiar paneles entre grupos acoplados o dejarlos como flotantes si los sacamos fuera.

Incluso algunos paneles, como el panel Insertar, nos permiten acoplarlos en la barra de

herramientas.

Cambiar el aspecto del panel insertar

Es posible cambiar el aspecto del panel. Como ya hemos dicho, podemos arrastrarlo hasta la

barra de menús para que tome un aspecto de fichas, como se aprecia en la siguiente imagen:

Pero también puede tener este otro aspecto, en menú:

Para alternar estos aspectos, hacemos clic derecho sobre el nombre en el menú y

seleccionamos la opción Mostrar como Fichas o Mostrar como menú, según el caso.

Cambiar los métodos abreviados de teclado

Los métodos abreviados de teclado son las combinaciones de teclas que permiten acceder a

algunas opciones sin la necesidad de moverse a través de los menús. Para modificar las

combinaciones de teclas hay que dirigirse al menú Edición, a la opción Métodos abreviados

de teclado.

En esta nueva ventana es necesario seleccionar un comando y una de las combinaciones de la

lista de Métodos abreviados, situar el cursor en el campo Pulse tecla, seguidamente pulsar la

combinación de teclas deseada, y por último hacer clic sobre el botón Cambiar.

Es posible que no se permita modificar las combinaciones de teclas del conjunto seleccionado,

por ser combinaciones que provienen de fábrica, por lo que se pedirá confirmación para crear

una copia modificable del conjunto.

Hay que tener también en cuenta que no se permite asignar a un comando una combinación de

teclas que ya está asignada a otro diferente.

Color de los iconos

Por defecto, los iconos de Dreamweaver se muestran de color gris, y al pasar el cursor por

encima, se muestran de color.

Pero como ves en la imagen anterior, podemos hacer que todos los iconos se muestren de

color. Para ello no tenemos más que elegir la opción Iconos de colores del menú Ver.

Espacios de trabajo

Si adaptamos a nuestro grupo el entorno y cerramos el programa, al volver a iniciarlo se

mantendrá nuestra configuración. Pero a la larga iremos haciendo cambios, abriendo paneles

que necesitemos puntualmente, cerrando otros por accidente, etc. Por eso es muy útil guardar

nuestra configuración y poder restaurarla cuando queremos.

A esta configuración del entorno, se le denomina Espacio de trabajo. Y podemos guardar

nuestra configuración actual desde el menú Ventana → Diseño del espacio de trabajo →

Nuevo espacio de trabajo.... y darle un nombre.

Como vemos en el la imagen, DiseñosWebFIE es un espacio personalizado. Además vemos

que Dreamweaver trae una serie de espacios ya creados que podemos utilizar. Para cargarlo,

basta con seleccionarlo en el menú.

Otra opción muy interesante que encontramos en este menú es la de Restablecer 'espacio'.

Esto lo volverá a cargar, muy útil cuando lo hemos desorganizado.

2.4. Vistas de un documento

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

documento:

La vista Diseño

La vista Diseño permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

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.

La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona superior

muestra el código fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de

las zonas, este cambio se aplica directamente sobre la otra.

La vista en Vivo

La vista en Vivo es otra de las novedades que trae Dreamweaver CS4. 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 pre visualizan 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.

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.

2.5. La ayuda

A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por temas, por índice o por contenido, si seleccionas la opción Ayuda de Dreamweaver o

simplemente pulsando F1.

Acceder a una Introducción a InContext Editing de la página de Adobe, que muestra un resumen de esta herramienta.

Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML.

Acceder a Dreamweaver Support Center en la web.

Acceder al Foros en línea de Adobe.

Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los términos

de la búsqueda y buscar, iremos a la ayuda online de Adobe.

Unidad 3. CONFIGURAR UN SITIO LOCAL

En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar

las propiedades de los documentos, como puede ser el color de fondo.

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.producciones.es en el

navegador, éste intentaría cargar la página http://www.producciones.es/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.producciones.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 con anterioridad.

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.

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 raíz 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.

Aunque sí destacaremos la opción Usar vínculos de distinción entre mayúsculas y

minúsculas. Ya comentamos, que aunque en nuestro equipo no por trabajar en Windows,

muchos servidores distinguen entre mayúsculas y minúsculas. Así Dreamweaver también lo

hará.

Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio. Si preferimos utilizar

un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vez

de la pestaña Avanzadas.

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.

Ejercicio paso a paso: Crear un sitio web local

Objetivo

Practicar las operaciones que hay que realizar para crear un sitio sin conexión a Internet.

Ejercicio

1. Crea una carpeta en tu disco duro, dentro de la carpeta ejercicios donde guardar los archivos de los distintos que vayamos creando. Llámala mis_sitios.

2. Copia a ella la carpeta Musicad3.

3. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

4. Haz clic sobre el menú Sitio.

5. Elige la opción Administrar sitios. Se abrirá una nueva ventana.

6. Selecciona el botón Nuevo..., y selecciona la opción Sitio. Se abrirá una nueva ventana.

7. Selecciona la pestaña Avanzadas de la nueva ventana.

8. Selecciona Datos locales en Categoría.

9. En Nombre del sitio escribe Musicad3.

10. En Carpeta raíz local busca la carpeta Musicad3 que acabas de copiar, y que se encuentra dentro de la carpeta mis_sitios. Selecciónala. Puedes hacerlo a través del botón con forma de carpeta.

11. En Carpeta predeterminada de imágenes busca la carpeta imagenes, que se encuentra dentro de la carpeta Musicad3, y selecciónala. Puedes hacerlo a través del botón con forma de carpeta.

12. Haz clic sobre el botón Aceptar y sobre el botón Listo.

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 artistas.html, contactos.html,

index.html, letras.htm, novedades.html y

videos.html ademas las carpetas imagenes y

videos.

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

descargarte 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 donde 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!

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 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:

1. Pulsar la combinación de teclas Ctrl + J.

2. Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

3. 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.

En la categoría Apariencia (CSS), como ves en la imagen anterior, encontramos las

propiedades:

1. Fuente de página: es el tipo de letra que le aplicaremos al texto.

2. Tamaño: es el tamaño de la fuente que aplicaremos al texto.

3. Color del texto: es el color de la fuente.

4. 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.

5. 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.

6. 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.

7. 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.

En la categoría Apariencia (HTML), como vemos en la imagen siguiente, encontramos las

propiedades:

1. 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.

2. 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.

3. Texto: es el color de la fuente.

4. Vínculos: es el color que mostrará el texto de los vínculos.

5. Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.

6. Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el mismo.

7. 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.

En la categoría Vínculos (CSS) encontramos las propiedades:

1. Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo.

2. Tamaño: es el tamaño del texto de los vínculos.

3. 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.

4. 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.

5. Vínculos de sustitución: es el color del texto del vínculo cuando situamos el ratón encima del vínculo.

6. Vínculos activos: es el color de los vínculos activos.

7. 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.

8.

En la categoría Encabezados (CSS) encontramos la propiedad:

1. 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.

En la categoría Título/Codificación encontramos la propiedad:

1. 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

En la categoría Imagen de rastreo encontramos las propiedades:

1. 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.

2. 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.

Comprobar tamaño para optimizar la carga

Si las páginas tienen muchos elementos (imágenes, 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 más nuestra página.

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

Dreamweaver permite calcular automáticamente el tiempo de descarga de las páginas. Para ello

hay que dirigirse al menú Edición, a la opción Preferencias.

En esta nueva ventana lo primero que hay que hacer es seleccionar una Categoría. En este caso nos interesa la de Barra de estado.

En ella habrá que establecer una Velocidad de conexión.

La velocidad por defecto, la velocidad es de 56,0 kbps que es la velocidad a la que se

conectaban lo módems telefónicos. Actualmente, las conexiones de ADSL y cable llegan a cifras

mucho mayores, de varios MB/s. No obstante, ha que establecer el valor al de la conexión media

de la región de los usuarios a los que va destinada la web.

Una vez establecida una velocidad de conexión, y aceptados los cambios, Dreamweaver

calculará el tamaño y el tiempo de descarga de la páginas a partir de esa velocidad de conexión.

Hay que tener en cuenta que el tamaño de descarga de una página no solo se calcula a partir

del tamaño de esa página en disco, sino que hay que considerar también el tamaño de las

imágenes que aparecen en ella, y del resto de elementos.

Cuando en la ventana de documento de Dreamweaver esté abierta alguna página, se mostrarán

su tamaño y su tiempo de descarga en la barra de estado.

Por ejemplo, esta página de ejemplo tiene un tamaño de descarga de 3255K, y se presupone un

tiempo de descarga de 465 segundos (para una conexión 56kb), ya que en la barra de estado de

la ventana de documento aparecen estos datos entre el tamaño de la ventana de documento y el

panel de propiedades.

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.

Ejercicio paso a paso: Crear nuevo documento y modificar sus propiedades

Objetivo.

Practicar las operaciones que hay que realizar para crear un nuevo documento html y configurar

las propiedades de la página.

Ejercicio

1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2. Abre el menú Archivo y elige la opción Nuevo, o bien haz clic sobre el botón de la barra de herramientas.

3. Selecciona Página en blanco en Categoría.

4. Selecciona HTML en Tipo de página.

5. Haz clic sobre el botón Crear.

6. A partir de este momento vamos a realizar todos los ejercicios en la vista diseño. Haz

clic sobre el botón Mostrar vista de diseño .

7. Haz clic con el botón derecho del ratón sobre el documento en blanco, para abrir su menú contextual.

8. Elige la opción Propiedades de la página en el menú contextual y selecciona la categoría Apariencia (CSS).

9. En Color de texto: escribe #585858.

10. En Color de fondo: escribe #FEFEFE.

11. Haz clic en la categoría Vínculos CSS.

12. En Color de vínculos: escribe #DFA01B.

13. En Vínculos visitados: escribe #F9CA69.

14. En Vínculos activos: escribe #FFB900.

15. Haz clic en la categoría Título/codificación.

16. En Título, escribe Deportes.

17. Haz clic sobre el botón Aceptar.

18. Haz clic sobre el botón Guardar de la barra de herramientas. Guarda el documento con el nombre menu.htm.

Unidad 4. EL TEXTO

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos

CSS, que permiten asignar al texto clases y estilos creados por nosotros mismos, no

predefinidos.

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.

Comenzamos viendo las 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.

Accediendo a las 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 CS4 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.

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.

Ejercicio paso a paso: Insertar texto y modificar sus propiedades

Objetivo

Practicar las operaciones de insertar texto y modificar sus propiedades.

1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos.

3. Selecciona el sitio Musicad3 en el panel Archivos. Recuerda que creamos este sitio en el tema anterior.

4. Haz doble clic sobre el documento contactos.html, que aparece en los archivos desplegados en el panel de Archivos. Se abrirá el documento en Dreamweaver.

5. Sitúa el punto de inserción antes de la primera letra de la primera línea.

6. Escribe el texto Quiénes somos y pulsa la tecla Intro para saltar de línea.

7. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

8. Haz clic en el texto Quiénes somos.

9. En Formato, del inspector de propiedades, elige Encabezado 1. Observa como ahora el texto es de mayor tamaño.

10. En la barra de herramientas de documento, haz clic sobre la caja de texto Título, y escribe Quiénes somos.

11. Haz clic sobre el botón Guardar de la barra de herramientas.

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):

1. Perro

2. Gato

3. Aves

1. Canario

2. Loro

4. 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

inferior.

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. Estilos 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 CS4, 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.

Veámoslo:

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>.

A continuación, definimos las propiedades del estilo.

Insistimos que esta opción es la menos flexible y debe empelarse sólo en casos concretos.

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 a 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. Las veremos más

adelante.

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.

4.7. Aplicar un estilo

En el caso de haber creado una regla para una etiqueta, nos será necesario aplicarla, ya que

directamente se aplicarán directamente.

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

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.

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.

Unidad 5. HIPERENLACES

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un

elemento esencial para cualquier página web.

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.misitio.com, o http://www.misitio.com/pagina/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 ejemplo imagenes/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.

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 a http://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, 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, aquí hay un enlace a www.aulaclic.es, que al ser un archivo externo es de

referencia absoluta, por eso contiene http://

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í.

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.

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

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 a través de Dest, 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, abre el documento vinculado en el mismo marco o ventana.

_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.

5.5. Formato del enlace

En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo,

puede adquirir tres colores diferentes que pueden especificarse a través de las propiedades de

la página. Estos tres colores diferentes corresponden a los tres estados del vínculo: vínculo

normal, vínculo activo (el último pulsado) o vínculo visitado.

Aquí tienes dos vínculos de ejemplo:

http://www.misitio.es/ http://www.misitio.org/

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.

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. 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.

UNIDAD 6. IMÁGENES

En este tema vamos a ver cómo insertar imágenes en un documento. También veremos cómo

crear algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, que

ayudan a mejorar la apariencia de nuestras páginas.

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.

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 imágenes y el documento en el que deseamos insertar la imagen. Dicha imagen,

llamada foto.jpg, se encuentra dentro de la carpeta imágenes.

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

imágenes/foto.jpg

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

/imágenes/foto.jpg

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 hiperenlace 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. 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 podemos insertarlo desde el panel, tenemos

que hacerlo desde el código fuente con el formato title="Texto a mostrar". Internet Explorer

muestra Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores

no lo harán, respetando el estándar.

En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle

alineación, bordes e incluso tamaño con sólo un clic.

Puedes asignarle un grosor de borde desde el campo Borde.

Puedes seleccionar su alineación con respecto al texto desde el campo Alinear.

Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen del

texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y

horizontal respectivamente entre la imagen y el texto.

Además, encontramos algunos controles de Edición: El botón nos permite optimizar la

imagen desde Dreamweaver, cambiando el formato o creando transparencias. Por otro lado, el

icono nos permite editar la imagen con un programa externo, como Photoshop o Paint.

MAPA DE IMAGEN

Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algún

tipo de comportamiento.

Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que se

desea crear el mapa, y abrir el inspector de propiedades de dicha imagen.

Estando seleccionada la imagen, ya es posible crear un mapa a través de los botones del

inspector de propiedades que tienen el siguiente aspecto: . Si no te aparecen

despliega el panel Propiedades para verlo completo.

Los tres últimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden

tener forma rectangular, circular, o libre, dependiendo del botón pulsado.

Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre la

imagen. Entonces ya es posible dibujar el mapa sobre la imagen, pulsando sobre los lugares

donde se desea que comience y finalice el mapa, así como sobre el resto de lugares (en orden)

que se desea que recorra el mapa en el caso de forma libre.

Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un vínculo y

un texto alternativo a ese mapa como puedes ver a continuación:

El primero de los botones, el de la flecha, debe pulsarse al finalizar la creación de un mapa, para

que el puntero recupere su forma original al situarse sobre una imagen. De este modo, es

posible mover los puntos del mapa, en el caso de que no hayan sido creados en los sitios

deseados, para ajustarlos mejor a la imagen.

OPTIMIZADOR DE IMAGEN

Cambiar el formato del archivo

Al pulsar el botón del Inspector de propiedades de la imagen, accedemos a la ventana

Presentación preliminar de la imagen, similar a la que vemos a continuación:

Sobre los botones de Aceptar y Cancelar, encontramos herramientas que nos permiten

desplazarnos por la imagen o el zoom. También encontramos las opciones de visualización. Una

muy útil es la que nos permite ver varias vistas de la imagen, pulsando el icono . En la

imagen anterior, vemos cuatro vistas del mismo archivo.

A cada vista podemos asignarle un formato de archivo distinto para comparar las diferencias. No

tenemos más que hacer clic en la vista, y seleccionar el formato que queramos del desplegable

Formato. En la pestaña Opciones podremos cambiar las opciones de cada formato.

Es muy importante la información que aparece junto a cada vista, que nos indica el formato

elegido y el tamaño que ocuparía el archivo en ese formato.

Vamos a examinar el ejemplo que tenemos en la imagen. Ten en cuenta que el resultado que

obtenemos depende íntimamente de la imagen seleccionada, y si utilizamos otra imagen podría

dar un resultado totalmente opuesto:

• La primera vista, arriba a la Izquierda, es un formato PNG 32.

Podemos ver que es el resultado de mayor calidad. La transparencia se muestra perfectamente,

por ejemplo en la sombra, y que podemos ver el fondo a través de la esfera, dando la sensación

de que sea de cristal. Por contra, vemos que es el archivo de mayor tamaño (14,59 K), mucho

mayor que el resto.

Nos quedaremos con este formato, si es necesario mantener las transparencias intactas.

• La segunda vista, arriba a la derecha, utiliza el formato GIF.

El archivo ya es algo menor (5,89 K). Lo primero que llama la atención es que sólo es

transparente el fondo. Esto se debes que GIF sólo admite un color uniforme como transparencia,

no admite distintos niveles de transparencia como PNG. Podemos ver que aunque la imagen no

tiene tonos de color continuos, ya que todos son degradados, no perdemos colores. Esto se

debe a que todos están dentro de la misma gama (como podemos ver en la paleta de la

izquierda) y no sobrepasan los 255.

Nos quedaríamos con este formato si no estuviese la sombra, siendo todo el fondo transparente

uniforme, y pudiésemos prescindir de la transparencia de la esfera.

• En la vista de abajo a la izquierda, empleamos un JPG de alta calidad.

Podemos ver que la calidad del resultado es casi idéntica al GIF. Salvo que sin transparencia, ya

que este formato no las soporta. No obstante, sí podemos ver que como la imagen no tiene

tonos continuos de color, el JPG logra una imagen de menor tamaño (2,95 K) que PNG y GIF.

Esta sería la mejor opción si podemos prescindir de las transparencias, por ejemplo porque el

color de fondo del documento también es blanco.

• En la vista inferior derecha tenemos un formato JPG de baja calidad.

Podemos comprobar que aunque es el archivo de menor tamaño, también es el de peor calidad.

En este caso, la pérdida de calidad no compensa el ahorro de tamaño.

Se trata, por tanto, de lograr un buen equilibrio o entre tamaño y calidad, ajustándolo a las

necesidades concretas de la imagen.

También hay que tener en cuenta que para poder elegir el formato adecuadamente debemos de

partir del formato con mayor calidad. En el ejemplo, la imagen original era un PNG 36. Si

hubiésemos partido del JPG de peor calidad, no la podríamos haber mejorado.

Y una vez más, recalcamos que estos resultados son para esa imagen en concreto.

Transparencias

En ocasiones puede resultar útil poder hacer invisibles algunos colores que forman parte de una

imagen. Normalmente lo que se desea hacer transparente es el fondo.

Por ejemplo, en la imagen siguiente el fondo puede desentonar con el fondo de la página, o

hacer que su apariencia sea más pobre.

Hay que tener en cuenta que lo que podemos elegir es un color (varios) de la imagen que será

transparente, haciendo que cada píxel de ese color sea transparente. Por lo que ése color sólo

debe de aparecer en las zonas que queramos cambiar. Además el fondo tiene que estar

claramente delimitado.

Los formatos que nos permitirán crear la transparencia serán PNG 8 y GIF. Si la imagen original

era JPG, el resultado no será bueno aunque lo cambiemos de formato, y que JPG altera los

tonos continuos.

Todo esto lo haremos desde la ventana Presentación preliminar de la imagen a la que

accedemos pulsando el botón del Inspector de propiedades de la imagen.

En el panel de la izquierda (recuerda que debe de ser el formato PNG 8 o GIF). Encontramos la

paleta de colores que forma la imagen.

Una forma de aplicar transparencia es a través de los botones que podíamos ver

en la imagen del apartado anterior.

Al seleccionar uno de los dos primeros botones, el cursor toma la forma de un cuentagotas .

Para hacer un color transparente, basta con hacer clic sobre el color (en la paleta de colores o

directamente sobre la imagen) con esta herramienta. Distinguiremos los colores transparentes

porque dejan ver la cuadrícula de cuadros blancos y grises:

La diferencia entre el primer y el segundo de los botones de cuentagotas, es que el primero solo

permite asignar transparencia a un color, mientras que el otro permite añadírsela a varios. El

último botón se utiliza para quitar la transparencia de algún color.

Al hacer transparente el fondo azul, el resultado final es el siguiente:

La existencia de transparencia permite mejorar notablemente la estética de nuestras páginas,

integrando mejor las imágenes con el diseño.

6.4. Cambiar el tamaño de una imagen

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.

Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho cambio de

tamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamaño

original.

Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo

podría quedar modificándola desde un editor externo, como Fireworks, Photoshop, etc..

Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de

Dreamweaver y modificamos su tamaño de varias formas diferentes:

Tamaño original Con tamaño modificado

El resultado puede ser más o menos satisfactorio, dependiendo del navegador que es el que

aplica realmente el reescalado, pero en ocasiones puede resultar útil modificar el tamaño de

algunas imágenes aunque esto implique perder calidad.

Existen dos formas de modificar el tamaño.

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los

recuadros negros que aparecen alrededor de la imagen.

La otra es a través de inspector de propiedades, cambiando los campos Ancho o Alto. Estos

campos aparecerán en el inspector cuando esté seleccionada alguna imagen.

Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en

negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original

haciendo clic sobre ella.

Como hemos comentado, este cambio de tamaño se produce alterando los atributos de anchura

y altura, pero no cambiando el tamaño real del archivo, por lo que el usuario deberá descargarse

el archivo completo con su tamaño original.

Por ejemplo, si tenemos una fotografía de nuestra cámara de fotos, de un tamaño grande (por

ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) esta

sería una mala solución, porque el usuario se estaría descargando el archivo completo, y no una

miniatura real que ocuparía mucho menos tamaño.

Dreamweaver también nos permite cambiar el tamaño real del archivo de imagen.

Para hacerlo, seleccionamos la imagen, y pulsamos en el icono del Inspector de

propiedades. Se abrirá la ventana Presentación preliminar de la imagen. Nos fijamos en la

pestaña Archivo.

En la sección escala, podemos establecer un porcentaje del tamaño original.

El nuevo tamaño se mostrará en An (ancho) y Al (alto). También podemos introducir

directamente el nuevo tamaño.

Incluso podemos recortar un área de la imagen, seleccionando Exportar área, y seleccionando el

área de la imagen en la previsualización de la derecha (no se ve en la imagen anterior).

Cuando lo tengamos, pulsamos Aceptar.

En este caso, si hemos alterado físicamente el archivo.

El resultado es bastante bueno, aunque siempre será mejor con herramientas especializadas,

como Photoshop o GIMP.

6.5. Imagen de sustitución. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo

de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de

distintas páginas.

Veamos un ejemplo de rollover. Partiendo de las siguientes imágenes

Hemos creado el siguiente rollover. Sitúa el cursor sobre él para ver qué es lo que ocurre.

Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción

Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de

sustitución.

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la

imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras

debidas a la descarga de la imagen cuando llega el momento de que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que

aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada

en el navegador.

El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede

hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.

6.6. Barra de navegación

Una barra de navegación es un conjunto de imágenes que se utilizan como opciones de menú

para navegar dentro de una web. Una página web solo puede contener una única barra de

navegación.

Para insertar una barra de navegación hay que dirigirse al menú Insertar, Objetos de imagen, a

la opción Barra de navegación.

En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada uno de los

botones, el vínculo para cada uno de ellos, etc.

A través de los botones superiores de la ventana es posible crear y eliminar botones de la barra

de navegación, así como reordenarlos. Con se crea un botón nuevo, con se elimina el

botón seleccionado, y con se puede modificar la posición del botón seleccionado.

En Imagen Arriba indicamos la imagen que quieres mostrar inicialmente (cuando todavía no se

ha hecho clic).

En Sobre imagen, pones la imagen que se mostrará cuando el usuario coloque el cursor sobre el

botón y éste estaba mostrando la imagen asignada en Imagen Arriba.

En Imagen abajo, indicamos la imagen a mostrar después de que el usuario haya hecho clic en

la imagen.

En Sobre mientras imagen abajo, indicamos la imagen a mostrar cuando el usuario mueva el

puntero sobre el botón y éste estaba mostrando la imagen asignada en Imagen Abajo.

De esta forma, si asignas imágenes distintas puedes saber cuál es el último botón que ha sido

pulsado (el que tiene Imagen Abajo).

Aquí tienes un ejemplo de barra de navegación. Para su creación se han utilizado las mismas

imágenes para todos los botones, pero como puedes ver, en el botón del medio aparece

inicialmente una imagen diferente de la de los otros dos. Esto se debe a que la opción Mostrar

"Imagen abajo" inicialmente estaba activa para este botón. Sitúa el puntero sobre los distintos

botones, y pulsa sobre alguno, para ver qué es lo que ocurre.

Observa el campo Texto alternativo (es lo mismo que el campo Alt). Cobra especial importancia

en los elementos de navegación. Si no lo ponemos, el usuario no podrá navegar si la carga de la

imagen falla.

El que existan cuatro imágenes diferentes sirve para identificar cual de los vínculos está activo,

cosa que con un simple rollover no puede hacerse.

A través de la opción Insertar es posible especificar si los botones de la barra de navegación van

a aparecer de forma horizontal o vertical dentro de la página.

Sólo podemos tener uno de estos menús por página, así que si intentamos insertar uno nuevo,

editaremos el existente.

Tanto la imagen de sustitución como la barra de navegación se apoyan en JavaScript, una

tecnología que permite cambiar el contenido de la página dinámicamente.

6.7. Objetos inteligentes

Los objetos inteligentes son imágenes que obtenemos directamente desde un archivo de

Photoshop (.psd).

Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de Photoshop.

Pero una archivo .psd no es un archivo que podamos mostrar en una página web. Por eso, lo

que hará Dreamweaver es convertirlo a un formato estándar. Por eso, tras abrirlo, Dreamweaver

nos pedirá que elijamos uno de los formatos gif, png o jpg y lo guardemos, con las mismas

opciones que encontrábamos al pulsar el botón del Inspector de propiedades.

¿Qué ventajas obtenemos con todo esto? Si observas la esquina superior izquierda del objeto

inteligente encontrarás un icono como éste . Las dos flechas verdes indican que el archivo

está sincronizado, es decir, la imagen está generada a partir del último archivo de Photoshop.

Pero puede que en cualquier momento queramos modificar la imagen. Podemos hacerlo

abriendo el archivo .psd, o pulsando el icono del Inspector de propiedades,

que abrirá el archivo fuente de Photoshop.

Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver ha cambiado,

mostrando ahora una flecha roja: . Esto indica que la imagen que estamos viendo en

Dreamweaver (jpg, psd, png) no es la misma que el original (psd) ya que se ha modificado.

Podemos volverla a generar pulsando el icono Actualizar desde origen.

Por lo tanto, los objetos inteligentes son útiles para imágenes que tengamos que editar

frecuentemente.

Unidad 7. TABLAS

En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas,

insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamaño del

borde.

7.1. Introducción

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero

gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al

lado de un bloque de texto, y otra serie de cosas que sin las tablas serían

imposibles de realizar.

La finalidad de las tablas es presentar una serie de datos de forma clara y

organizada, dividiéndolos en filas y columnas.

Hasta hace poco, y todavía hoy es fácil encontrar diseños web basados en tablas.

Esto es debido a la facilidad que nos ofrecen estos elementos para organizar

contenidos y repartir el espacio. No obstante, esta no es una práctica

recomendable, ya que las tablas no fueron pensadas para ello, y si no están bien

anidadas pueden ocasionar problemas al analizar nuestra web con herramientas

automáticas, como los bots que indexan el contenido para los buscadores. Para

maquetar nuestras páginas, lo recomendado es emplear capas (div) y CSS.

Las tablas están formadas por un conjunto de celdas, distribuidas en filas y

columnas. A continuación tienes un ejemplo de tabla.

7.2. Insertar una tabla

Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.

En la nueva ventana habrá que

especificar el número de Filas y

Columnas que tendrá la tabla,

así como el Ancho de la tabla.

El Ancho puede ser definido

como Píxeles o como

Porcentaje. La diferencia de uno

y otro es que el ancho en

Píxeles es siempre el mismo,

independientemente del tamaño

de la ventana del navegador en

la que se visualice la página, en

cambio, el ancho en Porcentaje

indica el porcentaje de la página

o del elemento contenedor) y se ajustará al tamaño de la ventana del navegador,

esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el

ancho de pantalla.

Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le

asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde.

Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y

los bordes de éstas.

Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.

También se puede establecer si se quiere un encabezado para la tabla, por

ejemplo para indicar el contenido de filas o columnas. Aunque podríamos lograr el

mismo diseño con celdas normales y estilos CSS, es recomendable utilizar

encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los

lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los

mismos a mantener un seguimiento de la información de la tabla.

Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la

tabla.

7.3. Rellenar las celdas

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la

intersección entre una fila y una columna.

imagen y texto

C

O

L

U

M

N

A

Texto dentro de una celda

CELDA

FILA

Para poder insertar algún elemento en una celda, ya sea texto o imágenes,

simplemente hay que situar el punto de inserción dentro de la celda deseada

haciendo clic. El elemento lo insertaremos como hemos visto hasta ahora.

Si queremos insertar elementos ya existentes en la celdas, tenemos que crear

primero la tabla vacía, y después seleccionar y arrastrar los elementos a insertar

sobre la celda. No podemos seleccionar el texto, y crear la tabla "alrededor", como

hacíamos, por ejemplo, con las listas.

7.4. Seleccionar elementos de una tabla

Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú

Modificar estando el punto de inserción en la tabla, o desplegando el menú

contextual de la tabla al pulsar con el botón derecho sobre ella. En ambos casos

aparece la opción Tabla, a través de la cual se puede elegir la opción Seleccionar

tabla.

También es posible seleccionar una pulsando con el ratón sobre el borde

exterior que la rodea, o pulsando <table> que aparece en la barra de estado de la

ventana de documento.

Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte

de la tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cada

columna. Junto a los anchos se encuentran unos menús desplegables (menú de

encabezado de la tabla y menú de encabezado de la columna). Estos menús

permiten acceder rápidamente a determinados comandos relacionados con la tabla.

Si tienes el punto de inserción en la tabla y no te aparece esa zona verde puedes

activar su visualización seleccionando la opción Anchos de tablas del menú Tabla

o también desplegando de la barra de menús, el menú Ver → Ayudas visuales →

Anchos de tabla. De la misma forma se desactiva su visualización.

Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene

un ancho especificado. Si aparecen dos números, el primer número corresponde al

ancho especificado en las propiedades de la tabla o columna y el segundo número

es el ancho el ancho visual que aparece en la vista de diseño; por ejemplo en la

tabla anterior la primera columna tiene 139 (142), en las propiedades de la celda

tenemos el ancho 139 píxeles pero al contener una imagen que necesita más

espacio, la columna ocupará realmente 142 píxeles (ancho visual de la columna tal

como aparece en la pantalla).

Cuando ocurren estas diferencias podemos hacer que en el código (propiedades)

se cambie el ancho por el real, para ello sólo tenemos que seleccionar la opción

Igualar todos los anchos del menú desplegable de encabezado de tabla.

En este menú vemos que también tenemos las opciones para Borrar o Igualar los

anchos.

Si en una tabla no indicamos los anchos, estos se ajustarán al contenido.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea

seleccionar filas, columnas o celdas.

Puede seleccionarse una fila o columna de varias formas, lo mejor es que

pruebes las distintas formas y elijas la que más te gusta. Estas son las formas de

selección:

Puedes utilizar la opción Seleccionar columna del menú de encabezado de

columna (zona verde de anchos) esto sólo es válido para seleccionar una

columna.

Manteniendo pulsado y arrastrando el ratón hasta seleccionar la columna/s o

fila/s completamente.

También puede hacerse situando el cursor junto al borde superior o

izquierdo de la columna o fila respectivamente, de modo que el cursor

cambia a la forma de una flecha negra. Al hacer clic se selecciona la

columna o fila a la que apunta dicha flecha.

En cualquier momento, para seleccionar una fila posicionar el cursor en

cualquier sitio de la fila y sobre la etiqueta <tr> de la barra de estado o

sobre la etiqueta <td> para seleccionar la celda.

Para seleccionar celdas:

Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratón mientras se arrastra sobre las celdas deseadas.

Para seleccionar una sola celda o varias celdas no contiguas, hay que

mantener pulsada la tecla Control mientras se hace clic sobre las celdas.

7.5. Formato de tabla

Las propiedades de la tabla se especifican a través de su inspector de

propiedades. En este caso, se crearán atributos para la tabla. Pero algunos de

estos valores, como el ancho, los podemos especificar mediante CSS.

A través del inspector de propiedades se pueden modificar los valores que se

especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como

pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a

la derecha de la pantalla), el borde de la (en Col. borde) o los valores de relleno y

espaciado de la celda.

Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de

propiedades cambia, para permitir especificar otros valores.

La parte superior del inspector de propiedades nos permite alternar entre las

propiedades HTML, que en este caso sirven para especificar las propiedades del

texto que se insertará dentro de la celda (o celdas) seleccionada, y la propiedades

CSS para definir los estilos.

La parte inferior sirve para especificar valores propios de la celda, como puede ser

el color o imagen de fondo (que es preferible definir con CSS), la alineación del

contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamaño (An. y Al.)

(en Fnd). Si no queremos que el tamaño se ajuste al contenido, marcamos la

opción No aj. y si queremos convertirla en un encabezado, basta con marcar la

opción Enc..

7.6. Formato CSS

Como cualquier elemento, podemos cambiar el aspecto de la tabla definiendo

propiedades CSS.

Los selectores.

Podemos definir una clase y aplicársela a la tabla desde el panel Propiedades, o si

es una tabla en concreto, asignarle un ID y definir las propiedades para ese ID.

Pero ¿y si queremos editar las propiedades de las etiquetas que forman la tabla?

Fijémonos en el aspecto de la barra de estado cuando tenemos el punto de

inserción en una celda:

Vemos que con el selector table nos referimos a la tabla completa. Con el selector

tr hacemos referencia a las filas y con el selector td hacemos referencia a las

celdas. Cuando las celdas sean encabezados, en vez de td, emplearemos el

selector th. Observa que no hay un selector para referenciar a las columnas

enteras, aunque sí existe un método empleando etiquetas <col />, es más

avanzado y no lo veremos en este curso.

Podemos crear clases y asignarlas a la tabla, a una fila o a una columna. Recuerda

que podemos emplear selectores compuestos. Así para referirnos a las filas de una

tabla con la clase miclase, lo haremos con el selector .miclase tr, y emplearemos

.miclase td para referirnos sus celdas.

Nota: Si al crear una página definimos las propiedades del texto empleando las

Propiedades de la página, Dreamweaver crea una regla con el selector

body,td,th. Es decir, aplica el mismo estilo a la página, a las celdas y a los

encabezados. Esto hará que por ejemplo, si cambiamos la fuente de la tabla, el

cambio no se aplique ya que prevalece la generada por Dreamweaver, por ser más

concreta. Esto puede entrar muchas veces en conflicto. Para evitarlo, lo mejor es

editar el selector dejándolo sólo como body. Recuerda que para editar un selector,

hacemos clic derecho sobre la regla en el panel Estilos CSS, y elegimos Editar

selector en el menú contextual.

Propiedades.

Podemos aplicar la mayoría de propiedades que ya hemos empleado a las tablas,

filas y columnas: fuente, tamaño, color, imagen de fondo.

Existen algunas propiedades CSS específicas de las tablas, como el borde

colapsado. Dreamweaver no nos permite asignar estos estilos con los asistentes,

así que los veremos más adelante.

Un estilo muy útil es el que nos permite centrar la tabla en la página. Para ello,

debemos editar los márgenes izquierdo y derecho (categoría Cuadro),

estableciendo el valor auto para ambos.

Otro aspecto que facilita ver los datos en la tabla son las filas alternas. Para

hacerlo, no tenemos más que crear una clase que, por ejemplo, cambie el color de

fondo, y aplicarla a filas alternas.

7.7. Cambiar tamaño de tabla y celdas

Como ya sabes, el Ancho de una tabla puede ser definido como Píxeles o como

Porcentaje. El tamaño de la tabla a través del inspector de propiedades estará

especificado por los valores de An (anchura) y Al (altura). Normalmente sólo se

especifica la anchura, no la altura.

Los valores An y Al de una celda siempre están en Píxeles. No es necesario

especificar ninguno de estos dos valores para las celdas, a no ser que se desee

que se mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido o

al tamaño de la ventana.

No solo puede establecerse el tamaño de las tablas y de las celdas a través del

inspector de propiedades. También es posible hacerlo manteniendo pulsado el

ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada.

7.8. Añadir y eliminar filas y columnas

Existen varias formas de añadir y eliminar filas y columnas a una tabla.

Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando

varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho

sobre ella, o bien abrir el menú Modificar. En ambos casos aparece la opción

Tabla.

Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán

utilizar mientras que otras no.

Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar

fila o Insertar columna.

La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que

la columna se inserta a su izquierda.

También tenemos una opción más completa, la opción Insertar filas o columnas....

Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que

se insertarán serán filas o columnas, el número de ellas que se insertará, y la

posición donde se insertarán.

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o

columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú

Tabla.

También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado

(Del o Supr)

7.9. Anidar, dividir y combinar celdas

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama

anidar tablas.

A continuación tienes un ejemplo de anidamiento. Como puedes ver, en la primera

celda de una tabla se ha insertado otra tabla.

Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres

insertar la nueva tabla e insertarla como ya hemos visto.

COMBINAR CELDAS consiste en convertir 2 o más celdas en una sola por lo

que dejará de haber borde de separación entre una celda y otra ya que serán una

sola. Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el

título de la tabla, normalmente más ancho. En este caso habría que combinar todas

las celdas de la primera fila en una sola.

Mientras que DIVIDIR CELDAS consiste en partir en dos una celda.

Una de las formas de dividir y combinar celdas es a través del inspector de

propiedades.

Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón

del inspector de propiedades (lo encontrarás en la parte inferior izquierda del panel

Propiedades, o pulsando sobre la opción Combinar celdas de la opción Tabla,

que como ya has visto puedes dirigirte a ella a través del menú contextual de la

tabla y a través del menú Modificar.

Tienes que tener en cuenta que sólo es posible combinar celdas contiguas, cuya

combinación pueda dar como resultado otra celda, es decir, que su combinación de

como resultado un rectángulo. No podemos combinarlas para formar una "L". Por

ejemplo, en la siguiente tabla no podrían combinarse las celdas 1 y 4, ni las celdas

1, 2 y 3, porque dichas combinaciones no dan como resultado una celda.

1 2

3 4

Podemos combinar celdas en vertical y horizontal:

Para dividir una celda hay que pulsar sobre el botón del inspector de

propiedades, o sobre la opción Dividir celda de la opción Tabla.

En ambos casos, aparece una ventana como ésta, en la que hay que especificar si

la celda se va a dividir en filas o columnas, y el número de éstas.

7.10. Modos de tabla

A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de

visualización. Nosotros hemos trabajado en todo el tema con el modo estándar, y

vamos a seguir trabajando con él, pero se puede pasar a los otros modos a través

del menú Ver opción Modo de tabla. Dentro de esta opción podemos elegir entre

Modo estándar o el Modo de tablas expandidas.

El Modo de tablas expandidas añade temporalmente relleno y espaciado de celda

a las tablas de un documento y aumenta los bordes de las tablas para facilitar la

edición. Este modo se puede utilizar para seleccionar elementos de las tablas o

colocar el punto de inserción de forma precisa e introducir contenido pero en este

modo no vemos la página como quedará exactamente.

En este curso nos limitaremos al modo estándar, aunque puedes emplear el Modo

de tablas expandidas cuando lo creas útil.

7.11. Adaptar webs a distintas resoluciones

Siempre que se crea una página web hay que tener en cuenta que va a ser visitada

por usuarios con monitores de distintos tamaños y con distintas resoluciones.

Desde las pequeñas pantallas de los portátiles de bajo coste, hasta monitores

panorámicos en alta resolución.

Existen dos tendencias principales a la hora de maquetar (distribuir los elementos)

en nuestra página: el diseño fijo y el diseño elástico.

1. El diseño fijo especifica las medidas en píxeles. Por lo que el contenido

siempre se mostrará del mismo tamaño, lo que facilita mucho el diseño. Por

contra, se desaprovecha mucho el espacio en monitores grandes, o puede

aparecer el "scroll" horizontal en monitores muy pequeños.

2. El diseño elástico especifica las medidas en porcentajes. Esto hace que

el contenido se adapte al tamaño de la ventana en la que se visualiza, lo que nos

permite aprovecharla completamente. Por contra, en diseños elaborados, es más

complicado hacer que la página no se descuadre, sobre todo cuando es demasiado

ancha o estrecha.

Como recordarás, el tamaño de las tablas puede ser definido en píxeles o en

porcentaje. Cuando el tamaño de la tabla sea definido en píxeles, la tabla se verá

del mismo modo independientemente del tamaño de la ventana del navegador. En

cambio, cuando el tamaño de la tabla sea definido en porcentaje, la tabla se

ajustará al tamaño del elemento que la contiene, lo cual implica que el contenido de

la tabla se puede descuadrar.

Al trabajar una página con tablas de tamaño fijo, en píxeles. Si modificas el tamaño

de la ventana, verás que la tabla es siempre del mismo tamaño. Esto tiene un gran

inconveniente, ya que si maximizas la ventana del navegador (lo que equivaldría a

visualizar la página en un monitor grande con alta resolución), a los lados de la

tabla aparecerá un gran espacio vacío.

Al trabajar con una página con tablas de tamaño variable, en porcentaje. Si

modificas el tamaño de la ventana, verás que las tablas se ajustan a ella. Usar

tablas con tamaño variable tiene también un gran inconveniente, ya que si

maximizas la ventana del navegador apreciarás claramente cómo el contenido de

las tablas se descuadra, quedando demasiado estirado, lo que dificulta su lectura.

En un principio puede parecer más conveniente utilizar tablas con tamaño fijo,

aunque esto implique que aparezca el hueco vacío a la derecha, en el caso de los

monitores con alta resolución. Pero con un poco de práctica a la hora de manejar

las tablas, puedes salvar el inconveniente del descuadre de la página y así definir

páginas con tamaño en porcentaje que aprovechen el ancho cuando el monitor de

más grande.

No solo puede establecerse el tamaño de la tabla, también es posible establecer el

tamaño de las celdas.

El tamaño de la celda a través del inspector de propiedades estará especificado

por los valores de An (anchura) y Al (altura). Normalmente solo se especifica la

anchura, no la altura.

Los valores An y Al de una celda siempre están en Píxeles. En la imagen anterior,

la celda no tiene una anchura concreta, se ajusta al contenido. Si la queremos

exactamente de 200 píxeles, basta con introducir 200px en An.. Para que, por

ejemplo, la anchura fuera del 25 por ciento de la tabla, en An. habría que escribir

25%.

Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qué

contiene cada una de ellas (imágenes, texto alineado a la derecha, texto alineado a

la izquierda, texto de gran tamaño, etc.), puede conseguirse que al visualizar la

página en monitores de distintos tamaños y con distintas resoluciones, la apariencia

sea bastante similar, o al menos que la distribución del contenido de la tabla no se

vea muy afectado por el cambio de tamaño de la ventana del navegador.

Unidad 8. Marcos

Vamos a ver qué son los marcos y para qué se utilizan. También veremos cómo

insertar un marco sencillo en una página, y cómo trabajar con él.

8.1. Introducción

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que

permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de

navegación, mientras que otras sí pueden cambiar. Además de mejorar la

funcionalidad, pueden mejorar también la apariencia.

Cada uno de los marcos de una página, contiene un documento HTML individual.

Por ejemplo, en la siguiente imagen puedes ver una página con dos marcos. El

marco izquierdo contiene el documento menu.htm y el derecho el documento

quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir

el documento index.htm, que es la página que contiene los marcos agrupados.

Actualmente los marcos están cayendo en desuso. Aunque son realmente

prácticos, crean problemas a la hora de ser indexados por los buscadores. Y estar

correctamente indexado y posicionado es crucial para una web.

Por ejemplo, si vemos el código fuente de una página con marcos, vemos que

realmente no hay más que las llamadas a las páginas correspondientes, por lo que

no hay nada que indexar. Por otro lado, si se indexa una página, puede que el

visitante llegue a ella directamente, no a través del marco. Esto hace, por ejemplo,

que el usuario no pueda acceder a los elementos de navegación de nuestro sitio.

El problema más común al no usar marcos es tener que repetir los elementos

comunes, como el menú y logo en cada página, con la complicación

correspondiente a la hora de hacer un cambio. No obstante, esto es fácilmente

solucionable si empleamos PHP o JavaScript en nuestra página.

Por lo tanto, si piensas colgar tu página en internet para uso público, no te

recomendamos su uso. Pero si la página es de uso privado, tal vez te facilite el

trabajo emplear marcos.

8.2. Crear marcos

Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de

ellas.

Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo

o uno ya existente.

Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede

elegirse el tipo de marco que va a crearse.

Vamos a ver el marco a la Izquierda.

Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del

documento actual.

Como puedes ver en la imagen, aparece una línea que

divide el documento en dos. El documento de partida era uno nuevo.

En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el

que contiene el grupo de marcos. El de la derecha es el documento que teníamos

inicialmente, que está en el marco conocido como marco padre (MainFrame).

Para seleccionar el documento que contiene el grupo de marcos hay que pulsar

sobre la línea que separa los marcos. Esto solo es posible mientras dicho

documento no se haya guardado.

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco

vacío aparecerá a la derecha del documento original.

En esta imagen puedes ver un ejemplo de marco a la derecha.

Sobre un documento ya existente, menu.htm, se ha insertado un marco a la

derecha.

Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de

la derecha, y el que contiene el grupo de marcos. En este caso, el documento que

teníamos inicialmente es el de la izquierda, mientras que antes era el de la derecha.

Por ello, en este caso el marco padre será el de la izquierda.

El marco padre siempre es el marco en el que se encuentra el documento inicial,

sobre el que se han insertado el resto de marcos.

8.3. Seleccionar marcos

Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos,

que puede abrirse a través del menú Ventana. También puedes abrir el panel

Marcos pulsando la combinación de teclas Mayúsculas + F2.

En el panel Marcos aparecen los marcos que contiene el documento de marcos, y

se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede

seleccionarse la página de marcos pulsando sobre el borde que rodea a los marcos

(el que aparece más grueso y en relieve en la imagen).

No es necesario seleccionar los marcos para editar los documentos que éstos

contengan.

Sí es necesario seleccionar los marcos para especificar las propiedades específicas

de cada uno de ellos.

8.4. Guardar

Todos los documentos que contienen marcos tienen que tener una página en cada

uno de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas por

defecto en cada uno de ellos, a excepción del marco que contiene la página

original.

Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya

existentes, como ya veremos más adelante.

Es necesario guardar la página que contiene el grupo de marcos, así como cada

una de las páginas que están incluidas en sus marcos.

No es conveniente guardar la primera vez los marcos con la opción Guardar todo

, ya que podemos equivocarnos al dar los nombres a los nuevos documentos.

Es preferible guardar cada documento uno por uno, a no ser que todos los marcos

contengan alguna página ya existente, ya que en ese caso el único documento al

que habrá que dar nombre será al que contiene el grupo de marcos.

Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo

previamente.

Para guardar cada uno de los otros documentos, simplemente hay que situar el

cursor en ellos antes de pulsar sobre Guardar .

8.5. Configurar marcos

Una vez seleccionado un marco a través del panel Marcos, pueden establecerse

sus propiedades a través del inspector de propiedades.

Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombre

de marco. El nombre no puede contener espacios en blanco.

En Origen aparece el nombre del documento HTML que está contenido en el

marco.

En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto

de marcos. En el caso de que se muestre el borde, se puede especificar un color

para éste a través de Color borde.

Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el

documento del marco no pueda visualizarse completamente.

Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las

medidas del marco desde el navegador.

El Ancho del margen y el Alto del margen indican la separación que habrá entre el

contenido del marco y sus bordes izquierdo-derecho y superior-inferior.

Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspector

de propiedades es algo diferente.

En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre

sí y puede especificarse un color para este a través de Color del borde. También es

posible establecer un grosor para el borde a través de Ancho.

El campo Columna (o Fila dependiendo del marco elegido en Selección Fila Col.)

sirve para especificar el tamaño del marco, que puede ser en Píxeles, Porcentaje

(de la ventana) o Relativo (proporcional al resto de marcos).

Normalmente utilizarás dos marcos, uno de ellos con tamaño en Píxeles, que será

el que contenga la barra de navegación, y el otro marco con tamaño Relativo, para

que se ajuste a la ventana del navegador.

8.6. Contenido del marco

Como ya has visto, el contenido de un marco puede establecerse a través del

campo Origen del inspector de propiedades.

Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en

cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que

el de otros ha de poder variar.

A través del campo Origen del inspector de propiedades, sólo es posible especificar

el documento que se cargará inicialmente en el marco, pero hemos de poder

cambiar este documento por otro a través de vínculos.

Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los

enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar

para que servía cada uno de ellos, ya que ahora que ya sabes trabajar con marcos

te serán más fáciles de entender.

_blank:

Abre el documento vinculado en una ventana nueva del navegador.

_parent:

Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.

_self:

Es la opción predeterminada. 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, lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.

Además de estos destinos para los enlaces, también aparecerán los nombres de los

distintos marcos de la página.

Podemos añadir todos estos destinos a cualquier elemento de la página que

contenga algún enlace, ya sea texto, una imagen, un mapa de imagen, un elemento

Flash, etc.

Gracias a todo esto podremos hacer que las barras de navegación y el resto de

enlaces funcionen a nuestro antojo, cargando unas u otras páginas en alguno de los

marcos, en una ventana nueva, en toda la ventana, etc.

Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy

buenos resultados finales.

Unidad 10. Multimedia

Vamos a ver cómo insertar elementos multimedia. En concreto, veremos cómo

insertar una animación Flash, un sonido y un vídeo, que son los más empleados.

10.1. Películas Flash (SWF)

Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF. Es

frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación

hacia los usuarios, como banners publicitarios, como botones... Flash es el

elemento multimedia más empleado en las páginas web.

Estas películas pueden crearse mediante el programa Flash también de Adobe.

Para poder ser visualizado en el navegador, y necesitan que el usuario tenga

instalado el plug-in de Flash Player. Su instalación es muy sencilla y normalmente

ya viene con el navegador.

El contenido de esta p&aacutegina requiere una versi&oacuten m&aacutes reciente

de Adobe Flash Player.

Las películas Flash pueden insertarse en una página a través del menú Insertar →

Media, opción Flash, o pulsando Ctrl + Alt + F.

También pueden insertarse empleando el panel Insertar en la categoría Común,

pulsando sobre la opción SWF que aparece al desplegar el menú Media.

Veamos las opciones más importantes que nos ofrece el inspector de propiedades

cuando tenemos seleccionado el archivo Flash:

Como en otros elementos, como las imágenes, podemos asignarle el ancho (An.) y

alto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.

Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), nos resultará muy útil indicar su ubicación en Origen. Así, para editarlo, bastará con pulsar Editar.

La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.

La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nada más cargarse la página comenzará a reproducirse la película Flash. Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película hasta que el usuario la activase. Por tanto interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.

La Calidad, cuanto más baja, antes se cargará el archivo pero peor se verá. Conviene dejarla en Alta para verlo tal cuál se creó.

La Escala permite elegir cuanto se verá del archivo. Las películas Flash no siempre son del tamaño exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se verá todo la película. En cambio, si elegimos Ajuste exacto, se verán sólo los objetos, omitiendo el escenario de fondo.

Alinear funciona como con las imágenes, y nos permite alinear la película en relación con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un párrafo) empleando CSS.

Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es Transparente, el fondo se verá transparente (a no ser que se haya especificado un color de fondo en el Flash).

El botón Reproducir nos permite ver la película.

Al insertarse la película, veremos la ubicación en la vista de diseño con el siguiente

aspecto:

Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos

archivos que nos permitirán reproducir los elementos, normalmente creando la

carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro

sitio, si no los archivos no se verán. De todas formas, Dreamweaver nos avisará

cuando incluya archivos.

10.2. Sonido

No es muy habitual incluir sonido en una página web, ya que algunos usuarios

suelen estar escuchando su propia música cuando navegan en Internet, por lo que

el escuchar también sonido en cada página que se visita puede resultar algo

molesto.

A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página,

puede hacerla más atractiva. Las páginas que contienen sonido suelen ofrecer la

posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen

escuchar el sonido de la página puedan desactivarlo. Siempre es mejor que que el

usuario abandone la página.

Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3,

el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes

que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no

ocupe mucho espacio, y que no por ello sea de mala calidad.

Para insertar un archivo de audio en un documento tienes que dirigirte al menú

Insertar, Medía, opción Plug-in.

A continuación, para el que se muestran los controles de audio. Si lo deseas,

puedes reproducirlo pulsando sobre los controles (recuerda encender los altavoces,

si los tienes).

Pueden ocurrir dos cosas:

Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, se

mostrará un control similar a este (imagen de IE8):

En cambio, si el plugin necesario no está instalado, el navegador ofrecerá la

posibilidad de hacerlo, como en esta imagen de Firefox.

Un plugin es un añadido al navegador, que nos permite realizar funciones extra,

como en este caso, reproducir un archivo de música. Al insertar un elemento como

plug-in lo que indicamos es que el navegador debe de intentar abrir el archivo

empleando los pluigns que tenga para tal fin. Por eso, si no lo tiene, nos invitará a

instalarlo.

En Dreamweaver no se mostrarán los controles de audio. Todos los archivos

que son insertados como plugin aparecen representadas dentro de

Dreamweaver por una imagen como la de la izquierda.

En el inspector de propiedades pueden establecerse la altura y la anchura con la

que se mostrarán los controles de audio, mediante Al y An.

En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de

los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se

escuche el sonido en la página, pero que no se muestren los controles de audio, los

campos Al y An deben valer cero.

Los sonidos se reproducen automáticamente al cargarse la página, y se reproducen

solamente una vez. Estos valores no pueden definirse como propiedades a través

del inspector de propiedades, pero si los conocemos podemos empelar el botón

Parámetros....

Por ejemplo, para que el archivo se reproduzca continuamente se hemos añadido

loop="true".

Si no queremos que se reproduzca automáticamente, podemos añadir también

autostart="false"

La línea de código del archivo de audio nos quedaría del siguiente modo:

<embed src="media/audio.mid" autostart="false" loop="true"></embed>

Si quieres poner música de fondo en una página web, sin que aparezcan los

controles de audio, puedes escribir este código directamente en la vista Código.

<bgsound src="cancion1.wav" loop="-1">

Insértalo después de la etiqueta </title> Con el parámetro loop puedes decidir

cuántas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo

continuo).

No obstante, insistimos en que no es recomendable poner música sin controles de

reproducción.

Lo más habitual en la web es insertar el sonido empleando Flash. Esto hace que no

se necesiten plugins, sólo poder reproducir Flash. Además, nos permite crear los

controles personalizados.

10.3. Vídeos

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que

tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo

tanto, precisan de mucho tiempo para descargarse.

En este apartado nos referimos a inserta vídeo de un archivo alojado en nuestro

sitio. No a mostrar vídeos de sitios especializados, como youTube.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el

MOV.

Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú

Insertar, Medía, opción Plug-in.

Puedes ver el vídeo (si tienes el plugin adecuado) a continuación:

El inspector de propiedades para los archivos de vídeo insertados de esta forma es

el mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.

Hay que prestar especial atención al ancho y alto. Por defecto, si Dreamweaver no

puede obtener el tamaño del archivo lo fijará a 32 x 32, insuficiente para ver un

vídeo. Es mejor borrarlos, y así el vídeo se mostrará con su tamaño original. Si

conocemos el tamaño del vídeo, podemos pensar en insertarlo directamente, pero

hay que tener en cuenta el tamaño de los controles de reproducción, que depende

de cada navegador.

Los vídeos también se reproducen automáticamente al cargarse la página, y se

reproducen solamente una vez. Estos valores pueden cambiarse a través botón

Parámetros, del mismo modo que en el caso de los archivos de audio, añadiendo

autostart="false" y loop="true".

Como ya hemos dicho, todos los objetos insertados a través de la opción Plug-in

precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para

reproducirlos. En el campo Origen del inspector de propiedades se establece el

archivo vinculado (el archivo de audio o de vídeo) que ha de reproducirse.

En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede

establecerse en el campo URL plg una página en la que pueda encontrarlo. No será

necesario en los archivos más comunes de audio y vídeo, pero sí si intentamos

cargar un archivo más raro.