Curso de Dreamweaver

E n la actualidad, la célebre máxima “si no estás en Inter-net, no existes” se ha hecho más verdadera que nunca.

Cada día que pasa un mayor núme-ro de personas están conectadas a la Red, donde se encuentran todas y cada una de las páginas web. Por lo tanto, casi todo lo que existe en el mundo real se plasma en Inter-net: noticias, juegos, bancos, tiendas, hoteles, colegios... y es imposible no hallar lo que se está buscando o, en su defecto, algo relacionado con ello.

Hace algunos años crear una pági-na web era una tarea sólo apta para profesionales. Se trataba de un tra-bajo laborioso en el que se utilizaba código HTML “al desnudo” y se necesitaban unos conocimientos muy específicos. Hoy en día, salvo en el caso de empresas que requieran de

un diseño o de funciones exclusivas (como las transacciones electróni-cas), cualquiera que tenga un PC puede crearse una página web profesional. De hecho, las ventajas de contar con una web propia son mu-chas: desde crear una comunidad en Internet donde charlar con tus ami-gos, intercambiar las fotos o vídeos que elijas, hasta exponer tu trabajo para realizar una actividad profesio-nal si posees una empresa o quieres tenerla en el futuro. Hay un sinfín de posibilidades esperándote. Preci-samente, en este curso aprenderás a diseñar y administrar tus sitios web. Eso sí, lo único que debes tener para comenzar tu nueva aventura en Internet es un PC, un editor de HTML como Dreamweaver MX 2004 (in-cluido en el CD que encontrarás junto a la revista) y un poco de tiempo.

Curso

Crea tu propia web

Nº 122

¿Siempre has querido que la gente pudiera ver tus textos, fotos o vídeos en Internet? ¿Deseas montar un sitio de juegos, cine o música? ¿Quieres crear foros o comunidades? Sea cual sea tu elección, en este curso

te vamos a enseñar a diseñar y administrar tu propia página web.

48 www.pctoday.es

Guía del curso1. Conocer el entorno ¿Qué es Dreamweaver? HTML básico. Crea tu primera página web. Conoce el entorno del editor. ¿Qué hay que hacer para tener una página web en Internet? PC Today nº 1222. Los primeros pasosConfiguración de un sitio local. Crea y edita un sitio web sin conexión a Internet. Personaliza tu página. El texto en una web, sus características y estilos. PC Today nº 1233. Añade color a tu web Hiperenlaces. Conoce todos sus formatos, propiedades y cómo crearlos. Inserta y edita imá-genes dentro de una página web. Crea botones y texto en flash. PC Today nº 1244. Las tablas, los marcos y los formulariosAprende a crear, insertar y rellenar tablas. Configura marcos y formularios con todos sus ele-mentos. Conoce para qué sirven en un entorno web. PC Today nº 1255. Las plantillasCrea tus propias plantillas para realizar modelos. Establece regiones editables. Utiliza capas para enriquecer tus páginas. Aprende a insertar multimedia. PC Today nº 1266. Conocimientos avanzadosComportamiento de una página web. JavaScripts. Edita HTML. Problemas de código en la página. Configura elementos adicionales para una página profesional. PC Today nº 127

122_48_55_Curso.indd 14 16/6/05 12:46:13

¿Qué es HTML?Antes de continuar, conviene aclarar

qué es eso de HTML que hemos mencio-nado un poco antes. Las páginas que ve-mos en Internet están escritas utilizando el lenguaje HTML (Hyper Text Markup Language). Este código está basado en etiquetas que marcan el inicio y fin de cada elemento de la web, las cuales a su vez disponen de atributos que permiten definir características del elemento so-bre el que actúan. Las etiquetas que se introducen en un documento HTML no son visibles cuando éste se muestra en un navegador (Explorer, Netscape, Mo-zilla, etc.); es decir, cuando un usuario desde Internet solicita ver una página, el servidor web la envía a esta aplicación y ésta interpreta las etiquetas para dar el

formato requerido. De esto, por supues-to, no te tienes que preocupar si utilizas Dreamweaver, puesto que este programa inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico. Por lo tanto, es mucho más visual y podrás ir viendo en todo momento cómo te va quedando la página web que estás diseñando. Es una de las ventajas que ofrece este tipo de software.

Dreamweaver MX 2004Pero, probablemente, ahora te estarás

haciendo esta pregunta: “¿Por qué elegir Dreamweaver MX 2004 con la enorme variedad de aplicaciones que hay en el mercado y que permiten crear tu propia página web con un aspecto visual atrac-tivo y sin necesidad de utilizar código HTML?”. De hecho, algunas, incluso, son gratuitas; es decir, si entras en cualquier sitio de descarga de software y tecleas “diseño de páginas web”, seguro que te aparecen nombres como Nvu, Tren-

dyFlash o AceHTML, entre otros muchos, con los que podrás poner en marcha un proyecto de estas características. Hay otras, en cambio, que son más profesio-nales, como Front003, que encon-trarás bien por separado o incluido en el paquete Office Professional; y Adobe GoLive, ambas, potentes aplicaciones de diseño de sitios en Internet.

Sin embargo, nos hemos decantado por Dreamweaver MX 2004 porque aho-ra mismo es la “reina” de las solucio-nes web. Efectivamente, se trata de una aplicación que combina un entorno de trabajo muy visual y sencillo de manejar con todas las capacidades profesionales para crear una web totalmente perso-nalizada. Para ello, cuenta con multitud de funciones. Por ejemplo, este software

permite agregar rápidamente di-seños y funciona-lidades a las pági-nas, sin la necesi-dad de programar manualmente el código y sin tener conocimientos avanzados de és-te. Así, es posible insertar de una forma muy senci-lla y visual tablas,

añadir imágenes, editar marcos, in-

sertar textos, trabajar con capas, incluir comportamientos JavaScript, plantillas, etc. Además, cuenta con un software de cliente FTP completo, que permite, entre otras cosas, trabajar con mapas visuales de los sitios web y actualizarlos en el servidor sin salir del programa, to-da una ventaja de la que carecen otros programas similares.

Otra utilidad bastante interesante es la incorporación de una nueva validación dinámica en distintos navegadores; es decir, que las etiquetas HTML y las re-glas CSS siempre estarán legibles, siendo compatibles con cualquier navegador del mercado. Incluso, el soporte para CSS es más amplio y la edición gráfica, como por ejemplo rotar, recortar o re-dimensionar, viene dentro de la interfaz

de Dreamweaver, sin que tengas que sa-lir del programa.

Aparte, también ofrece una integración más estrecha con otras herramientas de Macromedia, como puede ser Flash MX Professional 2004, para desarrollar ex-periencias dinámicas e interactivas en la páginas, FreeHand MX 2004, para crear ilustraciones, o Fireworks MX 2004, pa-ra integrar gráficos en el sitio.

Por supuesto, también es posible co-dificar completamente las transferencias de archivos y evitar el acceso a los datos y ficheros. Resumiendo, es uno de los programas más completos que hay para dar ese toque profesional a tu web.

49Nº 122www.pctoday.es

▲

Términos

FTP (File Transfer Protocol). Protocolo de transferencia de archivos. Por medio de él se pueden subir y bajar archivos entre el cliente y el Host.

JavaScript. Al igual que Java o VRLM, es una de las múltiples maneras que han surgido para extender las capaci-dades del lenguaje HTML. JavaScript no es un lenguaje de programación propiamente dicho, sino uno de tipo script u orientado a documento, como pueden ser los de macros que tienen muchos procesadores de texto. Por lo tanto, nunca podrás hacer un progra-ma con JavaScript, tan sólo podrás mejorar tu página web con algunas cosas sencillas (revisión de formu-

larios, efectos en la barra de estado, etc.) y no tan fáciles como animacio-nes con HTML dinámico, por ejemplo.

Internet. Sistema que aglutina las redes de datos de todo mundo, uniendo miles de ellas mediante el protocolo TCP/IP. Es el mayor conjunto que existe de información, personas, ordenadores y software funcionando de forma cooperativa. La “i” mayús-cula la diferencia de una internet convencional, que simplemente une varias redes. Al ser única, se la conoce también simplemente por “la Red”.

Sitio web. Conjunto de páginas web que comparten un mismo tema e intención y que generalmente se

encuentran en un solo servidor. Punto de la red con una dirección única y al que pueden acceder los usuarios para obtener información. URL. Acrónimo de Uniform Resource Locater (Localizador uniforme de recurso). Es la dirección de un recurso de Internet. Se utiliza para indicar el camino que permite una conexión vía HTTP, FTP, etc.

CSS. Viene de Cascade Style Sheets y se trata de una forma generalmente aceptada de añadir estilos como color, fuente o escala a los documentos de una web. Muchas aplicaciones utilizan este estándar y gracias a él se acelera enormemente el trabajo con texto. ■

Para no volverte loco cuando tu sitio web comience a llenarse de contenidos (con documentos HTML, imágenes y demás archivos), te aconsejamos que desde el principio seas ordenado y crees varias carpetas en las que quede bien claro qué van a contener para evitar pérdidas de archivos y de tiempo más adelante.

Consejo

Dreamweaver MX 2004 es la “reina” de las aplicaciones para la edición y gestión de páginas web.

El esquema del lenguaje HTML, en la ventana de la derecha, siempre se repite con mayor o menor complejidad.

Diseño web con Dreamweaver. 1ª Parte

Antes de comenzar el curso propia-mente dicho y una vez que conoces la aplicación que vas a utilizar para crear tu propia página web, Drea-mweaver MX 2004, es conveniente que sepas cómo acceder a las ver-siones de prueba de los productos

de Macromedia, no sólo de esta apli-cación sino también de otras muchas como Flash, Studio o ColdFusion. Estas ediciones te ofrecen la oportu-nidad de probar el aspecto que tiene y las mejoras que presenta respecto a aplicaciones anteriores. La forma de

limitar su utilización es a través del tiempo; es decir, tendrás acceso a to-das las funciones que en estos pro-gramas se incluyen por una duración de 30 días, pasado ese lapso tienes la oportunidad de adquirir el software a través de la tienda que Macrome-dia tiene en la Red. Claro que, si de-cides no comprarlo, la aplicación ya no te servirá de nada, porque dejará de funcionar y deberás desinstalarla. Otra de las posibilidades que te ofre-

ce el registro gratuito, es la de acce-der a cientos de extensiones creadas exclusivamente para los productos y a áreas especiales de la comunidad, así como la opción de ver y adminis-trar tu actividad en la tienda mundial de Macromedia.

A continuación está detallado el proceso que debes seguir para regis-trarte como usuario w y conseguir tu copia de prueba de Macromedia Dreamweaver MX 2004.

Consigue Dreamweaver MX

122_48_55_Curso.indd 15 16/6/05 12:46:18

Curso

50 www.pctoday.es

1 Teclea en tu navegador www.macromedia.com/es, la página web en español del fabricante. En

cuanto entres, dirígete al enlace Descar-gas y pulsa sobre él. Verás que aparece una relación de todos los productos de la compañía a los que puedes acceder. Ve

al que pone Dreamweaver MX 2004 y presiona sobre Probar. Eso te llevará a otra página llamada Descargas de la versión de prueba de Macromedia, que te pide que te inscribas o que inicies una nueva sesión.

2 Ahora escribe tu dirección de email en el apartado Correo electrónico y marca, dentro

de la pregunta “¿Tiene una contra-seña para Macromedia?”, la opción No, crearé una ahora y pulsa sobre Continuar. Eso te llevará a otra pá-gina donde tendrás que rellenar una

serie de datos. El correo electrónico ya te aparece escrito. A continuación, y como campos obligatorios, tienes la contraseña dos veces, tu nombre y apellidos, la ciudad, el país y el código postal. Opcionales son el puesto, la empresa, la dirección, el teléfono completo y el nombre de pantalla, que te identificará dentro de www.macromedia.com.

3 Una vez que lo hayas rellenado, puedes continuar con los dos siguientes epígrafes: Encues-

ta de Macromedia y Preferencias de comunicación. En el primero, al menos, deberás escoger una respues-ta a la pregunta obligatoria: “¿Cuál

de los siguientes describe mejor el tipo de orga-nización o aso-ciación que usted tiene?”. El resto te los puedes saltar si quieres. Respecto a la segunda, habilita la opción Updates de Macromedia si quieres que te en-víen noticias acerca de tutoriales de pro-ductos de del fabri-cante, descuentos y eventos especiales; y Macromedia Ed-ge, para suscribirte a su boletín de noti-

cias en formato HTML o Sólo texto. Una vez hecho esto, haz click sobre Continuar y, en breves instantes, re-cibirás un correo electrónico que te agradecerá tu registro en la comuni-dad de Macromedia.

4 De esta forma llegarás a la pan-talla de descarga de la aplica-ción. Eso sí, antes de seguir, te

conviene echar un vistazo al enlace llamado Requisitos del sistema, para saber en todo momento cuál es el ordenador ideal sobre el que se debe instalar este software. Con un procesador Pentium III de 600 MHz, Windows XP, 256 MB de RAM y 275 MB de espacio disponible en el dis-co duro tendrás más que suficiente. Ahora despliega el menú Seleccionar y elige la opción Español / Windows / 88,63 Mb. Efectivamente, esta últi-ma cifra es el tamaño del archivo que

te bajarás. Pero es preciso decir que, antes de que te eches las manos a la cabeza, si cuentas con una conexión de banda ancha de, por ejemplo, 512 Kb/s, esto no te llevará mucho más de nueve o diez minutos. Así que ten un poco de paciencia y espera que aca-be la descarga. Mientras tanto, pue-des seguir navegando por la web de Macromedia o ver y descargarte algu-na de las demás aplicaciones que el fabricante te propone en su listado, como Contribute 3, ColdFusion MX o FireWorks MX.

5 Ahora que tienes el archi-vo en tu escritorio, es el momento de instalarlo al

disco duro. Observa, en primer lugar, que el fichero viene com-primido. Por lo tanto, ábrelo con WinZip o cualquier otro progra-ma (si tienes Windows XP, sólo tienes que hacer doble click y se abrirá) y verás que contiene cua-tro archivos. El que te interesa es el que dice “Instalador de Dreamweaver MX 2004.exe”, así que pulsa dos veces sobre él para que se inicie el proceso. Lo primero que te encontrarás a continuación es la pantalla de Bienvenida de Macromedia. Después, pulsa sobre Siguiente

y Sí. Ahora elige la carpeta de destino en la que quieres que se almacene la aplicación y haz click sobre Siguiente tres veces para que co-mience la carga de archivos. Esto te llevará varios minutos, depen-diendo de la velocidad de proce-so de tu ordenador. Cuando aca-be, se mostrará la última pantalla, así pues sólo te queda presionar sobre Finalizar.

6 Esto te conducirá a un ar-chivo “Léeme” que te ser-virá de apoyo para empe-

zar a comprender cómo funciona Dreamweaver. De hecho, allí se describen sus características bási-cas, qué necesitas para empezar, recursos de interés adicionales

sobre productos y servicios que comple-mentan la aplicación y soporte técnico, entre otras cuestiones interesantes.

Resumiendo...Resumiendo...

1 Teclear www.macromedia.com/es 3 Entrar en Descargas 3 Hacer click

sobre Probar

2 Crear una nueva cuenta 3 Escribir dirección de correo 3 Completar el

formulario de datos personales

3 Rellenar Encuesta de Macromedia y preferencias de comunicación

4 Descargar aplicación 3 Elegir la opción Español / Windows / 88,63 Mb

5 Descomprimir archivo descargado 3 Ejecutar la instalación

6 Leer el fichero de información de Dreamweaver

▲

122_48_55_Curso.indd 16 16/6/05 12:46:26

Curso

52 www.pctoday.es

Ahora que ya tienes Dreamweaver perfectamente instalado en tu PC es el momento de echar una ojeada, por encima, a las herramientas que esta aplicación pone a tu disposición para hacerte el trabajo más sencillo y có-modo. El objetivo es tomar un primer contacto y que todos los elementos te resulten lo más familiares posible.

Lo primero que debes saber es que, en Windows, Dreamweaver MX 2004 proporciona un espacio de trabajo integrado en una sola interfaz. En éste, todos los paneles están incorpo-rados en una única ventana de la apli-cación de mayor tamaño. Por lo tanto, a continuación se detallarán cada uno de los elementos fundamentales de Dreamweaver MX 2004 por orden de importancia. Empezarás por la panta-lla inicial, luego verás una descripción de las barras de herramientas y, final-mente, la descripción de los paneles o inspectores. De esta forma, sabrás di-ferenciar entre cada una de las opcio-

nes que aparezcan en el curso y no te perderás cuando se nombre una cuali-dad u otra necesarias para realizar una determinada acción.

1 En la pantalla inicial, la pri-mera vez que inicies Dreamwea-ver aparecerá un cuadro de diá-

logo que te permitirá elegir un diseño para el espacio de trabajo. Si cambias de idea posteriormente, podrás trasla-darte a otro distinto a través del cua-dro de diálogo Preferencias. Tienes a tu disposición dos espacios de tra-bajo. El primero es el del diseñador, que se caracteriza por utilizar MDI (Multiple Document Interface o Inter-faz para Múltiples Documentos), en el que todas las ventanas de documentos y los paneles están integrados en una ventana de aplicación de mayor tama-ño, con los grupos de paneles acopla-dos a la derecha. Es el recomendado para la mayoría de usuarios.

El segundo es el del codificador, que es el mismo espacio de trabajo inte-grado, pero con los grupos de paneles acoplados a la izquierda. Es un diseño similar al que utilizan Macromedia HomeSite y Macromedia ColdFusion Studio, en el que las ventanas de documentos muestran de forma pre-determinada la vista de código. Esta disposición es la recomendada para los usuarios que escriban código ma-nualmente y que deseen contar con una disposición del espacio de traba-jo que les resulte familiar.Una vez seleccionado el estilo de la interfaz –te recomendamos que optes por el primero– aparecerá una pan-talla inicial como la de la imagen. En ella se encuentran todos y cada uno de los diferentes elementos que vas a necesitar para realizar distintas tareas a la hora de crear la página.

2 Las barras de herramientas que utiliza Dreamweaver sirven para aglutinar todos los co-

mandos necesarios que te ayudarán a diseñar una página web con el menor esfuerzo. A continuación, encontrarás una pequeña descripción de cada una de ellas.

• La barra de título contiene el nom-bre del programa (Macromedia Drea-mweaver MX 2004) y seguidamente el del documento que aparecerá en el explorador. Entre paréntesis, su ubicación y el nombre del archivo en formato HTML. En el extremo de la derecha están los botones para mini-mizar, maximizar, restaurar y cerrar.

• En la barra de menús se encuen-tran las operaciones de Dreamwea-ver, agrupadas en menús desplega-bles. Al hacer click en Insertar, por ejemplo, verás las operaciones rela-cionadas con los diferentes elemen-tos que se pueden añadir en Drea-mweaver. Muchas de ellas se pueden hacer a partir de estos menús, pero para algunas es preferible o indis-pensable hacerlas desde los paneles.

• La barra de herramientas es-tándar contiene iconos para eje-cutar de forma inmediata algunas de las operaciones más habituales, como Abrir, Guardar, etc.

• La barra de herramientas de documento posee la peculiaridad de incluir los iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no es-tán disponibles en la barra de he-

rramientas estándar. Éstas corres-ponden a las de cambio de vista del documento, vista previa, etc.

3 Los paneles e inspectores que utiliza Dreamweaver, son ventanas flotantes similares a

las barras de herramientas. La dife-rencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto que tengas seleccionado en cada momento. A través de la opción Ventana, de la barra de menús, es po-sible mostrar u ocultar cada uno de los paneles o inspectores, con lo que no serán ninguna molestia para tu trabajo. Éstos son los más importantes:

El entorno de trabajo

Los menús

Archivo. Contienen los elementos estándar como Nuevo, Abrir, Guardar y Guardar todo, y otros comandos para la visualización o manipulación del documento actual, como Vista pre-via en el navegador e Imprimir código.

Edición. Aquí están los comandos de selección y de búsqueda, como Seleccionar etiqueta padre y Buscar y reemplazar, además de los de Cortar, Copiar, Pegar, Deshacer y Rehacer.

Ver. Te permite obtener diversas vistas del documento para que se muestren u oculten diversos tipos de elementos. Las tres vistas principales son: Diseño, que permite trabajar con el editor visual; Código, que se utiliza para trabajar en un entorno totalmen-te de programación y no permite tener directamente una referencia visual de cómo queda el documento según se va modifica; y Código y diseño, que permite dividir la ventana en dos zonas, la superior con el código fuente y la inferior, con el editor visual.

Insertar. Ofrece una alternativa a la barra Insertar para la inclusión de objetos en el documento. Desde aquí podrás añadir imágenes, tablas, diseños, formularios, objetos de plantilla, hipervínculos, etiquetas y cualquier otra función adicional.

Modificar. Con este menú podrás cambiar las propiedades del elemento

de página seleccionado. Además, a través de él, es posible editar los atributos de etiquetas, cambiar las tablas y elementos de tablas y realizar diversas operaciones relacionadas con elementos de biblioteca y plantillas.

Texto. Aquí tienes la mejor forma de aplicar cambios al texto rápidamente. Para ello, tienes a tu disposición varias opciones como el formato de párrafo, fuente, estilo de letra, tamaño, color, alineación y revisión de la ortografía.

Comandos. Proporciona acceso a diversos comandos, entre otros, para dar formato al código en función de las preferencias, para crear un álbum de fotos y para optimizar una imagen empleando Macromedia Fireworks.

Sitio. Ofrece elementos del menú dedicado a administrar sitios y cargar y descargar archivos. Algunas de las funciones incluidas en el menú Sitio en versiones anteriores de Dreamweaver se encuentran ahora en el menú Opciones del panel Archivos.

Ventana. Proporciona acceso a todos los paneles, inspectores y ventanas de Dreamweaver. Es una forma rápida de abrir y cerrar ventanas y de organizar tu escritorio para que te resulte lo más limpio posible y no te estorben a la hora de diseñar tu web.

Ayuda. Para acceder a la documen-tación de Dreamweaver. ■

Nº 122

122_48_55_Curso.indd 18 16/6/05 12:46:30

www.pctoday.es 53


Nº 122

• El inspector de Propiedades. Mues-tra y permite modificar las propieda-des del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento elegido sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc. Cuando pulsas sobre el botón de flecha (situado en la esquina inferior derecha) se despliega para mostrar más opciones. Será la herramienta de Dreamweaver que más vayas a utilizar.

• La barra de herramientas Inser-tar o panel de objetos te permite incorporar nuevos elementos en un documento sin la necesidad de recu-rrir al menú Insertar. Los elementos están clasificados por categorías: tablas, texto, elementos Flash, ob-jetos de formulario, etc. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos, los nombres de éstos o ambos a la vez.

En el paso anterior se ha descrito lo que eran. Ahora podrás comprobar las principales opciones que ponen a tu disposición los paneles, dividi-das en cuatro apartados: Utilización, Visualización, Acomplamiento y Des-acoplamiento y Cambio de tamaño y del nombre.

1 Utilización. En Dreamweaver, los paneles se organizan en grupos. Así, el panel seleccio-

nado en un grupo de paneles aparece como una ficha. Cada grupo puede ampliarse o contraerse y acoplarse o desacoplarse con otros. Incluso, los

grupos también se pueden acoplar a la ventana de la aplicación, lo que fa-cilita su acceso sin saturar el espacio de trabajo.

2 Visualización. Si lo deseas, puedes mostrar u ocultar pa-neles y grupos en el espacio

de trabajo. Así pues, para ampliar o contraer un grupo, debes hacer click en la flecha de ampliación, situada en el lado izquierdo de la barra de título del grupo. Mediante este proceso, se expande todo el contenido del panel. También puedes presionar en el título del grupo de paneles. Ahora bien, si lo que quieres es cerrar un grupo de paneles con el fin de que no aparez-ca en la pantalla selecciona, dirígete a Cerrar grupo de paneles en el menú Opciones de la barra de título. De esta forma, harás que desaparezca de la pantalla.

Hay otra posibilidad, que es abrir un grupo de paneles o un panel que no se ven en la pantalla. Selecciona el menú Ventana y, a continuación, elige un nombre de panel en el menú. Una marca de verificación al lado de un elemento indica que éste se en-cuentra abierto, aunque puede estar oculto detrás de otras ventanas. Por tanto, te sugerimos que si no encuen-tras un panel, un inspector o una ven-tana que hayas marcado como abier-to, selecciones Ventana, Organizar paneles para disponer ordenadamen-te todos los que estén abiertos.

3 Acoplamiento y desacopla-miento. Puedes mover paneles y grupos como desees y orga-

nizarlos para que floten en el espacio de trabajo o se acoplen en él. La ma-yoría de ellos sólo pueden acoplarse a la derecha o a la izquierda del área de la ventana de documento del es-pacio de trabajo integrado, mientras que otros (como el Inspector de propiedades y la barra Insertar) sólo pueden acoplarse a la parte su-perior o inferior de la ventana inte-grada. Para desacoplar un grupo de

paneles, arrástralo por los puntos de sujeción (situados en el borde izquierdo de la barra de título del grupo de paneles) hasta que el contorno indique que ya no está acoplado. En cambio, para hacerlo a otro grupo o a la venta-na integrada, arrástralo por los puntos hasta que su contorno indi-que que está acoplado.Ahora bien, si lo que quieres es desacoplar un panel de un grupo, selecciona Agrupar con, Nuevo grupo de paneles en el menú

Opciones de la barra de título del grupo de paneles. Verás que el nom-bre del comando Agrupar con cam-

Los paneles


1 Pantalla inicial 3 Preferencias del programa 3 Espacio de trabajo 3

Diseñador o Codificador

2 Las barras 3 Título, Menús, Herramientas estándar y Documento

3 Los paneles 3 De propiedades y Panel de objetos

Estar en Internet

Todavía estás al principio del curso, pero cuando tengas tu página ter-minada, querrás subirla a Internet. Para “colgar” un sitio en la Red es necesario contratar el servicio a alguna empresa con servidores que pueda alojarla y hacerla accesible las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, de lo que ocupe tu página en el disco, del volumen de transferencia y de otras opciones que quieras contratar.Hay compañías que ofrecen este servicio gratuitamente, pero con ciertas limita-ciones. Poco espacio de disco, lentitud y el nombre de tu web precedido por el de la suya son algunos de los inconvenientes, aunque para la mayor parte de las páginas personales es más que suficiente. Por

otro lado, hay que tener en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de las páginas, publicidad que no podrás negarte a incluir en ellas. Por este motivo, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una personal. ■

La mayoría de empresas especializadas ofrecen rendimientos mayores que las que hospedan de forma gratuita.

▲

122_48_55_Curso.indd 19 16/6/05 12:46:38

bia en función del nombre del panel activo y el panel aparece en un nuevo grupo de paneles propio.

4 Cambio de tamaño y nombre. Por supuesto, es posible cambiar el tamaño y el nombre de los gru-

pos de paneles en función de tus necesi-dades. Para cambiar el primer concepto, puedes hacer lo siguiente. En el caso de los paneles flotantes, arrastra el conjunto de grupos para ajustar su tamaño de la misma manera que lo haría con una ven-tana del sistema operativo. Por ejemplo, arrastra el área de ajuste de tamaño de la esquina inferior derecha del conjunto de grupos de paneles. En el de los paneles acoplados, arrastra la barra de separa-ción que hay entre los paneles y la venta-na del documento.

Si que quieres ampliar un grupo de pa-neles, selecciona Maximizar grupo de paneles en el menú Opciones de la ba-rra de título del grupo de paneles. Des-pués, haz doble click en cualquier lugar de la barra de título del grupo y éste cre-cerá hasta ocupar el espacio disponible.

Por último, para cambiar el nombre de un grupo de paneles selecciona Cambiar nombre de grupo de pa-neles en el menú Opciones de la ba-rra de título del grupo. Sólo deberás introducir un nuevo nombre y hacer click en Aceptar.

Curso

54 www.pctoday.es Nº 122


1 Utilización 3 Ampliarse o contraerse 3 Acoplarse o desacoplarse

2 Visualización 3 Opciones 3 Cerrar grupo de paneles

3 Acoplamiento y desacoplamiento

3 Opciones 3 Agrupar con 3 Nuevo grupo de paneles

4 Maximizar paneles Opciones 3 Maximizar grupo de paneles

Ahora que ya conoces las funciones básicas de Dreamweaver MX 2004, puedes crear una página web senci-lla, con varios estilos de texto, algu-na imagen que la ilustre y un enlace a otra página o sitio web. De hecho, desarrollar ésto sólo te llevará unos pocos minutos, y aprenderás cómo trabajar con los elementos básicos de los que están hechas la mayoría de las

páginas web. Si nunca has hecho una, éste es el momento para descubrir lo fácil que es.

1 Para empezar, abre la aplica-ción Dreamweaver y selecciona la opción Abrir, Documento

Nuevo. Una vez en el menú, seleccio-na la categoría Página básica, HT-

ML. Seguidamente introduce un texto estándar que te sir-va como ejercicio.

2 Ahora puedes modificar el tí-tulo y el color

de fondo. Para ello, haz click en e l menú Modificar y elige la opción Propiedades de la página. En la ventana que se abra, escribe el título “Mi primera página”. En Color de fondo pulsa sobre la pestaña y elige el que más te guste. Luego presio-na sobre el botón Aceptar.

3 Lo siguiente es in-sertar una imagen. Para hacerlo, ha de

estar accesible. Para ello, debe encontrarse en el disco duro, en un CD o en un disquete. Muchas de las imágenes que verás en Internet se pueden copiar al disco duro. Al hacer click con el botón dere-cho del ratón sobre el ar-chivo con la imagen que quieres traer de Internet,

se abre una ventana con una opción similar a Guardar imagen como... (dependiendo siempre del navegador que utilices), que permite grabar ésta en un fichero del disco duro. Copia la

imagen que más te guste, de Internet o la tuya propia y guár-dala en la carpeta de imágenes.

4 Ahora t ienes que insertarla debajo de la

segunda línea de tex-to. En primer lugar, debes situar el cursor al final de la segunda línea y pulsar un re-

Tu primera página con HTML

Una vez que hayas finalizado este curso y que tengas totalmente acaba-da tu página web, deberás contar con un dominio para que los internautas puedan visitarla. Como te comentá-bamos más atrás, en este sentido, puedes elegir entre los servicios de hospedaje que te ofrece cualquier empresa dedicada a esto u optar por los gratuitos. Ni que decir tiene que la primera opción es la mejor, porque te permitirá tener el nombre de tu pági-

na seguido de la terminación “.net”, “.org”, “.es” o “.com”, y además su coste no es excesivamente caro, dependiendo la opción de hospedaje que elijas. Y es que, a la hora de pac-tar un servicio de este tipo también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si dispones de una base de datos para poder acceder a ella a través de programa-ción vía web, aunque esto último será

útil sólo para usuarios avanzados.Por último, algunas de las empresas más conocidas dentro del mundo del hospedaje son www.arsys.es, www.amen.es y www.acens.com. Por lo que respecta al gratuito, muchas son las com-pañías que lo ofrecen, desde los mismos proveedores de Internet hasta compañías que albergan comunidades enteras, como www.webdominio.com. ■

En función del contrato que se defina el ren-dimiento de las páginas será mayor o menor.

Escoger el dominio

122_48_55_Curso.indd 20 16/6/05 12:46:48

55www.pctoday.es


Nº 122

torno (Enter) para ir a una nueva línea. Después debes dirigirte al menú Inser-tar, a la opción Imagen. En la nueva ventana que aparece deberás buscarla en la carpeta en la que la habías guar-dado, y después seleccionarla.

5 Ha llegado el momento de edi-tar el texto que previamente has introducido. Ahora vas a

pasar a cambiar un po-co su formato. Para ello, necesitas visualizar el Inspector de propie-dades que se encuentra normalmente en la parte inferior de la ventana. Selecciona la primera línea de texto y cambia el formato por “Enca-bezado 1” y el color por el que más te guste, tal y como se muestra en la siguiente imagen. Esta lista te ahorra tiempo a

la hora de asignar varias caracterís-ticas a un carácter o un párrafo com-pleto. Puedes probar con varios de ellos para ver el resultado que pro-porciona cada uno.

6 Después de este paso, la apa-riencia de la primera línea habrá cambiado. Selecciona la imagen

y las dos últimas líneas de texto y pulsa sobre el botón de centrado. Una vez ha-yas puesto en el centro la imagen y las otras dos líneas siguientes, selecciona la segunda línea de texto, que aún no ha sido modificada. Cambia el Formato por “Encabezado 3”. Selecciona de nuevo la última línea, y en Vínculo in-troduce “http://www.as.com”, para crear un enlace a esa otra página.

7 Después de todos estos pasos, puedes ver cómo ha quedado el documento pulsando la tecla F12

de la zona superior del teclado. Por últi-mo, guarda el documento. Ya sabes que puedes hacerlo a través del menú Archi-vo, desde la opción Guardar. Por su-puesto, puedes llamar al documento co-mo lo desees, pero siempre teniendo en cuenta que la extensión ha de ser “htm”

o “html”. Por ejemplo, puedes denomi-narlo pctoday1.htm o, simplemen-te, pctoday1, ya que el programa se encargará de añadir la extensión apro-piada de forma automática. Sin embargo,

comviene que especifiques la extensión como "htm", para que la reconozca cual-quier aplicación un poco antigua.Como habrás comprobado, crear una página web simple no puede ser más

sencillo. Ahora bien, con este curso, podrás profundizar un poco más y darle un toque realmente profesional a tus diseños. Y eso es precisamente lo que aprenderás en las próximas entregas. Cla-ro que, antes de nada, conviene conocer bien el entorno de trabajo en el que te vas a tener que mover. ■

Glosario

ActiveX. Controles que se pueden implementar en diferentes lenguajes de programación e insertarlos en una web para proporcionar una funcionalidad, como secuencias de animación, que no está directamente disponible en HTML.

ASP (Active Server Pages). Tecnología desarrollada por Microsoft para sus ser-vidores de sitios web. Una página ASP es una HTML que incluye uno o más scripts (pequeños programas).

DNS (Domain Name System). Sistema de Nombres de Dominio. El DNS es un servicio de búsqueda de datos de uso general, distribuido y multiplicado. Su utilidad principal es la de encontrar direcciones IP de sistemas centrales (“hosts”), basándose en los nombres de éstos. El estilo de los nombres de “hosts” utilizado actualmente en Internet es llamado “nombre de domi-nio”. Algunos de los más importantes son: “.com” (comercial y empresas), “.edu” (educación y centros docentes),

“.org” (organización sin ánimo de lucro), “.net” (operación de la red), “.gov” (Gobierno de Estados Unidos) y “.mil” (ejército de Estados Unidos). Además, la mayoría de los países tienen uno propio.

Dominio. Sistema de denominación de Hosts en Internet el cual está formado por un conjunto de caracteres que iden-tifican un sitio de la Red accesible por un usuario. Los dominios van separados por un punto y jerárquicamente están organizados de derecha a izquierda. Éstos se establecen de acuerdo al uso que se le da al ordenador y al lugar donde se encuentre.

Hipervínculo. Enlace existente en un documento hipertexto que te conduce a otro que puede ser o no de hipertexto.

Hospedaje. El hospedaje o Hosting se refiere al ordenador, comúnmente deno-minado servidor, donde los usuarios se conectan para acceder a diversos servi-cios, tales como el correo electrónico y los sitios web, por ejemplo. La rapidez y

el funcionamiento de éste dependen del servidor, el sistema operativo utilizado y el ancho de banda, entre otras cosas.

Host. Usado a veces como sinónimo de mainframe, en realidad identifica al ordenador central en un sistema infor-mático complejo.

ISS (Internet Information Server). Se trata de uno de los servicios incorpora-do en las últimas versiones de Microsoft Windows, que convierte al ordenador en un servidor de Internet o Intranet; es decir, que puede publicar páginas web tanto local como remotamente a través de un servidor web.

PHP (Pre-procesador Hipertexto). Es un lenguaje de programación implantado en HTML. La mayoría de su sintaxis está prestada de los len-guajes C, Java y Perl, con la inclusión de algunos rasgos únicos de PHP. Su función es permitir a los desarrollado-res de sitios web escribir rápidamente páginas generadas dinámicamente. ■


1 Abrir 3 Documento nuevo 3 Página básica 3 HTML 3 Introducir texto

estándar

2 Modificar 3 Propiedades de la página 3 Cambiar título 3 Color de

fondo 3 Aceptar

3 Insertar imagen 3 Elegir una de Internet 3 Guardar como 3 Carpeta

de imágenes

4 Insertar 3 Imagen

5 Editar texto 3 Cambiar formato

6 Centrar líneas 3 Formato 3 Vínculo 3 Enlace a otra página

7 Tecla F12 3 Archivo 3 Guardar con extensión “htm”

122_48_55_Curso.indd 21 16/6/05 12:46:55

A ntes de comenzar a trabajar de forma directa en tu página web, debes configurar un si-tio en Dreamweaver MX 2004

para disponer de un espacio donde se ubicará tu página web con todos sus contenidos. En esta aplicación de Ma-cromedia, un sitio consta normalmente de dos partes. En primer lugar, contie-ne un conjunto de archivos situados en un equipo local (denominado el sitio local), que en tu caso será el disco du-ro de tu ordenador; y, en segundo tér-mino, se encuentra una ubicación en un servidor web remoto donde se de-berán cargar los archivos cuando estén preparados para ponerlos a disposi-ción pública (llamado el sitio remoto).

El método más común para crear un sitio web utilizando este programa consiste en desarrollar y editar pági-nas en el disco local y, a continuación,

cargar las copias de esas páginas en un servidor web remoto para ponerlas a disposición de todos los internautas en la Red. Evidentemente, también se puede utilizar Dreamweaver de otras formas. Por ejemplo, ejecutando un servidor web en el sistema local, car-gando los ficheros en un servidor pa-ra la realización de pruebas, editando los archivos sin definir un sitio o bien utilizando un disco montado como si se tratara del disco local. Sin embar-go, lo más sencillo para comenzar, y por lo que nos hemos decantado a la hora de guiarte a lo largo de este curso, es trabajar en modo local y, posteriormente, realizar la carga de los archivos en un servidor remoto. Ya verás cómo, cuando lo pongas en marcha unas cuantas veces, te va re-sultar un proceso muy sencillo y que no te llevará demasiado tiempo.

Curso

Los primeros pasos

Nº 123

Ahora que ya conoces el entorno de trabajo de Dreamweaver MX 2004, y has hecho tus pinitos en el mundo del diseño con un ejemplo básico de creación de una página web en HTML, llega el momento

de configurar tu sitio y comenzar a darle forma a tu proyecto desde los cimientos.

48 www.pctoday.es

Guía del curso1. Conocer el entorno ¿Qué es Dreamweaver? HTML básico. Crea tu primera página web. Conoce el entorno del editor. ¿Qué hay que hacer para tener una página web en Internet? PC Today nº 1222. Los primeros pasosConfiguración de un sitio local. Crea y edita un sitio web sin conexión a Internet. Personaliza tu página. El texto en una web, sus características y estilos. PC Today nº 1233. Añade color a tu web Hiperenlaces. Conoce todos sus formatos, propiedades y cómo crearlos. Inserta y edita imágenes dentro de una página web. Crea botones y texto en flash. PC Today nº 1244. Las tablas, los marcos y los formulariosAprende a crear, insertar y rellenar tablas. Configura marcos y formularios con todos sus elementos. Conoce para qué sirven en un entorno web. PC Today nº 1255. Las plantillasCrea tus propias plantillas para realizar modelos. Establece regiones editables. Utiliza capas para enriquecer tus páginas. Aprende a insertar multimedia. PC Today nº 1266. Conocimientos avanzadosComportamiento de una página web. JavaScripts. Edita HTML. Problemas de código en la página. Configura elementos adicionales para una página profesional. PC Today nº 127

123_48_54_Curso.indd 14 1/7/05 14:22:01



Definir un sitio de Dreamweaver

Antes de pasar a la descripción deta-llada de cómo hacer lo anteriormente citado y de crear las páginas que va a contener, es preciso diseñar y planifi-car cómo será el sitio web. Como bien sabes, por este concepto se entiende el conjunto de archivos y carpetas, re-lacionados entre sí, con un diseño u objetivo común.

La creación de un sitio web suele co-menzar con la planificación. Debes de-cidir cuántas páginas desarrollarás, qué contenido aparecerá en cada una, el diseño que tendrán éstas y cómo se conectarán y vincularán entre sí.

La forma habitual de trabajar es crear una carpeta en tu disco duro. Los docu-mentos HTML normalmente se guardan dentro de dicha carpeta, mientras que para las imágenes, las hojas de estilo y todos los extras que quieras añadir, de-bes establecer otras carpetas dentro de la principal. El objetivo es disponer de una organización perfecta de los ar-chivos, para no liarte, encontrar lo que buscas más rápidamente y que todo se halle perfectamente ordenado. Esto es lo que se conoce como sitio local.

Una vez que tengas creadas todas las páginas, llegará el momento de “subir” esos archivos a un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo esté disponible en la Red y los internautas puedan consultarlo allí siempre que quieran.

La organización de los archivos en un sitio permite administrarlos, compar-tirlos, mantener los vínculos automati-camente, utilizar un software FTP para cargarlo local en el servidor, etc.

En el equipo remoto...

Servidor. Genéricamente, es el dis-positivo de un sistema que resuelve las peticiones de otros elementos, denominados clientes. Entrando más en detalle, se trata del ordenador, conectado a una red, que pone sus recursos a disposición del resto de los integrantes de ésta. Suele utilizarse para mantener datos cen-tralizados o para gestionar recursos compartidos. Internet es, en último término, un conjunto de servidores que proporcionan servicios de trans-ferencia de ficheros, correo electró-nico o páginas web, entre otros.

Sitio web (local y remoto). Es un conjunto de archivos electrónicos y páginas web referentes a un tema en particular, que incluye una página inicial de bienvenida, generalmente denominada “home page”, con un nombre de dominio y dirección en Internet específicos. Estos sitios son empleados por las instituciones públicas y privadas, organizaciones e individuos para comunicarse con el mundo entero. En el caso particular de las empresas, este

mensaje tiene que ver con la oferta de sus bienes y servicios a través de Internet, y en general para hacer más eficaces sus herramientas de marketing. Los documentos que integran el sitio web pueden ubicar-se en un equipo en otra localidad, o inclusive en otro país. Ahora bien, el único requisito es que el equipo en el que residan los documentos esté conectado a la red mundial de Internet. Este equipo de cómputo o servidor web, como se le denomina técnicamente, puede contener más de un sitio web y atender concu-rrentemente a los visitantes de cada uno de los diferentes sitios.

Nombres de archivo. Es recomen-dable que el archivo correspon-diente a la página inicial del sitio web se llame “index.htm” o “index.html”, ya que los navegadores bus-can ese nombre cuando se intenta acceder a una URL genérica. La diferencia entre una extensión y otra ya no tiene demasiada impor-tancia, ya que los navegadores modernos identifican ambas. ■

A la hora de crear un tu sistema de archivos local, puedes colocar los ac-tivos existentes (imágenes u otro tipo de contenido) en una carpeta dentro de la carpeta raíz del sitio local. Poste-riormente, cuando estés listo para aña-dir contenido a las páginas, tendrás los activos listos para utilizar.Los arch ivos de muestra incluidos con Dreamweaver contienen activos para el sitio que crearás en esta en-trega. Como has visto anteriormente, el primer paso en la creación del si-tio es copiar los archivos de muestra de la carpeta de aplicación de Drea-mweaver en la carpeta adecuada del disco duro.En este curso, hemos elegido la es-tructura y ubicaciones recomendadas de las carpetas del sitio local, para que resulte más sencillo seguir los pasos. Sin embargo, si los archivos de mues-tra están en la ubicación recomen-dada, no podrás utilizar los vínculos relativos a la raíz del sitio en el sitio de muestra. Por lo tanto, en este curso vas a utilizar únicamente vínculos rela-tivos al documento.

1 Para copiar los archivos de muestra, debes establecer una nueva carpeta y asignarle el

nombre “Sites-Local” en la carpe-ta de usuario de tu disco duro. Por

ejemplo, crea una de las carpetas si-guientes, según el sistema operativo que utilices:

C:\Documents and Settings\tu_nombre_de_usuario\

Mis documentos\Sites-Local/Users/tu_nombre_de_usuario/Documents/Sites-Local

2 Ahora localiza la carpe-ta GettingStarted en el lugar donde hayas insta-

lado Dreamweaver en el disco duro. Si Dreamweaver está en su ubicación predeterminada, la ruta de la carpeta será ésta:

C:\Program Files\Macromedia\Dreamweaver MX2004\Samples\GettingStarted\

Applications/Macromedia Dreamweaver MX 2004/Samples/GettingStarted

3 El siguiente paso es copiar la carpeta GettingStarted dentro de la ubicación Sites-Local que

acabas de crear. Una vez que hayas rea-lizado este proceso, es recomendable

que definas la carpeta como carpeta local de Macromedia Dreamweaver. De esta forma, conseguirás que en ese lugar donde vas a guardar todos los documentos de tu página web la apli-cación tenga a mano todos los activos.

Configura un sitio local (I)

En Dreamweaver, el término "sitio" se emplea para referirse a cualquiera de los siguientes conceptos:

• Sitio web: serie de páginas en un servidor que el visitante ve utilizando un navegador.

• Sitio remoto: archivos del servidor que componen un sitio web desde el punto de vista del autor, no del visitante.

• Sitio local: archivos del disco local que corresponden a los archivos del sitio remoto. En el flujo de trabajo de Dreamweaver más habitual, los ar-chivos se editan en el disco local y después se cargan en el sitio remoto.

Consejo

Resumiendo...

1 Archivos de muestra 3 Copiar los archivos en una carpeta del disco duro

2 Localizar la carpeta GettingStarted 3 Disponible tanto en

Windows como Macintosh

3 Carpeta local 3 Definir una carpeta concreta como raíz

Si utilizas un sistema Macintosh, debes tener en cuenta que en tu carpeta de usuario encontrarás ya creada una car-peta llamada Sites. No la utilices como carpeta local, ya que te servirá para co-locar tus páginas con el fin de hacerlas accesibles al público cuando utilices Macintosh como servidor web.

Consejo

▲

123_48_54_Curso.indd 15 1/7/05 14:22:09

Es el momento de crear una definición del sitio y establecer una carpeta local mediante el cuadro de diálogo Defini-ción del sitio. Puedes utilizarlo tanto en la vista Básica como en la Avanza-da. La diferencia entre una y otra es que la primera te orientará paso a paso a lo largo de l proceso de configuración del sitio. Claro que, si prefieres editar la información del sitio sin esta orien-tación, puedes hacer click en la ficha Avanzadas en cualquier momento. Al principio, el método guiado resul-ta muy explicativo, pero como suele suceder con todos los programas que ofrecen esta opción, pronto abando-ranás esta opción y utilizarás la forma más "profesional".

Precisamente, el siguiente proce-dimiento describe cómo configurar las opciones de la versión Básica del cuadro de diálogo, que también se de-nomina asistente para la Definición del sitio.

1 Para definir un sitio Web, en primer lugar, selecciona Ad-ministrar sitios dentro del

menú Sitio. En ese momento, apare-cerá el cuadro de diálogo Adminis-trar sitios. Una vez en él, haz click en la opción Nuevo y selecciona Si-tio en el menú siguiente. Aparecerá el cuadro de diálogo Definición del

sitio. Si ya lo has utilizado antes, éste mostrará la ficha Avanzadas, presio-na sobre la opción Básicas. Si ya lo tienes delante, observarás la primera pantalla del asistente para la defini-

ción del sitio. En ella te solicitará que introduzcas un nombre que identifi-que tu sitio local. Ten en cuenta que pronto tendrás una colección de pá-ginas web que deberás tener contro-ladas por medio de nombres que las diferencien bien.

2 Así pues, para poner nombre al sitio, en el cuadro de texto, in-troduce un nombre que identi-

fique el sitio en Dreamweaver. Puedes elegir el que desees. Por ejemplo, el tuyo, el de la página que vayas a crear...

La idea es sentirte identificado con la denominación que le vas a dar, aun-que siempre puedes darle un nombre genérico.

3 Tras dar n o m b r e a tu sitio

local, pulsa en Siguiente pa-ra cont inuar. Aparecerá l a próxima pan-talla del asistente y en ella te pre-guntará si deseas trabajar con una tecnología de servidor. Selecciona la opción No para indicar que el sitio es estático, por el momento, sin páginas dinámicas. Al pulsar en Siguiente para continuar aparecerá la pantalla

del asistente que te dirá cómo deseas trabajar con los archivos. En este mo-mento, elige la opción con la etiqueta Editar localmente y luego cargar al servidor de prueba remoto.

Por supuesto, puedes tra-bajar con los archivos de varias formas durante el desarrollo del sitio, con la práctica averiguarás cuál es más apropiada en cada caso, pero a los efectos de este curso, selecciona esta opción y continúa con el si-guiente paso.

4 Ha llegado el momento de editar localmente el sitio. Haz click en el icono de carpeta situado junto

al cuadro de texto, que permitirá espe-cificar la carpeta del disco local en la

que Dreamweaver debe almacenar la versión local de los archivos del sitio. Sin embargo, es más sencillo detallar un nombre de carpeta exacto utilizan-do Examinar, en lugar de escribir la ruta. Aparecerá el cuadro de diálogo Elegir la carpeta raíz local para el

sitio. Sitúate en la carpeta Sites-Local del disco local, que es la c a rpe t a en l a que has copiado los archivos de muestra. Selec-ciona la carpeta

GettingStarted dentro de Sites-Lo-cal. Ábrela y presiona Seleccionar.

5 El siguiente paso que debes dar es conectarte con un servidor remoto. El asistente te pregun-

tará cómo deseas que se conecte al servidor remoto. Por ahora, seleccio-na Ninguno en el menú emergente, ya que, por el momento, lo único que necesitas para comenzar a crear una página es la información del si-tio local. Pulsa en Siguiente para continuar. De esa forma, llegarás a la

Curso


Configura un sitio local (II)

Un servidor web es un software que suministra páginas web en respuesta a las peticiones de los navegado-res. En ocasiones, también se hace referencia a un servidor web como servidor HTTP. Supón que utilizas IIS para desarrollar aplicaciones web. El nombre predeterminado del servidor web es el nombre del equipo. Puedes cambiar éste, modificando el nombre del equipo. Si tu PC no tiene ningún nombre asignado, el servidor utilizará como nombre la palabra localhost. El nombre del servidor corresponde a la carpeta raíz del servidor (en un equipo Windows), que es muy probable que sea C:\Inetpub\wwwroot.Si eres usuario de Windows, puedes instalar y ejecutar los siguientes ser-vidores web en tu equipo: Microsoft Personal Web Server (PWS) o Internet

Information Server (IIS), una versión de PWS con todas las funciones. También puedes cargar el servidor web en un equipo Windows conectado en red para que otros desarrolladores de tu equipo puedan utilizarlo. Puede que PWS o IIS ya estén instalados en tu equipo.

Comprueba la estructura de carpetas para averiguar si tienes una carpeta denominada C:\Inetpub o D:\Inetpub. PWS y IIS crean estas localizaciones durante su instalación. Si no existen, sigue uno de estos procedimientos: para Windows 98, copia el archivo de

configuración PWS del CD de Windows 98 en tu disco duro. El archivo se encuentra en la carpeta Add-Ons/PWS. A continuación, instala el servidor Web. En el caso de que cuentes con Windows 2000 o XP Professional, instala IIS. Si por el contrario utilizas Windows XP, carga IIS. Para instalar PWS haz doble click en el archivo de instalación PWS del CD de Windows 98. Sigue las instruccio-nes del asistente hasta que pida que especifiques el directorio principal de publicación web. Acepta la opción predeterminada: C:\Inetpub\wwwroot. Por último, para instalar IIS en Windows 2000 y XP sigue estos pasos: seleccio-na Inicio / Configuración / Panel de con-trol / Agregar o quitar programas o bien puedes ir a Inicio / Internet Information Services (IIS) / Siguiente. ■

Instalar un servidor web

123_48_54_Curso.indd 16 1/7/05 14:22:17

Después de crear un sitio web, el pa-so siguiente es publicarlo cargando los archivos en un servidor web remoto. Antes de continuar, deberás disponer de acceso a un servidor web re-moto (como, por ejemplo, el servi-dor de tu provee-dor de Internet, una intranet den-tro de la empre-sa, etc.). Por su-puesto, también puedes ejecutar un servidor web en tu equipo lo-cal, aunque esto te lo explicaremos más adelante.El procedimiento funciona más correc-tamente si la carpeta raíz remota está vacía. Si el sitio remoto ya contiene archivos, crea una carpeta vacía en el sitio remoto (en el servidor) y utilízala como raíz remota. Una vez realizada es-ta operación, asigna a esta carpeta vacía el mismo nombre que el de la carpeta raíz local. Por ejemplo, en el caso del sitio con el que estamos trabajando en este curso, puedes asignarle el nombre GettingStarted para que coincida con el nombre de la carpeta raíz local.

1 Para administrar sitios, selecciona el que has creado anteriormente y haz click en Editar / Básicas /

Siguiente (varias veces hasta que se re-salte el paso Compartiendo archivos en la parte superior del asistente). En el menú emergente “¿Cómo conecta con

su servidor remoto?”, elige un méto-do para conectar con el sitio remoto. En este punto debes saber que los métodos más habituales para conectarse a un ser-

vidor en Internet son FTP y SFTP. El más utilizado para conectarse a un servidor de la intranet o al equipo local si lo utili-zas como servidor web es Local/red.

2 Así pues, lo más normal es que te conectes por FTP, por lo que deberás seguir estos pasos. In-

troduce el nombre del host del servidor (como “ftp.macromedia.com”). En el cua-dro de texto donde se te pregunta qué carpeta contiene los archivos, introduce la ruta del servidor desde la carpeta raíz FTP hasta la del sitio remoto. A continua-ción, introduce tu nombre de usuario y contraseña en los cuadros de texto

correspondientes. Si el servidor admite SFTP, selecciona la opción Utilizar FTP seguro (SFTP). Presiona en la opción de Conexión de prueba.

3 A continuación, presiona en el icono de carpeta situado junto al cuadro de texto y accede a

la carpeta raíz del sitio remoto. Si lo prefieres, puedes desactivar la opción Actualizar lista de archivos remo-tos automáticamente para aumentar la velocidad. Una vez introducida la información adecuada, haz click en Si-guiente. No actives la protección y la desprotección de archivos para el sitio. Presiona Siguiente y luego Listo.

4 Después de configurar las car-petas local y remota, puedes cargar los archivos de la carpe-

ta local al servidor web que acabas de establecer. Y es que, con el fin de que las páginas sean accesibles para to-dos los internautas a través de la Red, deberás cargarlas, incluso aunque el servidor web se ejecute en el equipo local. Para hacer esto en un sitio re-moto debes seleccionar en el panel Archivos la carpeta raíz local del sitio, que es la que creaste anterior-mente y que será la única posibilidad de elección que tendrás en esa venta-

na. Como verás, la forma de identifi-carla es mediante el símbolo de una carpeta de color verde al lado de su nombre. A continuación, fíjate en la barra de herramientas del panel Ar-chivos. Allí verás un icono de flecha azul que apunta hacia arriba y que se denomina Colocar archivos. Pulsa sobre él para que Dreamweaver copie los ficheros a la carpeta remota de-finida. Esta operación puede ocupar cierto tiempo, ya que la aplicación debe cargar todos los archivos en el sitio, incluidas las diferentes versiones de algunos ficheros, para utilizarlos con distintos tutoriales. Por último, abre el sitio remoto en un navegador web para comprobar que todo se ha realizado correctamente.

www.pctoday.es 51Nº 123

▲


Definir una carpeta remota

Resumiendo...

1 Definir un sitio Web 3 Menú Sitio 3 Administrar sitios 3 Nuevo 3

Sitio 3 Definición del sitio 3 Básicas 3 Definición del sitio

2 Poner nombre al sitio 3 En el cuadro de texto, introducir un nombre

que identifique el sitio en Dreamweaver

3 Servidor 3 Asistente tecnología de servidor 3 “Editar localmente

y luego cargar al servidor de prueba remoto”

4 Editar localmente 3 En el cuadro de diálogo elegir la carpeta raíz

local para el sitio 3 Carpeta Sites-Local del disco local, que es la

carpeta en la que has copiado los archivos de muestra 3 Seleccionar

la carpeta GettingStarted

5 Trabajar en local 3 Rechazar la opción Trabajar en remoto 3

Resumen de la configuración 3 El panel Archivos mostrará ahora

la nueva carpeta raíz local correspondiente al sitio actual

siguiente pantalla del asistente, que te mostrará un resumen de la confi-guración, con los datos locales que has señalado y con la información del sitio remoto y el servidor de prueba que, en este caso, te pondrá que lo fijarás más adelante. A continuación, presiona en el botón Completado para terminar. De nuevo, tendrás en pantalla el cuadro de diálogo Admi-

nistrar sitios, en el que se muestra el nuevo sitio. Haz click en la opción Listo para cerrarlo.

En este momento, el panel Archivos mostrará la nueva carpeta raíz local correspondiente al sitio actual. Por cierto, ten en cuenta que la lista de ficheros del panel Archivos actúa co-mo si de un administrador de ficheros se tratara, puesto que permite copiar,

pegar, el iminar, mover y abrir do-cumentos como si se fuera el escrito-rio del ordenador. Así pues, cualquier cambio de directo-rios que realices a través de esta ven-tana afectará a la disposición y situa-ción de los archi-vos cuando cierres la aplicación.

123_48_54_Curso.indd 17 1/7/05 14:22:26

Curso


Una vez que conoces todo lo referido al sitio local y remoto, es el momento de dar otro paso: la inserción y la edición de textos en tu página web. En este sen-tido, debes saber que Dreamweaver MX 2004 ofrece varias formas de añadir texto y aplicarle formato en un docu-mento. Puedes insertar texto, establecer la fuente, el tamaño, el color y los atri-butos de alineación. Asimismo, puedes crear y aplicar tus propios estilos per-sonalizados mediante el uso de las CSS (hoja de estilos en cascada).Dreamweaver permite añadir texto a páginas web escribiendo el texto di-rectamente en una página, copiando y pegando texto de otro documento o arrastrándolo de otra aplicación. Entre los tipos de documentos que los profe-sionales de Internet reciben con conte-nido de texto que debe incorporarse en las páginas web se incluyen los archivos de texto ASCII, los archivos en formato de texto enriquecido y los documentos de MS Office. Dreamweaver permite ex-traer texto de cualquiera de estos tipos de documentos e incorporarlo a una página web.

1 Para añadir texto a un docu-mento de Dreamweaver, puedes escribir texto directamente en la

ventana del documento, cortar y pegar texto e, incluso, importarlo de otros

documentos. Dreamweaver no man-tiene el formato de texto que tenía en la otra aplicación, pero conserva los saltos de línea.

2 Ahora vas a aplicar formato a los párrafos. Para ello, utiliza el me-nú Formato del Inspector de

propiedades o el submenú Texto y allí elige Formato de párrafo para aplicar las etiquetas estándar de párrafo y el en-cabezado. Sitúa el punto de inserción en el párrafo o selecciona parte del texto

del párrafo. Después, escoge Inspector de propiedades y elige un formato de párrafo (por ejemplo, Encabezado 1, Encabezado 2, Texto con formato predeterminado, etc.). La etiqueta HT-ML asociada con el estilo seleccionado (por ejemplo, h1 para Encabezado 1, h2 para Encabezado 2, pre para For-mato predeterminado, etc.) se aplica-rá a todo el párrafo. Selecciona Ningu-no para quitar un formato de párrafo.

3 Puedes alinear texto en la página utilizando el inspector de pro-piedades o el submenú Texto y

seleccionar Alinear. Asimismo, podrás centrar cualquier elemento en una pági-na usando el comando Texto / Alinear / Centro. Para alinear texto seleccióna-lo o simplemente inserta el puntero al principio del texto. Después, escoge Iz-quierda, Derecha o Centro en el Ins-pector de propiedades, o selecciona Texto / Alinear y elige un comando.

4 La forma de centrar los elementos también es muy sencilla. Ten en cuenta que puedes centrar cual-

quier tipo de elemento de que dispon-gas, no sólo texto, también imágenes, ta-

blas u otro objeto de la página. Para ello, dirígete a Texto / Alinear / Centro. Por cierto, puedes alinear y centrar bloques completos de texto, pero no partes de un encabezado o de un párrafo.

5 En cuanto al comando Sangría, debes saber que aplica la etiqueta

HTML blockquote al párrafo de texto y utiliza sangría a ambos lados de la página. Para apli-car y quitar sangría al texto, sitúa el punto de inserción en el párrafo al que desea aplicar sangría, después presiona so-bre Sangría o Anular sangría

en el Inspector de propiedades. Puedes aplicar va-rias a un párrafo. Cada vez que se-lecciones este co-mando, la sangría del texto aumenta en los dos lados del documento.

6 Adición de espaciado de párrafo. Dreamweaver funciona de forma similar a muchas aplicaciones

de tratamiento de textos: presiona In-tro para crear un nuevo párrafo. Los

navegadores web insertan automática-mente una línea en blanco de espacio entre los párrafos. Puedes añadir una única línea de espacio entre los párra-fos mediante la inserción de un salto de línea con Mayús+Intro.

Inserta y edita textos

Resumiendo...

1 Seleccionar el modo de conexión servidor en Internet 3 FTP / SFTP

2 Nombre del host del servidor 3 Nombre de usuario y contraseña en 3

Conexión de prueba

3 Carpeta raíz del sitio remoto 3 No actives la protección y la despro-

tección de archivos para el sitio

4 Después de configurar las carpetas local y remota 3 Cargar los archi-

vos de la carpeta local al servidor web 3 Seleccionar Panel de archivos

3 Archivos 3 Seleccionar la carpeta raíz local del sitio 3

Doble click en Colocar archivos de la barra de herramientas del

panel Archivos

123_48_54_Curso.indd 18 1/7/05 14:22:36

www.pctoday.es 53


Nº 123

7 Las reglas horizontales (líneas) son útiles para organizar la in-formación. Separan visualmen-

te el texto y los objetos de una página con una o más reglas. En la ventana de documento, sitúa el punto de inserción en el lugar donde quieres insertar una regla horizontal, presiona Insertar / HTML / Regla horizontal o en la ca-tegoría HTML de la barra Insertar / Regla horizontal.Ahora bien, si lo que quieres es modi-ficar una regla horizontal, sitúate en la ventana de documento / Regla ho-rizontal / Ventana / Propiedades. De este modo se abre el inspector de propiedades y se pueden modificar to-

das las que se requieran. An y Al espe-cifican el ancho y el alto de la regla en píxeles o como porcentaje del tamaño de la página.

8 A continuación, puedes utilizar las opciones del inspector de propiedades o el menú Texto

para establecer o cambiar las caracte-rísticas de fuente del texto selecciona-do. Puedes establecer el tipo, el estilo (negrita, cursiva o normal) y el tamaño de la fuente. Selecciona el texto. Si no lo haces, el cambio se aplicará al texto que escriba a continuación. Para cambiar la

fuente, selecciona una combinación de fuentes en el inspector de propiedades o en el submenú Texto / Fuente / Pre-determinada para quitar los tipos de fuente aplicados anteriormente y apli-car la fuente predeterminada al texto seleccionado. Por último, para cambiar el estilo de fuente, haz click en Negrita o Cursiva en el inspector de propieda-des o elige un estilo de fuente (Negrita, Cursiva, Subrayado, etc.) en el submenú Texto / Estilo.

9 Si quieres cambiar son las dimen-siones de la fuente, elige un tama-ño (de 1 a 7) en el Inspector de

propiedades o en el submenú Texto / Tamaño. Por cierto, en lenguaje HTML todos ellos son tamaños relativos, no de puntos. Para aumentar o reducir el ta-

maño del texto seleccionado, escoge un tamaño relativo (desde +1 ó -1 hasta +4 o –3) en el Inspector de propie-dades o en el menú Texto / Cambio de tamaño.Estos números indican una diferencia relativa respecto al tamaño de la fuente base. El valor predeterminado de base es 3. Por tanto, un valor de +4 produce un tamaño de fuente de 3 + 4, es decir, 7. El valor máximo del tamaño de fuen-te es 7. Si intentas definir uno más alto se mostrará como 7. Dreamweaver no muestra la etiqueta basefont (que se encuentra en la sección head), aun-que el tamaño de fuente se mostrará correctamente en un navegador. Para comprobarlo, compara el texto defini-do en 3 con el texto definido en +3.

10 También se puede cambiar el color del texto seleccio-nado, de modo que el nuevo

color prevalezca sobre el establecido en Propiedades de la página. Si no se ha establecido ningún color de texto allí, la aplicación utiliza el negro como color predeterminado. Para cambiar el tono del texto selecciona el espacio a editar. Después elige un color en la paleta de colores haciendo click en el selector de color del inspector Propiedades o

accede a Texto / Color. Aparecerá el cuadro de diálogo del selector de color del sistema. A continuación, escoge un color y haz click en Aceptar.Existen más modos de cambiar el color. Uno de ellas es escribir el nombre de éste o un número hexadecimal directa-mente en el campo del inspector de pro-piedades, en Modificar / Propiedades de la página. Para restablecer el color predeterminado del texto sólo hay que abrir el inspector de propiedades, hacer click en el cuadro de color para abrir la

paleta de colores seguros para la web y pulsar el botón Tachado (justo el icono cuadrado blanco y atravesado por una línea roja que se encuentra en la esqui-na superior derecha).

11 Otra de las opciones inte-resantes de Dreamweaver en este punto es el objeto

Fecha, con el cual se puede insertar la fecha actual con el formato que prefieras (con o sin la hora) y ofrece la posibilidad de actualizarla cada vez que se guarde el archivo. Para insertar la fecha actual en

un documento, sitúa el punto de inser-ción de la ventana del documento en el lugar donde deseas insertar la fecha, se-lecciona Insertar / Fecha o Común de la barra Insertar / Fecha. En el cuadro de diálogo que apa-rece, elige el formato de día de la semana, fecha y hora.

12 Algunos caracte-res especiales se representan en

HTML mediante un nombre o un nú-mero denominado entidad. HTML in-cluye nombres de entidad para carac-teres como el símbolo de “copyright” (“©”) el signo “&” (“&”) y el símbolo de marca comercial “re-

gistrada” (“®”). Cada entidad tiene un nombre (co-mo “—”) y un equivalente numérico (como “”). Para insertar un carácter especial en un documento, sitúa el punto de inser-ción de la ventana en el lugar don-de quieres incluir un carácter especial. Puedes hacerlo de dos modos: yendo a submenú Insertar / HTML / Caracte-res especiales o en la categoría Texto de la barra Insertar / Caracteres.

13 HTML sólo permite un es-pacio entre caracteres. Para añadir espacio adicional en

un documento, debes insertar un espa-cio indivisible. Puedes establecer una preferencia para que se añadan espacios indivisibles en un documento de forma automática. Para insertar un espacio in-divisible puede optar entre tres variantes: En primer lugar, en la categoría HTML de la barra Insertar, presiona el botón

Caracteres y selecciona Insertar es-pacio indivisible. En segundo lugar, mediante el menú Insertar / HTML / Caracteres especiales / Espacio in-divisible. Finalmente, a través de Con-trol + Mayús + Espacio.

▲

Los usuarios establecen el tamaño de puntos de la fuente predeterminada pa-ra sus navegadores. Éste será el tama-ño de fuente que verán cuando elijan Predeterminada o 3 en el inspector de propiedades o el submenú Texto / Ta-maño. Los tamaños 1 y 2 aparecerán más pequeños que el de fuente prede-terminada, mientras que los tamaños 4 a 7 aparecerán más grandes. Asimismo, las fuentes suelen aparecer con unas dimensiones mayores en Windows que en Macintosh, si bien Macintosh Inter-net Explorer 5 utiliza el mismo tamaño predeterminado que Windows.

Consejo

Si quieres que la fecha insertada se ac-tualice cada vez que guardes el docu-mento, selecciona Actualizar automáti-camente al guardar. Si deseas que la fe-cha se convierta en texto normal cuando se inserte y no se actualice automática-mente, desactiva esa opción haciendo click en Aceptar para insertar la fecha.Por cierto, si has seleccionado Actua-lizar automáticamente al guardar tam-bién puedes editar el formato de fecha después de insertarlo en el documento haciendo click en el texto formateado y seleccionando Editar formato de fecha en el inspector de propiedades.

Consejo

123_48_54_Curso.indd 19 1/7/05 14:22:43

Curso

54 www.pctoday.es

De forma predeterminada, Dreamwea-ver utiliza hojas de estilos en cascada (CSS) para aplicar formato al texto. Los estilos que aplique al texto me-diante el inspector de propiedades o los comandos de menú crean reglas CSS que se incrustan en el encabezado del documento actual. Los estilos CSS aportan gran flexibilidad y control al aspecto de la página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos de texto concretos. Además de los estilos y de las hojas de estilos que crea, puedes usar hojas de estilos suministradas con Dreamwea-ver para aplicarlas a los documentos.

Por último, el panel Estilos CSS te per-mite crear, editar y quitar estilos CSS, además de adjuntar hojas de estilos externas a los documentos.

1 Puedes acceder a este panel de dos modos: a través del me-nú Ventana / Estilos CSS o

Mayús+F11. El panel Estilos CSS permite visualizar la definición de los estilos asociados al documento actual, además de mostrar la jerarquía de los estilos. Asimismo, muestra la definición de los estilos CSS personalizados (de clase), las etiquetas HTML redefinidas

y los estilos CSS del selector. Al crear o adjuntar hojas de estilos CSS, el nombre y los atributos del estilo aparecerán en el panel Estilos CSS. En él aparece una lista de todos los selectores definidos en todas las etiquetas y hojas de estilo importadas o vinculadas externamente.

2 Es posible crear un estilo CSS para automatizar la aplicación de formato a etiquetas HTML o a

rangos de texto identificados mediante un atributo class. Para crear un estilo CSS nuevo Sitúa el punto de inserción en

el documento y sigue uno de estos pro-cedimientos para abrir el cuadro de diá-logo Nuevo estilo CSS: en el Panel Esti-los CSS selecciona Nuevo estilo CSS (+) situado en la parte inferior derecha del panel o Inspector de propiedades de texto / Administrar estilos en el menú emergente Estilo / Nuevo.

3 Define el tipo de estilo CSS que desees. Para crear un estilo per-sonalizado que se pueda apli-

car como atributo class a un rango o un bloque de texto, selecciona Clase

(puede aplicarse a cualquier etiqueta) y escribe el nombre del estilo en el cuadro de texto Nombre.Para redefinir el formato pre-determinado de una etique-ta HTML específica, elige la opción Redefinir etiqueta HTML / Etiqueta. ■

Atajo Función

Ctrl + N Abre un documento nuevo

Ctrl + W Cierra un documento abierto

Ctrl + S Guarda un documento

Ctrl + Mayús + S Guardar como…

Ctrl + A Seleccionar todo

Ctrl + Alt + I Insertar imagen

Ctrl + L Crear vínculo

Ctrl + Alt + 9 Sangría en el texto

Ctrl + Mayús + P Formato de párrafo

Ctrl + J Modificar propiedades de la página

F5 Actualizar vista de Diseño

F12 Vista previa en el navegador

F4 Ocultar paneles

Atajos de teclado

Como en cualquier otra aplicación, Dreamweaver 2004 MX tiene la ventaja de que, una vez que conoces el aspecto visual del programa, puedes avanzar mucho más

rápido en la realización de tareas si empie-zas a utilizar una serie de atajos de teclado. A fuerza de utilizarlos, verás cómo te aho-rrarán una buena cantidad de tiempo.

Resumiendo...

1 Añadir texto a un documento 3 Escribir texto, cortar y pegar texto e,

incluso, importar texto de otros documentos

2 Aplicación de formato a párrafos 3 Inspector de propiedades 3 Formato

de párrafo

3 Alineación de texto 3 Izquierda, Derecha o Centro en el Inspector de

propiedades

4 Centrar elementos 3 Escoge elemento 3 Texto 3 Alinear 3 Centro

5 Sangrar texto 3 Sangría o Anular sangría en el inspector de propiedades

6 Adición de espaciado de párrafo 3 Intro para crear un nuevo párrafo

7 Utilización de reglas horizontales 3 Insertar 3 HTML 3 Regla horizontal

8 Configuración y cambio de fuentes y estilos 3 Inspector de propiedades

9 Cambiar el tamaño de la fuente 3 Elegir un tamaño (de 1 a 7) en el ins-

pector de propiedades

10 Cambio del color del texto 3 Paleta de colores haciendo click en el selec-

tor de color del Inspector de propiedades

11 Inserción de fechas 3 Fecha o Común de la barra Insertar

12 Inserción de caracteres especiales 3 Submenú Insertar 3 HTML 3

Caracteres especiales

13 Adición de espacio entre caracteres 3 Categoría HTML de la barra

Insertar 3 Caracteres 3 Insertar espacio indivisible.

Uso de hojas de estilos en cascada CSS

Resumiendo...

1 Panel Estilos CSS 3 Ventana 3 Estilos CSS o Mayús+F11

2 Creación de un nuevo estilo CSS 3 Panel Estilos CSS 3 Nuevo estilo

CSS (+)

3 Definir el tipo de estilo CSS 3 Clase (puede aplicarse a cualquier

etiqueta) 3 Escribir el nombre del estilo en el cuadro de texto Nombre

123_48_54_Curso.indd 20 1/7/05 14:22:50

A unque en el mercado pue-des encontrar muchos y muy diversos formatos de archivo gráfico, los más utilizados pa-

ra páginas web son tres: JPEG, GIF y PNG. Entre ellos, destacan los dos primeros, por ofrecer una mayor compatibilidad y permitir su visualización en la mayoría de los navegadores. Sin embargo, cada uno posee sus ventajas. Por ejemplo, los PNG son los más adecuados para casi cualquier tipo de gráfico web, debido a su flexibilidad y su reducido tamaño de archivo. El único inconveniente es que su visualización de imágenes sólo es par-cialmente compatible con los navegado-res Microsoft Internet Explorer (4.0 y posteriores) y Netscape Navigator (4.04 y posteriores). Este formato de archivo es un sustituto de GIF, con posibilidad de color indexado, escala de grises y color verdadero, además de ser compatible

con un canal alfa para transparencias. Los archivos PNG ofrecen la posibilidad de conservar la información original de capas, vectores, color y efectos (como por ejemplo las sombras), así como po-der editar elementos cuando se desee.

Por otra parte, los archivos GIF utilizan un máximo de 256 colores y son idó-neos para visualizar imágenes con tonos no continuos o con grandes áreas de co-lor homogéneo, como barras de navega-ción, botones, iconos, logotipos u otras con colores y tonos uniformes.

El formato JPEG, por su parte, es el mejor para imágenes fotográficas, ya que puede contener millones de colores. A medida que la calidad de un archivo JPEG aumenta, también lo hace su tama-ño y, por tanto, el tiempo que tarda en descargarse. Aunque es posible conse-guir un equilibrio entre la calidad y ta-maño comprimiendo el archivo.

Curso

Añade color a tu web

Nº 124

Llegamos a la tercera parte de este curso con la intención de darle vida a tu página. La forma de conseguirlo es añadir imágenes, tanto fijas como en movimiento, para que tenga un aspecto más atractivo

y se haga más amena de leer. Asimismo, también te mostraremos cómo establecer hipervínculos.

52 www.pctoday.es

Guía del curso1. Conocer el entorno ¿Qué es Dreamweaver? HTML básico. Crea tu primera página web. Conoce el entorno del editor. ¿Qué hay que hacer para tener una página web en Internet? PC Today nº 1222. Los primeros pasosConfiguración de un sitio local. Crea y edita un sitio web sin conexión a Internet. Personaliza tu página. El texto en una web, sus características y estilos. PC Today nº 1233. Añade color a tu web Hiperenlaces. Conoce todos sus formatos, propiedades y cómo crearlos. Inserta y edita imá-genes dentro de una página web. Crea botones y texto en flash. PC Today nº 1244. Las tablas, los marcos y los formulariosAprende a crear, insertar y rellenar tablas. Configura marcos y formularios con todos sus ele-mentos. Conoce para qué sirven en un entorno web. PC Today nº 1255. Las plantillasCrea tus propias plantillas para realizar modelos. Establece regiones editables. Utiliza capas para enriquecer tus páginas. Aprende a insertar multimedia. PC Today nº 1266. Conocimientos avanzadosComportamiento de una página web. JavaScripts. Edita HTML. Problemas de código en la página. Configura elementos adicionales para una página profesional. PC Today nº 127

124_52_59_Curso.indd 14 14/7/05 19:05:46

Cuando insertas una imagen en un documento de Dreamweaver, el pro-grama genera automáticamente una referencia al origen de la imagen en el código HTML. Para asegurarte de que es correcta, el archivo corres-pondiente deberá estar en el sitio ac-tual. En el caso de que no lo esté, la aplicación te preguntará si deseas co-piarlo en él. Además, podrás insertar imágenes dinámicas o que cambian con frecuencia. Un ejemplo de esto son los sistemas de rotación de los rótulos publicitarios.

1 Lo primero de todo es colocar el punto de inserción en el lugar de la ventana de documento en

el que deseas que aparezca la imagen. Después presiona sobre el menú In-

sertar/Imagen. En ese momento, se mostrará un cuadro de diálogo donde, en su parte superior, podrás elegir en-tre dos opciones: seleccionar Sistema de archivos, para elegir un fichero gráfico, o Fuente de datos, para es-coger un origen de la imagen dinámi-ca. Escoge el primero.

2 Ahora tienes que buscar y selec-cionar el origen de la imagen o del contenido que desees insertar.

Si estás trabajando en un documento que no está guardado, Dreamweaver genera una referencia de “archivo://” para el fi-

chero de imagen y convierte ésta en una ruta relativa al documento.

3 Una vez hecho todo esto, haz click en Aceptar. Entonces aparecerá el cuadro Atributos de accesi-

bilidad de la etiqueta de imagen, si se ha activado el cuadro de diálogo en Pre-

ferencias . Ahora debe-rás introducir los valores en los cuadros

de texto en la opción Texto alternativo y Descripción larga. Luego haz click en Aceptar y establece las propiedades de la imagen.

4 A continuación, podrás realizar la edición de los atributos de accesibilidad de una imagen,

que tendrás la opción de editar en có-digo HTML. Para empezar, selecciona

ésta en la ventana de documento y lue-go edita los atributos de imagen apro-piados en la vista Código, y seleccio-nando Editar código de etiqueta, o Editar, en el inspector de propieda-des, el valor de Alt.

5 La Inserción de imagen tam-bién te permite incluir en tu pá-gina un marcador. Después de

colocar el punto de inserción en el lugar Común de la barra Insertar, pulsa el

icono Marcador. Aparecerá un cuadro de diálogo. Selecciona las opciones pa-ra el marcador y una etiqueta de texto. Cuando hayas terminado, pulsa Aceptar.


▲

La barra de Propiedades

1 Permite crear un mapa de imagen2 Vista en miniatura de la imagen3 Tamaño4 Anchura y altura de la imagen5 Carpeta de origen de la imagen6 Texto alternativo7 Optimizar con el programa Fireworks8 Opción para cambiar el nombre de los

estilos CSS o Administrar estilos

9 Ventana de opciones10 Puntero11 Crear rectángulo12 Crear círculo13 Espacio horizontal y vertical del margen

del documento14 Especifica la imagen que debe cargarse

antes que la principal15 Tamaño del borde que rodea la imagen

16 Alinear la imagen17 Recortar18 Justificar a la derecha, izquierda

o centrado19 Volver a muestrear20 Brillo y contraste21 Perfilar22 Acceso al editor rápido de etiquetas

en HTML

23 Crear polígono24 Vincular la imagen con otra página o con

otro lugar dentro de la misma25 Especifica el marco o la ventana donde

se cargará la página vinculada26 Editar la imagen27 Ayuda28 Nombre de la imagen

21

28 3 4 524

25 6 7 8 926

10 11 12 23 13 14 15 16 17 18 21 22

27

2019

Anclajes con nombre. Establecen marcadores en un documento, que a menudo se suelen colocar en un tema específico o en la parte superior de una página, para posteriormente crear vínculos a la posición especificada.

Muestreo. Se trata de la posibili-dad de añadir o quitar píxeles en archivos de imagen JPEG y GIF. Asimismo, podrás cambiar su tama-ño para que se parezcan lo máximo posible a la imagen original y de mejorar el rendimiento de descarga.

Recorte. Te permitirá editar imá-genes mediante la reducción de su área. Esta herramienta suele utilizarse para poner más énfasis

en un tema principal y eliminar aspectos no deseados alrededor del centro de interés de la imagen.

Brillo y Contraste. Estos pará-metros modifican los píxeles de la imagen; es decir, todo lo que afecta a los resaltados, las sombras y los medios tonos de ésta.

Perfilado. Es una herramienta que te servirá para ajustar el enfoque de una imagen mediante el aumento del contraste de los bordes que haya dentro de ella. Esta función resulta muy útil para mostrar los detalles en los archivos gráficos con el fin de que aparezca más definida. ■

Conceptos básicos


Añadir una imagen

124_52_59_Curso.indd 15 14/7/05 19:05:53

6 En el caso de que desees sus-tituir un marcador de posición de la imagen, antes de publi-

car el sitio, debes reemplazar todos los marcadores que hayas añadido

por los correspondientes archivos gráficos aptos para la web. Si dispo-nes de la aplicación Fireworks, tam-bién de Macromedia, puedes crear un nuevo gráfico desde el marcador de posición de Dreamweaver, pero recuerda que la nueva imagen debe-rá tener el mismo tamaño que la del marcador de posición que has defini-do. Una vez hecho todo esto, puedes editar la imagen y reemplazarla una vez en Dreamweaver.

7 Para actualizar el origen de la imagen, colócate en la venta-na de documento. Luego pulsa

sobre el marcador de posición de imagen para seleccionarlo y, a conti-nuación, en el inspector de propie-dades. Luego presiona el icono de carpeta situado junto al campo Ori-gen, con el que se abrirá el cuadro de

diálogo. Posteriormente, desplázate hasta la imagen con la que deseas re-emplazar el marcador y haz click en Aceptar para que la imagen seleccio-nada aparezca en el documento.

8 Con la herramienta de alineación de una imagen podrás alinear és-ta con el texto que se encuentre

cerca, con otra imagen, con un plug-in o con otros elementos que puedas incluir en tu página. Además, te ofrece la posi-

bilidad de alinear horizontalmente una imagen. Para empezar, selecciónala en la vista de diseño. Luego establece los atributos en el inspector de propieda-des. Con él podrás determinar la alinea-ción con relación a otros elementos del mismo párrafo o de la misma línea. El resultado es inmediato y puedes modifi-carlo hasta dar con lo que buscas.

Si deseas reducir el tiempo de descar-ga y conseguir que todas las instancias de una imagen tengan el mismo tama-ño, utiliza una aplicación de edición de imágenes. El cambio de tamaño visual de una imagen en Dreamweaver te per-mitirá ver cómo afecta ésta al diseño en diferentes dimensiones.

1 El primer paso que deberás realizar es seleccionar una imagen en la ventana de docu-

mento. Entonces, aparecerán mane-jadores de cambio de tamaño en los lados inferior y derecho del elemento y en la esquina inferior derecha. En el caso de que no aparezcan, pulsa

en cualquier punto de fuera del ele-mento que deseas modificar y vuelve a seleccionarlo.

2 Después de esto, puedes cam-biar el tamaño del elemento. Para ello, ajusta el ancho y el

alto del mismo, arrastrando el ma-nejador de selección hacia un lado. Para conservar las proporciones del objeto (su relación entre ancho y al-to) al ajustar sus dimensiones, arras-tra el manejador de selección de la esquina mientras presiona la tecla Mayúsculas. Esta opción te permiti-

Curso

54 www.pctoday.es

Dreamweaver permite recortar imá-genes de archivos de mapa de bits. Cuando se hace esto, se cambia el ar-chivo de imagen de origen en el dis-co. Por esa razón, es recomendable que conserves una copia de seguridad del original en caso de que necesites volver a éste.

1 Para recortar un archivo de ima-gen, lo primero que tienes que hacer es abrir la página que con-

tiene la imagen que deseas recortar y seleccionarla. Luego, pulsa en el icono Recorte del inspector de propieda-

des de imagen, con el que aparecerán los manejadores de recorte alrededor de la imagen seleccionada. Una vez ele-gida el área, ajusta los manejadores de recorte, de modo que el recuadro de límite rodee lo que quieres mantener.

2 Después, pulsa dos veces en el recuadro de límite o presiona Enter para recortar la selec-

ción. En ese momento, aparecerá un cuadro de diálogo que te informará de que el archivo de imagen que está cor-

tando cambiará en el disco. Haz click en Aceptar. Al pulsar, los píxeles que se encuentren fuera del recuadro de límite, se eliminarán, permaneciendo el resto de objetos.

3 Si quieres ver el resultado, selec-ciona la opción de vista previa para comprobar que la imagen

ha quedado como esperabas. En el caso de que quieras deshacer los efectos del comando de recorte, selecciona Edi-ción, Deshacer Recortar para volver a la imagen original.

4 Una vez que hayas terminado todos estos pasos, otra de las opciones que puedes realizar es

optimizar las imágenes. Para ello, abre la página que contiene dicha imagen, selecciónala y pulsa con el botón de-recho del ratón en el menú emergente Optimizar en Fireworks o bien en el inspector de propiedades de imagen, o

selecciónalo en Modificar/Imagen/Optimizar imagen en Fireworks. Por supuesto, para ello deberás tener instalado Fireworks en tu disco duro. Puedes conseguir una versión de eva-luación en el sitio web de Macromedia (www.macromedia.com). A continua-ción, te aparecerá un cuadro de diálo-go. Pulsa click en Aceptar.

Muestreo de una imagen


1 Establecer punto de inserción 3 Elegir Sistema de archivos

2 Escoger imagen

3 Atributos de accesibilidad

4 Edición del código HTML de la imagen

5 Añadir marcador 3 Común 3 Insertar 3 Marcador

6 Sustituir marcador

7 Actualizar imagen 3 Origen 3 Selecciona imagen 3 Aceptar

8 Alinear imagen 3 Seleccionar la imagen y establecer los atributos

Recorte de una imagen


1 Abrir la página con el elemento 3 Ajustar manejadores de recorte

2 Recortar la selección 3 Doble click o Enter

3 Vista previa 3 Comprobar resultado

4 Optimizar las imágenes 3 Optimizar imagen en Fireworks

124_52_59_Curso.indd 18 14/7/05 19:06:00

Práctico


La función de brillo y contraste te per-mite modificar estos parámetros de una imagen. Aunque normalmente esta herra-mienta se utiliza para corregir imágenes que son demasiado oscuras o demasiado claras, también te ofrece la posibilidad de resaltar las sombras y medios tonos de la imagen. Por su parte, el perfilado aumenta el contraste de los píxeles situa-dos alrededor de los bordes de los obje-tos para aumentar la definición o nitidez de la imagen. Vamos a explicar más en detalles cada uno de ellos.

1 Para cambiar los parámetros de brillo y contraste, selecciona la imagen y pulsa en el botón Bri-

llo/Contraste en el inspector de pro-piedades de imagen o bien en el menú Modificar/Imagen/Brillo y Contras-te. A continuación, cuando aparezca el cuadro de diálogo de esta función, arrastra los controles deslizantes de

Brillo y Contraste para ajustar los valores. Debes tener en cuenta que el rango de valores posibles es de -100 a 100. Una vez finalizadas todas estas operaciones pulsa Aceptar.

2 Ahora te ocuparás del perfilado de una imagen. Para ello, selec-ciónala, pulsa el botón Perfilar

del inspector de propiedades o elige en el menú Modificar/Imagen/Per-

filar. Después de esto, te aparecerá un cuadro de diálogo en el que podrás especificar el grado de perfilado. Sólo tendrás que arrastrar el control desli-

zante o bien introducir un valor entre 0 y 10 en el cuadro de texto. A su vez, también puedes ajustar la nitidez de la imagen mediante el cuadro Nitidez, y obtener una vista previa del cambio en la imagen. Al finalizar, pulsa Acep-tar. Ahora bien, si lo que deseas es deshacer los efectos del comando de perfilado, selecciona Edición/Des-hacer Perfilar para volver a la imagen original. Eso sí, debes tener en cuenta que sólo puede deshacerse el efecto an-tes de guardar la página que contiene la imagen. Una vez almacenada, los cam-bios realizados quedarán en la imagen de forma permanente.

3 Por supuesto, también puedes crear e insertar imágenes de sustitución en tu página. Esto es

aquella imagen que cambia cuando el puntero pasa sobre ella.

Localiza un par de imágenes del mismo tamaño. Ten en cuenta que Dreamweaver ajusta automáticamente el tamaño de la segunda imagen al de la primera. Después, sitúa el punto de inserción en el lugar de la ventana del documento donde deseas que aparezca la imagen de sustitución e introdúcela

mediante la barra Insertar, selecciona Común y luego haz click en el icono Imagen de sustitución o bien eli-ge en el menú Insertar/Objetos de imagen e Imagen de sustitución.

A u t o m á t i c a m e n t e , se abrirá un cuadro. Complétalo y haz click en Aceptar. Seguida-mente, elige Archivo/Vista previa en el na-vegador. Recuerda que

en este caso, no se pude ver el efecto que causa en la vista de diseño, por lo que para observarlo deberás desplazar el cursor sobre la imagen original para que aparezca la de sustitución.

rá cambiar visualmente el tamaño de los elementos hasta un mínimo de 8 por 8 píxeles.

3 En el caso de que desees ajus-tar el ancho y el alto de un elemento a un tamaño menor

del original, utiliza el inspector de propiedades y podrás introducir un valor numérico, una operación más precisa que la visual. Para restaurar las dimensiones originales de un ele-mento, elimina los valores de los cua-

dros de texto Ancho y Alto, o bien pulsa el botón Restablecer tamaño en el inspector de propiedades.

4 Si, al contrario, lo que quieres es volver a muestrear una ima-gen cuyo tamaño se ha cambia-

do, lo primero que tendrás que hacer es cambiar el tamaño de la misma. Una vez hecho esto, pulsa el botón Volver a muestrear del inspector de propie-

dades de imagen. No olvides que no es posible volver a muestrear elementos o marcadores de posición de imagen que no sean imágenes de mapa de bits.

De todos modos, la previsión es el mejor consejo y debes intentar planifi-car el diseño de tu web de la forma más cercana a como quedará al final, ya que así podrás definir el mejor tamaño para cada imagen desde el principio.


1 Seleccionar imagen 3 Utilizar manejadores

2 Cambiar tamaño 3 Arrastrar manejadores

3 Ajustar imagen 3 Introducir valor numérico

4 Volver a muestrear una imagen

El brillo, el contraste y el perfilado


1 Modificar 3 Imagen 3 Brillo y contraste

2 Modificar 3 Imagen 3 Perfilar 3 Ajustar la barra deslizante

3 Insertar 3 Objetos de imagen 3 Imagen de sustitución

Tipos de rutas de navegación

Al hablar de rutas de archivos se pueden establecer tres tipos:

Las rutas absolutas. Proporcionan el URL completo del documento vin-culado, incluido el protocolo que se debe usar (generalmente, “http://” para páginas web). Siempre que vin-cules un documento situado en otro servidor, es preciso que emplees una ruta de este tipo, aunque también puedes utilizarlas para vínculos loca-les, porque ofrece una mayor flexi-bilidad si necesitas mover archivos dentro del sitio.

Las rutas relativas. Son las más adecuadas para utilizar con vínculos locales en la mayoría de los sitios web. Resultan particular-mente útiles cuando el documento actual y el aquél con el que se establece el vínculo se encuentran

en la misma carpeta y es probable que vayan a permanecer juntos. También puedes utilizarlas para establecer un vínculo con un docu-mento de otra carpeta. En una ruta relativa al documento se omite la parte del URL absoluto que coin-cide en los documentos actual y vinculado y se indica únicamente la parte que difiere.

Rutas relativas a la raíz del sitio. Indican la ruta desde la carpeta raíz del sitio hasta un documento. Puedes utilizarlas si trabajas con un sitio web grande que usa varios servidores o un servidor que alberga varios sitios distintos. Una ruta rela-tiva a la raíz del sitio comienza por una barra diagonal, que representa la carpeta raíz del sitio. Por ejemplo, “/support/tips.html”. ■

124_52_59_Curso.indd 14 14/7/05 19:06:05

57www.pctoday.es


Nº 124

Es el momento de crear los hiperen-laces. Eso sí, antes de nada, debes te-ner en cuenta todas las posibilidades que tienes. Los más frecuentes son: un vínculo con otro documento o archivo (como un archivo gráfico, de pelícu-la, PDF o de sonido), de anclaje con nombre, de correo electrónico o vín-culos nulos y de script. Asimismo, ten en cuenta que antes de crear vínculos, deberás saber cómo funcionan las ru-tas relativas al documento, las rutas relativas a la raíz del sitio y las rutas absolutas. Por otra parte, para crear vínculos desde una imagen, un objeto o texto hasta otro documento o archi-vo, tienes que utilizar el inspector de propiedades y el icono de señalización de ficheros. Asimismo, para usar rutas relativas a la raíz del sitio, primero ten-drás que definir una carpeta local en Dreamweaver, eligiendo una que ser-virá como el equivalente de la raíz del documento en un servidor.

1 En primer lugar, vas a vincular documentos mediante el ins-pector de propiedades. Primero

selecciona el objeto. Luego abre el inspector de propiedades y haz click en el icono de carpeta situado a la

derecha del cuadro de texto. Segui-damente, aparecerá la ruta del docu-mento vinculado en el cuadro de tex-to URL. Utiliza el menú para indicar si la ruta es relativa al documento o a la raíz del sitio y selecciona una ubica-ción para abrir el documento.

2 Si lo que quieres es vincular documentos mediante el icono de señalización de archivos,

selecciona el elemento y arrastra el icono de señalización de archivos si-tuado a la derecha del cuadro del ins-pector de propiedades. Luego marca

otro documento abierto para que se muestre el vínculo y libera el botón del ratón.

3 Para establecer vínculos con do-cumentos, utilizando el mapa del sitio, expande el panel Archivos

y, a continuación, muestra las vistas Ar-chivos del sitio y Ma-pa del si-tio, mientras presionas el icono del ma-pa del sitio y seleccionas Mapa y ar-chivos . Se-guidamente, escoge un archivo HTML en el mapa del sitio y arrastra el icono y señala otro ar-chivo del mapa del sitio o un fichero lo-cal en la vista Archivos del sitio. Por último, libera el botón del ratón.

4 Otra posibilidad de establecer vínculos es mediante el comando Hipervínculo. Sitúa el punto de

inserción en el documento donde deseas

que aparezca éste. Después, selecciona en el menú Insertar la opción Hiper-vínculo o en la categoría Común de la barra Insertar, pulsa el botón Hiper-

vínculo. De esta forma te aparecerá un cuadro de diálogo que deberás comple-tar. Cuando lo hagas pulsa en Aceptar.

5 Para establecer vínculos con una parte específica de un do-cumento, muy útil en guías y

cursos, coloca el cursor en el lugar donde deseas insertar el anclaje con nombre. Acto seguido, puedes se-leccionar Insertar y Anclaje con nombre, presionar Control+Alt+A o pulsar el botón de Anclaje con nombre de la barra Insertar. Cuan-do aparezca el cuadro de texto, escri-be un nombre y presiona Aceptar.

6 También puedes crear un vín-culo de correo electrónico. En la ventana de documento,

coloca el punto de inserción donde deseas que aparezca éste. Una vez he-

cho, selecciona en el menú Insertar, Vínculo de correo electrónico o en la categoría Común de la barra Insertar y haz click en el botón In-sertar vínculo de correo electró-nico. Cuando aparezca el cuadro de diálogo, completarlo añadiendo el nombre y la dirección de correo elec-trónico en cuestión y pulsa Aceptar.

7 Si lo que quieres es crear vín-culos nulos, selecciona el ele-mento. Una vez hecho esto, en

el inspector de propiedades, escribe “javascript:;” (la palabra javascript, seguida de dos puntos y luego de un

punto y coma) en el cuadro de texto Vínculo. De esta manera, consegui-rás, por ejemplo, establecer una ima-gen de sustitución sin hipervínculo. Y es que, Dreamweaver no te permite hacer esto a no ser que hayas estable-cido un enlace nulo.

8 Si quieres evitar que se rompan los enlaces en el sitio, puedes activar la administración de

vínculos de manera que Dreamwea-ver los actualice de forma automática siempre que se realice algún cambio.

Si quieres activarla, selecciona la op-ción Edición, Preferencias de la barra superior de herramientas. En el cuadro de texto marca la opción Ge-neral y en la sección Opciones de documento, selecciona Siempre o Mensaje en el menú emergente Ac-tualizar vínculos al mover archi-vos y pulsa Aceptar.

Creación de vínculos

Aplicación de comportamientos

Con Dreamweaver puedes aplicar cual-quier comportamiento disponible a una ima-gen o zona interactiva de ésta. Al hacerlo, la aplicación inserta el código HTML en la etiqueta área. Hay tres comportamien-tos que se aplican específicamente a este tipo de archivos gráficos: Carga previa, Intercambiar y Restaurar imagen intercambiada. La primera de ellas carga en la memoria caché del navegador aquellas imágenes que no aparecen en la página de inmediato (como las que se inter-cambiarán por comportamientos, capas o scripts de JavaScript). Esto contribuye a evitar las demoras en la descarga cuando llega el momento de que aparezcan las imágenes en pantalla. En cuanto a la segunda, se trata de intercambiar una imagen por otra sustituyendo el atributo SRC de la etiqueta “img”. En este caso, utiliza esta acción para realizar cambios de botones y otros efectos

de imágenes (incluido el intercambio de varias imágenes a la vez). Por último, si lo que quieres es restaurar una imagen intercambiada, puedes restaurar los archivos de origen del último conjunto de imágenes inter-cambiadas. Esta acción se añade automáticamente siempre que se adjunta la acción Intercambiar imagen a un objeto de forma prede-terminada. No suele ser necesario seleccionarla manualmente. También puedes utilizar comportamientos para crear sistemas de navegación más sofisticados, como una barra de navegación o un menú de salto. ■

Con Dreamweaver puedes hacer que una imagen se sustituya por otra al pasar elcursor por encima de ella.

▲

124_52_59_Curso.indd 15 14/7/05 19:06:12

Una vez que hayas inserta-do imágenes a una página y escrito el texto corres-pondiente, es el momento de establecer conexiones entre los distintos docu-mentos que conforman tu sitio. Con Dreamweaver podrás establecer vínculos con un texto o imagen de cualquier lugar del documento, incluidos los si-tuados en un encabezado, lista, tabla, capa o marco. Además, tendrás la po-sibilidad de crearlos y administrarlos de varias formas: creando vínculos con páginas o archivos que todavía no existen cuando estás trabajando, dise-ñando todos los archivos y las páginas y añadiendo los vínculos más tarde, o con páginas marcadoras de posición que representan el archivo final y permiten añadir vínculos rápidamen-te. Durante el proceso de realización de una página web es posible que ten-gas que eliminar, cambiar o modificar vínculos a diversos documentos y pá-ginas web. Por este motivo, conviene conocer una serie de opciones que te ofrece Dreamweaver para que esto no te resulte muy complicado.

1 Lo primero que puedes hacer es comprobar si existen vínculos rotos,

externos y huérfanos. Así pues, guarda el archivo en una ubi-cación dentro del sitio local de Dreamweaver. Luego, selecciona en el menú Archivo, Compro-

bar página y Comprobar vínculos. Seguidamente, en el panel Verifica-dor de vínculos, selecciona Víncu-los externos en el menú emergen-te Ver para visualizar otro informe. Una vez hecho, pulsa en en el botón Guardar informe del panel Verifi-cador de vínculos.

2 También es posible comprobar los vínculos de una parte de un sitio local. Para ello, en el mis-

mo panel de Verificación de víncu-los que desplegaste anteriormente, en su parte izquierda verás un icono con una flecha verde. Si presionas sobre él, te aparecerá un menú emergente. Allí puedes seleccionar Comprobar vínculos de todo el sitio. Al igual que antes, en el panel Verificador de vínculos, selecciona Vínculos externos o Archivos huérfanos del

menú emergente Ver para visualizar otro informe. Cuando hayas acabado la comprobación, pulsa el icono del disco para guardar el informe.

3 Imagínate que te encuentras un vínculo roto y deseas corregirlo. Primero, señálalo y aparecerá un

icono de carpeta junto él. Haz click en él para localizar el archivo con el que

deseas establecer el vínculo o escribe su ruta y nombre. Luego presiona la tecla Tab o Enter. Si hay otras referencias ro-tas a ese mismo archivo, aparecerá un

9 Ahora vas a modificar vínculos en el mapa del sitio. En este sentido, hay dos posibilidades:

hacerlo de forma individualizada o en todo el sitio de forma simultánea. En el primer caso, selecciona la página de destino del vínculo que deseas cam-biar y, a continuación, haz click con el botón derecho del ratón y selecciona Cambiar vínculo en el menú con-

textual. Una vez hecho ésto, accede al archivo del vínculo o introduce una dirección apropiarda. Por último, haz click en Aceptar. En el segundo, dirí-gete al menú Sitio. Allí verás la opción Cambiar vínculo en todo el sitio. Presiona en ella para que se abra un cuadro de diálogo, complétalo y pulsa en Aceptar. Esto te servirá para aho-rrar mucho tiempo.

Curso


Editor de imágenes externo

Como te hemos comentado en alguna ocasión a lo largo del texto, no es imprescindible que utilices el editor predeterminado que trae Dreamweaver para realizar modificaciones en las imágenes que desees incluir en tu página. Cualquiera puede servir: Paint Shop Pro, Photoshop, CorelDraw y, por supuesto, Fireworks de Macromedia. Vamos a conseguir una copia de evaluación de este último. Dirígete a www.macromedia.com/downloads/. Allí, busca Fireworks MX 2004 y presiona el enlace Try. Como ya estarás registrado de cuando des-cargaste Dreamweaver, sólo deberás introducir tu correo electrónico y tu contraseña. Una vez que tengas en tu disco duro el archivo, instálalo. Ahora dirígete a Dreamweaver de nuevo y, allí, selecciona en el menú Edición / Editar con editor externo. Eso hará que se muestre un nuevo cuadro de diálogo, donde podrás elegir la ubicación de éste. Busca dónde tienes guardado Firework (probablemente en Archivos de programa\Macromedia\Fireworks) y escoge el archivo “fireworks.exe”. De esta forma, cada vez que desees

editar una imagen de Dreamweaver lo asociará a esa aplicación y la abrirá automáticamente. De hecho, si vuelves a entrar en el menú Edición, ahora aparecerá la opción Editar con Fireworks. Finalmente, y una vez que hayas hecho los retoques pertinentes a tu imagen, podrás trasladarla al docu-mento de Dreamweaver mediante el botón naranja de la parte superior derecha de la ventana en Fireworks. Allí deberás elegir Dreamweaver/Actualizar HTML y guardar la nueva imagen en su ubicación adecuada. ■

Fireworks es un potente editor de imágenes que se integra per-fectamente con Dreamweaver.


1 Vincular documentos 3 Indicar ruta 3 Seleccionar ubicación documento

2 Señalización archivos 3 Arrastrar icono 3 Liberar botón del ratón

3 Establecer vínculos 3 Archivos 3 Mapas y archivos

4 Insertar 3 Hipervínculo

5 Insertar 3 Anclaje con nombre 3 Aceptar

6 Insertar 3 Vínculos por correo electrónico 3 Aceptar

7 Vínculos nulos 3 Escribir “javascript:;” en el cuadro de texto Vínculo

8 Administrar vínculos automáticamente 3 Edición 3 Preferencias 3

General 3 Opciones de documento 3 Actualizar vínculos al mover

archivos 3 Siempre o Mensaje 3 Aceptar

9 Cambiar vínculo 3 Individual (botón derecho del ratón 3 Cambiar vínculo)

o sitio (Sitio 3 Cambiar vínculo en todo el sitio)

Administración y comprobación de vínculos

124_52_59_Curso.indd 20 14/7/05 19:06:18

59www.pctoday.es


Nº 124

cuadro de diálogo pidiendo que repares las referencias en los otros ficheros. Haz click en Sí para actualizar todos los do-cumentos de la lista que hacen referencia al archivo. Pulsa No, si deseas actualizar únicamente la referencia actual.

4 Para reparar vínculos en el ins-pector de propiedades, sitúate en el panel Verificador de víncu-

los y pulsa dos veces en una entrada de la columna Archivo. Dreamweaver abri-rá el documento, seleccionará la imagen o el vínculo problemáticos y resaltará la

ruta y el nombre de archivo en el inspec-tor de propiedades. Si deseas establecer una ruta y un nombre de archivo nuevos en el inspector de propiedades, haz click en el icono de carpeta para localizar el archivo correspondiente o sobrescribe el texto resaltado y guarda el archivo.


1 Archivo 3 Comprobar página 3 Comprobar vínculos

2 Panel Verificación de vínculo 3 Icono verde 3 Comprobar vínculos de

todo el sitio

3 Reparar vínculo roto 3 Carpeta 3 Establecer nueva ruta y nombre

para el archivo

4 Verificador de vínculos 3 Archivo 3 Definir nueva ruta 3 Asignar

nombre de archivo

En Dreamweaver hay otra forma de establecer hipervínculos: mediante bo-tones Flash en los documentos. En su interior pueden tener una descripción del contenido al que accederás cuan-do presiones sobre él. Por supuesto, es posible establecer un tipo de fuente, un color de fondo y un tamaño ajustado a tus gustos o necesidades.

1 Para crear un botón Flash , dirígete a la ventana de docu-mento y coloca el punto de in-

serción adecuado. Ahora selecciona en el menú Insertar/Media/Botón

Flash. Finalmente, escoge las opcio-nes deseadas del cuadro de diálogo Insertar botón Flash y pulsa Apli-car o Aceptar para insertarlo en la ventana del documento.

2 Si una vez situado en la página, deseas realizar alguna modifi-cación sobre él, sólo tendrás

que presionar dos veces con el ratón para que se abra el cuadro de diálogo de edición y puedas cambiar los pa-

rámetros que no te convenzan, como por ejemplo el color del fondo, el ta-maño o el estilo de la fuente.

3 En la vista Diseño , puedes cambiar el tamaño del objeto fácilmente. Para ello, tendás

que utilizar los manejadores destina-dos a cambiar las dimensiones, con los que puedes restaurar el tamaño del objeto original que hayas seleccio-

nado en Restablecer tamaño de la ventana correspondiente al inspector de propiedades.

4 También es posible reproducir un botón Flash en el documen-to, como si se tratara de

la vista final del mismo y así tener una idea muy aproxima-da de cómo será en el navega-

dor que utilice quien visite tu web. Para ello, en la vista Di-seño, seleccio-na el botón y,

en el inspector de propieda-des, haz click en Reproducir. Por último, señala Detener para poner fin a la vista previa. Eso sí, ten en cuenta que no podrás editar el objeto de botón Flash mientras se está reproduciendo. Por lo tanto, conviene

obtener siempre una vista previa del documento, pero teniendo en cuenta que puede haber variaciones, según el software que se utilice al final.

5 P o r s u p u e s t o , a l igual que sucede con el botón, también se

puede insertar un objeto de texto Flash. Sitúa el punto de inserción en el lugar de-

seado y ve al menú Insertar y allí se-lecciona Media/Texto Flash. Con el cuadro abierto, escoge las opciones que deseas y pulsa Aplicar para que aparezca en la ventana del documen-to. Recuerda que si quieres modificar o reproducir el objeto de texto Flash,

puedes seguir el mismo procedimien-to utilizado para el botón.

En la web de Macromedia puedes encontrar más botones y objetos en

este formato, que contribuirán a que tus páginas web sean más dinámicas con un esfuerzo muy bajo, en compa-ración con el resultado obtenido. ■

El botón Flash


1 Insertar 3 Media 3 Botón Flash

2 Modificar botón Flash 3 Presionar dos veces sobre él

3 Modificar tamaño 3 Utilizar manejadores

4 Reproducir botón Flash 3 Reproducir 3 Detener

5 Introducir Texto Flash 3 Insertar 3 Media 3 Texto Flash

Conceptos básicos

Barra de navegación. Se compone de una o un conjunto de imágenes cuya visualización cambia según las acciones que realice el usuario. Éstas proporcionan una forma fácil de desplazarse por las páginas y los archivos de un sitio.

Mapas de imágenes. Es una capa que define cierta interactividad para asignar a una zona de la pantalla. Hay dos tipos: del lado del cliente y del lado del servidor. Los primeros almacenan la información acerca de los vínculos de hipertex-

to en el documento HTML, en lugar de hacerlo por separado en un archivo de mapa como hacen en la otra modalidad.

Rutas de archivos. Se refiere a la ruta existente entre el documento desde el que se establece el vínculo y el fichero con el que lo establece. Ese camino también puede ser a una página web, cada una de las cuales tiene una dirección exclu-siva, denominada URL (Uniform Resource Locator o Localizador Uniforme de Recursos). ■

124_52_59_Curso.indd 21 14/7/05 19:06:24

Curso

Estructura tu web

Nº 125

Abordamos la cuarta entrega del curso de creación de páginas web con el desarrollo de tablas, marcos y formularios. Tres herramientas muy importantes, no sólo para ordenar los elementos de tu sitio, sino para dar coherencia a todo el conjunto de componentes HTML y recibir información de los visitantes de tus páginas.

52 www.pctoday.es


Las tablas constituyen una he-rramienta muy eficaz para presentar datos y establecer el diseño de texto y gráficos en

una página HTML. Como seguramente ya sabrás, una tabla consta de una o varias filas, cada una de las cuales tie-ne, a su vez, una o más celdas. Aunque las columnas no suelen especificar-se explícitamente en el código HTML, Dreamweaver permite manipular esos tres parámetros. Para que nunca te pierdas, la aplicación muestra el ancho de la tabla y de cada columna cuando la seleccionas o en el momento en que el punto de inserción esté en ella. Jun-to a los anchos se encuentran flechas para el encabezado de la tabla y de las columnas. Ahí podrás utilizar los me-nús para acceder rápidamente a los comandos relacionados con éstas. Eso sí, en todo momento será posible acti-

var o desactivar los anchos y los menús (ya te indicaremos cómo). Por cierto, también debes tener presente que si no aparece el ancho de la tabla o de una columna es porque éstas no tienen uno especificado en el código HTML. Tam-bién puede ocurrir que aparezcan dos números. Eso es porque el ancho visual que se muestra en la vista de diseño no corresponde con el detallado en HTML. Esto puede pasar al cambiar el tama-ño de una tabla arrastrando la esquina inferior derecha o al añadir contenido a la celda cuyo ancho es superior al establecido. Por ejemplo, si configuras un ancho de columna en 200 píxeles y añades contenido que se ajusta al ancho de 250 píxeles, se mostrarán dos núme-ros para dicha columna: 200 (ancho especificado en el código) y 250 entre paréntesis (ancho visual de la columna tal como aparece en la pantalla).

125_52_59_Curso.indd 14 28/7/05 10:50:35


Diseño web con Dreamweaver. 4ª Parte▲

Antes de empezar a introducir datos en la tabla, es conveniente que tengas claro cómo puedes seleccionar las distintas fi-las, columnas y celdas, o la tabla entera. Ten en cuenta que cuando se desplaza el puntero sobre cualquiera de estos ele-mentos, Dreamweaver resalta todas las celdas de esa selección para que sepas exactamente cuáles se seleccionarán si haces click en ellas. Esto puede resultar útil si utilizas tablas sin bordes, celdas que ocupan varias columnas o filas, o bien tablas anidadas.

1 En cualquier momento, puedes cambiar el color de resaltado de las celdas. Para ello, ve al menú

Edición y elige Preferencias. En el cuadro de diálogo que te aparezca, es-coge Resaltando y, allí, en Ratón por encima, selecciona el tono que desees que se muestre cuando pases el cursor por encima de las celdas para seleccio-narlas. Por supuesto, para activar o des-

activar el resaltado de los elementos de la tabla, habilita o deshabilita la casilla de verificación Mostrar correspondien-te a Ratón por encima. Por cierto, si colocas el puntero sobre el borde de una tabla, mantén presionada la tecla Con-trol y toda la estructura de ésta quedará resaltada. Eso puede resultar útil si utili-zas tablas anidadas y deseas ver las tablas en su totalidad.

2 Ahora aprenderás cómo seleccio-nar toda una tabla. En este caso, hay varios modos de hacerlo. En

primer lugar, puedes hacer click en la esquina superior izquierda de la tabla, en cualquier punto del borde derecho

o inferior de ésta o en el ex-tremo de una fila o de una columna. Ten presente que cuando puedas seleccionar la tabla, el puntero se converti-rá en el icono de cuadrícula. Otra forma es situar el cursor en una celda y elegir la eti-queta Tabla en el selector de etiquetas situado en la esquina inferior izquierda de la venta-na de documento. Además, es posible hacerlo mediante el

menú Modificar / Tabla / Seleccionar Tabla; o, finalmente, haz click en una celda de la tabla, después en el menú del encabezado de tabla y, a continuación, eligiendo Seleccionar tabla. En cual-quiera de los casos, aparecerán maneja-dores de selección en los bordes inferior y derecho de ella.

3 La forma de seleccionar filas y co-lumnas también resulta muy sen-cilla. Sitúa el puntero en el borde

izquierdo de una fila o en el borde su-perior de una columna. En el momento en el que el puntero se convierta en una

flecha de selección, puedes hacer click para seleccionar una fila o columna o arrastrarlo para seleccionar éstas.

4 Por último, verás cómo seleccio-nar celdas. En este sentido, es posible elegirlas individualmente,

por líneas, en bloque o no contiguas. En el primer caso, haz click en la celda y, a continuación, selecciona la etiqueta

td en el selector de etiquetas, o bien presiona la tecla Control y haz click en la celda. En el segundo y tercero, pul-sa en un celda y arrastra hasta la que quieres marcar, o presiona Control, a continuación Mayús y haz click en otra celda. En el último caso, pulsa Control mientras haces click en las celdas, filas o columnas que deseas seleccionar. Así, los elementos que no estén todavía ele-gidos, se añadirán a la selección y los que ya lo estén, se eliminarán de ésta.

Seleccionar elementos

Resumiendo...

1 Cambiar resaltado celdas 3 Edición 3 Preferencias 3 Resaltado 3

Ratón por encima 3 Seleccionar tono

2 Modificar 3 Tabla 3 Seleccionar tabla

3 Seleccionar filas o columnas 3 Situar puntero al comienzo de la fila o

columna 3 Hacer click

4 Seleccionar celdas 3 Control 3 Click en las celdas

Para comenzar este recorrido, vas a añadir una tabla a un documento en blanco para que te sea más sencillo distinguir todas las propiedades que le podrás ir añadiendo y modifican-do a ésta. Por supuesto, una vez dise-ñada, añadir texto e imágenes en su interior será tan sencillo como si lo hicieras desde fuera de cada celda, en una página independiente.

1 Para insertar una tabla, en la vista Diseño de la ventana de documento, sitúa el cursor en

la zona de la pantalla donde desees que aparezca. Por supuesto, si el do-cumento está en blanco, la única ubi-cación posible será el principio del mismo, algo similar a lo que sucede en editores de texto como Microsoft Word, al menos en ediciones antiguas de éste. A continuación, selecciona Tabla en el menú Insertar, o bien,

en la categoría Común de la barra Insertar, haz click en el botón Ta-bla. En ese momento, se mostrará el cuadro de diálogo Insertar tabla.

2 Establece los parámetros que consideres oportunos en el apar-tado Tamaño de la tabla. Éste

se refiere a los campos Filas, Colum-nas, Ancho de tabla, Grosor del

borde, Relleno de celda y Espacio entre celdas. Tienes la posibilidad de definirlo en puntos o porcentajes, gra-cias al menú desplegable de la derecha. Después, marca si quieres que no tenga encabezado o, en caso contrario, dónde deseas situarlo. Por último, en el apar-tado Accesibilidad, puedes añadir a la tabla, en el comando Texto, un nombre para que te resulte más fácil identificar-la, así como alinear sus contenidos, así como escribir unas líneas en el apartado Resumen para describir los datos que tenga en su interior o cualquier indica-ción que consideres útil.

Insertar una tabla

Resumiendo...

1 Insertar 3 Tabla

2 Rellenar los campos Filas, Columnas, Ancho de tabla, Grosor del

borde, Relleno de Celda y Espacio entre celdas 3 Seleccionar encabe-

zado 3 Incluir Texto

125_52_59_Curso.indd 15 28/7/05 10:50:47

En todo momento, se puede cambiar el aspecto de una tabla configurando las propiedades de ésta y de sus celdas o aplicándole un diseño predefinido. A continuación, vas a comprobar los di-versos atributos que puedes modificar para que el diseño de tu tabla se ajuste a lo que tenías en mente.

1 En primer lugar, para visualizar y configurar las propiedades de una tabla o de un elemento de

ella, tienes que seleccionarlo. Des-pués, en el Inspector de propieda-des, al que llegarás a través del menú Ventana / Propiedades o con un click en la flecha de ampliación situa-da en la esquina inferior derecha, po-drás modificar varios parámetros de ésta. Por ejemplo, el número de filas y columnas, la alineación en la pági-na, el color de fondo y el del borde e, incluso, seleccionar una imagen para incluirla en una celda.

2 Una vez que tienes esto claro, puedes añadir texto e imáge-nes a la tabla, según tus gus-

tos o necesidades, teniendo siempre en cuenta que puedes modificar los parámetros de los elementos que in-

cluyas dentro o aplicarles formato, señalándolos y utilizando el inspector de propiedades de la parte inferior de la ventana.

3 E l ú l t i m o punto rela-cionado con

la aplicación de formato a una ta-bla es la utilización de un esquema de diseño, mediante el comando For-matear tabla para aplicar fácilmente un diseño predefi-nido a una tabla. Y podrás seleccionar opciones para per-sonalizar más el diseño. Para hacerlo, dirígete al menú Comandos y escoge Formatear tabla. Allí verás un buen número de formatos predefinidos para elegir. Sólo debes encontrar la que me-jor se adapte a tus necesidades o prefe-rencias para tu proyecto actual. Claro que si no hay ninguno que te guste,

siempre puedes elegir tus propios pa-rámetros. Para ello, practica con las op-ciones Colores de las filas, Primera fila, Columna izquierda y Tabla, que te ofrecen todas las posibilidades que permite el código HTML estándar y son suficientes para prácticamente cual-quier proyecto.

Curso


Aplicar el formato

Una vez con el proyecto acabado, po-drás comprobar que las dimensiones de una tabla pocas veces coinciden con las que introdujiste en un prin-cipio. Es posible que tengas que cam-biar el tamaño de éstas para ajustarlo a los elementos del interior de cada celda. En cualquier caso, te conviene tener siempre delante las dimensio-nes de las columnas y las tablas. Para

conseguirlo, señala la tabla como ya sabes, haz click con el botón derecho del ratón y, en el apartado Tabla, se-ñala Anchos de tabla. De esta forma, aparecerán unas guías que se modifi-can en tiempo real y que te muestran los datos exactos con los que trabajas, los cuales te serán de gran utilidad siempre que quieras crear un gráfico en otra aplicación y no quieras dar

muchas vueltas para averiguar qué tama-ño debe tener.

1 La forma de cambiar el ta-maño de una

tabla es muy sen-cilla. Simplemente seleccionándola y arrastrando uno de sus manejadores de selección, puedes agrandarla o reducirla. Al hacerlo, el

tamaño de todas las celdas que la com-ponen se ajustarán automáticamente a sus nuevas dimensiones.

2 Es el momento de modificar el tamaño de las columnas y las filas. En este caso, tienes dos

opciones: hacerlo en el Inspector de propiedades con el alto y el ancho que quieras que tengan, mediante un valor en el campo An (Ancho) o Al (Alto). Ambos se pueden especificar en píxeles o porcentajes. La otra posibili-

Más filas y columnas

Resumiendo...

1 Visualizar o configurar propiedades 3 Ventana 3 Propiedades

2 Añadir textos e imágenes 3 Modificar atributos en el Inspector de

Propiedades3 Esquema de diseño 3 Comandos 3 Formatear tabla

Ten en cuenta que al establecer el valor de una propiedad (por ejemplo, el color de fondo o la alineación) para toda la tabla y otro para celdas indivi-duales, el formato de celda tiene prio-ridad sobre el de fila, y a su vez éste sobre el de la tabla.

Consejo

Tablas expandidas

En Dreamweaver, existe un modo, denominado "de tablas expandidas", que 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. Además, permite seleccionar elemen-

tos de las tablas o colocar el punto de inserción de forma precisa. Por ejemplo, puedes ampliar una tabla para colocar el punto de inserción en la parte izquierda o derecha de una imagen, sin seleccionar por error la imagen o la celda de tabla.

Para pasar al modo de tablas expandidas, lo único que tienes que hacer es, desde la vista Código, dirígete al menú Ver / Modo de tabla / Modo de tablas expandidas. Si, por el contrario, estás trabajando en la categoría Diseño, ve a la barra Insertar y haz click en el botón Modo de tablas expandidas.

En ese momento, aparecerá una barra etiquetada Modo de tablas expandi-das en la parte superior de la ventana. Por último, y para salir de este modo, presiona sobre Salir en la barra deno-minada Modo de tablas expandidas de la parte superior de la ventana, o bien puedes dirigirte al menú Ver / Modo de tabla / Modo estándar en la vista Código o en la barra Insertar, hacer click en el botón Modo están-dar en la categoría Diseño. Gracias al modo de tablas expandidas, añadirás temporalmente relleno y espaciado de celda a las tablas de un documento y aumentarás sus bordes para facilitar la edición de éste. ■

125_52_59_Curso.indd 16 28/7/05 10:50:54

Uno de los apartados más importan-tes que debes conocer a la hora de sacarle partido a una tabla son las diversas opciones que puedes llevar a cabo con las celdas. Las más impor-tantes son la división, es decir, cómo partir una celda en varias para añadir información dentro de ellas. La com-binación es justo el paso contrario que el anterior. La tercera es la op-ción de copiar, pegar o eliminar. És-tas te permiten acceder a un sistema de "ensayo y error" que facilita bas-tante tu tarea. Presta atención...

1 Antes de nada debes tener en cuenta que, para combi-

nar dos o más celdas en una tabla, debes seleccionarlas en una línea contigua o en forma de un rectángulo. En caso de que no se cum-pla ninguna de las dos alternativas no podrás combinar las celdas. En cuanto lo

tengas, selecciona Modificar / Tabla / Combinar celdas, o bien en el ins-pector de propiedades, haz click en el botón Combinar celdas. De esa forma, el contenido de los espacios individua-les se sitúa en la celda combinada resul-tante y las propiedades de la primera se aplicarán al producto de ambas.

2 El paso contrario es dividir una celda. Es posible hacerlo señalándola y yendo a Modifi-

car / Tabla / Dividir celda o en el inspector de propiedades, hacer click en el botón Dividir celda. En ese momento, aparecerá una ventana en

la que tendrás que especificar cómo deseas dividirla: en filas o columnas y, en cada caso, en cuántas.

3 Si lo que quieres es aumentar o disminuir el número de filas o columnas que ocupa una celda,

debes seguir la siguiente combinación de opciones, siempre situando el cur-sor en el lugar que deseas modificar: elige en el menú Modificar / Tabla /


▲


dad es situar el cursor entre dos filas o columnas y arrastrarlo hasta que consi-gas el tamaño deseado. Como verás, de esta forma las dimensiones generales de la tabla no variarán, pero sí las de las columnas afectadas.

3 Otra opción es cambiar el ancho de una columna y mantener el ta-maño de las demás. Debes hacer-

lo manteniendo pulsada la tecla Mayús mientras arrastras el borde de la colum-na. Recuerda que en todo momento las ayudas visuales te mostrarán cómo se ajustan las columnas. Verás que el ancho total de la tabla varía para dar cabida a la columna que ha cambiado de tamaño.

4 Lo siguiente que debes aprender es cómo igualar

los anchos de colum-na del código con los llamados visuales. Co-mo ya se comentó más atrás, si existen dos números para el ancho de una columna, es porque uno y otro no tienen por qué coinci-dir en todo momento. Es posible igualarlos mediante un click en una celda "afectada", a continuación debes presionar en el me-nú del encabezado de tabla. Para finalizar, debes seleccionar la opción Igualar todos los anchos.

5 Una vez que has establecido el tamaño que deseas, puedes agre-gar nuevas filas o columnas, de-

signando en primer lugar con el cursor el punto exacto donde quieres que se añada y dirigiéndote después al menú

Modificar / Tabla. Allí tendrás que es-coger Insertar Filas, Insertar Colum-nas o Insertar Filas o Columnas... Si seleccionas esto último te aparecerá una ventana donde podrás teclear el nú-mero exacto. Por cierto, conviene que si quieres poner una nueva fila al final de

la tabla, te ahorres todo lo anterior simplemente presionando la tecla Tab en la última celda.

6 Si quieres eliminar una fila o una columna, tienes varias opciones. Haz click en una

celda dentro de la fila o de la columna que deseas eliminar y selecciona Modifi-car / Tabla / Eliminar fila o Eliminar columna. La otra opción es seleccionar una fila o columna completa (ya sabes cómo hacerlo) y escoger Edición / Bo-rrar o directamente presionar Supr.

Resumiendo...1 Cambiar tamaño de tabla 3 Seleccionar 3 Ajustar manejadores

2 Modificar tamaño de columnas y filas 3 Introducir valores en An

(Ancho) y Al (Alto)

3 Cambiar tamaño de columna y mantener las demás 3 Utilizar

manejadores con la tecla Mayús

4 Igualar anchos de columna de código a los visuales 3 Hacer click

en la celda 3 Presionar en el menú de encabezado de página 3

Seleccionar Igualar todos los anchos

5 Agregar filas y columnas 3 Modificar 3 Tabla 3 Insertar fila, Insertar

columna o Insertar filas o columnas...

6 Eliminar filas o columnas 3 Modificar 3 Tabla 3 Eliminar fila

Trabajar con celdas

125_52_59_Curso.indd 17 28/7/05 10:51:02

Curso


A u m e n t a r tamaño de f i la , o bien A u m e n t a r tamaño de columna. En caso contra-rio, seleccio-na Modificar / Tabla / Re-ducir tama-ño de fila o Reducir ta-maño de columna.

4 Como comentábamos anterior-mente, otra de las opciones que puedes realizar con las celdas

es cortarlas, co-piarlas y pegarlas. Eso sí, se pueden pegar en el punto de inserción o en el lugar de una se-lección en una ta-bla existente. Para cortar o copiar, se-lecciona las celdas que quieras, siem-pre y cuando estén alineadas o formen

un rectángulo. A continuación, elige en el menú Edición la opción Cor-tar o Copiar.

5 Si lo que quieres es pegarlas, tendrás que escoger primero un punto de la tabla donde se fijen.

En este caso, tienes varias opciones. En primer lugar, elegir una celda o grupo de celdas similar en tamaño al que has cortado o copiado y, después, elegir en el menú Edición / Pegar. También es posible pegar toda una fila

o columna de celdas encima de una celda concreta, haciendo click en ella. La última posibilidad es crear una nueva tabla con las celdas pegadas,

pero aquí deberás colocar el cursor en cualquier otra parte de tu página web que no sea dentro de la tabla.

6 Por último, es posible eliminar el contenido y dejar las celdas intactas, escogiendo en el menú

Edición / Borrar o presionando Supr, una vez seleccionado el contenido de la

celda. Ahora bien, en caso de que desees suprimir filas o columnas que contienen celdas combinadas, entra en el menú Modificar / Tabla / Eliminar fila o Eliminar columna.

Siempre que quieras, puedes ordenar las filas de una tabla en función del contenido de una sola columna. Tam-bién es posible realizar una operación más compleja, ordenándola en función del contenido de dos columnas. Eso sí, en ningún caso se pueden ordenar tablas con celdas combinadas. Para ha-cerlo, sólo tendrás que seleccionar la tabla o hacer click en cualquiera de las celdas y escoger Ordenar tabla dentro del menú Comandos.

Consejo Resumiendo...1 Combinar celdas 3 Modificar 3 Tabla 3 Combinar celdas

2 Dividir celdas 3 Modificar 3 Tabla 3 Dividir celdas

3 Aumentar o disminuir tamaño de filas o columnas 3 Modificar 3

Tabla 3 Aumentar tamaño de fila o Aumentar tamaño de columna

4 Cortar o copiar celdas 3 Seleccionar celda o grupo 3 Edición 3

Cortar o Copiar

5 Pegar celdas 3 Elegir lugar 3 Edición 3 Pegar

6 Eliminar contenido de las celdas 3 Edición 3 Borrar

Importar y exportar datos

Los datos de tabla creados con otra aplicación (por ejemplo, en Excel) y guardados en un formato de texto delimitado (con elementos separados por tabuladores, comas, dos puntos, puntos y comas u otros delimitadores) se pueden importar a Dreamweaver y aplicarles formato de tabla. También puedes exportar los datos de tabla desde Dreamweaver a un archivo de texto, con el contenido de las celdas contiguas separado por un delimitador. Eso sí, de ninguna forma se pueden exportar partes de una tabla. Ahora bien, en caso de que te interesen algunos de los datos de una

tabla, es recomendable que copies las celdas que contie-nen éstos y las pegues fuera de la tabla para crear una nueva tabla y, a continuación, exportes la nueva tabla.En cualquier caso, para impor-tar datos de una tabla tienes que seleccionar Importar / Datos de tabla en el menú Archivo. A continuación, introduce la infor-mación del archivo que contiene los datos y haz click en Aceptar.En caso contrario, es decir, cuando quieras exportar una tabla, sitúate en el punto de inserción en cualquier

celda de la tabla, selecciona Exportar / Tabla en el menú Archivo. En la ventana que te aparezca deberás especificar las opciones para la exportación de la tabla, presionar en Exportar, poner un nombre para el archivo y hacer click en Guardar. ■

Una prueba de la versatilidad de Drea-mweaver es la posibilidad de importar y exportar datos de una tabla.

Una vez que sabes manejarte con las tablas, es el momento de abordar los marcos (o frames), es decir, la for-ma en que podrás dividir la ventana de un navegador en varias regiones, cada una de las cuales puede mos-trar un documento HTML diferente. Por lo general, un marco muestra un documento que tiene controles de na-vegación, mientras que otro presenta un documento con contenido. Mira a continuación, por tanto, los méto-dos más sencillos con los que cuenta Dreamweaver para realizar marcos.

Hay dos formas de crear un con-junto de marcos en Dreamweaver: seleccionarlos entre varios conjuntos predefinidos o diseñar uno propio. Al

elegir la primera opción, se configuran automáticamente todos los marcos y conjuntos de marcos necesarios para crear el diseño. Además, es la forma más sencilla de crear rápidamente un diseño basado en marcos. Eso sí, sólo se puede insertar un conjunto de mar-cos predefinido en la vista Diseño de la ventana de documento.

1 Para crear un conjunto de mar-cos predefinido, vacío, tienes que seleccionar Nuevo en el

menú Archivo. Así te aparecerá el cuadro de diálogo Nuevo documen-to, donde podrás escoger la categoría Conjunto de marcos. A continua-

ción, se mostrará una ventana como la de la imagen, donde podrás elegir el diseño que tendrá el conjunto de marcos. En cuanto lo hagas, presiona sobre Crear. Y verás cómo aparece el documento en blanco con la es-tructura del marco elegida.

2 Aparte de esto, también es po-sible diseñar un

conjunto de marcos propios, añadiendo barras divisorias a la ventana. Deberás se-leccionar Modificar / Conjunto de marcos y, allí, escoger entre Dividir marco a la izquierda, Dividir marco a la derecha, Dividir marco hacia

arriba y Dividir marco hacia abajo. Una vez que te aparezca en pantalla, es posible darle la anchura deseada si-tuando el cursor en la línea divisoria. Por supuesto, sobre cada uno de ellos también puedes insertar otros marcos siguiendo el mismo procedimiento.

Crear y modificar marcos

125_52_59_Curso.indd 18 28/7/05 10:51:08

www.pctoday.es 57


Nº 125

3 Si lo que quieres es eliminar un marco, arrastra el borde de este marco fuera de la página o

hasta el borde del marco padre. Por cierto, cuando un documento de un marco que se va a eliminar incluye contenido no guardado, la aplica-ción te pedirá que almacenes el do-cumento. Por último, recuerda que no se puede eliminar totalmente un

conjunto de marcos arrastrando los bordes. Para ello, cierra la ventana de documento que lo muestra. Si se ha guardado el archivo de conjunto de marcos, elimina el archivo.

4 Si quieres, también puedes cam-biar el tamaño de un marco. Sólo tendrás arrastrar los bor-

des del marco en la vista Diseño de la ventana de documento, o también es-

pecificar las dimensiones exactas y el espacio que el navegador debe asignar a una fila o columna de marcos cuan-

do el tamaño de la ventana del navega-dor no permita mostrar todo el marco con el inspector de propiedades.

▲

Resumiendo...

1 Crear marcos predefinidos 3 Archivo 3 Nuevo 3 Conjunto de marcos 3

Crear

2 Diseñar marcos propios 3 Modificar 3 Conjunto de marcos 3 Dividir

marco

3 Eliminar marco 3 Arrastrar su borde fuera de la página o del marco

padre

4 Tamaño de un marco 3 Arrastrar sus bordes hasta ajustar las

dimensiones deseadas

Siempre que quieras realizar cambios en las propiedades de un marco o conjunto de marcos, tienes que co-menzar por seleccionarlos. La forma de hacerlo es en el panel Marcos, que proporciona una representación gráfica de un conjunto de marcos y muestra la jerarquía de la estructura del conjunto de marcos de una forma que, quizá, sea difícil de percibir en la ventana de documento. En dicho panel, puedes observar que mientras los conjuntos de marcos están rodea-dos por un borde grueso, los marcos lo están por una línea delgada gris y aparecen identificados por sus nom-bres correspondientes.

1 Para mos-trar el panel M a r c o s ,

debes seleccionar la opción Marcos en el menú Ven-tana. Verás cómo en la columna de la izquierda te aparece resaltada esta función con la división de tu documento en los distintos marcos que la componen. Presiona sobre cada uno de ellos y se seleccionarán en la ventana del documento.

2 También es posible marcar un marco en la ventana de docu-mento. Para lograrlo, en la vista

Diseño, haz click dentro de un mar-co mientras mantiene presionada la tecla Alt. De esta forma, aparecerá un

contorno de selección alrededor de éste. Ahora bien, si lo que quieres es marcar un conjunto de marcos, pre-siona en uno de los bordes del marco interior del conjunto de marcos en la vista Diseño.

3 Para seleccionar otro marco o conjunto de marcos, puedes seguir uno de estos pasos: es-

coge el marco o conjunto de marcos siguiente o anterior en el mismo nivel jerárquico que la selección actual, presiona Alt + flecha izquierda o Alt + flecha derecha. El uso de estas teclas te permitirá pasar por los distin-tos marcos y conjuntos de marcos en el orden en que están definidos en el archivo de conjunto de marcos. Otra

posibilidad es elegir el conjunto de marcos padre (el que contiene la se-lección actual), presionando Alt + flecha arriba. Finalmente, es posible escoger el primer marco o conjunto de marcos hijo del conjunto de marcos selecciona-do actualmente (es decir, el pri-mero en el orden en que están definidos en el archivo de con-junto de marcos), presionando Alt + flecha abajo.

4 Una vez que ya sabes cómo seleccionar los marcos, ahora puedes especificar el conteni-

do inicial de uno insertando conte-nido nuevo en un documento vacío o abriendo un fichero existente. Para hacer esto último, simplemente ten-drás que situar el punto de inserción en el lugar adecuado del marco, elegir en el menú Archivo la opción Abrir en marco, seleccionar el documento deseado y hacer click en Aceptar.

Seleccionar marcos

Resumiendo...

1 Mostrar el panel Marcos 3 Ventana 3 Marcos

2 Seleccionar marcos en la ventana del documento 3 hacer click y pre-

sionar la tecla Alt

3 Elegir más marcos 3 Presionar Alt + Flecha izquierda, derecha, arriba

o abajo

4 Incluir documento existente en un marco 3 Archivo 3 Abrir en marco

3 Seleccionar archivo deseado 3 Aceptar

125_52_59_Curso.indd 19 28/7/05 10:51:15

Curso

58 www.pctoday.es

Si quieres obtener una vista previa de un conjunto de marcos en un navega-dor, deberás guardar antes el archivo del conjunto de marcos y todos los do-cumentos que se mostrarán en ellos. En este sentido, hay dos posibilidades: guar-dar cada archivo de conjunto de marcos y documento con marcos individualmen-te, o hacerlo al mismo tiempo el archivo de conjunto de marcos y todos los do-cumentos que aparecen en los marcos. Ten en cuenta que Dreamweaver asigna un nombre de archivo predeterminado a cada nuevo documento que aparece en un marco. Por ejemplo, el primer fi-chero del conjunto de marcos se llamará “UntitledFrameset-1”, mientras que el primer documento en un marco se de-nominará “UntitledFrame-1”.

1 Para guardar un archivo de conjunto de marcos, debes se-leccionar el conjunto de mar-

cos en el panel Marcos o en la ven-tana de documento. A continuación, dirígete al menú Archivo y allí elige

Guardar conjunto de marcos o Guardar conjunto de marcos co-mo si lo que quieres es almacenarlos

en un nuevo archivo. Por cierto, si el archivo de conjunto de marcos no se ha guardado anteriormente, estos dos comandos serán iguales. También es posible almacenar un documento que

aparezca dentro de un marco, sim-plemente haciendo click en el marco y seleccionando Archivo / Guardar marco o Guardar marco como.

2 Por último, conviene saber que para guardar todos los archi-vos asociados a un conjunto

de marcos, puedes abrir el menú Ar-chivo y allí escoger Guardar todo. De esta forma, se almacenarán todos los documentos abiertos en el conjun-to de marcos, incluidos el archivo de conjunto de marcos y todos los docu-mentos con marco. Ahora bien, si el fi-chero de conjunto de marcos no se ha guardado todavía, en la vista Diseño aparecerá un borde grueso alrededor del conjunto de marcos y un cuadro de diálogo que te permitirá seleccio-

nar un nombre de archivo. Esto suce-derá también alrededor de cada marco que no se haya guardado.

Almacenar archivos de marcos y conjuntos de marcos

Resumiendo...

1 Almacenar archivo de conjunto de marcos 3 Archivo 3 Guardar

conjunto de marcos

2 Almacenar todos los archivos asociados a un conjunto de marcos 3

Archivo 3 Guardar todo

Al igual que en otros componentes ya mencionados anteriormente, como las imágenes o las tablas, cuando seleccio-nas un marco, y siempre que tengas el inspector de propiedades desplegado, te aparecerán en él todas las opciones que tienes disponibles. Incluso, si lo deseas, también puedes definir algunos atributos de marco, como el de título para mejo-rar la accesibilidad, activar la opción de accesibilidad de los marcos para definir los atributos cuando se crean los mar-cos, o bien definir los atributos después de insertar un marco.

1 En primer lugar, debes estable-cer los valores de accesibilidad de un marco. Sitúa el cursor

dentro del marco y selecciona en el menú Modificar la opción Editar

etiqueta. Te aparecerá una nueva ven-tana en la que podrás elegir entre va-rias opciones en la lista de categorías de la izquierda. Una de ellas es Hoja de estilos/Accesibilidad. Márcala, introduce los valores que consideres oportunos y haz click en Aceptar.

2 En todo momento también puedes editar los valores de accesibilidad de un marco.

Abre la vista Código o bien Código y Diseño del documento en el caso de

que actualmente estés en modo Diseño. Seleccio-na un marco colocando el punto de inserción d e n t r o . Ve r á s c ó m o Dreamweaver resalta la etiqueta de marco en el código. Haz click sobre ella con el botón dere-

cho y selecciona Editar etiqueta, donde te aparecerá una ventana en la que podrás realizar todos los cam-bios que consideres oportunos.

3 Desde el inspector de propieda-des, también es posible estable-cer las barras de desplazamien-

to en el documento que se encuentra dentro del marco en caso de que su

contenido no se pueda visualizar en una única página. Para ello, seleccio-na el marco en cuestión, en el inspec-tor de propiedades localiza la función Desplaz. y elige Sí o Automático si quieres despreocuparte de ella.

Visualizar y configurarlas propiedades

Nº 125

Cuándo utilizar marcos

Aquí, como pasa con todo, cada diseñador tiene su propia receta. Hay quien prefiere no añadir mar-cos a su sitio, puesto que puede resultar complicado y, en ocasio-nes, las páginas que no los inclu-yen logran prácticamente los mis-mos objetivos. Incluso, hay muchos internautas a los que no les gustan encontrarse con ellos. Esto suele deberse a que en su navegación han dado con sitios que utilizaban los marcos incorrecta o innecesa-riamente (por ejemplo, un conjunto de marcos que vuelve a cargar su contenido cada vez que se hace click en un botón de navegación). Sin embargo, cuando se utilizan bien pueden resultar muy útiles. Ahora sólo depende de ti consi-

derar si los incluyes o no. Para ponértelo fácil, enumeramos sus ventajas e inconvenientes:

Ventajas• El navegador de un visitante no

tendrá que volver a cargar los gráficos para cada página.

• Cada marco dispone de su barra de desplazamiento para desplazar-se por ellos independientemente.

Inconvenientes• Lograr una alineación gráfica pre-

cisa de los elementos en distintos marcos puede resultar difícil.

• Comprobar las opciones de nave-gación puede llevar mucho tiempo.

• Los URL de los marcos no apare-ce en el navegador y se complica marcar una página concreta. ■

125_52_59_Curso.indd 20 28/7/05 10:51:23

www.pctoday.es 59


Nº 125

4 Ahora puedes cambiar el color de fondo de un documento en un marco. Selecciona el punto

de inserción en él, abre el menú Mo-dificar y elige Propiedades de la página. En la nueva ventana que te aparecerá tienes una opción llamada Color de fondo. Así pues, seleccio-na el que más te ajuste a tus prefe-rencias y pulsa en Aceptar.

Para concluir esta cuarta entrega del curso, resta abordar un apartado interesante: los formularios. Esta he-rramienta es muy útil cuando quieres recoger datos de los usuarios que visi-ten tu sitio. Por ejemplo, pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los internautas, recibir preguntas, hacer suscripciones a un boletín o revista que edites, etc.En cuanto el visitante rellene los datos y pulsa el botón para enviar, el formu-lario arrancará un programa que re-cibirá los datos y hará el tratamiento correspondiente. De modo que ahora verás cómo crear el formulario básico, la forma de insertar campos y botones y cómo validarlos.Siempre que quieras, puedes crear un formulario a través del menú Inser-tar, opción Formulario. Eso sí, una vez diseñado, ten en cuenta que éste aparecerá en la ventana del documen-to como un recuadro formado por líneas rojas discontinuas. Dentro de dicho espacio podrás agregar los ele-mentos que quieras. Ahora bien, para facilitarte las cosas y no complicarte la vida, es recomendable que utilices tablas para organizar los elementos que incorpores en su interior. De es-ta forma, se consigue una mejor dis-tribución de éstos, lo que facilita su comprensión y mejora su apariencia.

1 Para que entiendas este proceso, aquí tienes un ejemplo de cómo insertar un objeto de formula-

rio. En primer lugar, establece con el cursor el punto de inserción dentro del documento que tengas abierto.

Ahora dirígete al menú Insertar y es-coge la opción Formulario. Allí elige el comando Formulario.

2 A continuación, verás cómo aparece un recuadro rojo en tu documento. Ahora tendrás que

poner el enunciado para que el visi-tante sepa qué tiene que hacer. Una vez que ya tienes el enunciado, elige

el tipo de objeto de formulario que quieres in-sertar. Ve al me-

nú Insertar / Formulario y escoge uno. En ese momento, comprobarás cómo aparece un nuevo recuadro rojo con un pequeño círculo en su interior para que escribas una de las opciones. Hazlo y repite el proceso tantas veces como opciones quieras que tenga. Finalmente, puedes com-probar el resultado final en Archivo y eligiendo Vista previa en el nave-gador / iexplore.

3 Lo último que debes saber res-pecto a los formularios es el concepto de validación. Este

término sirve para hacer que el có-digo Javascript valide el formulario antes de que se envíe. Es decir, pa-

ra el caso en que haya campos que sean obligatorios, éstos tengan que rellenarse antes de poder mandarse; o bien fijar una serie de parámetros básicos que debe tener. Para hacerlo, abre el panel de Comportamientos con la opción del menú Ventana.

4 En cuanto lo tengas delante, des-pliega el símbolo + y, en Mostrar eventos para elige una versión

de las actuales de entre la lista de na-vegadores. Por ejemplo, escoge IE 6.0 (Internet Explorer). Después de esto, tendrás que volver a desplegar el botón y pulsar sobre la opción Validar for-mulario. Entonces, se mostrará una

nueva ventana, don-de aparecerán todos los elementos del formulario. Así pues, marca en Valor la opción Obligatorio, si quieres que lo que tenga que contestar el visitante de tu web sea una opción ineludible. Finalmente, señala en Aceptar el tipo de texto que

quieres que contenga: Cualquier cosa, Dirección de correo electrónico, Número y Número del... al.... ■

Crear y validar formularios


1 Insertar objeto de formulario 3 Fijar cursor 3 Insertar 3 Formulario

3 Formulario

2 Escribir enunciado 3 Insertar 3 Formulario 3 Botón de Acción 3

Repetir el proceso con todas las opciones 3 Archivo 3 Vista previa

en el navegador 3 Iexplore

3 Validar formulario 3 Panel de Comportamientos

4 Desplegar símbolo + 3 Mostrar eventos para 3 IE 6.0 3 Desplegar

símbolo + 3 Validar formulario 3 Señalar las opciones deseadas


1 Modificar etiqueta 3 Hoja de estilos/accesibilidad 3 Aceptar

2 Seleccionar marco 3 Botón derecho en etiqueta 3 Editar etiqueta

3 Seleccionar marco 3 Desplazamiento 3 Elegir Sí o automático

4 Modificar 3 Propiedades de la página 3 Aceptar

Control de marcos con vínculos

El atributo target de un vínculo, especifica el marco o ventana en la que se abrirá el conte-nido vinculado. Por ejemplo, si la barra de navegación está en el marco de la izquierda y deseas que el material vinculado aparezca en el de contenido principal de la dere-cha, deberás especificar su nombre como destino de todos los vínculos de la barra de navegación. Para estable-cer un marco como destino deberás seleccionar el texto en la vista Diseño o el objeto en cuestión. En el campo Vínculo del inspector de propiedades, haz click en el icono de carpeta y escoge el archivo con el que debe establecerse el vínculo. Claro que también puedes arrastrar el icono Señalar archivo al panel Archivos para seleccionar el fichero con el que se realizará el vínculo. A continuación, en el menú emergente Dest. del inspector de propiedades, selecciona el marco o ventana donde tiene que

aparecer el documento vinculado. Aquí verás cuatro opciones:• "_blank”, abre el documento

vinculado en una nueva ventana del navegador.

• “_parent”, en el conjunto de marcos padre del que contiene el vínculo.

• “_self”, abre el vínculo en el marco actual y sustituye su contenido.

• “_top”, abre el nuevo documen-to en la ventana actual del nave-gador, eliminando de esta forma todos los marcos.

Para establecer un vínculo con una página que no se encuentra en tu sitio web, es recomendable utilizar siempre target = “_top” o target = “_blank”, para que la página no parezca formar parte del mismo. ■

Con Dreamweaver es posible incluir un vínculo en un marco que abra un documento en otro.

125_52_59_Curso.indd 21 28/7/05 10:51:30

Curso

Las plantillas

Nº 126

Esta quinta entrega te va a hacer el trabajo mucho más ameno. Aprenderás a crear una plantilla para que, partiendo de un diseño preestablecido, puedas incluir fácilmente el resto de páginas que compondrán tu sitio. Además, conocerás qué son las capas y cómo añadir elementos multimedia a tu web.

50 www.pctoday.es


C omo podrás ver a lo largo de estas páginas, crear una plantilla en Dreamweaver MX 2004 te llevará algo de tiempo

(tampoco mucho); pero, a cambio, te ahorrarás bastantes horas de trabajo. Sin embargo, antes de empezar, con-viene que tengas una idea clara de qué puedes conseguir con ellas. En primer lugar, debes saber que éste es un tipo especial de documento que sirve para crear un diseño de página “fijo”, con el fin de que te sirva de guía para realizar el resto de tu web con menos esfuerzo y el mismo patrón. Para ello, se parte de una serie de regiones que se pueden establecer como editables o no; y, además, tiene la peculiaridad de que permite actualizar múltiples páginas de una vez, puesto que un documento que se crea a partir de una plantilla permanece conectado a ella.

A la hora de trabajar con plantillas, po-drás hacerlo tanto en la vista Código co-mo en la de Diseño. Como viene siendo habitual en este curso, la segunda será la que cobre protagonismo, puesto que resulta más fácil y no tendrás que pro-gramar ni una sola línea. En esta vista, la plantilla aparece rodeada por contor-nos rectangulares del color de resaltado predefinido. Asimismo, en la esquina superior izquierda de cada región apa-recerá una pequeña ficha, en la que se muestra el nombre de ésta. Aparte, toda la página aparece rodeada por un con-torno de otro color, con una ficha en la parte superior derecha, en la que figu-ra el nombre de la plantilla en la que se basa el documento. Finalmente, podrás identificar un archivo de plantilla obser-vando la barra de título de la ventana de documento o bien mirando la extensión del fichero, que siempre será “.dwt”.

126_50_57_Curso.indd 14 11/8/05 14:46:43



▲

Cuando un documento se guarda co-mo plantilla, Dreamweaver bloquea automáticamente la mayoría de las regiones de éste. Por lo tanto, debe-rás especificar cuáles serán editables, de tal forma que el usuario de la plantilla sólo podrá realizar cambios en ésas, y no en las bloqueadas. En principio, puedes colocar una región editable en cualquier lugar de la pá-gina, pero ten en cuenta que si vas a hacer que una tabla o una capa sea editable, puedes señalar una tabla entera o una celda individual como editable, pero no varias celdas de una tabla como una sola región editable. En cuanto a las capas y su contenido has de tener claro que son elementos distintos. Al con-vertir una en editable es po-sible cambiar su posición y su contenido, mientras que

al convertir el contenido de una capa en editable sólo puede cambiarse el contenido de la capa, no su posición.

1 Para insertar una región de plantilla editable, selecciona el texto o el contenido que deseas

definir como región editable. A conti-nuación, sitúa el punto de inserción en la posición adecuada. Después, escoge Insertar / Objetos de plan-tilla / Región editable. En el cuadro de texto Nombre de la ventana que te aparezca, introduce uno exclusivo para la región y presiona Aceptar. La región editable aparecerá limitada por

En todo momento puedes crear una plantilla a partir de un documento existente o de uno nuevo y en blanco. Una vez hecho esto, es posible inser-tar posteriormente regiones confi-guradas como editables o no, según tus necesidades. Además, se pueden modificar las preferencias de la plan-tilla en lo que respecta a los colores

del código y al tono de resaltado en cada región de ésta. Pero lo mejor es ir por partes. Lo primero que vas a hacer es definir una.

1 Para crearla, abre el documen-to que deseas guardar como plantilla. Si lo quieres diseñar

desde cero, entra en Archivo / Nuevo. En el cuadro de diálogo que aparece, selecciona Página básica / HTML y haz click en Crear. En cuanto se abra el documento, puedes seleccionar en el menú Archivo la opción Guardar como plantilla, o bien en la categoría Común de la barra Insertar, presiona en la flecha del botón Plantillas y, a continuación, elige Crear plantilla.

2 De esta forma, se abrirá el cuadro de diálogo Guardar como plantilla. Selecciona

un lugar de tu disco donde lo quie-ras almacenar y, a continuación, in-troduce el nombre de la plantilla en el cuadro de texto Guardar como. Finalmente, haz click en Guardar. Así, Dreamweaver guarda el archivo en la carpeta Templates del sitio en

la raíz local, con la extensión “.dwt”. Si no existe ésta, el programa la crea-rá automáticamente. Por cierto, has de saber que no es conveniente que saques las plantillas de esta ubicación ni guardes en ella archivos que no sean plantillas. Tampoco debes sacar la carpeta de su lugar de destino en la raíz local, puesto que si lo haces, se producirán errores en las rutas.

3 Por supuesto, también es posi-ble utilizar el panel Activos, al que llegarás a través del menú

Ventana, para crear una plantilla nue-va. Una vez que te aparezca la ventana, selecciona la categoría Plantillas en la parte izquierda del panel y haz click en el botón Editar plantilla, que se encuentra en la parte inferior del panel Activos. Así, se añadirá una nueva sin título a la lista del panel Activos. Con la plantilla aún seleccionada, escribe un nombre y presiona Intro.

4 Una vez que ya tienes creada la plantilla, es posible utilizar las preferencias de Dreamweaver

para personalizar el color de resaltado del contorno de las regiones editables y bloqueadas de una plantilla en vista

Diseño. Para ello, selecciona Edición / Preferencias y, en el cuadro de diá-

logo que te aparezca, escoge Re-saltando. A continuación, haz click en el cuadro de color de Regiones editables, Regiones anidadas o Regiones bloquea-das y selecciona el color que consideres oportuno. Después, puedes repetir el proceso con los otros tipos de región de plantilla.

Finalmente, presiona en Mostrar para activar o desactivar la visualización de colores en la ventana de documento. Para ver los colores seleccionados, eli-ge Ver / Ayudas visuales / Elementos invisibles. Si no, no te habrá servido de nada lo que habías hecho antes.

Creación de una plantilla

Es posible almacenar información adicional sobre una plantilla (como el nombre de su autor, la fecha en que se modificó por última vez o la expli-cación de algunas decisiones sobre su diseño) en un archivo Design. Para ello, tienes que dirigirte a Archivo / Desing Notes y, allí, rellenar los datos que te pide el programa.

Consejo

Una plantilla puede contiener cuatro tipos de regiones diferentes:

• Editables. Es una región no bloqueada. Se puede especificar cualquier área de la plantilla como editable. De hecho, para que una plantilla sea efectiva, deberá contener al menos una de estas regiones. En caso contrario, las páginas basadas en la plantilla no se podrán editar.

• Repetidas. Sección del diseño del documento que se define para que se repita. Por ejemplo, puedes establecer que una fila de una tabla se repita. Normalmente, este tipo de regiones son editables para que el usuario pueda cambiar el contenido del elemento repetido.

• Opcionales. Se trata de una sección de la plantilla que se especifica

como opcional para contenido como un texto o una imagen, que pueden aparecer o no en un documento basado en la plantilla.

• Atributos de etiqueta editables. Permite desbloquear un atributo de etiqueta de una plantilla de modo que éste se pueda editar en una página basada en plantilla. Por ejemplo, puedes “bloquear” qué imagen aparece en el docu-mento, pero dejar que el usuario de la plantilla establezca la alineación que desee: izquierda, derecha o central. ■

Tipos de regiones de plantillas

Se pueden establecer una serie de regiones editables para cada

Resumiendo...

1 Archivo 3 Nuevo 3 Página básica 3 HTML 3 Crear 3 Archivo 3

Guardar como plantilla

2 Escribir el nombre de la plantilla en Guardar como 3 Guardar

3 Ventana 3 Activos 3 Plantillas 3 Editar plantillas 3 Intro

4 Cambiar colores de regiones 3 Edición 3 Preferencias 3 Resaltar 3

Mostrar 3 Aceptar

Regiones editables

126_50_57_Curso.indd 15 11/8/05 14:46:46

Una región opcional es aquella en la que los usuarios pueden definir co-mo visible u oculta en un documen-to basado en plantilla. Por ejemplo, te puede resultar útil cuando desees establecer condiciones para mostrar contenido en un documento. Cuando se inserta una región opcional, pue-des definir valores específicos para un parámetro de plantilla o establecer declaraciones condicionales en ésta.

Posteriormente, se puede modificar la plantilla si es necesario.

1 Para insertar una región op-cional, en la ventana de docu-mento tienes que seleccionar el

elemento que deseas definir con estas características. A continuación, esco-ge Insertar / Objetos de plantilla / Región opcional. De esta forma,

aparecerá el cuadro de diálogo en cuestión, dividido en dos pestañas: Básica y Avanzada. En la prime-ra basta con introducir el nombre del parámetro en el cuadro de texto Nombre y con activar la casilla de

verificación Mostrar de forma pre-determinada, para definir la región seleccionada que desea mostrar en el documento. Desactívala si lo que quieres es establecer el valor prede-terminado como falso.

Una región repetida es una selección de una plantilla que puedes duplicar cuando quieras en una página basada en planti-lla. Este tipo de opciones suelen utilizarse con tablas. Sin embargo, también es po-sible definir una para otros elementos de la página. Permiten controlar el diseño de ésta mediante la repetición de deter-minados elementos, como uno de catálo-go, un diseño de descripción, o una fila de datos. Ahora bien, ten en cuenta que una región repetida no es editable. Para ello deberás insertar una región editable dentro de otra repetida.

1 Para incluir una región repetida en una plantilla, selecciona el texto o el contenido que deseas definir

como región repetida. A continuación, sitúa el punto de inserción donde desees y elige Insertar / Objetos de plantilla

/ Región repetida; o bien, con el botón derecho del ratón, escoge Plantillas / Nueva región repetida.

2 En ese momento, te aparecerá un cuadro de diálogo para introducir el nombre que quieres darle a la

nueva región repetida, siempre teniendo en cuenta que no debes utilizar caracte-

res especiales al asignar un nombre a una región. Finalmente, haz click en Aceptar para que se añada en la plantilla.

3 Lo siguiente que puedes hacer es utilizar una tabla repetida pa-ra crear una región editable (en

formato de tabla) con filas repetidas. Por ejemplo, es posible definir los atri-butos de tabla y establecer qué celdas de la tabla son editables. Para hacerlo, sitúa el punto de inserción en el docu-mento donde deseas incluir la tabla de repetición, selecciona Insertar / Obje-tos de plantilla / Tabla repetida. De

esta forma, se abrirá una nueva ventana en la que deberás elegir los parámetros referidos a la tabla como las filas, las columnas, el ancho, el borde o el nom-bre de la región repetida. Finalmente, presiona Aceptar.

un contorno rectan-gular resaltado en la plantilla con el color que definiste previamente.

2 A continuación, puedes hacer varias cosas. La primera es se-leccionar una región editable.

Para ello, haz click en la ficha situada en la esquina superior izquierda de ésta, o bien selecciona Modificar / Plantillas

y elige el nombre en la lista que aparece al final de ese submenú. También debes saber que si más adelante deseas blo-quear esa región y que no sea editable, sólo deberás presionar en la ficha situa-da en la esquina superior izquierda de la región editable para seleccionarla, y

elegir Modificar / Plantillas / Quitar formato de plantilla. La última posi-bilidad que tienes con respecto a las regiones editables es la de cambiar su nombre. Para hacerlo, pulsa en la

ficha situada en la esquina superior izquierda de la región editable para seleccionarla y, en el inspector de propiedades, escribe un nuevo nom-bre y presiona Intro.

Curso


Regiones repetidas

Resumiendo...

1 Insertar 3 Objetos de plantilla 3 Región editable 3 Aceptar

2 Modificar 3 Plantillas 3 Quitar formato de plantilla

Resumiendo...

1 Insertar 3 Objetos de plantilla 3 Región repetida

2 Introducir nombre 3 Aceptar

3 Insertar 3 Objetos de plantilla 3 Tabla repetida 3 Configurar

parámetros 3 Aceptar

Cuando se crea un archivo de plan-tilla a partir de una página existente y luego se guarda ésta como una plantilla, Dreamweaver actualiza los vínculos existentes de modo que señalen a los mismos archivos que anteriormente. Dado que las plantillas se guardan en la carpeta Templates, la ruta de un vínculo relativo al docu-

mento cambia cuando la página se guarda como plantilla. No obstante, Dreamweaver automáticamente actualiza todos los vínculos relativos al documento para que continúen señalando los archivos correctos. Sin embargo, si se añade un nuevo víncu-lo relativo al documento a un archivo de plantilla y se escribe la ruta en el cuadro de texto del vínculo en el inspector de propiedades, es fácil

introducir una ruta equivocada. La dirección correcta es la que va desde la carpeta Templates hasta el docu-mento vinculado, no desde la carpeta del documento basado en plantilla hasta el documento vinculado. Por otra parte, y si lo que quieres es introducir un vínculo una vez que ya tienes guardado el documento como

plantilla, la forma de hacerlo es muy sencilla. Simplemente, tendrás que utilizar el icono de la carpeta o el de señalización de archivo que aparece al final del cuadro de texto llamado Vínculo en el inspector de propie-dades. Ahora bien, recuerda que no debes escribir el nombre del archivo con el que deseas establecer el vín-culo, porque si lo haces, es posible que éste no funcione. ■

Tipos de regiones de plantillas

En este cuadro de diálogo podrás seleccionar el archivo que deseas vincular en la plantilla que estés creando.

Regiones opcionales

126_50_57_Curso.indd 16 11/8/05 14:46:50

Al realizar cambios en una plan-tilla y guardarlos, Dreamweaver actualiza automáticamente todos los documentos adjuntos a ella. No obstante, también es posible actualizar manualmente los basa-dos en una plantilla, si es necesa-rio. Además, la aplicación com-prueba por sí sola la sintaxis cuando guarda la plantilla, parámetro que también se puede revisar al editarla. En definitiva, lo que vas a aprender en los siguientes pasos son todas las op-ciones que puedes llevar a cabo con las plantillas.

1 Lo primero, por tanto, es abrir y editar un archivo de plantilla. Despliega el menú Ventana, se-

lecciona Activos y, allí, la categoría Plantillas situada en la parte izquier-da del panel. Ahí se enumeran todas las plantillas disponibles y se mues-tra una vista previa de la selecciona-da. Elige la plantilla en cuestión con un doble click y ésta se abrirá en la ventana del documento. Ahora puedes

modificar el contenido que consideres oportuno. Cuando acabes, guárdala y Dreamweaver te pedirá que actualices las páginas basadas en la plantilla. Así que haz click en Actualizar para actualizar todos los documentos ba-sados en la plantilla modificada o No actualizar, si no deseas hacerlo.

2 La siguiente opción es abrir y modificar la plantilla adjunta al documento actual. Abre el do-

cumento basado en la plantilla en la ventana de documento, selecciona Mo-dificar / Plantillas / Abrir plantilla

adjunta. Así ya puedes cambiar lo que consideres oportuno. Posteriormente, guarda los cambios y, como en el paso anterior, el programa te pedirá que ac-tualices las páginas basadas en la plan-tilla mediante el mismo sistema.

3 Cuando realizas un cambio en una plantilla, Dreamweaver so-licita que actualices los docu-

mentos basados en ella, pero también puedes hacerlo de forma manual, lo que es igual que volver a aplicar la plantilla. Para aplicar al documento los cambios realizados en el documento basado en la plantilla actual, abre el documento, selecciona Modificar / Plantillas / Ac-

tualizar página actual y la aplicación actualiza el documento con todos los cambios de la plantilla. Ahora bien, si lo que quieres es actualizar el sitio com-

pleto, elige Modi-ficar / Plantillas / Actualizar pá-ginas. A continua-

ción, deberás completar el cuadro de diálogo que te aparece y hacer click en Iniciar. Por último, presiona Cerrar.

4 No está de más que compruebes la sintaxis de la plantilla. Para verificar este parámetro deberás

abrir el documento que desea compro-bar en la ventana de documento, elegir Modificar / Plantillas / Comprobar

sintaxis de plantilla. Si ésta es incorrecta, te aparecerá un mensaje de error, que te especifi-cará de qué se trata y en la línea de código donde se encuentra.

5 Es el momento de administrar las plantillas. Por ejemplo, es posible cambiar el nombre de

cada una de ellas desde el panel Ac-tivos simplemente presionando una vez en la plantilla para seleccionarla

2 La otra posibilidad es señalar la pestaña Avanzado. Ahí tienes dos posibilidades para determinar si

la región es visible: Utilizar parámetro e Introduzca la expresión. Marca la

primera si quieres vincular parámetros de región opcional. Haz lo mismo con la segunda en caso de que querer escribir una expresión de plantilla para controlar la visualización de una región opcional.

3 A continuación, puedes inser-tar una región opcional como editable. En la ventana de do-

cumento, coloca el punto de inser-ción en el lugar de la página donde

desees que aparezca. Elige Insertar / Objetos de plantilla / Región op-cional editable. Así te aparecerá el cuadro de diálogo Región opcional. Introduce un nombre para ésta y haz click en la ficha Avanzado, si deseas definir otras opciones. Finalmente presiona Aceptar.


▲


Resumiendo...1 Insertar 3 Objetos de plantilla 3 Región opcional 3 Escribir nombre

3 Marcar Mostrar de forma predeterminada

2 Avanzado 3 Seleccionar entre Utilizar parámetro e Introduzca la

expresión 3 Aceptar

3 Insertar 3 Objetos de plantilla 3 Región opcional editable 3

Avanzado 3 Aceptar

Edición y actualización de plantillas

En Dreamweaver puedes modificar determinados atributos de etiqueta en un documento creado a partir de una plantilla. Por ejemplo, puedes definir un color de fondo en el documento de plantilla y, sin embargo, permitir que los usuarios de la plantilla definan colores de fondo distintos para las páginas que ellos creen. Eso sí, éstos solamente pueden actualizar los atri-butos que especifiques como edita-bles. Para ello, selecciona un elemento para el que desees definir un atributo de etiqueta editable. Después, escoge Modificar / Plantillas / Hacer edita-ble el atributo. Se abrirá un cuadro

de diálogo que debe-rás completar con cada atributo que desees convertir en editable. Finalmente, haz click en Aceptar. Al crear un atributo de etiqueta editable, se inserta un pará-metro de plantilla en el código. Así se establece un valor inicial para el atributo en el documento de

plantilla. Cuando se crea el documento basado en la plantilla hereda ese parámetro, por lo que un usuario de ella podrá editar el parámetro en el documento basado en la plantilla.Evidentemente, una etiqueta marcada antes como editable también se puede señalar como no editable. Para resta-blecer el atributo de etiqueta editable, presiona en el elemento asociado, elige Modificar / Plantillas / Hacer editable el atributo. En el menú emergente Atributos, selecciona el que deseas modificar, desactiva la casilla de verificación Hacer editable el atributo y haz click en Aceptar. ■

Atributos de etiqueta editables

Dreamweaver permite modificar determinados atributos de etiqueta en un documento creado a partir de una plantilla.

126_50_57_Curso.indd 17 11/8/05 14:46:53

Curso


y otra para hacer que el nombre sea editable. A continuación, sólo ten-drás que introducir la nueva deno-minación. Por supuesto, eliminar un archivo de plantilla también resulta muy sencillo. De nuevo, en el panel Activos, marca el elemento en cues-tión y haz click en el botón Eliminar, situado en la parte inferior del panel, y confirma que deseas borrar la plantilla corres-pondiente. Debes tener en cuenta que una vez que hayas eliminado los datos, no po-drás recuperar-los. Eso sí , los documentos que se basan en una plantilla que se ha eliminado no se separan de ella, sino que conservan la estructura y las regiones editables que tenía el archivo de plantilla antes de ser eliminado.

6 En cualquier momento, puedes aplicar una plantilla a un docu-mento existente. Simplemente

tendrás que abrir éste y, en la categoría Plantillas del panel Activos, arrastrar la plantilla en cuestión a la ventana de documento. Ahora bien, ten cuidado porque si hay contenido en el documen-to que no se puede asignar automática-

mente a una región de plantilla, apare-cerá el cuadro de diálogo denominado Nombres de regiones no coinciden-tes. Por lo tanto, tendrás que arreglar antes el contenido no resuelto.

Ahora que conoces todos los detalles de las plantillas, es el momento de abordar las capas. Por este término se entienden los elementos HTML que se pueden colo-car en cualquier lugar de un documento y que pueden incluir texto, imágenes u otros contenidos. Con Dreamweaver, puedes emplear capas para diseñar la página, colocar unas delante de otras, ocultar algunas mientras se muestran otras y moverlas por la pantalla. Es posi-ble también situar una imagen de fondo en una capa y, a continuación, insertar una segunda con texto y un fondo trans-parente, delante de la primera.

1 Para insertar una capa, puedes hacerlo con un documento en blanco, por ejemplo. Sólo de-

berás situar el cursor en el punto de inserción deseado, desplegar el menú

Insertar, seleccionar la opción Obje-tos de diseño y, en ella, Capa. En ese momento, se resaltarán los bordes de la capa y aparecerá el manejador de selección. Por supuesto, para mostrar u ocultar marcas de código de capa, tendrás que tener marcada la opción Bordes de capa en Elementos invi-sibles del apartado Ayudas visuales en el menú Ver.

2 Al igual que sucedía con las plantillas, aquí también es posible

anidar capas. Este término se usa a menudo para agru-par capas. Eso sí, hay que te-ner en cuenta que una capa anidada se mueve junto con su capa padre y puede con-figurarse para que herede la visibilidad de ésta. Por lo tanto, para insertar una capa anidada, coloca el punto de

inserción en el interior de una capa existente en la vista de diseño de la ventana de do-cumento y selecciona Insertar / Objetos de diseño / Capa. Para anidar una capa existente dentro de otra utilizando el pa-nel Capas, selecciona Ventana / Capas para abrir el panel Ca-pas. Elige allí una y, a continua-ción, mientras presionas la tecla Control, arrástrala con el ratón

hasta la capa de destino del panel Ca-pas. Por último, suelta el botón del ra-tón cuando se resalte el nombre de la capa de destino.

3 En todo momento es posible configurar las propiedades de la capa. Para establecer las prefe-

rencias que desees, tienes que dirigirte a la categoría Capas del cuadro de diá-

Insertar capas

Las plantillas anidadas permiten crear variaciones de una plantilla base. Por ejemplo, es posible desa-rrollar una anidada guardando un documento basado en plantilla y, a continuación, almacenando ése como una plantilla nueva. Incluso, puedes anidar múltiples plantillas para definir un diseño cada vez más específico. De forma predeter-minada, todas las regiones de plan-tilla editables de la plantilla base se transfieren desde la anidada hasta el documento basado en ésta. Eso

supone que si creas una región editable en una plantilla base y, a continua-ción, una plantilla anidada, la región editable aparecerá en los documen-tos basados en la plantilla anidada. Por cierto, éstas muestran un borde de color azul.Para crear una, tie-nes que diseñar un

documento a partir de la plantilla en la que desea que se base la plan-tilla anidada. Así pues, selecciona Archivo / Nuevo, presiona en la ficha Plantillas y elige el sitio que contiene la plantilla que desea utili-zar. En la lista de documentos, haz doble click en la plantilla para crear un documento. A continuación, para guardarla como plantilla anidada puedes escoger Archivo / Guardar como plantilla y, allí, escribe un nombre y, a continuación, haz click en Aceptar. ■

Plantillas anidadas

La virtud de las plantillas anidadas es que permi-ten crear variaciones de una plantilla base.

Resumiendo...1 Ventana 3 Activos 3 Plantilla 3 Modificar parámetros 3 Guardar 3

Actualizar

2 Modificar 3 Plantillas 3 Abrir plantilla adjunta 3 Modificar 3 Guardar

3 Modificar 3 Plantillas 3 Actualizar página actual 3 Realizar cambios

3 Guardar

4 Modificar 3 Plantillas 3 Comprobar sintaxis de plantilla 3 Realizar

cambios 3 Guardar

5 Panel Activos 3 Plantillas 3 Seleccionar 3 Cambiar nombre o eliminar

3 Guardar

6 Panel Activos 3 Plantillas 3 Arrastrar la plantilla al documento

126_50_57_Curso.indd 18 11/8/05 14:46:57

logo Preferencias situado en el menú Edición. Allí podrás seleccionar la vi-sibilidad que tendrá a través de cuatro

parámetros: default (predeterminada), inherit (heredada), visible (visible) y hidden (oculta). Además, podrás es-tablecer el ancho y alto de las capas, el color o una imagen de fondo predeter-minados, anidar una capa y mantener la compatibilidad con Netscape 4 mediante la agregación de reparación de cambio de tamaño al insertar capa. Una vez fija-dos estos parámetros, pulsa Aceptar.

4 Si señalas múltiples capas, es po-sible modificar todas ellas de una vez. De hecho, cuando lo haces,

el inspector de propiedades cambia, como puedes ver en la imagen. Para se-leccionarlas, en el panel Capas, señala la primera y, a continuación, con la tecla Mayús presionada, haz click con el ra-tón sobre el resto de capas que quieras seleccionar. Así, conjuntamente, podrás modificar parámetros como Iz, An, Sup,

Al, Vis, Etiq, Im. Fondo y Col. Fondo, todos ellos explicados en el recuadro de Inspector de propiedades.

5 Además de administrar los valo-res indicados, también se pueden seleccionar capas para traba-

jar con ellas mediante el panel Capas. Desde allí es posible cambiar el orden de apilamiento y la visibilidad de éstas. Para hacer lo primero, simplemente hay que seleccionar la que se quiera y, con el ratón, arrastrarla a su nueva posición. En cuanto a la segunda, deberás situarte en la columna imaginaria que hay deba-

jo del icono de ojo abierto. Si presionas ahí verás que aparece un ojo cerrado y, consecuentemente, la capa en cuestión desaparece del documento. Si vuelves a pulsar, el ojo se abrirá y la capa apare-

cerá. Un nuevo toque dejará las cosas como estaban al principio. Asimismo, para mostrar u ocultar capas anidadas,

tendrás que hacer click en los botones de signo más (+) o menos (–) que se encuentran junto al nombre de la capa. Finalmente, ten en cuenta que las ca-pas anidadas apare-cen como nombres relacionados con las capas padres.

6 Si lo que quieres es seleccionar una capa, puedes hacerlo me-diante el panel Capas, eligien-

do la que deseas y marcándola con un click. Aparte, también te puedes ayu-dar de los manejadores de selección,

simplemente presiona sobre el interior de la capa, aparecerá un pequeño re-cuadro en la parte superior derecha de

ésta. Presionando sobre él se esco-gerá entera. Eso sí, ten en cuenta que si tienes más seleccio-nadas, esta opción

desactivará las anteriores y remarcará sólo la elegida. Por otra parte, para se-leccionar múltiples capas, tendrás que dejar presionada la tecla Mayús mien-tras con el ratón haces click en el resto de capas que quieres elegir.

7 Otras de las opciones interesan-tes es la manipulación de capas. Cuando trabajes en el diseño de

una página, puedes cambiar el tamaño, mover, alinear y organizar capas. Eso sí, antes de nada, deberás seleccionar una para que sea posible efectuar todas es-tas funciones. La primera de ellas es el

cambio de tamaño, que se puede hacer con una de forma individual o con múlti-ples, simultáneamente, para asignarles la misma anchura y altura. La manera más rápida y efectiva de hacerlo es mediante los manejadores. Una vez que tengas se-leccionada la capa, sólo tendrás que esti-rar los puntos remarcados hasta dar con el tamaño que te resulte más adecuado. Para hacerlo con varias capas a la vez, deberás seguir el mismo procedimiento, siempre habiéndolas seleccionado antes como ya sabes.

8 La otra opción es cambiar los valores de anchura (An) y al-tura (Al) a mano en el inspec-

tor de propiedades. Lo mismo sucede para cambiar el tamaño de múltiples

capas a la vez. La forma de hacerlo es elegir el menú Modificar / Alinear / Asignar mismo ancho o Modificar / Alinear / Asignar mismo alto.

Las primeras capas seleccionadas se ajustarán a la anchura o la altura de la última, resaltada en negro.

9 Al igual que sucede con otros muchos objetos en distintas aplicaciones gráficas, la forma

de mover las capas es muy sencilla. Sólo deberás señalar la capa en cues-tión, observar el pequeño recuadro que aparece en la parte superior iz-

www.pctoday.es 55


Nº 126

Aparte de todo lo explicado en el texto, también se pueden ver y administrar diversos atributos de una o más capas en el inspector de propiedades. De hecho, tienes a tu alcance un buen número de parámetros modificables. El primero es ID de capa, que permite teclear un nombre para identificar ésta. En Iz y Sup (izquierda y superior) se especifica la posición de la esquina superior izquierda de la capa con respecto a la superior izquierda de la página o de la capa padre, si es anidada; mientras que en An y Al se detalla su ancho y su alto. A continuación, verás Índice Z, que

determina el orden de apilamiento de la capa; y Vis, que especifica si ésta es visible inicialmente o no. Ahí puedes elegir entre default, inherit, visible y hidden. Los siguientes parámetros son Im. Fondo, que se refiere a la posibilidad de insertar una imagen de fondo para la capa, haciendo click en el icono de car-peta para localizar y seleccionar un archivo de imagen; Col. Fondo, para seleccionar un color de fondo para

la capa, que puedes dejar en blanco si quieres que sea transparente; y Clase, que indica la etiqueta HTML utilizada para definir la capa.Finalmente, en la parte inferior del inspector de propiedades, tienes Desbordamiento, que controla cómo aparecen las capas en un navegador cuando el contenido excede el tamaño especificado de la capa, con cuatro opciones de elección: Visible indica que los datos adicionales aparecen en la capa, Oculto especifica que el contenido adicional no se mostrará en el nave-gador, Desplazamiento señala que el navegador deberá añadir barras de

desplazamiento a la capa tanto si se necesitan como si no y Automático hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias.A continuación, la opción Iz (Izquierda), Dc (Derecha) y Sup (Superior) e Inf (Inferior) definen un rectángulo en el espacio de coordenadas de la capa, contando desde la esquina superior izquierda de ésta. ■

Desde el inspector de propiedades es posible configurar algunos parámetros de las capas.

Las capas anidadas pueden ofrecer un aspecto diferente según el navegador que se utilice. Por eso, es recomen-dable que, al crear capas anidadas, compruebes con frecuencia su aspec-to en distintos navegadores durante el proceso de diseño.

Consejo

El inspector de propiedades

▲

126_50_57_Curso.indd 19 11/8/05 14:47:00

Es hora de dar un pa-so más en este curso, y en el diseño en gene-ral de las páginas web, mediante la inserción de objetos multime-dia al proyecto. Esto permitirá hacer que sean mucho más atractivas. Eso sí, debes tener en cuenta que este tipo de objetos ocupará más espacio en tu disco y en el servidor donde vayas a alojar tu web. Por lo demás, constituyen un buen reclamo para atraer nuevas visitas en Internet. Con Dreamweaver pueden añadirse los siguientes archivos multimedia: pelícu-las Flash y Shockwave, QuickTime, AVI, applets Java, controles Active X y archi-vos de audio de diversos formatos.

1 Para incluir un objeto multi-media, debes situar el punto de inserción en la ventana de docu-

mento en la que deseas añadir el obje-to. A continuación, puedes seleccionar

en el menú Insertar la opción Media y, allí, el comando deseado. Cuando es-cojas el archivo, pulsa Aceptar.

2 Después aparecerá el cuadro de diálogo Atributos de accesibi-lidad de la etiqueta de objeto,

si has activado el cuadro de diálogo correspondiente en Edición / Prefe-rencias / Accesibilidad / Media. Allí podrás anotar el título, la clave de acce-so y el índice de fichas. Una vez hecho esto, el objeto multimedia aparecerá en el documento. Por cierto, debes saber que si presionas Cancelar, se mostrará un marcador de posición de objeto mul-timedia, pero no le asociará etiquetas

o atributos de accesibilidad. Por tanto, puedes utilizar el inspector de propieda-des para especificar un archivo de origen o para establecer las dimensiones y otros parámetros y atributos de cada objeto.

3 Es el momento de insertar con-tenido en formato Flash; es de-cir, archivos con la extensión

“.swf”. Así que selecciona este pará-metro en el menú Insertar / Media. En el cuadro de diálogo que aparece, escoge el fichero en cuestión. Cuando

lo hagas, en la ventana de documento a p a r e c e r á un marcador de posición Flash. Ahora puedes ob-tener una vista previa de la película Flash en la ventana de documento. Para ello, haz click en el marcador de posición Flash para seleccionar la película de la que deseas obtener una vista previa. En el inspector de propiedades, haz click en el botón Reproducir o presiona en Detener para poner fin a la vista previa. Tam-bién puedes obtener una vista previa de la película Flash en un navegador presionando F12.

4 Aparte de películas, también es posible incluir elementos Flash, que permiten crear rápida y

fácilmente aplicaciones de Internet completas utilizando elementos ya creados. Para ello, en la ventana de documento, coloca el punto de inser-

Curso

56 www.pctoday.es

quierda de la capa y señalarlo, lo que hará que se seleccione toda. Una vez hecho, sólo deberás arrastrarla con el ratón hacia el punto deseado de la página. Si quieres hacerlo de una for-ma más precisa; es decir, píxel a píxel,

puedes hacerlo, una vez seleccionada, mediante los cursores de dirección del teclado. Incluso, es posible mantener presionada la tecla Mayús mientras pulsas una de las flechas para mover la capa en el incremento actual de ajuste a la cuadrícula.

10 En cuanto a la alineación de capas, este comando lo que hace es ajustar una o

varias capas con el borde de la última seleccionada. Cuando se produce esta acción, las capas hijas que no están se-leccionadas pueden moverse, siempre y cuando se seleccione y se mueva su capa padre. Si quieres evitarlo, no utili-ces capas anidadas. En cualquier caso, para alinear dos o más, selecciona la capa en la vista de diseño, elige Modi-ficar / Alinear y escoge una opción de

alineación. Por ejemplo, si eliges Su-perior, se moverán todas las capas de modo que sus bordes superiores que-den en la misma posición vertical que el borde superior de la última capa seleccionada, resaltada en negro.

11 Las últimas operaciones que puedes realizar con las capas son las de or-

ganizarlas. Para ello, tendrás que dirigirte al menú Modificar / Or-

ganizar. Allí verás dos parámetros superiores y uno inferior. Con Traer al frente conseguirás que una capa que había quedado tapada por la in-serción posterior de otra, salga a la superficie para que se vea por encima del resto de elementos. Por ejemplo, esto te viene

bien a la hora de poner un texto so-bre una imagen. El efecto contrario es el que encontrarás si presionas en Enviar al fondo. Por último, con el comando Evitar solapamiento de capas, conseguirás que una capa no

pueda incluirse dentro de otra. Por lo tanto, viene a constituirse como la opción antagónica de las otras dos. De hecho, si seleccionas esta última, no podrás, evidentemente, escoger ninguna de las otras.

Los archivos multimedia

Nº 126

Resumiendo...1 Insertar 3 Objetos de diseño 3 Capa

2 Capas anidadas 3 Insertar 3 Objetos de diseño 3 Capa 3 Panel Capas

3 Presionar Control 3 Arrastrar hasta el nombre de la capa

3 Edición 3 Preferencias 3 Capas

4 Modificar múltiples capas 3 Seleccionarlas con Mayús 3 Cambiar

parámetros en el inspector de propiedades

5 Trabajar con capas 3 Panel capas 3 Fijar orden de apilamiento y

visibilidad

6 Seleccionar capas 3 Panel capas o manejadores de selección

7 Cambiar tamaño 3 Seleccionar manejadores 3 Tirar de ellos

8 Cambiar tamaño 3 Modificar 3 Alinear 3 Asignar mismo ancho o alto a

cada una

9 Mover capas 3 Seleccionar 3 Arrastrar por el documento

10 Modificar 3 Alinear

11 Modificar 3 Organizar 3 Traer al frente 3 Enviar al fondo 3 Evitar

solapamiento de capas

Para evitar que aparezcan los cuadros de diálogo, puedes seleccionar en el menú Edición el apartado Preferencias y, dentro de él, General. Una vez allí, desactiva la opción Mostrar diálogo al insertar objetos.

Consejo

126_50_57_Curso.indd 20 11/8/05 14:47:04

También puedes utilizar Dreamweaver para insertar películas Shockwave en los documentos. Shockwave es el es-tándar de Macromedia para multime-dia interactivo en la Web. Se trata de un formato comprimido que permite la descarga rápida de los archivos multi-media creados con otra aplicación de Macromedia, Director, que proporcio-na una interactividad muy elevada.

1 Para insertar una película Shockwave, en la ventana de

documento, sitúa el pun-to de inserción en el lu-gar deseado y selecciona Insertar / Media / Shockwave. En el cuadro de diálogo que aparece, escoge un

archivo de película. A continuación, en el inspector de propiedades, introduce el ancho y el alto de la pelí-cula en los cuadros An y Al.

2 Por otro lado, también puedes añadir vídeo a la página web de distintas formas y empleando

diferentes formatos. Éste tiene la pecu-liaridad de que lo puede descargar el usuario o reproducirse en flujo (strea-ming) mientras se descarga. Para in-cluir en la página un videoclip corto que los usuarios puedan descargar, sitúa el archivo, en formato AVI o MPEG-2, en la carpeta del sitio. Establece un vínculo con el videoclip, por ejemplo, con un

texto que diga “Descargar videoclip”. Después, elige el texto y haz click en el icono de carpeta del inspector de pro-piedades. Localiza la ubicación del ar-chivo de vídeo y selecciónalo.

3 Ahora es el momento de añadir sonido a la página web. Para agregar uno, en la vista Diseño,

sitúa el punto de inserción en el lugar deseado, dirígete al menú Insertar / Media / Plug-in. Allí, en el inspector de propiedades, haz click en el icono de carpeta para acceder al archivo de audio o escribe la ruta y el nombre del

archivo en el cuadro de texto Vínculo. Por último, especifica el ancho y el alto introduciendo los valores en los cuadros de texto correspondientes o cambiando el tamaño del marcador de posición del plug-in en la ventana de documento. Es-tos valores determinan con qué tamaño se muestran los controles de audio en el navegador web.

4 Finalmente, es posible estable-cer un vínculo con archivos de audio como una forma sencilla

y eficaz de añadir sonido a una pági-na web. Este método permite a los vi-sitantes decidir si quieren escuchar el fichero o no y ponerlo a disposición

de un mayor número de usuarios. Para establecer un vínculo con un archivo de audio, selecciona el texto o la ima-gen que deseas usar y, en el inspector de propiedades, haz click en el icono de carpeta para acceder al archivo de

audio o escribe la ruta y el nombre del archivo en el cuadro de texto Vínculo. Al incrustar audio, se incorpora el so-nido directamente en la página, pero éste sólo se reproduce si los visitantes del sitio disponen del plug-in adecuado para el archivo de sonido elegido. Pue-des incrustar archivos si deseas utilizar música de fondo o si quieres controlar el volumen, el aspecto del reproduc-tor en la página o los fragmentos de inicio y final del archivo de sonido. ■

www.pctoday.es 57


Nº 126

ción en el lugar en el que deseas aña-dirlo. A continuación, selecciona In-sertar / Elemento Flash / Nombre del elemento Flash. De esa forma,

aparecerá el cuadro de diálogo llama-do Guardar elemento Flash. Intro-duce un nombre de archivo, guárdalo en la ubicación adecuada y haz click en Aceptar. Así, aparecerá el marca-dor de posición del elemento Flash en el documento y podrás modificar sus propiedades mediante el inspec-tor de etiquetas y de propiedades. Por último, es posible obtener una vista previa, seleccionando Archivo / Vista previa en el navegador.


1 Insertar 3 Media 3 Elegir el archivo multimedia deseado

2 Atributos de accesibilidad 3 Activar en Edición 3 Preferencias 3

Accesibilidad 3 Media 3 Título, clave de acceso e índice de fichas

3 Insertar 3 Media 3 Flash 3 Seleccionar película 3 Reproducir

4 Insertar 3 Elemento flash 3 Nombre del elemento Flash

Conversión de capas en tablas

En vez de utilizar tablas o el modo de diseño para crear una página, con Dreamweaver puedes trabajar con capas. Un detalle importante es pen-sar en el diseño, ya que las tablas no se pueden solapar y tendrás que evitar las capas solapadas. Por lo tanto, te conviene marcar la opción Evitar solapamiento de capas en el apartado Organizar del menú Modificar. Una vez que estés seguro de que esto es así, puedes iniciar la con-versión. Para ello, simplemente tendrás que ir al menú Modificar, elegir Convertir y, allí, seleccionar Capas a tabla. En ese instante, se mostrará el cuadro de diálogo en cuestión, en el que tienes varias opciones para seleccionar. La pri-mera es Diseño de la tabla, donde podrás escoger que sea Más pre-ciso, Mínimo, para contraer celdas

vacías, Usar GIFs transparentes y Centrar en página. Más abajo, encontrarás otras cuatro herra-mientas: Evitar superposición de capas, Mostrar panel de capas, Mostar cuadrícula y Ajustar a Cuadrícula. Elige según tu conve-niencia y presiona Aceptar. Si quieres realizar el proceso inver-so, debes seguir los mismos pasos: Selecciona Modificar / Convertir / Tablas en capas y, allí, se mos-trarán sólo las cuatro herramientas comentadas, que podrás habilitar o deshabilitar, según prefieras. Finalmente, pulsa Aceptar. ■

Dreamweaver permite la conversión de capas en tablas y viceversa.

Inserción de películas Shockwave


1 Insertar 3 Media 3 Shockwave

2 Añadir videoclip 3 Copiar a la carpeta de la web 3 Establecer vínculo

3 Insertar 3 Media 3 Plug-in

4 Establecer vínculos con archivos de audio 3 Seleccionar 3 Inspector

de propiedades 3 Vínculo

126_50_57_Curso.indd 21 11/8/05 14:47:07

Curso

Conocimientos avanzados

Nº 127

La última entrega de este curso pondrá a tu alcance algunas nociones avanzadas de la utilización de Dreamweaver. Así, por ejemplo, conocerás qué son los comportamientos Javascript, aprenderás a editar

código HTML y comprobarás que todo funciona correctamente en tu página web antes de “subirla” a Internet.

50 www.pctoday.es


Lo primero que vas a aprender en esta última parte del curso es la inclusión de comportamientos a tu sitio web. Básicamente,

este concepto designa la combinación de un evento (mensaje generado por un na-vegador para indicar que un visitante ha hecho algo) con la acción que desenca-dena dicho evento. Por ejemplo, cuando un internauta mueve el cursor por enci-ma de un texto o imagen con hipervíncu-lo, el navegador genera un evento para ese enlace y luego comprueba si hay una acción a la que deba llamar cuando se establece dicho evento. Las acciones sue-len tener código JavaScript ya definido que realiza una tarea específica, como abrir la ventana de un navegador, mos-trar u ocultar una capa, reproducir un sonido, detener una película Shockwave, hacer que aparezca un texto descriptivo de una acción, etc.

A continuación, encontrarás algunas nociones fundamentales de código HTML para que, al menos, no te pierdas si de-cides alternar la vista Diseño con la de Código dentro de la aplicación. Incluso, a veces te resultará más útil y acertado tratar directamente con este lenguaje de Internet que con la propia vista de la página en modo Diseño. De hecho, es-te programa incorpora la herramienta, Quick Tag Editor, que te ayudará a ins-peccionar y editar rápidamente el código HTML de una etiqueta en la ventana de documento, sin necesidad de cambiar a la vista de Código y volver a la ventana de documento más tarde. Finalmente, el último paso que te quedará, antes de “colgar” tu página web en Internet es comprobar que todo funciona correcta-mente, que los vínculos no se han roto y que todas las páginas están en su sitio, para lo cual podrás generar informes.

127_50_57_Curso.indd 14 26/8/05 18:00:33

Dreamweaver cuenta con una serie de comportamientos predefinidos que se pueden seleccionar. A lo largo de los próximos puntos vas a conocer todos ellos para que sepas cómo y en qué situaciones deberás utilizarlos. Eso sí, ten en cuenta que la mayoría han sido desarrollados para que funcionen con todos los navega-dores más actuales del mercado, pero puede suceder que algunos comporta-mientos no funcio-nen en navegadores muy antiguos, o que los internautas tengan desactivada la opción de JavaScript. En cualquier caso, en el menú desplegable de com-portamientos tienes una opción lla-mada Mostrar eventos para a través de la cual, poder elegir la versión de navegador destino en que quieres re-producir el comportamiento.

1 La primera opción es Abrir ven-tana del navegador, que debe-rás usar para que se muestre una

página web en una nueva ventana. Una vez que te aparezcan las propiedades de esta función, deberás establecer la URL

y configurar las opciones inferiores, que son el ancho y el alto de la venta-na, su nombre y los atributos. Dentro de estos últimos, tienes seis parámetros para marcar si quieres que se muestren o no: Barra de herramientas de na-vegación (la fila de botones que incluye Atrás, Adelante, Inicio y Actualizar), Barra de herramientas de ubicación



La primera acción con la que debes pro-ceder es abrir el panel Comportamien-tos, desplegando el menú Ventana y se-leccionando Comportamientos. En ese momento, verás que aparece el menú correspondiente en la parte derecha de la pantalla. Allí se irán situando todos los eventos con sus acciones asociadas que vayas definiendo. Por supuesto, se pue-den adjuntar comportamientos al docu-mento completo o a vínculos, imágenes, elementos de formulario o a cualquier otro comando HTML. A continuación, descubrirás lo que tienes que hacer para crear uno de forma básica, mientras que en el siguiente epígrafe encontrarás una explicación detallada de todos los com-portamientos que Dreamweaver pone a tu disposición.

1 Para adjuntar un comportamien-to debes seleccionar un elemen-to de la página, por ejemplo una

imagen o un vínculo. Ahora bien, si lo que quieres es incluir uno que afecte

a la página completa, deberás hacer click en la etiqueta “<body>” en el selector de etiquetas, situado en la parte inferior izquierda de la ventana del documento.

2 Ahora sitúate en el panel Com-portamientos y presiona en el botón de signo más (+) para

que se despliegue el menú emergente con todas las opciones que te ofrece

Dreamweaver. Elige la opción que más se ajuste a tus necesidades teniendo en cuenta que no podrás escoger ninguna que aparezca atenuada en el menú. Esto es así porque no habrá un objeto nece-sario en el documento actual. Por ejem-plo, la acción Controlar Shockwave o Flash aparecerá atenuada si el docu-mento no contiene películas de este tipo.

3 Cuando escojas la acción ade-cuada, se mostrará un cuadro de diálogo en el que aparecerán

los parámetros e instrucciones de la acción. Deberás introducirlos y hacer

click en Aceptar, teniendo en cuenta que todas las acciones proporcionadas con Dreamweaver funcionan con los navegadores de la versión 4.0 y poste-riores. Así, comprobarás que en el panel Comportamientos se muestra el even-to seleccionado con la acción asociada en dos columnas. En cualquier momento puedes cambiar el primero pulsando so-bre él y eligiendo la opción deseada en el menú desplegable que aparecerá.

4 Después de adjuntar un com-portamiento, se pueden añadir, modificar o eliminar acciones

asociadas a los eventos. Simplemen-te, deberás seleccionarlas en el panel

Comportamientos y hacer doble click sobre ellas para definir de nuevo sus propie-dades en la ventana emer-gente, presionar en el botón Supr del teclado o elegir el botón “–” para eliminarla, o cambiar el orden en que se

producirán con las flechas de dirección situadas justo encima de ellas. Tanto la disponibilidad como la variedad de posibles efectos viene explicada en el manual del programa. Además de en la referencia que aparece al pulsar las teclas Mayus y F1.

Adjuntar un comportamiento

Sobre los comportamientos, debes saber que no es posible adjuntarlos a textos normales. Sin embargo, hay un pequeño truco para poder hacerlo. Sabiendo que sí se pueden añadir a vínculos, lo que puedes hacer es crear un vínculo nulo; es decir, uno que no señala a nada. Eso sí, ten en cuenta que, al realizarlo, el texto tendrá apa-riencia de vínculo, por lo que puedes cambiar su color y el subrayado para que no parezca un enlace. Ahora bien, de esa forma, los internautas no se darán cuenta de que hay una razón para hacer click en ese texto. En cualquier caso, para adjun-tar un comportamiento al texto seleccionado puedes seguir los siguientes pasos: En el inspec-tor de propiedades, introduce “javascript:;” en el campo Vínculo (con los dos puntos y el punto y coma). A continuación, y con el texto todavía seleccionado, abre el panel Comportamientos, elige

una acción en el menú emergente Acciones, introduce los parámetros de la acción y selecciona un evento que desencadenará la acción. Por último, sólo queda cambiar la apa-riencia del texto vinculado. Para ello, abre el inspector de códigos. Ahora busca el vínculo y en la etiqueta “a href” del vínculo, inserta este atributo: style=“textdecoration: none; color:black”. Al incluirlo, se desactiva el subrayado y el color del texto se establece en negro. Por supuesto, si el texto contiguo es de un color distinto, usa el tono en cuestión expresado en inglés en lugar del negro. ■

Comportamientos en los textos

Resumiendo...

1 Seleccionar elemento 3 “<body>” para toda la página

2 Panel de Comportamientos 3 Signo “+” 3 Elegir opción resaltada

3 Introducir los parámetros de la acción 3 Aceptar 3 Lista de eventos

en panel de Comportamientos

4 Doble click 3 Modificar comportamiento 3 Signo “–” 3 Eliminar

comportamiento 3 Barras de dirección 3 Cambiar orden del

comportamiento

Acciones de comportamientos

▲

Puedes añadir un comportamien-to a un texto, siempre y cuando antes establezcas un vínculo nulo.

127_50_57_Curso.indd 15 26/8/05 18:00:39

(la fila de opciones que incorpora el campo de ubicación), Barra de estado (zona situada en la parte inferior de la ventana del navega-dor en la que apare-cen mensajes), Barra de menús (área en la que aparecen menús como Archivo, Edición, Ver, Ir a y Ayuda), Barras de desplazamiento (si el contenido se extiende más allá de la zona visible) y Selectores de cambio de tamaño (que especifica que el usuario tenga la posibilidad de cambiar el tamaño de la ventana, bien arrastrando el ángulo infe-rior derecho de ella, o haciendo click en el botón maximizar).

2 La acción Arrastrar capa per-mite crear puzzles, controles deslizantes y otros elementos

móviles de interfaz. Cuando te salga la ventana emergente, verás que tienes dos pestañas: Básico y Avanzado. En la primera tendrás que seleccio-nar la capa que deseas hacer des-plazable del menú emergente Capa. A continuación, en Movimiento, es-coge Restringido para los controles deslizantes y los escenarios móviles,

como cajones de archivos, cortinas y minipersianas; o No restringido pa-ra puzzles y otros juegos de arrastrar y soltar. El Destino es la zona hasta la que deseas que el visitante arrastre la capa. Se considera que una capa ha alcanzado el destino cuando sus coor-denadas izquierda y superior coinciden con los valores introducidos en los campos Izquierdo y Superior. Asi-mismo, introduce un valor (en píxeles) en el campo Ajustar si a menos de para determinar lo cerca del destino que el visitante tiene que soltar la ca-pa para que ésta se ajuste al destino. Por último, para definir el manejador de arrastre de una capa, controlar el movimiento de ésta mientras está siendo arrastrada y desencadenar una acción al soltar la capa, haz click en la pestaña Avanzado y configura ca-da uno de los parámetros.

3 La acción Cambiar propiedad permite modificar el valor de una de las propiedades de objeto

(por ejemplo, el color de fondo de una capa o la acción de un formulario), pe-ro sólo debes utilizarla si cuentas con conocimientos suficientes de HTML o

JavaScript, necesarios para elegir las opciones en los menús emergentes Ti-po de objeto, Objeto con nombre y Propiedad.

4 Si eliges la acción Carga previa de imágenes evitarás retrasos producidos por la descarga de

imágenes, puesto que éstas se cargarán previamente en la memoria caché del navegador. Para hacerlo, sólo tendrás que hacer click en el botón Examinar

de la ventana emergente que te aparez-ca al seleccionar esta categoría, esco-ger el archivo de imagen objeto de la carga previa o introducir la ruta y pre-sionar en el botón más (+), situado en la parte superior del cuadro de diálo-go, para añadir la imagen deseada a la lista Carga previa de imágenes.

5 La acción Comprobar navega-dor permite enviar a los visitantes a distintas páginas, dependiendo

de las marcas y versiones de sus nave-gadores. Por ejemplo, puede resultar conveniente que vayan a una página si su navegador es Netscape Navigator, que vayan a otra página si tienen Microsoft Internet Explorer o que permanezcan en la página actual si usan un navegador de algún otro tipo. Resulta útil adjuntar este

comportamiento a la etiqueta “<body>” de una página. Sólo tendrás que determi-nar el criterio de separación que deseas aplicar a los visitantes: Por tipo de na-vegador, Por versión o Por ambas, eligiendo Ir a URL, Ir a Alt URL y Per-manecer en esta página. Por tanto, es importante que al final escribas la URL y

la URL Alternativa a la que quieres rediri-gir a los visitantes, siempre añadiendo el encabezado “http://www”.

6 La acción Comprobar plug-in es similar a la anterior, puesto que puedes remitir a los visitan-

tes a distintas páginas, dependiendo de si tienen instalado el plug-in en cuestión. De esta forma, deberás determinar el

plug-in adecuado y la dirección web a la que quieres redirigir a los internautas, tanto si lo tienes instalado como si no.

7 Ahora puedes utilizar la acción Controlar Shockwave o Flash para reproducir, detener, rebobi-

nar o ir a un fotograma de una película Macromedia Shockwave o Macrome-dia Flash. Para ello, inserta un vídeo como se explica en la anterior entrega. A continuación, elige Ventana / Pro-piedades e introduce un nombre para la película en el campo situado en el extremo superior izquierdo del panel

Propiedades. Una vez hecho esto, ve al panel Comportamientos y, en el bo-tón con el signo “+”, elige Controlar Shockwave o Flash. Allí deberás se-leccionar la película en cuestión y mar-car la opción deseada: Reproducir, Detener, Rebobinar o Ir a marco.

8 Con Controlar sonido podrás reproducir audio y hacer, por ejemplo, que se escuche un efecto

sonoro cuando el puntero del ratón pase por encima de un vínculo, o que se re-

produzca música al cargarse la página. Únicamente tendrás que seleccionar el archivo que quieres que se reproduzca en la ventana de la opción y Aceptar.

9 En Definir texto encontrarás cuatro opciones, que son: Defi-nir texto de campo de texto,

Definir texto de capa, Definir texto de marco y Establecer texto de ba-

rra de estado. En las tres primeras podrás sustituir el contenido y el formato de un campo de texto de un formu-lario, de una capa y de un marco, respectiva-mente. Para ello, por

supuesto, previamente deberás haber incluido una etiqueta de formulario, una capa y un marco, como has aprendido a lo largo de este curso. Después, simple-mente pulsando sobre cada una de las

opciones en la página y seleccionando la apropiada en el panel Comportamien-tos, conseguirás cambiar su contenido. La última opción facilita la inclusión de un mensaje en la barra de estado, situada en la parte inferior izquierda de la venta-na del navegador. Eso sí, ten en cuenta que deberás escribir un mensaje corto, porque de otra forma no cabrá en ella.

10 La siguiente opción que verás es la de Establecer imagen de barra de na-

vegación, cuya finalidad es convertir una imagen cualquiera en una de barra de navegación. Para lograrlo, tienes a tu disposición dos pestañas: Básico y Avanzado. Gra-cias a la primera, podrás crear o actualizar una ima-gen o grupo de imágenes de

barra de navegación, cambiar el URL que debe mostrarse al hacer click en

un botón de una barra de navegación y seleccionar una ventana distinta en la que mostrar un URL. En cambio, en

la ficha Avanzado es posible cambiar la apariencia de las imágenes de un do-cumento en función

Curso


Una región repetida es una selección de una plantilla que puedes duplicar cuando quieras en una página basada en plantilla. Este tipo

127_50_57_Curso.indd 16 26/8/05 18:00:47

del estado del botón actual. Recuerda que un elemento de la barra de na-vegación puede tener cuatro estados: Arriba, que aparece cuando el usuario aún no ha hecho click en él; Sobre, que se muestra cuando el puntero pasa sobre la imagen Arriba; Abajo, que aparece después de hacer click en el elemento; y Sobre mi en t r a s aba -jo, que se muestra cuando el puntero pasa sobre la imagen Abajo después de hacer click en el elemento.

11 La acción Intercambiar imagen sustituye ésta por otra cambiando el atributo

“src” de la etiqueta “img”, lo que re-sulta idóneo para crear sustituciones de botones y otros efectos de imágenes. Eso sí, ten presente que, debido a que sólo el atributo “src” se ve afectado por esta acción, el intercambio debe

hacerse con imágenes que tengan las mismas dimensiones (altura y anchu-ra) que la original. En caso contrario, la imagen que se intercambia aparece-rá reducida o ampliada para adaptarse a las dimensiones de la original. Sólo tendrás que seleccionar la imagen cu-yo origen deseas cambiar y hacer click en Examinar para seleccionar el ar-chivo de la nueva imagen en el campo Definir origen como.

12 Con la opción Ir a URL conseguirás abrir una nue-va página en la ventana ac-

tual o en el marco especificado. Esta acción resulta especialmente útil para

cambiar el contenido de dos o más marcos con un solo click. Para usar-la, deberás elegir un destino para la dirección de la URL en la lista Abrir en, que automáticamente muestra los nombres de todos los marcos del conjunto actual, así como los corres-pondientes a la ventana principal. Por supuesto, si no has utilizado marcos en tu diseño, visualizar la ventana principal será la única opción que te deje seleccionar.

13 A continuación, encon-trarás la acción Llamar JavaScript, que permi-

te usar el panel Comportamientos para especificar que debe ejecutarse una función personalizada cuando se produzca un evento determinado. Por

tanto, si tienes conocimientos, puedes escribir el código JavaScript por ti mismo o copiar alguno que te intere-se de las diversas bibliotecas de acce-so gratuito que hay en Internet. Por ejemplo, si quieres crear un botón “Atrás”, deberías escribir “if (his-tory.length > 0){history.back()}”.

14 La siguiente acción te resul-tará útil. Se trata de Men-saje emergente y facilita

la creación de una alerta de JavaScript con el mensaje que desees. Dado que este tipo de alertas sólo tienen un bo-

tón (Aceptar), la acción resulta ade-cuada para proporcionar información y no para proponer una elección. Lo único que tendrás que hacer es intro-ducir el texto en el campo Mensaje y hacer click en Aceptar.

15 Normalmente, la opción que viene a continuación, Menú de salto, la encon-

trarás apagada, puesto que para que esté resaltada deberás haber creado uno a través del menú Insertar / Objetos de formulario / Menú de salto. Dreamweaver automáticamente establece un objeto de menú y le ad-junta el comportamiento del Menú de

salto. Así que no tendrás que hacer nada más. Por supuesto, los elementos de éste se editan igual que los de cualquier menú; es decir, seleccionándolo y usando el botón Valores de lista del

Inspector de propiedades. Por si no te acordabas, un menú de salto es un menú emergente de un documento

en el que los internautas pueden esco-ger una serie de opciones vinculadas a otros documentos o archivos.

16 La acción Menú de salto ir está estrechamente re-lacionada con la anterior,

puesto que permite asociar un botón Ir con un menú de salto. Por lo tanto, para utilizar esta acción, debe existir ya un menú de salto en el documento. Así, al hacer click en el botón Ir, se abrirá el vínculo seleccionado. Generalmente, los menús de salto no necesitan este tipo de botones, pues al elegir un ele-

mento, se carga sin necesidad de que el visitante lleve a cabo ninguna otra operación. No obstante, si éste elige el mismo elemento que se encuentra ya seleccionado en el menú de salto, el enlace no se producirá. Por lo tanto,

se puede decir que es una opción se-cundaria, pero que no está mal tenerla en cuenta.

17 El comportamiento Mos-trar menú emergente sirve para crear o editar un

menú emergente de Dreamweaver o pa-ra abrir y modificar un menú emergente

de Fireworks insertado en un documen-to de Dreamweaver. Así, en el cuadro de diálogo que aparezca te encontrarás con cuatro pestañas: Contenido, que permite establecer el nombre, la estruc-tura, el URL y el destino de elementos de menú individuales; Aspecto, para fijar la apariencia del Estado Arriba y del

Estado Sobre del me-nú y definir la selección de fuentes para el texto del elemento del menú; Avanzada, que define las propiedades de las celdas del menú (el alto, el ancho, el color, la sangría del texto y la

duración del período que debe trans-currir antes de que el menú aparezca cuando el usuario mueve el puntero sobre el desencadenante); y Posición, que establece dónde se sitúa el menú en relación con la imagen o el vínculo des-encadenante.

18 La acción Mostrar-Ocul-tar capas te puede resul-tar muy útil para mostrar

información a medida que el visitante vaya interactuando con la página, mos-trando u ocultando capas. Por ejemplo, cuando el internauta pasa el cursor por

encima de la imagen de un animal, se puede mostrar una capa que le ofrezca información sobre la región en la que vive, otra sobre su nombre científico,

otra sobre su alimentación, etc. Inclu-so, esta acción también puede resultar provechosa para desarrollar una capa de carga previa; es decir, una mayor que en un principio oculte el contenido de la página y luego desaparezca cuan-do todos los componentes de la web se han acabado de cargar. Sólo tendrás que seleccionar la capa cuya visibilidad

desea cambiar en la lista Capas con nombre y hacer click en Mostrar, para que aparezca la ca-pa; en Ocultar, para que se esconda; o en Prede-terminada, para restau-rar la visibilidad prede-terminada de la capa.

19 La acción Restaurar ima-gen intercambiada repo-ne el último conjunto de

imágenes intercambiadas a sus archi-vos de origen anteriores. Esta opción se añade automáticamente siempre que se adjunta la acción Intercambiar imagen a un objeto. Así pues, si dejaste



127_50_57_Curso.indd 17 26/8/05 18:00:55

Curso


seleccionado el comando Restaurar al adjuntar Intercambiar imagen, no tendrás que elegir manualmente Res-taurar imagen intercambiada.

20 El último comportamiento que te ofrece Dreamwea-ver es Validar formu-

lario, cuya función es comprobar el contenido de los campos de texto es-pecificados para asegurarse de que el usuario ha introducido el tipo correcto de datos. Lo normal es adjuntar esta acción a campos de texto individuales con el evento “onBlur”, para validar

los campos conforme el usuario vaya rellenando el formulario; o adjuntarla con el evento “onSubmit” para eva-luar varios campos de texto cuando el usuario haga click en el botón Enviar. Al adjuntar esta acción a un formu-

lario, se evita que éste sea enviado al servidor si alguno de los campos es-pecificados contiene datos no válidos. Estos parámetros se fijan en la colum-na de eventos (la de la izquierda) en el panel Comportamientos.

Para validar campos conforme el usuario los rellena en el formulario, selecciona el campo en cuestión en el cuadro de diálogo Validar formulario y elige la opción Obligatorio si éste debe con-tener algún dato. Marca los parámetros Cualquier cosa si el campo es obliga-torio pero no tiene que contener ningún tipo de dato determinado, Dirección de correo electrónico para comprobar si el campo contiene un símbolo "@", Número para comprobar que el campo tiene solamente caracteres numéricos y Número del… al… para asegurarte de que el campo sólo incluye numéricos dentro de un rango determinado.

1 Abrir ventana del navegador 3 Establecer URL 3 Establecer alto y

ancho de la ventana, nombre y atributos

2 Arrastrar capa 3 Básico 3 Seleccionar la capa desplazable 3 Avanzado

3 Desencadenar acción al soltar la capa

3 Cambiar propiedad 3 Tipo de objeto, Objeto con nombre y Propiedad

4 Carga previa de imágenes 3 Examinar 3 Seleccionar imagen

5 Comprobar navegador 3 Enviar a los visitantes a distintas páginas 3

Etiqueta “<body>”

6 Comprobar plug-in 3 Remitir a los visitantes a distintas páginas depen-

diendo de si tienen instalado el plug-in en cuestión

7 Controlar Shockwave o Flash 3 Reproducir, detener, rebobinar o ir a un

fotograma de una película

8 Controlar sonido 3 Hacer que se escuche efecto sonoro con determina-

das acciones

9 Definir texto 3 Definir texto de campo de texto 3 Definir texto de capa

3 Definir texto de marco 3 Establecer texto de barra de estado

10 Establecer imagen de barra de navegación 3 Básico 3 Crear o actuali-

zar una imagen 3 Avanzado 3 Cambiar la apariencia de las imágenes

11 Intercambiar imagen 3 Cambia el atributo “src” de la etiqueta “img”

12 Ir a URL 3 Abrir una nueva página en la ventana actual o en el marco

especificado

13 Llamar JavaScript 3 Especificar una función personalizada con un

evento determinado

14 Mensaje emergente 3 Creación de alertas 3 Sólo botón Aceptar

15 Insertar 3 Objetos de formulario 3 Menú de salto

16 Menú de salto ir 3 Asociar botón Ir con un menú de salto

17 Mostrar menú emergente 3 Contenido 3 Aspecto 3 Avanzada 3

Ajustar posición

18 Mostrar-Ocultar capas 3 Seleccionar la capa 3 Escoger Mostrar,

Ocultar o Predeterminada

19 Restaurar imagen intercambiada 3 Reponer el último conjunto de

imágenes intercambiadas

20 Validar formulario 3 Obligatorio 3 Escoger entre Cualquier cosa,

Dirección de correo electrónico, Número y Número del… al…

Resumiendo...

A lo largo de estas páginas has apren-dido a desarrollar diversos aspectos de tu página web de una forma visual e intuitiva a través del panel de Diseño de Dreamweaver, por lo que en nin-gún momento has tenido que utilizar código HTML. Sin embargo, no está de más tener ciertas nociones básicas de éste para obtener un mayor control de tu sitio y solucionar los posibles pro-blemas que te pudieran surgir. Ésta es una pequeña guía que te orientará, pero en ningún caso debes entender-la como la panacea que te ayudará a “leer” código HTML. Aparte de todo esto, Dreamweaver te será de gran ayuda para entender este lenguaje si trabajas con la opción Dividir acti-vada, cuya función es mostrarte en la

parte superior de la pantalla el código de programación y en la inferior su representación visual.

1 Lo primero que vas a hacer es aprender a aplicar sangría a una línea o sección de código especí-

fica en la página que ya tienes creada, pues esto te ayudará a separar ese códi-go del resto, facilitando su localización.

Además, así comprobarás si todas las etiquetas están equilibradas; es decir, las de apertura tienen sus correspon-dientes de cierre y a la inversa, algo especialmente útil cuando se utilizan múltiples niveles de anidación. Lo que debes hacer es seleccionar la línea o líneas a las que deseas aplicar sangría, desplegar el menú Edición y pulsar Aplicar sangría al código. Si deseas realizar el paso inverso, escoge Anu-lar sangría en el código. Por último, para comprobar si las etiquetas están equilibradas, sitúa el punto de inserción

en el código anidado que deseas comprobar, pulsa en el menú Edi-ción / Seleccionar etiqueta padre. Así se resaltarán las etiquetas de apertura y cierre en el código.

2 El siguiente paso es incluir una nueva etiqueta en la vista Códi-go. Para ello, deberás utilizar

el Selector de etiquetas. En primer lugar, sitúate en el punto de la vista Código en el que quieras insertar la etiqueta. Presiona sobre ese pun-to con el botón derecho del ratón. Cuando te aparezca el menú emer-gente escoge Insertar etiqueta, lo

Trabajar con código HTML

El panel Referencia constituye una he-rramienta de consulta rápida de etique-tas HTML. Proporciona información sobre etiquetas, objetos o estilos específicos con los que se está trabajando en la vista de Código. Para abrirlo, sitúate en la vis-ta Código, selecciona el elemento sobre el que desea información y, en el menú Ventana, escoge Referencia.

Consejo

127_50_57_Curso.indd 18 26/8/05 18:01:00

Dreamweaver incluye una herramien-ta denominada Quick Tag Editor que te servirá para inspeccionar y edi-tar código HTML de una etiqueta en la ventana de Diseño, de forma muy rápida. Una de sus ventajas es que no hace necesario que cambies a la vis-

ta de Código y luego volver a ella al terminar. Para acceder a esta sección tienes que pulsar las teclas Control y T de forma simultánea.

1 Lo primero que debes saber de esta función es que cuenta con tres modos de funcionamiento:

Insertar HTML, Editar etiqueta y Ajustar etiqueta. La selección actual

de la vista de Diseño determina el modo en el que se abre esta sección del progrma. No obstante, el funcio-namiento básico es el mismo en los tres: se abre el editor, se introducen o se editan las etiquetas o atributos y se cierra.

2 La forma de introducir cada uno de estos tres valores varía según la función que permiten

ejecutar. En el primer caso, Insertar HTML, deberás escribir directamente la etiqueta HTML que quieres inser-tar; en el segundo, Editar etiqueta, antes deberás seleccionar la etiqueta que deseas editar. Una vez hecho, se mostrará su código en el editor, don-de podrás modificar lo que conside-res oportuno. En el tercero, Ajustar etiqueta, tendrás que seleccionar antes un texto o un objeto que incluya una etiqueta HTML de apertura o cie-rre, teclear la de apertura y presionar Intro. Ésta se insertará al principio de la selección actual, junto con la correspondiente de cierre al final. Para alternar entre estos tres modos, sólo deberás pulsar repetidamente la combinación de teclas Control+T.

que hará que se abra el Selector de etiquetas. Como verás, en él tienes una columna izquierda con las distin-tas etiquetas en los distintos lenguajes de formato. El que te interesa es HT-ML. En cuanto lo selecciones, te apa-recerán en el apartado derecho todas las que hay disponibles. Para que te orientes sobre la función de cada una de ellas, pulsa en el botón Datos de etiqueta, lo que abrirá una pequeña ventana inferior con una descripción en inglés de cada opción. Selecciona la que quieras y presiona Insertar. Una vez que finalices el proceso no olvides presionar el botón Actuali-

zar situado en el Inspector de pro-piedades para que la vista Diseño se muestre con los nuevos cambios que has introducido.

3 Dreamweaver incorpora una útil función que te permitirá insertar etiquetas según escribas el có-

digo. Por ejemplo, dirígete al final del documento y, allí, entre dos marcas de

párrafo ( y ), escribe “<”. En ese momento verás cómo aparece una ventana emergente con todas las op-ciones de etiquetas que puedes añadir al texto. Sólo tendrás que seleccionar la

que necesites y hacer doble click sobre ella para que aparezca en su lugar.

4 Otra posibilidad que te puede sur-gir es la de tener que editar una etiqueta ya creada. En ese caso,

en el panel izquierdo de la pantalla, se-lecciona el Inspector de etiquetas y, allí, escoge la ficha Atributos. En ese momento verás los atributos de la eti-queta seleccionada en la ventana de do-cumento. Para tenerlos todos en orden alfabético, haz click en el botón Mostrar

vista de lista; es decir, el icono con las letras “A” y “Z” que aparecen junto con una flecha. Allí mismo podrás modificar lo que consideres oportuno.

www.pctoday.es 55


Nº 127

HTML es un lenguaje de formato de texto, lo que significa que los documentos HTML son documen-tos de texto sencillo que tienen etiquetas de formato que indican al navegador cómo debe mostrar el texto. Obligatoriamente, todos los documentos HTML deben contener etiquetas estándar, denominadas “head” y “body”, y todas ellas están compuestas por etiquetas de apertu-ra (representadas así: <head>) y de cierre (con esta estructura </head>).

Etiquetas head. La sección del encabezado (situada entre de eti-quetas "head") sólo contiene el título de la página (situado entre etiquetas "title") y secuencias de comandos de programación, como código JavaScript que implementa una imagen de sustitución en la página. El texto introducido entre <title> y </title> aparecerá en la barra superior de título de la ventana del navegador, no en la página.

Etiquetas body. Todo el texto, las imágenes, las tablas y demás con-tenido deberán situarse entre las etiquetas <body> y </body>. Dentro de éstas encontrarás:

• Las de encabezado, es decir, las etiquetas de “h1” a “h6”. Suelen mostrarse con texto en negrita o más grande que el normal. “h1” es el más grande y “h6”, el más pequeño.

• Las etiquetas de párrafo (p) separan el contenido de texto en párrafos. Dado que los navegadores web ajustan líneas y no tienen en cuenta los saltos de línea, deberás utilizar etiquetas “p” para evitar que los navegadores coloquen todo el contenido del texto junto.

• Las etiquetas de salto de línea (br) imponen saltos de línea en la página en lugar de añadir espacio en blanco adicional como la anterior. Dado que la etiqueta “br” inserta un solo salto de línea, no es necesario incluir una etiqueta de cierre.

• Las etiquetas de imagen insertan imágenes. Siguen el formato <img src=“nombrearchivoimagen”>. Estas etiquetas también pueden incluir atributos width y height (para el tamaño de la imagen), border (para el ancho del borde) y align y valign (para fijar la alineación horizontal y vertical, respectivamente). ■

Las etiquetas estándar

Todos los documentos HTML deben contener unas etiquetas estándar “head” y “body”.

Resumiendo...

1 Sangría 3 Edición 3 Aplicar sangría al código 3 Etiquetas equilibradas

3 Edición 3 Seleccionar etiqueta padre

2 Vista Código 3 Botón derecho del ratón 3 Insertar Etiqueta 3 HTML

3 Escoger una 3 Insertar

3 Insertar etiquetas 3 Escribir “<” 3 Seleccionar una de la ventana

emergente

4 Editar etiquetas 3 Inspector de etiquetas 3 Atributos

▲

Quick Tag Editor

127_50_57_Curso.indd 19 26/8/05 18:01:05

Antes de cargar el sitio en un servidor y dejarlo listo para que los internautas lo visiten, conviene comprobarlo lo-calmente. Es necesario asegurarse de que las páginas tienen la apariencia y el funcionamiento esperado en los na-vegadores de destino, que no hay vín-culos rotos y que las páginas no tardan demasiado en cargarse.

1 Lo primero que deberás verificar es si todos los vínculos funcionan correctamente, teniendo en cuen-

ta que Dreamweaver comprueba sólo los establecidos con documentos del sitio, no con los externos, aunque sí re-copila una lista de ellos. Así pues, para identificar todos los vínculos del sitio, despliega el menú Sitio y elige Com-probar vínculos en todo el sitio. En ese momento aparecerá el cuadro de

diálogo Verificador de vínculos, que te mostrará los vínculos rotos, los vín-culos externos y los archivos huérfanos. Para alternar entre una opción u otra, utiliza el menú Ver. Ahora podrás cote-jar los externos, eliminar los huérfanos marcando cada uno de ellos y luego presionando sobre Supr y Reparar los vínculos rotos.

2 Hablando de éstos, deberás elegir la opción Vínculos rotos en el menú desplegable Ver. Comprue-

ba cómo, al señalar sobre él, aparece un icono de carpeta junto al vínculo roto. Haz click en él para localizar el archivo

con el que deseas establecer el vínculo y pulsa Intro. Por cierto, si hubiera otras referencias rotas a este mismo archivo, aparecería un cuadro de diálogo que te pediría que las repararas. Finalmente, presiona Sí para actualizar todos los documentos de la lista que hacen re-ferencia a este archivo o No, si deseas

actualizar únicamente la referencia ac-tual. A medida que los vínculos se van reparando, sus entradas desaparecen de la lista Vínculos rotos.

3 Una vez que tienes abierta la ventana de resultados y revi-sada la pestaña Verificador

de vínculos, puedes continuar com-probando el sitio web pulsando en el resto de pestañas. La primera es Bus-car, mediante la cual y, a través del cuadro de diálogo que te aparecerá si presionas la flecha verde de la iz-quierda, podrás encontrar y reempla-

Curso

56 www.pctoday.es

3 Un pequeño truco para aplicar los cambios inmediatamente, sin tener que cerrar Quick

Tag Editor, es presionar la tecla Tab cuando hayas escrito o modificado la

etiqueta correspondiente. Verás cómo al instante se materializan los resul-tados en la ventana del documento, igual que si cambias la ventana activa con una pulsación de ratón.

4 Mientras tienes activa la ven-tana Quick Tag Editor, pue-des acceder, simplemente es-

perando unos segundos, al menú de Sugerencias sobre atributos que muestra todos los atributos válidos

de la etiqueta que estás editando o in-sertando. Por cier-to, si Dreamweaver no reconociera la etiqueta que edites, el menú de suge-rencias contendrá todos los atributos reconocibles por la aplicación, gracias a la completa libre-ría que posee.

Nº 127

Comprobar la página

Limpiar código HTML

Dreamweaver incorpora una función interesante llamada Limpiar HTML que permite eliminar etiquetas vacías, combinar etiquetas anidadas y, en general, mejorar códigos HTML desordenados o ilegibles. La encon-trarás en el menú Comandos y en el cuadro de diálogo que te apare-cerá tienes varias opciones:

Etiquetas contenedoras vacías elimina las etiquetas que carecen de contenido. Por ejemplo, “” se consideran etiquetas vacías, algo que ya no sería así si apareciera un texto entre medias de ambas.

Etiquetas anidadas repetidas borra todas las repeticiones de una etiqueta. Por ejemplo, en el código “Esto es lo que realmente quería decir”, las etiquetas “b” que rodean a la palabra “realmente” están repeti-das y se eliminarían.

Comentarios HTML ajenos a Dreamweaver elimina todos los comentarios que no hayan sido insertados por Dreamweaver.

Formato especial de Dreamweaver borra los comentarios que Dreamweaver añade al código para permitir que los documentos se actualicen automáticamente cuando lo hagan las plantillas y los elemen-tos de biblioteca.

Etiqueta(s) específica(s) suprime las etiquetas especificadas en el campo de texto contiguo.

Combinar etiquetas de anidadas, cuando sea posible consolida dos o más etiquetas font cuando éstas controlan el mismo rango de texto. Por ejemplo,

big red se cambiaría a

big red.

Mostrar registro al terminar muestra un cuadro de alerta con detalles acerca de los cambios realizados en el documento inme-diatamente después de concluir la limpieza del código. ■

Con la opción Limpiar HTML podrás mejorar el aspecto del código HTML que esté desordenado o resulte ilegible.

Un comentario es un texto descriptivo que se inserta en el código HTML para explicar algo. Éste sólo aparece en la vista de Código y no se muestra en la página web. Para insertar uno, si-túa el punto de inserción en el lugar deseado y pulsa Insertar / Etiquetas invisibles / Comentario. Su creación genera el código HTML: “<!—Texto del comentario-->”.

Consejo

Resumiendo...

1 Quick Tag Editor 3 Insertar HTML 3 Editar etiqueta 3 3 Ajustar

la etiqueta

2 Control+T 3 Alternar entre los distintos modos

3 Tecla Tab 3 Aplicar los cambios inmediatamente

4 Quick Tag Editor 3 Menú de sugerencias 3 Esperar unos segundos

127_50_57_Curso.indd 20 26/8/05 18:01:12

zar un texto concreto del documento. Funciona como un comando de Word, por lo que sólo tendrás que decirle el tipo de documento que quieres que busque, por qué texto quieres susti-tuirlo y señalar algunas opciones de búsqueda como Coincidir mayús-culas y minúsculas, Palabra com-pleta, Omitir espacio en blanco y Utilizar expresión regular.

4 La siguiente pestaña es Valida-ción y su objetivo es mostrarte si el código HTML incluido con-

tiene errores de etiquetas o de sintaxis. En ese sentido, Dreamweaver puede va-lidar documentos en varios lenguajes, entre ellos HTML, XHTML, ColdFusion

Markup Language (CFML), JavaServer Pages (JSP), Wireless Markup Langua-ge (WML) y XML. De nuevo, tendrás que pulsar en la flecha verde y elegir si quieres validar el documento o todo

el sitio. En ambos casos te aparecerá el mensaje “No se han encontrado errores ni advertencias”, si está todo correcto, o una lista de los fallos de sintaxis hallados.

5 Siguiendo con la opción de va-lidación, el programa te ofrece la posibilidad de establecer sus

preferencias. En ese caso, tendrás que seleccionar Configuración en el menú desplegable que aparece al pre-

sionar en la flecha verde. Esto hará que se abra el cuadro de diálogo de Preferencias, donde podrás mar-car los idiomas que deben utilizarse para realizar la validación, teniendo en cuenta que no podrás seleccionar varias versiones del mismo. Por ejemplo, si eliges HTML 4.0, no podrás escoger tam-bién HTML 3.2 o HTML 2.0. Así pues, selecciona la ver-sión más antigua con la que desees realizar la validación. A continuación, haz click en Opciones y señala los pará-metros de visualización que deseas que se incluyan en el informe y que son: Errores, Adver-tencias, Mensajes personalizados y Errores de anidación. Finalmente, marca Comillas en el texto, si quie-res que Dreamweaver te avise cada vez que se utilicen comillas en el texto del documento; o Entidades en el texto, para que la aplicación te recomiende el cambio de varios caracteres por otros HTML equivalentes.

6 La siguiente pestaña es Revi-sión del navegador de des-tino, cuya función es probar el

código de los documentos para ver si hay etiquetas, atributos, propiedades o

valores que el navegador de destino no acepta. Este parámetro ofrece informa-ción sobre tres niveles de problemas potenciales: Errores (indica código que puede causar un problema visible grave en un navegador concreto, como hacer desaparecer partes de una pági-na), Advertencias (señala una parte de código que no se visualizará correc-tamente en un navegador concreto, pero eso no causará ningún problema de visualización grave) y Mensajes in-formativos (señala código que no es

compatible con un navegador determi-nado, pero que no tiene ningún efec-to visible). Los distinguirás porque el primero aparece junto a un icono rojo; el segundo, amarillo; y el tercero, con forma de bocadillo de cómic.

7 Al igual que pasaba en la pestaña anterior, en ésta también puedes configurar sus propiedades. Di-

rígete a la flecha verde y seleccionar Configuración. Así se abrirá un nuevo

cuadro de diálogo que te ofrece la po-sibilidad de elegir entre varios navega-dores, así como las versiones de cada uno de ellos.

8 La siguiente pestaña, Informes, merece un tratamiento aparte, que lo encontrarás si continúas

leyendo. Mientras tanto, puedes dete-nerte en las opciones Registro FTP y Depuración del servidor. El primer

comando sirve para registrar toda la actividad de transferencia de archivos mediante FTP. Así, si se produce un error mientras envías o recibes un fi-chero con FTP, este apartado te ayudará a determinar el problema. El segundo, en cambio, permite ver información y

reparar la página que hayas creado si has utilizado como ser-vidor de prueba de Dreamweaver la apli-cación ColdFusion, programa de Macro-media que sirve para desarrollar aplicacio-nes web dinámicas. ■

www.pctoday.es 57


Nº 127

En la parte inferior de la ventana de do-cumento figuran el tamaño y el tiempo estimado de descarga de la página ac-tual calculado por Dreamweaver. En es-tos casos, se aplica la regla de los ocho segundos, que dice que un internauta no espera más de ese tiempo a que la página se descargue por completo. Pa-ra establecer las preferencias de tiem-po y tamaño de descarga, ve a Edición / Preferencias y, en Barra de estado, elige una velocidad de conexión para calcular el tiempo de descarga.

Consejo

1 Sitio 3 Comprobar vínculos en todo el sitio 3 Vínculos rotos, Vínculos

externos y Archivos huérfanos 3 Cotejar resultados 3 Eliminar con

tecla Sup

2 Vínculos rotos 3 Señalar vínculo 3 Pulsar en la carpeta 3 Corregir

vínculo 3 Intro

3 Buscar 3 Flecha verde 3 Encontrar y reemplazar textos

4 Validación 3 Flecha verde 3 Elegir entre Validar el documento

o Validar el sitio

5 Establecer preferencias de validación 3 Flecha verde 3 Configuración

3 Elegir lenguaje 3 Seleccionar opciones

6 Revisión del navegador de destino 3 Errores, Advertencias y Mensajes

informativos

7 Propiedades de Revisión del navegador de destino 3 Flecha verde 3

Configuración 3 Elegir navegadores y versiones

8 Registro FTP 3 Determinar problemas en la transferencia de archivos

FTP 3 Depuración de servidor 3 Uso de ColdFusion

Resumiendo...

Comprueba que las páginas funcionan de la forma prevista en los navegadores de destino. Éstas deberán ser legibles y funcionales en aquéllos que no admiten estilos, capas, plug-ins ni JavaScript. Con las páginas que funcionen muy mal en navegadores antiguos puedes utilizar el comportamiento Comprobar navegador del que hemos hablado más atrás.

Consejo

127_50_57_Curso.indd 21 26/8/05 18:01:18

Curso de Dreamweaver

Documents

Transcript of Curso de Dreamweaver