61
Diseño de Páginas Web Avanzado
IMÁGENES
Insertar una imagen
Al insertar una imagen en un documento de Dreamweaver, el
programa genera automáticamente una referencia al archivo en el código
HTML. Para asegurarse de que esta referencia es correcta, el archivo de
imagen deberá estar en el sitio actual. Si no lo está, Dreamweaver le
preguntará si desea copiar el archivo en la carpeta raíz.
62
Diseño de Páginas Web Avanzado
63
Diseño de Páginas Web Avanzado
64
Diseño de Páginas Web Avanzado
Orig base especifica la imagen que debe cargarse antes que la imagen
principal. Muchos diseñadores utilizan una versión de dos bits (blanco y
negro) de la imagen principal porque se carga más rápidamente y ofrece a
los visitantes una idea de lo que van a ver.
65
Diseño de Páginas Web Avanzado
4) Para definir las áreas de mapas de imagen, lleve a cabo una de estas
operaciones:
• Seleccione la herramienta circular y arrastre el puntero sobre la imagen
para crear una zona interactiva circular.
66
Diseño de Páginas Web Avanzado
7) En el campo Alt, escriba el texto que desea mostrar como texto alternativo
en los navegadores de sólo texto. Algunos navegadores muestran este texto
como una descripción de herramienta cuando el usuario detiene el ratón
sobre la zona interactiva.
67
Diseño de Páginas Web Avanzado
68
Diseño de Páginas Web Avanzado
69
Diseño de Páginas Web Avanzado
70
Diseño de Páginas Web Avanzado
6) Haga clic en Aceptar para insertar el código HTML, junto con sus
imágenes, divisiones y Javascript asociados, en el documento de
Dreamweaver.
71
Diseño de Páginas Web Avanzado
72
Diseño de Páginas Web Avanzado
73
Diseño de Páginas Web Avanzado
74
Diseño de Páginas Web Avanzado
75
Diseño de Páginas Web Avanzado
76
Diseño de Páginas Web Avanzado
• Haga clic con el botón derecho del ratón (Windows) o pulse la tecla Control
y haga clic (Macintosh) en la imagen deseada, y seleccione Editar con
Fireworks 4 en el menú contextual.
Dreamweaver inicia Fireworks en el caso de que no esté abierto ya.
77
Diseño de Páginas Web Avanzado
78
Diseño de Páginas Web Avanzado
79
Diseño de Páginas Web Avanzado
ELEMENTOS MULTIMEDIA
Insertar objetos multimedia
Puede insertar un applet de Java, una película QuickTime o
Shockwave, una película o un objeto Flash, un control ActiveX y otros objetos
de audio o vídeo en una página.
Para insertar un objeto multimedia en una página, lleve a cabo una de estas
operaciones:
• Sitúe el punto de inserción en el lugar donde desea insertar el objeto y haga
clic en el botón correspondiente del panel Objetos. Los objetos Shockwave,
ActiveX y Flash tienen botones definidos. Utilice elbotón de plug-in de
Netscape Navigator para insertar películas y archivos de audio QuickTime.
• Arrastre el botón correspondiente desde el panel Objetos hasta el lugar de
la ventana de documento donde desea que aparezca el objeto.
• Sitúe el punto de inserción en el lugar de la ventana de documento donde
desea insertar el objeto. A continuación, elija el objeto correspondiente en el
submenú Insertar > Medio o Insertar > Imágenes interactivas.
80
Diseño de Páginas Web Avanzado
81
Diseño de Páginas Web Avanzado
82
Diseño de Páginas Web Avanzado
Contenido de Flash
La tecnología Flash de Macromedia es la principal solución para la
reproducción de gráficos y animaciones vectoriales. Flash Player está
disponible tanto como plug-in de Netscape Navigator como en formato de
control ActiveX para Microsoft Internet Explorer en el PC, y ya viene
incorporado en las últimas versiones de Netscape Navigator, Microsoft
Windows y America Online. Antes de utilizar los comandos Flash disponibles
en Dreamweaver, le conviene conocer los tres tipos de archivo Flash que
existen.
El archivo Flash (.fla) es el archivo de origen de cualquier proyecto y se crea
en el programa Flash. Este tipo de archivo sólo se puede abrir en Flash, no
en Dreamweaver ni en los navegadores. Puede abrir el archivo en Flash y, a
continuación, exportarlo a SWF o SWT para utilizarlo los en navegadores.
83
Diseño de Páginas Web Avanzado
84
Diseño de Páginas Web Avanzado
85
Diseño de Páginas Web Avanzado
10) Haga clic en Aplicar o Aceptar para insertar el botón Flash en la ventana
de documento.
Sugerencia: Seleccione Aplicar para ver los cambios realizados en la vista de
Diseño. Mientras mantiene el cuadro de diálogo abierto puede continuar
realizando cambios en el botón.
86
Diseño de Páginas Web Avanzado
87
Diseño de Páginas Web Avanzado
88
Diseño de Páginas Web Avanzado
10) En el campo Color fondo, elija un color de fondo para el texto. Utilice el
selector de colores o escriba un valor hexadecimal para la Web (como
#FFFFFF).
12) Haga clic en Aplicar o Aceptar para insertar el texto Flash en la ventana
de documento. Si hace clic en Aplicar, el cuadro de diálogo permanecerá
abierto y podrá previsualizar el texto en el documento.
89
Diseño de Páginas Web Avanzado
Archivo especifica la ruta del archivo del objeto Flash. Haga clic en el icono
de carpeta para localizar un archivo o escriba la ruta correspondiente.
90
Diseño de Páginas Web Avanzado
Calidad establece el parámetro quality para las etiquetas object y embed que
definen el botón. Los valores altos brindan una mayor calidad a la película,
pero requieren un procesador más rápido para reproducirse correctamente
en la pantalla. Baja da prioridad a la velocidad sobre la apariencia, mientras
que Alta antepone la apariencia a la velocidad. Baja automática hace
hincapié en la velocidad, pero mejora la apariencia siempre que sea posible.
Alto automática da prioridad a las dos cualidades, aunque, si es necesario,
sacrifica la apariencia por la velocidad.
Escala establece el parámetro scale para las etiquetas object y embed que
definen el objeto de botón o de texto. Este parámetro define cómo se
muestra la película en el área definida para ella por los valores width y height
. Las opciones son: Predeterminado (mostrar todo), Sin borde y Ajuste
exacto. Mostrar todo hace que toda la película sea visible en el área
especificada, manteniendo la relación de aspecto de la película y evitando la
distorsión. Pueden aparecer bordes a ambos lados de la película. Sin borde
es similar a Mostrar todo, salvo que es posible que se recorten partes de la
película. Con Ajuste exacto, toda la película llena el área especificada, pero
la relación de aspecto de la película no se mantiene y pueden producirse
distorsiones.
91
Diseño de Páginas Web Avanzado
92
Diseño de Páginas Web Avanzado
4) Si lo desea, haga clic en el botón de signo más (+) para añadir un par de
parámetros name=value . Seguidamente, introduzca un nombre para el
parámetro en el campo Nombre y un valor en el campo Valor. Repita este
paso por cada parámetro.
93
Diseño de Páginas Web Avanzado
Películas Shockwave
Shockwave, el estándar de Macromedia para multimedia interactivo en
la Web, es un formato comprimido que permite la descarga rápida de los
archivos de medios creados en Macromedia Director y su reproducción en
los navegadores de uso más frecuente.
94
Diseño de Páginas Web Avanzado
95
Diseño de Páginas Web Avanzado
96
Diseño de Páginas Web Avanzado
97
Diseño de Páginas Web Avanzado
98
Diseño de Páginas Web Avanzado
99
Diseño de Páginas Web Avanzado
solo paso en el panel Historial y podrá deshacerlos con una única operación
Deshacer.
Para alternar entre los distintos modos del Quick Tag Editor:
Con el Quick Tag Editor activo, presione Control+T (Windows) o Comando+T
(Macintosh). El Quick Tag Editor cambiará de modo cada vez que utilice el
método abreviado de teclado, alternando entre el modo Insertar HTML, Editar
etiqueta y Ajustar etiqueta.
100
Diseño de Páginas Web Avanzado
• Quitar Etiquetas vacías elimina las etiquetas que carecen de contenido. Por
ejemplo, <b></b>y <font color="FF0000"></font>se consideran etiquetas
vacías, mientras que la etiqueta <b>en <b>un texto</b>no se considera
vacía.
101
Diseño de Páginas Web Avanzado
102
Diseño de Páginas Web Avanzado
103
Diseño de Páginas Web Avanzado
104
Diseño de Páginas Web Avanzado
documento actual o desde la carpeta raíz del sitio. Hay tres tipos de rutas de
vínculos:
• Rutas absolutas (como http://www.macromedia.com/support/dreamweaver/
contents.html).
• Rutas relativas al documento (como dreamweaver/contents.html).
• Rutas relativas a la raíz (como /support/dreamweaver/contents.html).
Con Dreamweaver puede seleccionar fácilmente el tipo de ruta de
documento para crear los vínculos:
Nota: Utilice el tipo de vínculos que prefiera y con el que se sienta más
cómodo, ya sea relativo al sitio o relativo al documento. En lugar de escribir
la ruta de los vínculos, acceda a ellos a través del botón Examinar para evitar
introducirlos incorrectamente.
Crear vínculos
La etiqueta HTML que crea un vínculo de hipertexto se denomina
etiqueta de punto de fijación o etiqueta a . Dreamweaver crea una etiqueta
de punto de fijación para los objetos, texto o imágenes desde los que se
crean vínculos. Puede crear vínculos con otros documentos y archivos, así
como vínculos con lugares específicos de un documento utilizando la
etiqueta a href . Por ejemplo, si en la ventana de documento selecciona el
texto Página principal y, a continuación, crea un vínculo con un archivo
llamado home. htm, el código HTML del vínculo será el siguiente:
<a href="home.htm">Página principal</a> Si crea un vínculo con un lugar
específico de un documento, cree en primer lugar un punto de fijación con
nombre, como, por ejemplo, a name="MainMenu".
A continuación, cree un vínculo en la página que hace referencia al punto de
fijación con nombre. Por ejemplo, a href="#MainMenu". Antes de crear
vínculos, deberá saber cómo funcionan las rutas relativas al documento, las
rutas relativas a la raíz y las rutas absolutas.
105
Diseño de Páginas Web Avanzado
Administrar vínculos
106
Diseño de Páginas Web Avanzado
107
Diseño de Páginas Web Avanzado
108
Diseño de Páginas Web Avanzado
FORMULARIOS
Objetos de formulario
En Dreamweaver, los tipos de entrada de los formularios se
denominan objetos de formulario. Puede insertar objetos de formulario por
medio de la categoría Formularios del panel Objetos o seleccionando Insertar
> Formulario e Insertar > Objetos de formulario.]
109
Diseño de Páginas Web Avanzado
botones, deben insertarse entre las etiquetas form para que los datos se
procesen correctamente con todos los navegadores.
110
Diseño de Páginas Web Avanzado
Crear un formulario
Un formulario contiene propiedades que son invisibles para el usuario.
Las propiedades especifican cómo se procesa el formulario
111
Diseño de Páginas Web Avanzado
• El botón Enviar, que envía los datos a la secuencia de comandos CGI del
servidor.
Nota: Si intenta insertar un objeto de formulario sin haber creado
previamente el formulario, Dreamweaver presentará el mensaje “¿Añadir
etiquetas de formulario?”Elija Sí para que Dreamweaver cree las etiquetas de
formulario para el objeto.
112
Diseño de Páginas Web Avanzado
Campos de formulario
113
Diseño de Páginas Web Avanzado
114
Diseño de Páginas Web Avanzado
115
Diseño de Páginas Web Avanzado
• Deje el campo vacío para que los usuarios puedan escribir todo el texto que
deseen. Si el texto introducido por el usuario supera el ancho de caracteres
(longitud) del campo, el texto se desplaza.
• Escriba el número máximo de caracteres que el usuario podrá introducir en
el campo. Por ejemplo, puede que desee limitar un campo de edad a tres
dígitos o un campo de contraseña a ocho caracteres. Si el usuario supera el
número máximo de caracteres, el formulario produce un sonido de alerta.
5) En Tipo, seleccione el tipo de campo de texto que desea crear. Para ello,
lleve a cabo una de estas operaciones:
• Elija Una línea para crear un campo de texto de una línea.
• Elija Contraseña para crear un campo de contraseña.
116
Diseño de Páginas Web Avanzado
117
Diseño de Páginas Web Avanzado
118
Diseño de Páginas Web Avanzado
119
Diseño de Páginas Web Avanzado
120
Diseño de Páginas Web Avanzado
121
Diseño de Páginas Web Avanzado
Botones de Formulario
Un botón de formulario de texto es un botón predeterminado que utiliza el
estilo estándar del navegador y que muestra un texto, como Enviar,
Restablecer o Calcular pedido, por ejemplo.
122
Diseño de Páginas Web Avanzado
123
Diseño de Páginas Web Avanzado
Diseño de formularios
Puede utilizar saltos de línea, saltos de párrafo, texto preformateado o
tablas para aplicar formato a los formularios. No puede insertar un formulario
en otro formulario (es decir, superponer etiquetas), pero puede incluir varios
formularios en una misma página.
Cuando diseñe formularios, asigne textos descriptivos a las etiquetas de los
campos para que los usuarios puedan saber a qué están contestando. Por
ejemplo, utilice la etiqueta “Escriba su nombre” para solicitar el nombre del
usuario.
124
Diseño de Páginas Web Avanzado
125
Diseño de Páginas Web Avanzado
Procesar formularios
Los formularios son procesados por la secuencia de comandos o la
aplicación especificada en el atributo action de la etiqueta form . Seleccione
un formulario y mire en el inspector de propiedades cuál es su acción
asociada. Los formularios más simples usan JavaScript o VBScript para
llevar a cabo todo el proceso del formulario en la parte del cliente (en
contraposición al envío de los datos de formulario al servidor para su
proceso). Por ejemplo, al final de la página puede incluirse un pequeño
formulario que contenga solamente dos botones de opción con las etiquetas
Sí y No, junto con un botón Enviar.
126
Diseño de Páginas Web Avanzado
Para usar una función JavaScript en la parte del cliente como acción del
formulario:
1) Seleccione un botón Enviar en un formulario.
127
Diseño de Páginas Web Avanzado
128
Diseño de Páginas Web Avanzado
129
Diseño de Páginas Web Avanzado
130
Diseño de Páginas Web Avanzado
131
Diseño de Páginas Web Avanzado
132
Diseño de Páginas Web Avanzado
Crear informes
Puede ejecutar varios tipos de informes sobre documentos, carpetas y sitios.
También puede ordenar los resultados y obtener información adicional sobre
los resultados seleccionados.
133
Diseño de Páginas Web Avanzado
134
Diseño de Páginas Web Avanzado
8) Haga clic en Guardar informe para guardar el informe como archivo XML.
Los informes se guardan como archivos XML y pueden importarse a un
archivo de plantilla existente. A continuación, podrá importar el archivo de
plantilla a una base de datos u hoja de cálculo para imprimirlo o utilizar el
archivo para mostrar el informe en un sitio Web.
Sugerencia: Después de ejecutar los informes HTML, utilice el comando
Limpiar HTML para corregir los errores notificados.
BIBLIOGRAFÍA
135
Diseño de Páginas Web Avanzado
136