Unidad 2.

El entorno de Dreamweaver CS4 (I)

2.1. La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como ésta:

2.2. Las barras

*La barra de la aplicación.

Esta barra contiene los siguientes elementos: los menús, 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 cambiar entre la vista
de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios.

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.

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

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

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.

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

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

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 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.
Accede 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.
Configurar un sitio local
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. 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.

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.

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 y el sitio remoto.

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.

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.6. Propiedades del documento
Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato,
es decir, que tengan el mismo color de fondo, de fuente, etc.

Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de
la página.

Este cuadro se puede abrir de tres modos diferentes:

Pulsar la combinación de teclas Ctrl + J.

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

Se abrirá el cuadro de diálogo siguiente: Las propiedades están organizadas en categorías.

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

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

Tamaño: es el tamaño de la fuente que aplicaremos al texto.
Color del texto: es el color de la fuente.
Color del fondo: permite especificar un color de fondo para el documento, pero dicho color
solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen
se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que
según los colores de la imagen será necesario establecer unos u otros colores para el texto,
así como que no es conveniente tener un gif animado como fondo.
Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no
queremos que se repita, seleccionamos la opción no-repeat. Si queremos que se repita o
dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se repita
 solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita en vertical,
entonces seleccionamos repeat-y.
Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde
empieza el contenido de la página y la ventana del navegador.

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

propiedades:

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

Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en
el caso de no haber establecido ninguna imagen de fondo.
Texto: es el color de la fuente.
Vínculos: es el color que mostrará el texto de los vínculos.
Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.
Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el
mismo.
Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza
el contenido de la página y la ventana del navegador.
En la categoría Vínculos (CSS) encontramos las propiedades:

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

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

Fuente de encabezado: permite establece el tipo de fuente de los encabezados.

El resto propiedades hacen referencia al estilo cursiva o negrita, así como al tamaño y color que
queremos aplicar a cada tipo de encabezado.

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

Título: es el título del documento, que aparecerá en la barra de título del navegador y de la ventana de
documento de Dreamweaver

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

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

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.

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.
Unidad 4. El texto: propiedades y formato (I)

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.

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.

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.

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

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

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.

Estilo:
Estos botones pone al 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.

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.

Unidad 4. El texto: propiedades y formato

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 .

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, el tipo de números o viñetas
que se utilizarán, 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.

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.

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

4.5. Crear un estilo personalizado

Crear un estilo en línea.

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

Crear una regla de estilo:

Para ello, En el Inspector de propiedades CSS, en Regla de destino, seleccionamos < Nuevo estilo

en línea >.
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.
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.
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 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.

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

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

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.

Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta <a></a>.

5.2. Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.

Referencia absoluta:

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

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:

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 imágenes/miimagen.gif.

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

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

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 (#).

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

Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos,
etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla

Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.

Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos 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, y la que se produce si no indicamos otra cosa. Abre el documento
vinculado en el mismo marco o ventana que el vínculo.

_top:
Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se emplean
marcos.
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. Estos tres colores diferentes corresponden a los tres estados del
vínculo: vínculo normal, vínculo activo o vínculo visitado.

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.
En las propiedades del documento teníamos la categoría Vínculos CSS que nos permite establecer
estos valores.

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

Veamos cómo eliminarlo 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.

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.
5.6. Enlace a correo electrónico
Es posible especificar vínculos a direcciones de correo electrónico.

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.
Unidad 6. Imágenes (I)

6.2. Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen (Ctrl + Alt + I).

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

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.

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

Existen otros atributos que afectan al diseño de la imagen.

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

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.

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 pre visualización de la derecha. Cuando lo tengamos, pulsamos Aceptar.

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.

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.

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.

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.

Existe una forma parecida de crear estos efectos utilizando CSS, y de hecho son más utilizados.
Básicamente consiste en cambiar la imagen de fondo de un elemento
6.7. Objetos inteligentes
Los objetos inteligentes son imágenes que obtenemos directamente desde un archivo de Photoshop.

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.

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.

Unidad 7. Tablas (I)
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.

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 indica la distancia entre el contenido de las celdas y los bordes de éstas.

Espacio entre celdas indica la distancia entre las celdas de la tabla.

También se puede establecer un encabezado para la tabla, por ejemplo para indicar el contenido de
filas o columnas.

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.

C
O
imagen y texto L
U
Texto dentro de una M
celda N
A

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.

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

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.

Puede seleccionarse una fila o columna de varias formas:

Puedes utilizar la opción Seleccionar columna del menú de encabezado de 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.
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.
Unidad 7. Tablas (V)

7.7. Cambiar tamaño de tabla y celdas

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

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

Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla
e insertarla.

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

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.
Unidad 8. Marcos (I)

8.2. Crear marcos

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.

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

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 9. Formularios (I)
Vamos a ver qué es un formulario, para qué se utiliza, cómo insertar uno, qué elementos puede
contener y cómo pueden validarse los datos introducidos en él.

9.2. Elementos de formulario

Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción
Formulario, o lo que es más cómodo si vamos a insertar varios elementos, desde el panel Insertar en
la sección Formularios.

A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser
insertados en la página.

Campo de texto y Área de texto

Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el
Área de texto permite escribir varias.

Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando
la opción Una línea o Multi línea respectivamente.

También es posible definirlo como Contraseña es como el campo de texto pero las letras que va
tecleando el usuario se sustituyen por un carácter.

Área de texto
Campo de text ***

A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el
número máximo de líneas o caracteres, y el valor inicial del cuadro.

Botón

Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario,
Restablecer formulario, o Ninguna.

También es posible cambiar el texto del botón, a través de la propiedad Valor del inspector de
propiedades.

Como mínimo tiene que haber un botón del tipo Enviar formulario, imprescindible para enviar los
datos. Además le suele acompañar un botón Restablecer formulario para hacer reset en el caso de
que el usuario quiera comenzar de nuevo a rellenarlo.
 Casilla de verificación: Es un cuadrito que se puede activar o desactivar, para indicar si el usuario ha
elegido una opción o no.

Deseo recibir información

Puede asignársele el Estado inicial como Activado o como Desactivado.

Botón de opción: Es un pequeño botón redondo que puede activarse o desactivarse.

Superman

Spiderman

Lista/Menú: Una lista o menú es un elemento de formulario que lleva asociada una lista de

opciones.

--- Elige opción menú---

Perro
Gato
Canario
--- Elige opción lista --- Loro

Los elementos se añaden a través del botón Valores de lista... del Inspector de propiedades.

Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una lista, a
través de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios
simultáneamente.

Etiqueta

Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber
qué datos ha de introducir en cada uno de ellos. Además, al estar asociadas al control nos permite
activarlo al pulsar sobre el texto. Esto es muy práctico en casillas de verificación y botones de opción.

Sin etiqueta. Hay que pulsar sobre la casilla

 Con etiqueta. Podemos pulsar en el texto.

Una propiedad muy importante de los formularios es su nombre. Ya que al recibir los datos, a través del
nombre sabremos qué control los envía.
9.3. Crear formularios
Antes de insertar los elementos o controles del formulario, hemos de crear un formulario. Los
elementos los introduciremos dentro de él, ya que cuando lo demos a enviar, sólo se enviarán los datos
de los elementos de dentro del formulario.

Puedes crear formularios a través del menú Insertar → Formulario, opción Formulario, o desde el
panel Insertar.

Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro
formado por líneas naranjas discontinuas.

Estas líneas son ayudas visuales al trabajar en diseño, pero no se verán en el formulario final.

Entre las propiedades del formulario, encontramos el campo Acción. En el indicamos a dónde se
envían los datos. Normalmente, una página PHP que se encara de tratarlos.

Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes
insertar a través del menú Insertar, opción Formulario o desde el panel Insertar.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas
se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y
mejora su apariencia.
9.4. Validar formularios
La validación de formularios sirve para hacer que JavaScript valide el formulario antes de que se envíe,
avisando al usuario para que corrija los errores, como campos obligatorios sin rellenar. Esto es mucho
más eficaz que enviar la página y validarla sólo en el servidor.

Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a
través del menú Ventana, opción Comportamientos (Mayús + F4). Comportamientos forma parte
del panel Inspector de etiquetas.

En este panel hay que desplegar el botón y pulsar sobre la opción Validar formulario, deberás
haber seleccionado el formulario previamente.

Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del
formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que
ha de cumplir.

Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha

de ser numérico (Número) y si ha de estar en un rango, una Dirección de correo electrónico, etc.
Unidad 10. Multimedia (I)

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

Las películas Flash pueden insertarse en una página a través del menú Insertar → Media, opción
Flash (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., que al estar marcada indica que nada más cargarse la página
comenzará a reproducirse la película Flash.
La Calidad, cuanto más baja, antes se cargará el archivo pero peor se verá.
La Escala permite elegir cuanto se verá del archivo. 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.
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.
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.

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.

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

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.

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.

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. 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 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.
Unidad 11. Las plantillas

11.2. Crear plantillas

Las plantillas pueden crearse desde cero, o a partir de una página ya existente.

Una forma de crear una plantilla desde cero es a través del panel Archivos, pestaña Activos.

La pestaña Activos se puede abrir a través del menú Ventana, opción Activos.

Una vez abierto el panel hay que seleccionar el botón , para poder trabajar con las plantillas.

Los botones inferiores del panel Activos son similares a los del panel Estilos CSS.

El único botón diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten
crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla.

Para crear una nueva plantilla hay que pulsar sobre el botón . Si el botón está desactivado, pulsa
con el botón derecho del ratón sobre el área de plantilla y elige Nueva Plantilla).

Para modificar una plantilla la seleccionamos de la lista y pulsamos el botón .

Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botón .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea
automáticamente.

Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y después
guardarlo como plantilla a través del menú Archivo, opción Guardar como plantilla, aparecerá:
En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a través del campo

Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar.

11.3. Establecer regiones editables en una plantilla
Todos los elementos de una plantilla están bloqueados por defecto, no se pueden modificar.

Es necesario establecer las zonas para que puedan ser editadas en las páginas que se basen en dicha
plantilla.

Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a través del panel

Activos, pulsando dos veces sobre ella, o estando seleccionada pulsando sobre el botón como ya
hemos visto.

Una vez abierta la plantilla es posible establecer sus propiedades a través de la ventana Propiedades
de la página.

Pulsar la combinación de teclas Ctrl + J.

Para insertar una región editable hay que situar el puntero en el lugar en el que se desea insertar, y
después dirigirse al menú Insertar, Objetos de plantilla, opción Región editable,(Ctrl + Alt + V).

En la nueva ventana hay que establecer un Nombre para la región editable.

Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre.

Posteriormente puede modificarse el nombre a través del inspector de propiedades de la región

editable.

Las zonas editables aparecen representadas en Dreamweaver como un recuadro con una etiqueta de
color turquesa. En la etiqueta aparece el nombre de la zona editable.

Dentro del recuadro es posible insertar objetos, que aparecerán por defecto en aquellos documentos
que se basen en la plantilla. Estos objetos, al estar dentro de la zona editable, podrán ser modificados
en las páginas.

La región editable se ajustará al tamaño del contenido. Todos los objetos que se encuentren fuera de
estas zonas editables aparecerán también en las páginas, pero no podrán ser modificados.
11.4. Basar páginas en una plantilla

La opción más simple, consiste en elegir una Página de plantilla al crear un Nuevo documento.

Como vemos en la imagen anterior, al seleccionar la categoría Página de plantilla, aparece un listado
con los sitios. Seleccionando el que queramos, aparecerá otro listado con las plantillas del sitio, y una
vista previa de la seleccionada a la derecha.

Bastaría con seleccionar la que queramos utilizar y pulsar en Crear. El nuevo documento estará
basado en la plantilla, y solo tendremos que modificar las regiones editables.

Una vez abierto el documento, hay que dirigirse al menú Modificar, Plantillas, opción Aplicar plantilla
a página.
Después de pulsar sobre la opción Aplicar plantilla a página aparece una ventana como la siguiente,
en la que hay que seleccionar una de las plantillas de la lista Plantillas: del sitio.

Es recomendable activar la casilla Actualizar página cuando cambie la plantilla, para que la página
se actualice automáticamente en el caso de modificar la plantilla en la que se basa.

A pesar de estar trabajando sobre un documento vacío, es posible que al aplicar la plantilla aparezcan
nombres de regiones no coincidentes entre el documento en blanco y la plantilla. En ese caso se
muestra una ventana como la siguiente.

En ella hay que establecer una correspondencia entre el nombre de la región del documento vacío con
el nombre de alguna región de la plantilla.

En este ejemplo, la región del documento vacío que no coincidía con el nombre de ninguna región de la
plantilla era la región Document body.

A través de Mover contenido a la nueva región: se puede seleccionar una región de la plantilla, para
establecer así la correspondencia que se necesitaba.

Después de establecer las correspondencias necesarias, se carga la plantilla en el documento vacío.

Para que una página deje de estar basada en una plantilla hay que dirigirse al menú Modificar,
Plantillas, opción Separar de plantilla.

Cuando se separa una página de una plantilla, el contenido de la página sigue siendo el mismo que el
que tenía cuando aún estaba basada en la plantilla, pero sin las restricciones establecidas por la
plantilla, ni las ventajas al editar la plantilla original.
Unidad 12. HTML desde Dreamweaver (I)

12.1. Etiquetas
Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento
de la página Web.

Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta
indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre.

Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que
actúan, incluyendo cierto código dentro de la etiqueta.

También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May + INTRO
dentro del código HTML equivale a la etiqueta <br>. Realmente estas etiquetas si tienen cierre, y se
pone en la etiqueta de apertura para seguir el estándar XHTML que obliga a que todas las etiquetas se
cierren. Por tanto el salto de línea anterior se escribiría <br />. Otras etiquetas que se cierran sobre sí
mismas son las imágenes <img />, reglas horizontales <hr /> o elementos de formulario <input />.

12.2. Entidades HTML

HTML también dispone de códigos especiales para representar caracteres especiales como
pueden ser letras con acentos o no pertenecientes al alfabeto latino internacional, signos de puntuación
o tipográficos y símbolos especiales que presenten un problema en HTML como < ó >, que podrían
malinterpretarse por el inicio de una etiqueta.

Estos códigos pueden mostrarse como un código numérico o con un nombre de entidad. Ambos
métodos son igualmente aceptables, pero ambos deberán ir encerrados entre los símbolos & y ;.

De este modo, < se escribirá como &lt; o &#60;

Aquí tienes una tabla de los caracteres más utilizados con sus Entidades HTML numérica y de

nombre de entidad:
12.3. El inspector de código
Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista Diseño, vista Código y vista
Dividir (Código y Diseño).

Todas estas vistas se aplican directamente sobre la ventana del documento.

Pero existe un panel que permite visualizar el código independientemente de la vista aplicada en el
documento. Este panel es el llamado Inspector de código y puede abrirse a través del menú Ventana,
opción Inspector de código. También podemos abrir el Inspector de código pulsando F10.
El Inspector de código muestra el código HTML de la misma forma que lo hacen la vista Código y
la vista Dividir (Código y Diseño), pero puede resultar más cómodo trabajar con el panel, ya que
puede situarse en cualquier parte de la pantalla, y no se limita sólo al espacio del documento.
12.4. Completar las etiquetas
Una de las posibilidades que ofrece Dreamweaver a la hora de trabajar directamente sobre el código
HTML es la de completar las etiquetas mientras se van introduciendo. Esto se produce tanto en el
Inspector de código como en las vistas de código.

Vamos a ver cómo funciona el mecanismo de completar etiquetas a través de este ejemplo.

Las etiquetas se completan siempre de izquierda a derecha, por lo que lo primero que debemos
insertar es el símbolo < .

Después de escribir nosotros este símbolo, Dreamweaver mostrará una lista con todos los comandos
que pueden aparecer después de él. Para elegir uno de ellos hay que pulsar dos veces sobre él con el
puntero del ratón, o bien, estando seleccionado, pulsar INTRO.

En este caso tenemos que elegir a, después de lo cual desaparecerá la lista. En el código tendremos

Podemos continuar escribiendo el nombre de la etiqueta, o seleccionarla de la lista cuando sea visible.
Si se trata de la seleccionada en azul, basta con pulsar la tecla Intro. En este caso, como la etiqueta
de enlace sólo tiene una letra, no necesitamos de esta opción.

Después de <a hay que introducir un espacio en blanco. Nada más teclear el espacio en blanco
aparecerá otra lista de elementos, que son los que pueden escribirse después de la a, los atributos de
la etiqueta.

Tenemos que elegir href. Para hacerlo, podemos optar por seleccionarlo de la lista con doble clic,
pulsar h (para que se seleccione) + Intro (para introducirlo) o escribirlo.

Una vez seleccionado, el código quedará como:

En el caso de atributos en los que hay que indicar la ubicación de un archivo, nos aparecerá la opción

Examinar... que abre el cuadro de diálogo para elegir el archivo. También podemos continuar

escribiendo la dirección.
12.5. Contraer y expandir código
Una de las ventajas de Dreamweaver es la posibilidad de seleccionar fragmentos de código y
contraerlos para facilitar su legibilidad.

Por ejemplo, podemos seleccionar el trozo de código correspondiente a una tabla, como se ve en la
siguiente imagen, aunque podemos seleccionar cualquier código:

Con el texto seleccionado, pulsamos en uno de los iconos junto a los números de línea o el icono

Contraer selección .

De esta forma podríamos ocultar el código que no nos interesa y dejar el resto del código más legible.

Para volver a la situación inicial basta hacer clic en el icono expandir , o en el signo + que aparece
al lado del código contraído.

Otro botón que nos ayudará será el icono Seleccionar etiqueta padre . Este botón selecciona toda
la etiqueta que contiene al punto de inserción. A medida que los sigamos pulsando, irá seleccionado
las etiquetas en orden jerárquico, aumentando la selección.

El icono contraer etiqueta completa contrae la etiqueta que contiene al punto de inserción, sin
necesidad de seleccionarla primero.

Una pega que encontramos es que esto no se guarda, y la próxima vez que abramos el documento
aparecerá todo el código expandido.
12.6. Errores en el código
Al volver al modo gráfico es posible ver si hay algunos errores en el código HTML, como puede ser una
etiqueta incompleta. El código erróneo aparecerá en amarillo:

Si volvemos al código podremos encontrar el error fácilmente. Para que los errores se resalten, debe

de estar pulsado el icono: .

En el ejemplo anterior nos hay el cierre de la etiqueta de apertura.

Otra forma de detectar errores en el código es fijándonos en los colores. Por ejemplo, si no hemos
cerrado una etiqueta o las comillas de un atributo, veremos que los colores del código no son como
deberían.

Otra forma de detectar errores en nuestra página es a través del menú Comprobar navegadores de
destino en la barra de herramientas Documento.

Para ver los errores que tiene nuestra página, desplegamos el menú y elegimos la opción Validar
documento actual.

A continuación se abrirá el panel Resultados con las lista de los errores encontrados.

A continuación se abrirá el panel Resultados con las lista de los errores encontrados.
 En esta lista aparece el grado de importancia del error representado mediante un icono, el globo de
palabras indica un mensaje informativo (señala código que no es compatible con un navegador
pero que no tiene ningún efecto visible), el icono de signo de exclamación con fondo rojo indica error
(indica código que puede causar un problema visible grave en un navegador concreto, como hacer
desaparecer partes de una página) y el icono de signo de exclamación con fondo amarillo indica
advertencia (señala una parte de código que no se visualizará correctamente en un navegador
concreto).

A continuación tenemos la página y número de línea donde está el error y una descripción del
mismo. Podemos hacer doble clic para ir al código correspondiente.

A veces la descripción es un texto largo que no se puede visualizar completamente para ello puedes

utilizar el botón Más info. .

Para comprobar la compatibilidad de la página web que hayas creado puedes utilizar el desplegable
Comprobar página. Despliégalo y haz clic sobre la opción Comprobar compatibilidad con
navegadores:

Se abrirá la ventana de resultados con todos los posibles problemas o incompatibilidades que se
presenten para cada uno de los navegadores y sus respectivas versiones.

Si haces clic en la opción Configuración se abrirá un cuadro de diálogo como éste:

Donde podrás indicar que navegadores y a partir de qué versión quieres que se tengan en cuenta
cuando Dreamweaver realiza la comprobación de compatibilidad.
12.7. Buscar y reemplazar
En ocasiones es posible querer buscar dentro de un sitio web todas aquellas páginas que contengan
un texto en concreto, una etiqueta en concreto, o parte de estos elementos. Tal vez los queramos
buscar porque deseemos trabajar sobre esas páginas y no recordábamos cuál de ellas era, o tal vez
porque queramos cambiar ese texto o etiqueta por otros.

Puedes abrirla a través del menú Edición, opción Buscar y reemplazar (Ctrl + F).

Mediante Buscar en puede especificarse en qué documentos buscar. Podemos buscar sólo en el
documento actual, en todo el sitio (sitio actual completo), o en los archivos seleccionados del sitio,
en los abiertos o en una carpeta en concreto..

A través de Buscar se especifica si hay que buscarlo en el texto, o en el código HTML. También
podemos emplear el texto avanzado, o etiqueta específica.

Junto a la lista de opciones de Buscar, aparece un cuadro de texto en el que hay que indicar el texto o
el código que se desea buscar.

En Reemplazar hay que especificar el texto o el código por el que se desea cambiar el texto o código
buscado. Si queremos borrar basta con dejarlo vacío. Si no vamos a reemplazar no es necesario.

En Opciones encontramos las opciones de búsqueda: si el texto debe coincidir en mayúsculas y

minúsculas, si se omitirán los espacios en blanco, si la palabra a buscar debe ser una palabra
completa o puede formar parte de otra, o si el texto introducido es un patrón de expresión regular.

El reemplazo puede hacerse de varias formas, siempre a través de los botones de la derecha de la
ventana. Una de ellas es buscar uno por uno cada uno de los documentos que contengan el código o
texto a buscar, y reemplazar cuando se desee. Para ello se utilizan los botones Buscar sig. y
Reemplazar.

Si se desean buscar todos los documentos que contengan dicho texto o código, y reemplazar en todos
ellos, se utilizan los botones Buscar todos y Reemp. todos. O podemos reemplazarlos todos
directamente.

Cuando se utiliza la opción Buscar sig., se abre la página en la que se encuentra el texto coincidente,
resaltando en el código fuente la línea en la que éste se encuentra. De este modo podemos decidir uno
por uno los cambios a realizar. Cuando estemos seguros de querer reemplazar pulsaremos sobre
Reemplazar, y cuando no deseemos reemplazar volveremos a pulsar sobre Buscar sig..

Cuando se utiliza la opción Buscar todos se cierra la ventana de Buscar y reemplazar y se abre un
nuevo panel en el que aparecen todos los documentos en el que coincide el texto o el código buscado.

Pulsando sobre el botón vuelve a abrirse la ventana de Buscar y reemplazar. Desde dicha
ventana podemos reemplazar en los documentos encontrados, uno por uno, con el botón Reemplazar,
o bien reemplazar directamente en todos los documento encontrados, pulsando sobre el botón Reemp.
todos.
Unidad 14. Capas

14.2. Insertar una capa

Las capas pueden insertarse en una página a través del menú Insertar, opción Objeto de diseño,
donde encontramos Etiqueta Div (división simple) y Div PA (Capa con Posición Absoluta).

Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla
primero.

Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono
correspondiente, pero esto no resulta útil cuando existen muchas capas en un mismo documento, ya
que todas las capas tienen asociada una imagen igual a ésta, y no es fácil seleccionar la deseada a la
primera.

Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a través de la

pestaña Elementos PA del panel CSS, que puede abrirse a través del menú Ventana opción
Elementos PA. También puedes abrir el panel pulsando F2.

En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para
seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel.
14.3. Formato de una capa

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

Elemento CSS-P es el nombre o ID de la capa. Desde aquí podemos asignarle otro ID, pero si lo
hacemos perderá las propiedades que hayamos indicado para este elemento. Si lo que queremos es
cambiar el ID por otro más descriptivo, podemos hacer clic derecho sobre el borde de la capa y elegir
ID... en el menú contextual. También puede ser cambiado a través del panel Elementos PA, haciendo
doble clic sobre él.

Izq y Sup indican la distancia en píxeles que hay entre los límites izquierdo y superior del documento y
los lados superior e izquierdo de la capa respectivamente.

An y Al indican la anchura y la altura

Índice Z es el número de orden de colocación de las capas. Este valor también puede cambiarse a
través del panel Elementos PA. Una capa será solapada por aquellas capas cuyo índice Z sea mayor
que el suyo.

Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:

1. Default (visibilidad según el navegador),

2. Inherit (se muestra la capa mientras la página a la que pertenece también se esté
mostrando),

3. Visible (muestra la capa, aunque la página no se esté viendo) y

4. Hidden (la capa está oculta).

La visibilidad también puede cambiarse a través del panel Elementos PA, pulsando sobre la imagen
del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.

A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.

Desb. (Desbordamiento). En el caso de las Capas PA podemos indicar un ancho y alto, por lo que
puede que el contenido no quepa dentro de la capa. Con esta propiedad controlamos cómo aparecen
las capas en un navegador cuando el contenido excede el tamaño especificado de la capa.

1. Visible indica que el contenido adicional se muestra, excediendo los límites de la capa.

2. Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador.

3. Scroll (desplazamiento) especifica que el navegador deberá añadir barras de

desplazamiento a la capa tanto si se necesitan como si no.

4. Auto (automático) hace que el navegador muestre barras de desplazamiento para la capa
cuando sean necesarias (es decir, cuando el contenido de la capa supere sus límites).
Visible, hidden, auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
Autom scroll Éste sí cabe.

Todo lo que hemos definido de la capa, aparece como propiedades CSS en la cabecera de la página,
utilizando como selector el ID o nombre de la capa. Por eso, si queremos emplear una capa en la
misma posición en distintas páginas, podemos exportar ese estilo a una hoja de estilos, y en cada
página crear una capa y darle el mismo ID. Recuerda que el ID ha de ser único en la página, pero
puede repetirse en páginas distintas.
14.4. Capas prediseñadas

Al crear un nuevo documento, habrás visto que aparece la columna Diseño.

Estos diseños, que podemos elegir, están basados en capas.

Lo que harán será dividir nuestra página en las filas y columnas que elijamos, con anchos fijos o
variables.

El nombre es bastante descriptivo, y además están acompañadas de gráficos que representan el

diseño, por lo que no necesitan más explicación.

Una vez seleccionado un diseño, sólo tendremos que reemplazar el texto de ejemplo por el contenido
que queramos.
Unidad 15. Comportamientos (II)

15.2. Insertar un comportamiento

Lo primero que hay que hacer es asignar un ID al que afectará el comportamiento. Esto lo podemos
hacer desde el inspector de propiedades.

Después seleccionamos el objeto que activa el comportamiento, como puede ser una imagen, un
fragmento de texto, etc.

El elemento al que afecta y el que activa el comportamiento puede ser el mismo o no.

Al desplegar el botón del panel Comportamientos aparece la lista de todas las acciones posibles.

Según el elemento sobre el que se desee aplicar el comportamiento, se podrán elegir unas acciones,
mientras que otras no.

Después de elegir alguna acción, el comportamiento correspondiente aparece en el panel

Comportamientos. En este caso se han insertado dos comportamientos.

Como puedes ver, cada comportamiento tiene asociados un evento y una acción.

Las acciones son las que se han elegido en la lista anterior y el evento indica cuándo se debe de
realizar la acción.
Para eliminar un comportamiento, en el panel Comportamientos y pulsamos el botón y se cambiar

el orden de los comportamientos aplicados a un objeto, con los botones .

15.3. Mostrar-Ocultar elementos

Uno de los comportamientos más habitual e interesante es el de Mostrar-Ocultar elementos. Lo que
hace este comportamiento es alternar entre las propiedades de visibilidad visible y hidden.

Después de seleccionar la el elemento que producirá el evento hay que seleccionar una acción de la

lista, pulsando sobre el botón . En este caso la acción tiene que ser la de Mostrar-Ocultar
elementos.

Tras elegir la acción, se mostrará un cuadro de diálogo en el que aparecen listados todos los
elementos de la página que podemos ocultar o mostrar:

Hay que especificar qué elementos han de mostrarse u ocultarse para el evento. Para ello hay que
pulsar dos veces sobre la acción, en el panel Comportamientos.

Puede indicarse si se van a Mostrar, si se van a Ocultar, o si van a adquirir la visibilidad inicial.

Para determinar la visibilidad de cada una de las capas es necesario seleccionarlas una por una,
indicando su visibilidad a través de los botones inferiores de la ventana.

Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente hay que volver
a pulsar sobre el botón correspondiente a la visibilidad que ya tiene aplicada.

Hay que tener en cuenta en este caso que lo que se desea es que al situar el puntero sobre la imagen,
se muestre la capa, y que cuando el puntero deje de estar sobre la imagen, la capa se vuelva a ocultar.

Para ello es necesario insertar dos comportamientos con la acción Mostrar-Ocultar elementos. Uno
de ellos mostrará la capa para el evento onMouseOver (cuando el ratón esté sobre), mientras que el
otro la ocultará para el evento onMouseOut (cuando el ratón esté fuera).
15.4. Llamar JavaScript
Otro de los comportamientos que puede aplicarse sobre algún objeto es el de Llamar Javascript. Este
comportamiento permite insertar código JavaScript dentro del código del documento.

Por ejemplo, es posible hacer que se cierre la ventana del navegador al pulsar sobre un objeto. Para
ello hay que insertar la línea JavaScript "window.close();".

Lo primero que hay que hacer es seleccionar el objeto sobre el que se desea aplicar el

comportamiento. Seguidamente seleccionas la acción Llamar Javascript a través del botón

Entonces aparece una nueva ventana en la que hay que introducir la línea JavaScript.

Una vez insertado el comportamiento, en el panel Comportamientos hay que establecer el evento
onclick (al hacer clic) para que la llamada a JavaScript se produzca al pulsar una vez sobre el objeto.

Pulsando dos veces sobre la acción vuelve a abrirse la ventana anterior, y es posible modificar la línea
de código.
Unidad 18. Sitios remotos (I)

18.1. Configurar un Sitio Remoto

Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las opciones y que
Dreamweaver se pueda conectar con nuestro servidor.

Para ello deberemos modificar la especificación que creamos en su día del sitio con el que estamos
trabajando.

Así que haz clic en el menú Sitio y selecciona Administrar sitios.

Selecciona el sitio con el que quieras establecer comunicación remota y pulsa Editar.

Verás que se abre el cuadro de diálogo de Definición del Sitio.

Ahora podremos escoger entre trabajar en modo básico o avanzado. Vamos a seleccionar la pestaña
Avanzado para poder ver con más detenimiento las opciones que se nos ofrecen.
Una vez estés en el nuevo modo, selecciona la Categoría Datos remotos en el listado de la izquierda.

Ahora en el desplegable Acceso selecciona el método de acceso que deberá utilizar Dreamweaver
para conectarse con el servidor. Como ya hemos dicho nosotros explicaremos la opción FTP.

Se mostrarán las siguientes opciones:

Aquí deberás rellenar los datos que te facilitó el servicio de hosting que contrataste. Si no recuerdas los
datos o has perdido el correo electrónico que seguramente te enviaron, pídeles de nuevo la
información.

Los datos que necesitas son los siguientes:

Servidor FTP o host es la dirección a la que se dirigirá Dreamweaver para conectarse a tu servidor.

En el campo Directorio del Servidor podremos establecer una carpeta contenida en el servidor
donde queramos subir las páginas.

En Usuario y Contraseña escribe el nombre de usuario y el password para poder conectar con el
servidor. Marca la casilla Guardar si quieres que el programa recuerde la contraseña.

Una vez introducidos estos datos puedes pulsar el botón Probar para ver si son correctos y
Dreamweaver puede crear una conexión con el servidor remoto.

Finalmente comentaremos la opción Permitir desproteger y proteger archivo. Esta casilla es útil
cuando más de una persona está utilizando el mismo servidor y las mismas páginas. De esta forma
podrás bloquear diversos archivos para evitar que se vean modificados por otra mientras tú trabajas
con ellos.

Si seleccionas la opción Cargar archivos en el servidor automáticamente al guardar forzarás a que

Dreamweaver suba los archivos cada vez que los guardes.

Una vez hayas terminado Acepta todas las pantallas hasta volver a la vista de trabajo y estaremos
listos.
18.2. El Panel Archivos
Desde el panel Archivos seremos capaces de controlar nuestro sitio local y remoto de forma fácil y
rápida.

A primera vista el panel Archivos muestra este aspecto:

Su uso es bastante sencillo. Observa los dos desplegables de la parte superior.

El primero te permite seleccionar el sitio con el que estamos trabajando. El segundo te permite cambiar
la vista de ese sitio.

Esta última opción es muy útil para ver el contenido que se encuentra subido en Internet. Una vez
hayas configurado las opciones del Servidor Remoto podrás desplegar esta opción y seleccionar
Vista remota, se mostrarán todos los archivos que en ese momento se encuentran en el servidor.

Ahora veremos para qué sirven los botones:

El botón Conectar te permitirá establecer una conexión con el servidor.

El botón Actualizar actualiza las listas de las vistas local y remota. Así podrás ver el contenido
exacto en cada momento de cada uno de los sitios.

Utiliza el botón Obtener para descargar al servidor local archivos que hayas seleccionado en el
panel Archivos en la vista remota.

El botón Colocar actúa de forma contraria. Sube los archivos seleccionados en la vista local al
servidor, se copiarán y si existen se sobre escribirán.
 Utiliza el botón Proteger para realizar la acción anterior de Obtener pero protegiendo el archivo
que se encuentra en el servidor convirtiéndolo en sólo lectura.

Del mismo modo, el botón Desproteger actúa del mismo modo que el botón Colocar pero
cuando sube el archivo al servidor lo desprotege para que pueda ser modificado por otras personas.
18.3. Sincronizar Sitios

Ésta es una de las opciones más útiles en cuanto a Sitios Remotos.

Para realizar una sincronización haz clic derecho sobre cualquier zona en el panel Archivos y
selecciona la opción Sincronizar....

Verás que aparece un cuadro de diálogo como éste:

Éste es el paso más importante en la sincronización, pues decidiremos de qué modo se va a realizar.

En el desplegable Sincronizar: seleccionaremos una de las dos opciones, Archivos locales

seleccionados solamente o Todo el sitio.

En el desplegable Dirección: estableceremos las pautas que se deben seguir durante la

sincronización.
Si seleccionas Colocar archivos más nuevos en remoto cuando se comparen ambos sitios, se
sobrescribirán aquellos en el sitio remoto que tengan una fecha de modificación menor a la que exista
en el local. De esta forma copiarás en dirección Local a Remoto.

Si seleccionas la opción Obtener archivos más nuevos de remoto se copiarán aquellos archivos que
se encuentren en el sitio remoto que tengan una fecha de modificación mayor que la del local. En este
caso estaremos copiando en dirección Remoto a Local.

La última opción, Obtener y colocar archivos más nuevos, se refiere a la sincronización como tal.
Evalúa los archivos en el sitio remoto y local y copia los más nuevos en el que contiene los más viejos.
En este caso la Sincronización es Bidireccional.

Marca la opción Eliminar archivos remotos no existentes en la unidad local si quieres que los
archivos que se encuentren en el remoto que no estén en el local se borren.

Al pulsar Vista previa... aparece un listado con los cambios que se van a realizar, sólo nos quedará
aceptarlo.

Debido a que no todos los servidores tienen acceso FTP y que no tienes porqué tener acceso a un
servidor remoto no realizaremos ningún ejercicio sobre este tema. Si quieres establecer una conexión
con tu servidor remoto sólo tendrás que seguir los pasos explicados en la teoría.
Unidad 19. Servidor de Pruebas (I)

19.2. Estructura PHP

Si abres un archivo PHP verás que tiene cierto parecido a un archivo HTML.

Esto es debido a que el código PHP se incrusta dentro del código HTML. Únicamente será necesario
introducir un par de marcas para establecer el principio del código y el final.

Veamos un ejemplo:

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Documento sin t&iacute;tulo</title>

</head>

<body>

<?php

echo "<p>&iexcl;Hola mundo!</p>";

?>

</body>

</html>

Este código podría pegarse en un archivo PHP, guardarse en un servidor que soporte PHP y
ejecutarse.

El resultado que nos mostraría sería una página web con un párrafo en el que se podría leer ¡Hola
mundo! (la instrucción echo escribe texto en pantalla).

Sin embargo, aunque se trate de un archivo PHP puedes ver que se parece muchísimo a un HTML.
Sólo que en el momento de agregar código de programación hemos añadido dos etiquetas (una de
apertura y otra de cierre ) para indicar que lo que se encuentra entre ellas es código PHP y debe ser
ejecutado.

Estas etiquetas son <?php y ?>, aunque también es posible encontrar su forma abreviada <? y otra de
cierre ?> por lo que el código anterior se podría sustituir por:

<?

echo "<p>&iexcl;Hola mundo!</p>";

?>
Unidad 19. Servidor de Pruebas (III)

19.3. Instalar un Servidor Local con WampServer

No podemos ejecutar una página PHP en nuestro equipo y verla como lo hacíamos como un página
HTML, ya que nuestro navegador no puede ejecutar su código, así que mostrará todo. Requerimos
verla a través de un servidor que sea capaz de ejecutar este código, y de consultar una base de datos
si es necesario.

Vamos a arrancar la aplicación. Para ejecutar el programa sólo tenemos que ir a Inicio → Todos los
programas → WampServer y finalmente en start WampServer, o utilizar su acceso directo, si lo
creaste durante la instalación.

El programa no abre ventanas. La única referencia que tenemos de él es su icono en el área de

notificación (junto al reloj).

19.6. Configurar un Servidor de Pruebas

Una vez instalado WampServer tendremos listo un servidor local capaz de correr PHP sin ningún tipo
de problemas.

Ahora podemos combinar esta aplicación con Dreamweaver para probar las páginas dinámicas que
vayamos creando en nuestro sitio.

Para ello no hará falta más que declarar un Servidor de prueba en Dreamweaver.

Para ello deberás editar la configuración del sitio, haz clic en Sitio y luego en Administrar sitios....

Selecciona el sitio que quieras modificar y pulsa Editar.

Se abrirá el cuadro de diálogo de Definición del sitio.

Selecciona la pestaña Avanzada y haz clic en la categoría Servidor de pruebas.

Verás las siguientes opciones:

En el desplegable Modelo de servidor deberemos seleccionar el tipo de servidor que estamos

utilizando, en nuestro caso es PHP MySQL.

El tipo de Acceso será Local/red al tener instalado el servidor en nuestra propia computadora.

Ahora deberás rellenar los datos del servidor de pruebas.

En Carpeta de servidor deberemos seleccionar una carpeta dentro del localhost donde guardaremos
los archivos que queramos probar. Pueden ocurrir dos cosas:

Si nuestros archivos están ya en localhost (o accesibles con un alias), podemos indicar la misma
carpeta en la que está definido el sitio en Dreamweaver.
Si no están en localhost, debemos de crear una carpeta allí para el sitio. Al vincular esa carpeta con el
sitio, Dreamweaver irá copiando allí los archivos necesarios.

En nuestro caso nuestro localhost lo hemos definido un alias (sitios) para la carpeta que contiene los
sitios con los que estamos trabajando. Por lo tanto en Carpeta de servidor, dejamos la misma carpeta
del sitio en Dreamweaver. Insistimos en que si tienes la carpeta de servidor en otra ubicación, debes
indicarla aquí.

Y finalmente escribe el URL del sitio de pruebas. Siempre comenzaremos por http://localhost/. Si sólo
tenemos un sitio, lo normal es definirlo directamente ahí. Si tenemos varios, debemos de indicar la
subcarpeta correspondiente o su alias. En nuestro caso tenemos hemos definido el alias sitios. Por lo
tanto, aquí indicaremos http://localhost/sitios/carpeta_del_sitio/

Acepta y habremos terminado.

Dreamweaver nos mostrará un mensaje de advertencia. En el nos dice que si trabajamos con vínculos
absolutos, los enlaces no funcionarán, ya que se toma como raíz del sitio localhost, no la subcarpeta
donde realmente tenemos el sitio.

A partir de este momento, cada vez que, trabajando sobre un archivo PHP, pulses la tecla F12 para
visualizarlo en el navegador se mostrará gracias a nuestro localhost.

Pero antes nos mostrará el siguiente mensaje:

Si la carpeta local y la carpeta del servidor de pruebas no es la misma, debemos de decir que Sí, para
que Dreamweaver copie los archivos necesarios al servidor. En nuestro caso, como es la misma
carpeta, podemos decir que No.
19.7. Introducción a phpMyAdmin
En este curso no vamos a explicar en profundidad el uso de phpMyAdmin debido a su extensión. Pero
sí daremos unas cuantas directrices para que puedas empezar a manejarte con él y a dar tus primeros
pasos en el uso de las bases de datos.

Para abrir phpMyAdmin, haz clic en la opción phpMyAdmin del menú de WampServer que se
obtienen al hacer clic sobre su icono. O accede a la dirección http://localhost/phpmyadmin/.

Se abrirá una ventana del navegador y mostrará la ventana principal de la aplicación:

Desde aquí podremos crear nuevas bases de datos, tablas y usuarios con sus respectivos

privilegios.
19.8. Crear una Base de Datos en phpMyAdmin
Para crear una nueva base de datos en phpMyAdmin basta con escribir el nombre de la nueva base de
datos en el cuadro de texto que aparece bajo Crear nueva base de datos en la página principal y
pulsar el botón Crear.

La nueva base de datos se creará automáticamente.

Puedes seleccionar un juego de carácteres en el desplegable Cotejamiento, si lo dejas en blanco se

tomará el valor por defecto que variará según la configuración de cada servidor.

Es recomendable que escojas la opción utf-8_spanish_ci para maximizar la compatibilidad con todos
los caracteres especiales del alfabeto en castellano y para que la salida en cualquier navegador sea
correcta.

Una vez creada la base de datos podrás acceder a ella desde el menú de la izquierda. Despliega el
listado Base de datos y selecciona la base de datos que quieras modificar:
19.9. Crear una Tabla en phpMyAdmin
Cuando selecciones una Base de Datos en phpMyAdmin verás una nueva pantalla desde donde
podrás ver todas las opciones para poder trabajar en ella:

En este caso en la pantalla principal encontraremos muy poca cosa porque no contiene ninguna tabla
por ahora.

Para crear una tabla lo único que debes hacer es escribir su Nombre y especificar su Número de
campos (luego puedes seguir añadiendo campos).

Cuando hayas terminado pulsa el botón Continuar y verás una pantalla como ésta:

Aquí deberás establecer la configuración de cada uno de los campos de la tabla.

Rápidamente definiremos las propiedades más frecuentemente utilizadas:

Campo: El nombre del campo.

Tipo: El tipo del valor del campo: texto (varchar o text), número entero (int), decimal (decimal), etc...
Longitud/Valores Tamaño máximo del campo. Un texto de tamaño 15 sólo podrá tener 15 caracteres.
Predeterminado: Un valor predeterminado para el campo, si al crear el registro no se le asigna otro
valor.
Cotejamiento: Juego de caracteres que utilizará el campo.
Atributos: Dependientes del tipo de dato. Por ejemplo, que un numérico solo sea positivo.
Nulo: Si el campo permite valores nulos, o debe rellenarse obligatoriamente.
Índice: Indica si el campo está indexado. Puede ser clave principal, valores únicos, etc...
A_I: SI el campo es un auto-incremento, que se establecerá automáticamente al crear nuevos registros.
Comentarios: Nos permite agregar comentarios descriptivos del campo o su contenido.

Pulsa el botón Grabar cuando hayas acabado y la tabla se creará.

Cada vez que realicemos una modificación se mostrará un mensaje similar a éste si todo ha ido bien:

O parecido a esto si no se ha podido realizar la acción:

Ahora el aspecto de la ventana de la base de datos será diferente pues mostrará el listado de tablas
contenidas con sus propiedades.

Haciendo clic en el botón al lado del nombre de la tabla o haciendo clic sobre ella en el menú de
la izquierda podrás acceder a la vista en detalle de sus campos y propiedades. Para ello, asegúrate de
que estás en la pestaña Estructura.

En esta última vista puedes hacer clic en la pestaña Examinar para ver el listado de todos los registros.
Utiliza la pestaña Buscar para filtrar el listado por los valores de algún campo
19.10. Insertar Datos en una Tabla

Rellenar tablas desde phpMyAdmin es muy sencillo.

Si no tienes ninguna base de datos seleccionada, selecciona previamente la que contiene la tabla a
utilizar desde el desplegable que encontrarás en la parte superior izquierda de la pantalla.

Luego selecciona la tabla con la que quieres trabajar y haz clic en la pestaña Insertar.

En seguida se abrirá una ventana desde donde podrás añadir una fila (o registro) a la tabla indicando el
valor de cada campo:

En la columna Valor escribe el valor del Tipo de Cada campo y pulsa Continuar cuando hayas
acabado.

Otro modo de rellenar una tabla es importando datos que tengamos en un archivo proveniente de otra
base de datos o hecho por nosotros mismos.

Para ello, tendrás que hacer clic en la pestaña Importar en el mismo menú donde encontraste la
opción anterior:

Se abrirá una ventana desde donde deberás especificar qué archivo quieres importar:

Observa que deberás indicar la localización del archivo que contiene los datos que queremos
importar.
Y sobre todo, lo más importante, el Juego de caracteres que utiliza el archivo para que los datos que
se introduzcan en la tabla se puedan adaptar de forma correcta y mantener la coherencia del texto.

Una vez introducidos estos datos bastará con que pulses el botón Continuar y los registros (si no hubo
ningún fallo en el archivo) se añadirán automáticamente.
19.11. Modificar la estructura de la tabla
Para ello deberemos ir a la vista de la tabla haciendo clic en ella en el menú que encontramos en la
izquierda de la página una vez seleccionada la base de datos.

Esto hará que se nos muestre la tabla en la ventana. Si la tabla está vacía, veremos directamente su
estructura. SI ya contiene datos, los veremos. En este caso, pulsa sobre la pestaña Estructura.

El modo en que podremos modificarla será muy fácil.

Observa la ventana:

Para añadir nuevos campos a la tabla sólo tienes que escribir el número de campos que vas a crear en
el campo Añadir ..... campo(s).

Luego selecciona la posición donde se añadirán, Al final de la tabla, Al comienzo de la tabla o

Después de.. y pulsa el botón Continuar.

Modificar campos ya existentes tampoco es muy complicado, sólo tendrás que utilizar los botones:

El botón Modificar te permitirá modificar la configuración del campo.

El botón Eliminar borrará el campo.

El botón Clave Principal establece que el campo se marque como clave principal de la tabla.

El botón Índice crea un nuevo índice en la tabla con el campo seleccionado.

Finalmente el botón Único establece el campo seleccionado como campo con valor único, es decir,
no puede contener valores repetidos.
19.12. Modificar datos de una tabla
También una vez insertados datos en una tabla de una base de datos, podremos modificarlos.

Esto es posible accediendo al contenido de la tabla desde la pestaña Examinar que encontrarás en la
parte superior de la ventana, aunque por es la vista que se muestra por defecto al abrir la tabla:

Hacer clic en ese elemento hará que puedas visualizar el contenido de la tabla.

Y al mismo tiempo te dará la posibilidad de editar o eliminar el contenido de cada registro, además del
registro completo.

Desde esta vista podremos ver la información almacenada en la tabla.

Podemos utilizar los botones de la primera columna para modificar los datos.

El botón Modificar te permitirá modificar el contenido del registro. Púlsalo e irás a la ventana que
vimos en el apartado de Insertar datos.

El botón Eliminar borrará el registro completo. Esta acción no es reversible así que ten cuidado
cuando la utilices.

Si quieres borrar varios registros de golpe, marca las casillas de esos registros y pulsa el botón
Eliminar de la línea Para los elementos que están marcados.
19.13. Establecer privilegios en phpMyAdmin
Entendamos primero qué son los usuarios. Cuando una página en PHP se conecta a una base de
datos, lo hace a través de una conexión, indicando un usuario y una clave. Por lo tanto, sólo se puede
conectar a aquellas bases de datos de las que conozca estos datos.

Al conectarse lo hace a través de un usuario. Y ese usuario puede realizar determinadas acciones
sobre la base de datos. Es decir, tiene determinados permisos.

Podemos hacer que las conexiones creadas cuando un visitante llegue a nuestra página emplee un
usuario distinto del que empleamos nosotros cuando nos conectamos para administrar nuestra base
de datos. Desde el punto de vista de la seguridad, esos usuarios no deberían de poder realizar las
mismas acciones, es decir, deben de tener privilegios distintos. Por ejemplo, que sólo puedan ver
determinadas tablas o no puedan borrar registros.

En cualquier momento puedes utilizar el botón para volver a la pantalla principal de phpMyAdmin.

Aquí encontraremos un enlace a la sección de Privilegios que es la que nos ocupa

en este apartado.

Haz clic sobre él y verás una ventana similar a la siguiente:

Desde aquí podemos crear los distintos usuarios que se conectarán a la base de datos, y darle distintos
privilegios a cada uno.

Para crear un nuevo usuario sólo tienes que hacer clic en Agregar un nuevo usuario.

En la siguiente ventana tendrás que introducir los valores que definirán la cuenta:
En Servidor selecciona Local porque es el único modo con el que vamos a trabajar en estos
momentos. Esto quiere decir que se conecta desde el mismo servidor en el que está la base de datos.

El resto puedes configurarlo a tu gusto.

Más abajo encontrarás estas opciones:

Aquí podrás seleccionar los privilegios del usuario en forma global, las opciones que marques aquí se
aplicarán sobre todas las bases de datos del sistema.

Puedes especificar también un límite de recursos (conexiones, peticiones, etc...). 0 indica sin límite.

Cuando estés listo pulsa Continuar.

Ahora verás la pantalla con las opciones del nuevo usuario que acabas de crear. Verás que algunas ya
las conoces, como los privilegios globales.

Lo que nos interesa en este momento son unas opciones que encontrarás más abajo, los privilegios
específicos. Es decir, privilegios enfocados a una única base de datos:

Selecciona una base de datos en el desplegable o escribe su nombre en el cuadro de texto.

Luego pulsa Continuar.

Selecciona los privilegios que quieras aplicar y pulsa Continuar para finalizar.

Verás que en la misma página más abajo tienes una opción muy parecida a la que acabamos de ver
pero actúando únicamente sobre una tabla de la base de datos.

Estableciendo los privilegios de este modo recortaríamos muchísimo más la actuación del usuario
sobre la base de datos.

Los privilegios más comunes son los siguientes:

1. SELECT: permite al usuario realizar una consulta de selección para poder leer los datos de
una tabla.

2. INSERT: permite al usuario realizar una consulta de creación de registro para introducir
nuevos datos en una tabla.

3. UPDATE: permite al usuario actualizar los valores de una tabla.

4. DELETE: permite al usuario eliminar registros de una tabla.

5. CREATE: permite al usuario crear tablas en la base de datos.

6. DROP: permite al usuario eliminar una tabla o la base de datos completa.

Si conoces un poco SQL estos privilegios ya te serán familiares.

Unidad 20. Páginas Dinámicas

20.2. Crear una conexión a la Base de Datos
Como puedes ver en el panel Base de datos los requisitos necesarios para empezar a trabajar con bases
de datos ya los hemos cubierto en los temas anteriores del curso:

1. Hemos creado un sitio.

2. Estamos trabajando con un tipo de documento dinámico PHP (Archivo → Nuevo... → Tipo
de página: PHP)

3. Hemos instalado un servidor local y configurado el servidor de prueba.

El último paso que nos quedaría para poder empezar a crear páginas será definir una conexión para
que Dreamweaver establezca los parámetros en los que se realizará la comunicación entre los archivos
PHP y los datos de nuestras tablas.

En otras palabras deberemos decirle a Dreamweaver dónde está la base de datos, su nombre y un
usuario (con su contraseña) con suficientes privilegios como para poder, al menos, visualizar los datos
almacenados.

Para ello nos dirigimos a la pestaña Bases de datos en el panel Aplicación y hacemos clic sobre el

botón .

Selecciona la opción Conexión MySQL para crear la conexión que necesitamos.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás colocar los datos correspondientes a tu base de datos.

En Nombre de conexión escribiremos un nombre significativo para poder reconocer la conexión más
adelante.

En Servidor MySQL deberemos escribir localhost en nuestro caso ya que la base de datos está
alojada en nuestro propio equipo. En otro caso habría que introducir la dirección del servidor donde se
encuentre almacenada la información.

Escribe un Nombre de usuario y Contraseña con privilegios suficientes para acceder a la base de
datos (al menos parcialmente).

Y finalmente selecciona (pulsando el botón Seleccionar) o escribe el nombre de la base de datos a la

cual nos vamos a conectar.

Puedes hacer una prueba de conexión pulsando el botón Prueba, así te asegurarás de que se puede
establecer comunicación entre Dreamweaver y el servidor correctamente con los datos facilitados.

Una vez hayas acabado pulsa Aceptar y la conexión estará lista para utilizarse.

Observa que ahora, en el sitio, tienes la carpeta Connections. En ella guardará Dreamweaver las
conexiones del sitio. No la renombres, y no olvides copiarla con el resto de archivos si copias o mueves
el sitio.
20.3. Juegos de registros o RecordSets
Ahora podemos insertar en cualquier página información almacenada en la base de datos, sólo
tenemos que decidir qué datos vamos a mostrar.

Crearemos un juego de registros (también llamado RecordSet) donde almacenaremos durante el

tiempo en el que se esté ejecutando el archivo PHP los datos que queremos mostrar.

De esta forma podremos seleccionar determinada información y mostrarla en la página.

Antes que nada recuerda que los datos dinámicos sólo pueden mostrarse en una página dinámica. Por
lo que si intentas crear un juego de registros en una página codificada como HTML el programa no te
dejará.

Así que abre una nueva página PHP y empieza a practicar.

Para crear un juego de registros puedes hacer clic en el botón en el panel

Insertar, sección de Datos:

Se abrirá el siguiente cuadro de diálogo:

Aquí deberemos especificar qué información queremos obtener, es decir qué registros de qué tabla.

El primer paso será comenzar dando un Nombre significativo al juego.

Luego especificaremos la Conexión que deberá utilizarse para que sea posible acceder a la
información. Aquí deberás de seleccionar una que hayas creado anteriormente o puedes hacer clic en
el botón Definir... para crear una nueva tal y como vimos en el apartado anterior. Lo normal es que te
aparezca seleccionada directamente al crear el juego.

Una vez seleccionada la conexión deberemos seleccionar la Tabla de la que queremos sacar los
registros.

Finalmente decidiremos qué Columnas queremos mostrar. Al seleccionar una tabla, sus columnas
aparecerán en el cuadro de columnas. Selecciona la opción Todas para que todos los campos de la
tabla estén disponibles o marca la opción Seleccionado: para elegir una o más de las existentes
(utiliza la tecla Ctrl para realizar selecciones múltiples).
Pulsando el botón Prueba en cualquier momento verás un ejemplo de qué datos contendrá el juego de
registros, es incluso aconsejable que lo veas antes de Aceptar el cuadro de diálogo para asegurarte de
que estás sacando la información que necesitas.
Unidad 20. Páginas Dinámicas (IV)

20.4. Mostrar Datos Dinámicos

Una vez se cree un Juego de Registros podremos empezar a mostrar los datos en nuestra página.

Como podrás ver en el panel Vinculaciones ahora podemos ver las columnas contenidas en el
Recordset:

Aunque también podemos utilizar la opción Texto dinámico, agrupada en Datos dinámicos:

Al utilizar esta opción se abrirá un cuadro de diálogo:

Como puedes ver en la imagen, deberás seleccionar el Campo que quieres mostrar en la página,
además Dreamweaver te ofrece la posibilidad de aplicarle un formato determinado, para ello sólo
deberás seleccionarlo de la lista.

En el cuadro de texto Código verás como se modifica el código PHP que se incluirá automáticamente
en la página.

Pulsa Aceptar cuando hayas acabado y el campo del registro se incluirá en el punto donde tengas
situado el cursor.

Se representará en la vista de Diseño de la siguiente forma:

Esto nos indica que el elemento que se mostrará será el de la columna Título del recordset
listado_libros.

En cualquier momento podrás volver al cuadro de diálogo anterior para modificar alguna de las
opciones (por ejemplo, el formato) desde el panel Comportamientos del servidor (Ctrl + F9).

En este panel se mostrarán todos los elementos dinámicos que se están utilizando en la página, haz
doble clic sobre cualquiera de ellos para modificarlos.

Un modo de vista muy útil es Live Data (menú Ver → Live Data). En este modo, se mostrarán los
datos reales en vez del nombre de registro, para que nos hagamos una idea más real del aspecto de la
página.
20.5. Repeticiones
¿Cómo hacemos para mostrar más de uno?

Muy fácil, utilizaremos las Repeticiones.

Repetir un registro nos permitirá visualizar en una misma página más de un registro contenido en el
recordset a la vez.

Para crear una repetición deberás seleccionar la zona a repetir y pulsar el botón Repetir región en
la en el panel Insertar Datos.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás indicar el número de registros que quieras que aparezcan o simplemente escoger Todos
los registros para que se repita la información seleccionada de todos y cada uno de los registros.

Como decíamos antes, en una página pueden existir más de un juego de registros o recordset, por lo
que será necesario especificar de cuál de ellos queremos que se realice la repetición en el desplegable
Juego de registros.

Una vez hayamos terminado pulsa el botón Aceptar, y en la vista de Diseño, la sección seleccionada
tomará este aspecto:

Esto provocará el listado de todos los títulos del recordset listado_libros.

Dreamweaver también te da la posibilidad de crear una tabla dinámica automáticamente que mostrará
todas las columnas del número de registros que quieras.

Para ello deberás hacer clic en la opción Tabla dinámica que aparece en la barra Datos:
De esta forma Dreamweaver colocará los registros en una tabla con las características que hayamos
indicado.
20.6. Orden de Juegos de Registros
Hasta ahora somos capaces de crear un listado personalizado de elementos almacenados en un juego
de registros.

Pero podríamos querer ordenarlos de algún modo, ¿cómo lo hacemos?

Vamos a utilizar la opción Ordenar: que se encuentra en el cuadro de diálogo Juego de Registros:

Puedes llegar a este cuadro de diálogo creando un nuevo Recordset o modificando el ya existente,
para ello deberás hacer doble clic sobre él en el panel Vinculaciones (Ctrl + F10).

La forma en que se podrán ordenar los registros del recordset será la siguiente, selecciona el campo
por el que quieres ordenar los registros y el modo en que quieres que lo haga.

Si el campo es de tipo numérico, se ordenará de menor a mayor (Ascendente) o de mayor a menor

(Descendente).

Si el campo es de tipo alfanumérico se ordenará alfabéticamente.

20.7. Filtrado de Juegos de Registros
También podemos filtrar los registros que vayan a formar parte del juego de registros eliminando
aquellos que no cumplan ciertas condiciones.

Este método también lo aplicaremos sobre el cuadro de diálogo Juego de Registros del recordset:

En este caso deberemos en Filtro: seleccionar el campo sobre el cual realizaremos el filtro.
Seleccionar en el cuadro de lista que contiene un = si queremos que el campo sea igual, distinto,
mayor, menor o que empiece o acabe con alguna cadena determinada.

En el desplegable que encontrarás más abajo deberás seleccionar Valor introducido para poder
especificar en el cuadro de la derecha (en la imagen 0) el valor con el que comparar.

En apartados posteriores veremos el significado de escoger en el desplegable otra opción que no sea
Valor introducido.

Una vez hayas terminado, pulsa el botón Aceptar y el recordset contendrá únicamente los registros
que cumplan la condición indicada en el cuadro de diálogo.

Nota: recuerda que puedes utilizar el botón Prueba para previsualizar el efecto del filtro sobre la tabla
seleccionada.

20.8. Paginación de Registros

Cuando el listado de los registros es muy largo, nos sería muy útil poder organizar esos registros en
páginas y avanzar en ese listado página por página.

Para ello utilizaremos la Paginación.

En primer lugar tendrás que definir una repetición de registros con un número limitado de registros (los
que quieres que aparezcan en cada página), si defines la repetición sobre todos los registros, la
paginación no funcionará porque todos los registros se estarán mostrando en una sola página.

A continuación crearemos enlaces que funcionen de modo automático desplazándose por las
diferentes páginas del juego de registros.

Sólo tendrás que situar el punto de inserción donde lo quieres insertar utilizando el botón que se te
ofrece en el panel Insertar Datos. Entre las opciones que encontramos, en este caso elegimos Mover
a la siguiente página.
Al seleccionar el enlace correspondiente se abrirá un cuadro de diálogo muy parecido a éste:

Aquí sólo tendrás que seleccionar el Juego de registros sobre el cual quieres que se establezca la
paginación y pulsar Aceptar.

En la vista de Diseño verás que aparece algo como esto:

Si utilizas el servidor de prueba (pulsando F12) podrás ver que pulsando el enlace creado avanzas por
el juego de registros.

La página permanecerá exactamente igual a cómo la diseñaste, pero el contenido será dinámico y
variará según la página que estés mostrando.

Nota: Recuerda que puedes aplicar estilos sobre estos enlaces igual que podíamos hacerlos sobre los
items que mostramos para los datos de la tabla.

Una opción muy útil que presenta Dreamweaver son los Recuentos de registros:
Si seleccionas alguna de las tres últimas opciones se mostrará el siguiente cuadro de diálogo:

Selecciona aquí el Juego de registros sobre el que quieras realizar el recuento y pulsa Aceptar.

Dependiendo de la opción que escojas se añadirá un texto u otro a la página.

1. Registro inicial: Visualiza el número dentro del listado total de registros, del primer
elemento de la lista que se está mostrando en la página actual.

2. Registro final : Visualiza el número dentro del listado total de registros del último elemento
de la lista que se está mostrando en la página actual.

3. Total de registros: Visualiza el número total de registros del juego (la suma de todos los
registros de todas las páginas).

Seleccionando la primera opción Estado de navegación de juego de registros podremos

insertar un literal que mostrará el recuento exacto de los registros que se están visualizando, se añadirá

una línea como ésta:

Que en la vista LiveData tomaría este aspecto:

Como puedes ver, esta opción es una combinación de las tres anteriores que ilustra perfectamente

el funcionamiento del recuento de registros.

20.9. Mostrar/Ocultar Regiones
Como hemos visto la paginación es muy útil para navegar por nuestros registros.

Pero existen determinados casos en los que nos gustaría que estos items funcionen de forma diferente.

Por ejemplo, ¿por qué debe aparecer el elemento de navegación Anterior en la primera página si en
realidad no existe una página anterior a la que podamos ir?

Vamos a utilizar las opciones de Mostrar región para realizar algunos cambios sobre los elementos de
la página. En nuestro caso vamos a seleccionar Mostrar si no es la primera página:

Estas opciones en realidad actúan sobre cualquier parte de la página, así que incluso podrás hacer
desaparecer una tabla o un párrafo si no se cumplen los criterios de la opción.

Cuando hagas clic en alguna de ellas verás un cuadro de diálogo como éste:

Aquí deberás especificar el Juego de registros sobre el que quieres que se efectúe la acción y luego
Aceptar.

En la vista de Diseño se mostrará la opción de una forma parecida a ésta:

Combinando la técnica de ocultación y muestra de registros con las de recuento encontramos la opción

Barra de navegación de juego de registros:

Pulsando esta opción se incluirá en la página una barra de navegación para desplazarse por las
páginas del juego de registros. Se abrirá el siguiente cuadro de diálogo:

Desde aquí podrás seleccionar el Juego de registros sobre el que quieres que actúe la barra de
navegación y seleccionar uno de los dos modos: Texto o Imágenes.

Aquí tienes un ejemplo de cómo quedaría cada una de las opciones, en la primera línea tenemos una
barra de navegación con la opción Texto y en la segunda línea una barra de navegación con la opción
Imágenes:

Por supuesto, podemos cambiar esas imagenes o aplicar estilos CSS.

20.10. Uso de Variables
Es posible acotar los resultados de una página dinámica de un modo muy sencillo, utilizando variables.

Una variable le da información a una página PHP, y el archivo puede actuar de acorde con el valor de
esa variable.

En el ejemplo anterior deberíamos abrir la página PHP indicándole que queremos que muestre el
articulo X del mes Y.

Muy bien veamos la forma de hacerlo.

Primero deberemos aprender cómo pasar las variables a una página PHP.

En una dirección de Internet (o URL) podemos encontrar cadenas como ésta:

http://www.misitio.com/carpeta/archivo.php?nombre=valor

Muy bien, pues en este ejemplo le estamos diciendo al archivo archivo.php que se ejecute, pero
además le estamos indicando que queremos que tome en cuenta la variable nombre con el valor
valor.

¿Cómo podemos desde Dreamweaver crear enlaces con paso de variables?

Si el valor del parámetro es fijo, se puede escribir directamente en la referencia del vínculo, por ejemplo
en el enlace a la página detalle.php pondríamos en el cuadro Vínculo del panel Propiedades
detalle.php?id=99.

Pero también podemos utilizar textos dinámicos para indicar el valor del parámetro a pasar. En este
caso en vez de escribir 99 deberíamos indicar que el valor lo tiene que sacar del texto dinámico de la
siguiente manera:

Nos posicionamos sobre el enlace a la página detalle.php y desde la vista Código arrastramos el
campo dinámico desde el panel Vinculaciones (Ctrl + F10) hasta el vínculo para formar la URL del
enlace:

detalle.php?id=<?php echo $row_libros_usados['Id']; ?>

El código quedaría de la siguiente forma:

Cuando pases los parámetros ayudándote de un formulario, no olvides indicar que quieres pasar las
variables en el modo GET.
 Dreamweaver crea las páginas dinámicas de modo que utilicen ese método para recuperar los
parámetros.

¿Cómo podemos desde Dreamweaver utilizar las variables recibidas?

Cuando se abre una página pasándole una serie de parámetros, esta página puede utilizar los valores
de los parámetros para lo que le haga falta.

En el ejemplo anterior (en la teoría) abrimos la página detalle.php pasándole un valor en la variable Id.
Pues esta página puede ahora utilizar este valor para visualizar únicamente los registros con ese Id en
vez de visualizar todos los registros.

Para ello deberemos modificar el Juego de registros de la página. Hacemos doble clic sobre él en el
panel Comportamientos del servidor (Ctrl + F9).

Se abrirá el cuadro de diálogo Juego de registros:

Aquí indicaremos que el recordset filtre los registros cuyo Id sea igual al valor recibido en el parámetro
Id.

Para ello deberemos seleccionar en el desplegable de filtro la opción Parámetro URL para que el
archivo PHP tome el valor de la variable de la URL que abre la página. En la caja de texto de al lado
deberás especificar el nombre que tiene la variable en la ruta URL.

Hay muchos usos para los parámetros. Imagina que quieres mostrar mediante un enlace los libros que
cuesten más de 10 €, sólo tendrías que pasarle una variable x a la página que genera el listado de
libros y establecer que el juego de registros filtre los resultados para mostrar sólo aquellos que tengan
un valor en el campo Precio mayor al especificado en el parámetro x.
20.11. Páginas Maestro-Detalle
A menudo debemos sacar datos de dos tablas que están relacionadas entre sí por un campo común a
las dos, por ejemplo para mostrar los datos de un cliente y todas sus facturas (en la factura tendré el
código del cliente), o los datos de un libro y todas las compras que tenemos de ese libro (en la tabla
compras tendré el código del libro comprado)...

Dreamweaver las denomina Maestro-Detalle porque sacan datos de un archivo Maestro y enlazan cada
registro con un página donde se visualizan los registros correspondientes del archivo Detalle.

Para ello utilizamos la opción Juego de páginas Maestro-Detalle

Al seleccionarla verás el siguiente cuadro de diálogo:

En Juego de registros: seleccionamos el juego de registros que se visualizarán de la tabla Maestro.

En Campos de página Maestro: indicamos los campos del maestro que queremos que se muestren
en la página.
En Vincular con Detalle desde: indicaremos el campo del Maestro que contendrá el enlace a la
página de detalle.
En Pasar clave exclusiva: indicaremos el campo que se utiliza para relacionar los registros.
Luego en Mostrar: tendremos que establecer el número de registros que queremos que se muestren
en la página del Maestro
En la sección inferior deberemos introducir la información para crear el Detalle.
Establece un Nombre de página Detalle (si no existe la creará) y en Campos de página Detalle:
escogeremos los campos a mostrar.
Pulsamos el botón Aceptar y Dreamweaver creará automáticamente las páginas requeridas.

Luego podrás modificar su aspecto para que se ajusten al sitio que estás diseñando.
20.12. Asistente de Inserción de Registros
Dreamweaver posee otros procesos automatizados como verás en este apartado y en los siguientes
para crear más páginas de acceso a datos.

Es capaz de generar formularios de forma sencilla para insertar, modificar o eliminar registros de una
base de datos.

Para crear un formulario de inserción de registros tendrás que hacer clic en el botón Asistente de

formulario de inserción de registros del panel Insertar Datos.

Se abrirá el siguiente cuadro de diálogo:

Indicar la Conexión y los datos se rellenarán automáticamente.

Selecciona la Tabla donde quieras insertar el nuevo registro.

Luego seleccionaremos los campos que deberán aparecer en el formulario. Recuerda que todos
aquellos que necesiten adoptar un valor deberán aparecer en él, si no el formulario fallará por no
introducir valores en campos que no aceptan valores nulos.

A continuación seleccionaremos cada campo y para cada uno indicaremos cómo será presentado en el
formulario.

En Etiqueta escribiremos la etiqueta que queremos para el campo.

En Mostrar como: indicaremos en qué tipo de elemento de formulario estará representado el campo,
una caja de texto, un botón de opción, un desplegable...

También indica cómo Enviar la información para que se guarde en la tabla, normalmente será del
mismo tipo que definiste cuando creaste la tabla.

Puedes establecer un Valor predeterminado para el campo seleccionándolo en el generador

automático.

Podrás asignarle un valor existente en la página.

Esta opción te será muy útil si establecemos alguno de los campos como Campo oculto en Mostrar
como. Pulsa Aceptar y el formulario se creará automáticamente.
20.13. Asistente de Actualización de Registros

Igual que en el apartado anterior existe un asistente que te permitirá crear un formulario que primero

muestra los datos existentes en un registro de la tabla y te permitirá modificarlos y guardarlos.

Para ello, deberás hacer clic en el botón Asistente de formulario de actualización de registros

Se abrirá el siguiente cuadro de diálogo:

El modo en el que rellenaremos los datos es el siguiente:

Seleccionaremos, primero, la Conexión con la que trabajaremos.

Luego elegiremos la Tabla a actualizar que será de donde saquemos los datos que luego
modificaremos.

Como deberemos elegir registro de entre toda la tabla para modificar, deberemos indicar cuál. Para ello
deberemos seleccionar un campo (en Columna de clave exclusiva) y un juego de registros (en
Seleccionar registro de) para establecer el registro que va a mostrar la página. De esta forma
vincularemos el campo del recordset de la página y se mostrará la información que coincida con él.

El resto funcionaría igual que en el cuadro de diálogo anterior. Seleccionando los campos que se van a
mostrar, su tipo de elemento de formulario y la forma en la que se va a enviar.

En la caja de texto Valor predeterminado encontrarás la cadena que mostrará el contenido del campo
en el registro en cuestión.

No lo modifiques si quieres que muestre la información almacenada. Sólo cámbialo si quieres que
aparezca un valor fijo en vez del valor contenido en el registro, por ejemplo, ninguno, sin precio, etc...
e incluso nada.

Finalmente pulsa Aceptar y el formulario se creará.

20.14. Asistente de Eliminación de Registros

Siguiendo con los asistentes encontramos al final el de Eliminar Registro .

Para utilizar el asistente de Dreamweaver para crear páginas de eliminación de registros deberás crear
una página especial que se dedique única y exclusivamente a eliminar el registro.

Para ello tendremos una primera página donde el usuario seleccionará el registro a borrar y dará la
orden de borrado; esta página enlazará con la página de borrado pasándole el identificativo del registro
a borrar, y la página de borrado mostrará los datos del registro a borrar y pedirá confirmación al
usuario.

Con lo cual deberemos seguir este guión:

La primera página deberá tener un enlace a la página de borrado de la forma: borrar.php?id=99

Donde borrar.php será la página de borrado, id el nombre del parámetro que contiene el valor de
clave del registro a borrar, y 99 es el valor de la clave del registro a borrar (en este caso queremos
borrar el registro cuya clave sea 99).

En la página borrar.php deberás:

1. Crear un recordset que muestre la información del elemento cuya clave se ha pasado
como parámetro para que pueda ser verificado.
Para ello deberás utilizar un juego de registros filtrado por el campo clave principal y el valor
recibido como parámetro.

2. En la misma página añadiremos un formulario con un campo oculto y un botón de

tipo Submit que permita al usuario confirmar el borrado y reenvíe a la misma página de borrado.
Al campo oculto le deberemos asociar el campo clave principal del registro que se muestra, puedes
hacerlo pulsando el botón que aparece al lado de su propiedad Valor:

Deberás recordar el nombre que le das a este control de formulario porque es el que utilizaremos
para borrar el registro.
2.
1. Luego podremos incluir el código para borrar el registro.
2. Haz clic en el botón Eliminar Registro en la barra de Datos, y rellena el siguiente
cuadro de diálogo:

La primera opción deberás dejarla en Valor de clave principal. Puedes utilizar el resto de opciones
para crear otros tipos de eliminaciones más complejas, aunque este método sea el más utilizado.
Luego selecciona la Conexión, la Tabla donde se encuentra el registro a borrar y su Columna de
clave principal.
Por último le deberemos indicar cómo debe acceder al valor que le dará el valor de la clave principal
del registro que tiene que eliminar, indica que lo hacemos por Parámetro URL y escribe el nombre
del campo oculto del formulario que acabas de crear (es el que le pasa el valor).
Finalmente puedes elegir a qué página redireccionar cuando se realice el borrado.
Pulsa Aceptar y habrás acabado.
20.15. Juegos de Registros Avanzados
Por último en este apartado vamos a ver un modo avanzado de crear juegos de registros.

Si en el cuadro de diálogo Juegos de registros que hemos visto hasta ahora haces clic en el botón
Avanzado... verás estas otras opciones:

En este cuadro de diálogo puedes crear juegos de registros mucho más complejos.

El principio del cuadro es igual que la versión simple, deberás introducir un Nombre para el juego de
registros y asignarle una Conexión.

Luego deberemos introducir una sentencia SQL que indicará qué registros se van a mostrar.

Mediante las opciones y botones que veremos ahora podremos crear sentencias bastante completas.

Detrás de la palabra SELECT se escriben las columnas que queremos que aparezcan en el resultado,
por eso para añadir más campos a la lista sólo tienes que seleccionar el campo de la lista Elementos
de base de datos, y pulsar el botón SELECT, el campo se añadirá a la sentencia y por lo tanto
aparecerá en el recordset.

En la cláusula FROM se especifica el nombre de la tabla o tablas desde donde se saca la información.
En realidad SQL nos permite cruzar distintas tablas, relacionarlas, etc...

La cláusula WHERE sirve para incluir condiciones, para filtrar los registros. El botón WHERE te
ayudará a establecer esas condiciones, una vez hayas añadido el campo con este botón en el cuadro
de texto SQL deberás completar la condición utilizando los operadores de comparación adecuados
como <, >, !=.

Utiliza la zona de Variables: para insertar parámetros que podrás recibir mediante el URL, para ello

haz clic en el botón .

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás establecer el Nombre de la variable, su Valor predeterminado y el Valor de tiempo de

ejecución.

Ten en cuenta que para asociar estas variables a parámetros pasados por URL deberás escribirlas en
el campo Valor de tiempo de ejecución de la siguiente forma:

$_GET['nombre_parametro']

Donde nombre_parametro es el nombre del parámetro incluido en el URL.

Finalmente puedes utilizar el botón ORDER BY para crear ordenaciones por los campos seleccionados
en el listado de la izquierda.