dwmx
104
MÓDULO 6. DREAMWEAVER MX Unidad didáctica 1. Operaciones básicas con Dreamweaver MX . Unidad didáctica 2. Tablas. Formularios. El trabajo en Dreamweaver MX con hojas de estilo. Unidad didáctica 3. Marcos. Capas. Animaciones en Dreamweaver MX: Líneas de tiempo. Unidad didáctica 4. Audio y vídeo en Dreamweaver MX. El paso final: publicación de la página a través del ftp.
-
Upload
ubaldo-puno-quispe -
Category
Documents
-
view
3 -
download
0
description
dreamwewr
Transcript of dwmx
MÓDULO 6. DREAMWEAVER MX
Unidad didáctica 1. Operaciones básicas con Dreamweaver MX .
Unidad didáctica 2. Tablas. Formularios. El trabajo en Dreamweaver MX con hojas de
estilo.
Unidad didáctica 3. Marcos. Capas. Animaciones en Dreamweaver MX: Líneas de
tiempo.
Unidad didáctica 4. Audio y vídeo en Dreamweaver MX. El paso final: publicación de la
página a través del ftp.
MÓDULO 6. DREAMWEAVER MX
Dreamweaver MX es un programa profesional para el desarrollo y mantenimiento de
páginas Web. Aparte de sus muchas distinciones, Dreamweaver MX es una
herramienta que aprovecha la capacidad de las últimas generaciones de exploradores,
facilitando a los diseñadores/as el uso de estructuras avanzadas como las hojas de
estilo en cascada y el HTML dinámico.
Dreamweaver MX es una herramienta desarrollada por diseñadores/as para
diseñadores/as. Elaborado con un método de trabajo que permite trabajar como lo
hacen los profesionales a personas que están comenzando su aprendizaje.
Dreamweaver ofrece también funciones para trabajar con el código, como las que
incluye la vista Código (por ejemplo, colores de código o terminación automática de
etiquetas); material de referencia sobre HTML, CSS, JavaScript, CFML, ASP y JSP; y
un Depurador JavaScript. Además, Dreamweaver ahora incorpora Macromedia
UltraDev, lo que facilita la creación de bases de datos dinámicas mediante lenguajes
de servidor como ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP y PHP.
Dreamweaver se puede personalizar totalmente. Puedes crear tus propios comandos,
escribir código JavaScript para ampliar las posibilidades que ofrece Dreamweaver con
nuevos comportamientos, inspectores de propiedades e informes de sitios.
En resumidas cuentas, es un programa arraigado en el mundo real, reconociendo y
solucionando el problema de la incompatibilidad de comandos de los diferentes
navegadores. Además, te permitirá un control y flexibilidad que nunca antes otro
programa había conseguido. Efectos de sonido, integración de vídeo, animaciones
sofisticadas o páginas interactivas, son sólo algunas de las aplicaciones que puedes
crear y mantener con Dreamweaver MX.
Unidad didáctica 1. Operaciones básicas con Dreamweaver MX
El manejo de Dreamweaver MX requiere un aprendizaje constante y detallado. Aunque
no entraña gran dificultad, el gran número de ventanas que es posible tener en
pantalla puede convertir el trabajo que llevamos a cabo en un verdadero caos. Por
esto, todo aquél que quiera manejar de una manera profesional Dreamweaver MX
debe conocer y manejar a la perfección los conceptos básicos. Además, Dreamweaver
MX es esencial en tu aprendizaje si un día quieres llegar a ser un Webmaster de
calidad.
EN ESTA UNIDAD VAMOS A APRENDER - Qué es Dreamweaver MX.
- Cómo crear un sitio web básico.
- Tratamiento de las fuentes.
- Tratamiento de imágenes.
- Tipos de vínculos.
ESTE ES EL CONTENIDO DE LA UNIDAD 1. ¿Qué es Dreamweaver MX?
2. Ventana principal y menús en Dreamweaver MX
3. Creación de un sitio web
3.1. Direcciones absolutas y relativas
3.2. Abrir documentos
3.3. Guardar documentos
3.4. Cerrar una página
3.5. Salir de Dreamweaver MX
3.6. Configurar un nuevo sitio
3.7. Abrir Sitio
3.8. Modificar Sitio
3.9. Crear un nuevo Archivo o Carpeta desde la ventana Archivos de sitio 4. Añadir texto
5. Añadir imágenes
5.1. Imágenes de sustitución
6. Establecer vínculos
6.1. Mapas de imágenes
7. Crear Barras de Navegación
1. ¿QUÉ ES DREAMWEAVER MX? Dreamweaver MX es un programa de diseño y creación de páginas web. Posee un
amplio abanico de posibilidades creativas y no sólo permite plasmar diseños basados
en los tradicionales marcos o tablas, sino que, además, también permite el diseño y
utilización de capas y líneas de tiempo, dos importantísimos e innovadores elementos
que abren infinitas posibilidades en el campo de la creación web.
Además, sus avanzados menús también nos permiten insertar contenidos activos tales
como vídeo y audio, haciendo de la página web que el alumno/a construya, la
plasmación definitiva de sus intentos por dominar el campo relativo al diseño y
creación de páginas web.
En Windows, la primera vez que se inicia Dreamweaver, aparece un cuadro de diálogo
que permite elegir una disposición para el espacio de trabajo. Si decides cambiar su
apariencia siempre podrás optar por otro espacio de trabajo distinto a través del
cuadro de diálogo Preferencias.
IMAGEN 0
CONSEJO: Utiliza el nuevo interfaz MX, a la larga te resultará más cómodo. Es ideal para
resoluciones de 1024, si tienes un monitor con menos resolución usa la configuración
tradicional
2. VENTANA PRINCIPAL Y MENÚS EN DREAMWEAVER MX La ventana del documento es el área principal de trabajo. Cuando el alumno/a inicie
Dreamweaver MX, verá que se trata principalmente de una superficie en blanco.
Dreamweaver MX posee un sistema de ventanas y barras de herramientas que
facilitan el diseño y creación de páginas web. Estas paletas han de ser conocidas a la
perfección por el alumno/a si no quiere perder gran parte de su tiempo en encontrar
funciones que ha olvidado dónde se encuentran.
TODAS LAS VENTANAS FLOTANTES DE DREAMWEAVER MX PUEDEN VISUALIZARSE A TRAVES DEL MENÚ VENTANA SITUADO EN LA BARRA DE HERRAMIENTAS. TAMBIÉN PUEDEN MOVERSE PINCHANDO EN LA ESQUINA SUPERIOR IZQUIERDA DE LAS VENTANAS, JUSTO DONE HAY UNOS PUNTOS Y MOVERLAS POR LA PANTALLA.
Dreamweaver tiene una serie de paneles que en realidad están formados por
pestañas. El primer panel es el denominado Común. En la versión MX está situada
en la parte superior de la pantalla para ahorrar espacio. Como observareis hay
diferentes paneles, pero empezaremos con el primero.
El panel Común contiene las siguientes funciones:
IMAGEN 01
- Insertar hipervínculo. Se utiliza para crear enlaces bien absolutos o relativos
- Insertar vinculo de correo electrónico. En realidad es un enlace que abre el
outlook y sirve para enviar un correo electrónico.
- Punto de fijación con nombre. Sirve para crear marcadores, es decir enlaces a
puntos de una misma pagina web
- Insertar tabla. Crea una tabla en la posición del cursor.
- Dibujar capa. Crea una capa.
- Insertar imágenes. Se utiliza para insertar gráficos o imágenes, incluyendo GIF´s
animados.
- Insertar marcador de imágenes. Se utiliza para definir la posición de una imagen - Insertar HTML de Fireworks. Coloca un archivo HTML producido por Fireworks en
el punto de inserción.
- Insertar flash. Inserta una película flash en la posición del cursor. Aparecerá un
cuadro de diálogo que nos permitirá localizar un archivo SWF.
- Insertar imagen de sustitución. Permite insertar una imagen que cambia cuando el
puntero pasa sobre ella, mostrando una segunda imagen que la sustituye. - Barra de navegación. Inserta una serie de imágenes para emplearlas en la
navegación de un sitio. - Regla horizontal. Coloca una regla horizontal en el punto de inserción.
- Fecha. Coloca la fecha actual en el punto de inserción. Aparecerá un cuadro de
diálogo en el que podrá especificar un formato para la fecha e indicar si Dreamweaver
MX actualiza la fecha automáticamente cada vez que guardes el archivo.
- Datos tabulares. Coloca en el punto de inserción una tabla con los datos de otro
archivo (como un archivo exportado de Microsoft Excel).
- Comentario. Sirve para insertar un comentario en la pagina que no se verá en el
navegador
- Selector de etiquetas. Nos permite ir rápidamente a una etiqueta en cuestión.
un objeto Generator, proporcionando contenido dinámico a tu página.
PESTAÑA DE DISPOSICIÓN. La siguiente pestaña en la misma paleta es la de disposición. Si pinchamos en ella nos
permite seleccionar un modo de visualización entre dos posibles: Estándar o
Disposición. La principal diferencia consiste en que si seleccionamos la vista de
Disposición, podremos seleccionar las herramientas de la sección Disposición.
Observad que si pinchais en un boton aparece activa a la derecha la opción elegida.
En la imagen anterior nos encontramos en vista de disposición y se activan dos
botones más:
- Dibujar celda de disposición. nos permite dibujar celdas de tabla individuales en la
vista de Diseño de la ventana de documento. Estas celdas nos ayudarán a bloquear la
disposición de la página. Por ejemplo, podemos dibujar una celda en la parte superior
de la página para insertar un menú, en la parte derecha para insertar submenús o en
un lado para presentar contenido.
- Dibujar tabla de disposición. nos permite dibujar tablas completas en la vista de
Diseño de la ventana de documento.
Como veréis existen más pestañas pero ya las iremos viendo según sigamos este
manual.
Justo debajo de esta ventana de paneles aparece una barra de herramientas:
imagen 3 Lo importante aquí son los tres primeros botones que son las tres vistas de
dreamweaver:
• Vista en modo de código: Muestra el código fuente HTML.
• Vista en modo de código y diseño: Muestra el código fuente y también la
vista WYSIWYG (siglas de lo que ves es lo que obtienes en ingles)
• Vista de diseño: Es el entorno visual normal de dreamweaver
4 Vista en modo de código y diseño
NOTA: EN MUCHAS OCASIONES ES MUY INTERESANTE VER EL CODIGO HTML
MIENTRAS TRABAJAS EN UN MODO VISUAL PARA HACER ALGUNAS
MODIFICACIONES
Opciones de vista de código
Puedes modificar las propiedades de la vista de codigo. Para ello debes ir a Ver
Opciones de vista de código
Es interesante por ejemplo dejar marcado Número de líneas para poder fácilmente ir a
la línea en cuestión cuando en un futuro trabajes con código javascript, asp, etc.
04b ver los números de línea en vista de código
Accediendo a la ayuda O’Reilly
Dreamweaver posee la ayuda O’Reilly que ofrece una buena referencia de html,
estilos y javascript.
Para conseguir acceder a la ayuda. En vista de código, es decir viendo en codigo html,
seleccionamos una etiqueta y luego hacemos clic en referencia del menú emergente.
Es decir vamos a la etiqueta html, botón derecho y la opción Referencia
04c y 04d La ayuda O´Reilly
La tercera ventana más importante para el perfecto manejo de Dreamweaver MX es
Propiedades. Ésta, debido a sus peculiaridades, será explicada en las siguientes
unidades didácticas.
005 VENTANA DE PROPIEDADES
3. CREACIÓN DE UN SITIO WEB 3.1. Direcciones absolutas y relativas Existen tres tipos de vínculos HTML o URL: de direcciones absolutas, direcciones
relativas a documentos y direcciones relativas a directorios raíces.
Una dirección absoluta es la que se conoce como URL, la cual especifica el tipo de
protocolo, el nombre del dominio, la ruta de acceso y el nombre del archivo. Se usan
en vínculos a páginas ubicadas en otros servidores. Tienen un formato similar al
siguiente:
http://www.cedeco.com/DreamweaverMX/index.htm Por su parte, las direcciones relativas omiten uno o varios elementos de los que
constan las direcciones absolutas. Las direcciones relativas implican que el directorio
de la página HTML actual es el punto de partida de la búsqueda. Si estuviésemos
usando direcciones absolutas, por ejemplo, para establecer un vínculo entre un botón
de mi página principal (index.htm) y otra página diferente (digamos,
comportamientos.htm) ubicada en el mismo directorio, tendríamos que usar el
siguiente vínculo:
http:// www.cedeco.com/Dreamweaver MX/comportamientos.htm Pero como ambas páginas se encuentran en el mismo directorio, bastará con que
utilicemos la siguiente dirección relativa al documento:
comportamientos.htm Al igual que las anteriores, las direcciones relativas a directorios raíces omiten toda
información referente al protocolo y dominio del servidor, pero sí incluyen la ruta de
acceso. Esto es debido a que un servidor Web puede contener más de un sitio a la
vez. De esta forma, comienzan con una barra seguida del nombre del directorio:
./juguetesvarios/comportamientos.htm
comprueba que dominas el tema 1. Di si las siguientes direcciones son absolutas, relativas a documento o relativas a directorios raíces
a) jugadores.htm b) www.casarural.com/navarra/precios.htm c) /floristería/rosas.htm d) musica.htm
3.2. Abrir documentos Para abrir un archivo debes hacer lo siguiente:
- Selecciona la opción Abrir del menú Archivo o pulsa las teclas Control+O
- Selecciona el archivo deseado y haz clic sobre el botón Abrir.
006 Abrir documentos
3.3. Guardar documentos Para guardar un archivo debes hacer lo siguiente:
- Selecciona el comando Guardar del menú Archivo o pulsa las teclas Control+S.
- Introduce el nombre del archivo y haz clic sobre el botón Guardar.
Todos los archivos se guardan por defecto con la extensión .htm. Para guardar el
archivo con una extensión diferente, deberás seleccionarla en el cuadro de lista
despegable Guardar como archivos de tipo.
3.4. Cerrar una página Para cerrar una página haz lo siguiente:
- Selecciona el comando Cerrar del menú Archivo o pulsa Control+W.
3.5. Salir de Dreamweaver MX Para salir de Dreamweaver MX haz lo siguiente:
- Selecciona el comando Salir del menú Archivo o pulsa Control+Q.
3.6. Configurar un nuevo sitio
En los puntos anteriores hemos aprendido a trabajar con páginas web independientes.
En este apartado vamos a ver cómo crear un sitio web desde cero. Crear un sitio web
nos permite tener todos nuestros archivos organizados para posteriormente subirlos a
nuestro servidor.
Para crear un sitio:
- Selecciona el comando Sitio Nuevo del menú Sitio.
- En el cuadro de diálogo Definición de Sitio selecciona la categoría Datos Locales.
- En el campo Nombre del sitio, introduce un nombre para el sitio. El nombre del sitio
aparece en la ventana Sitio y en el submenú Sitio-Abrir sitio. Utiliza el nombre que
desees, ya que no aparecerá en el navegador y sólo nos servirá de referencia para
trabajar con él.
- En el campo Carpeta raíz local, especifica la carpeta del disco duro en la que deseas
almacenar los archivos. Cuando creemos vínculos Dreamweaver MX tomará esta
carpeta como raíz. Haz clic en el icono de carpeta para examinar y seleccionar la
carpeta o introduce una ruta y un nombre de carpeta en el campo de texto. Si aún no
existe la carpeta raíz local, la puedes crear desde el cuadro de diálogo examinar
archivos.
- Por último, marcamos las opciones Actualizar lista archivos locales autom. y Caché,
con esta última opción conseguiremos mejorar la velocidad de las tareas de
administración de vínculos y sitios.
El resto de las opciones las veremos más adelante. Una vez creado el sitio se abrirá
automáticamente la ventana Archivos del sitio que nos permite gestionar todos los
archivos y carpetas.
007 Definición del sitio
3.7. Abrir Sitio Para abrir un sitio web creado en Dreamweaver MX tenemos que seguir los siguientes
pasos:
- Selecciona el comando Abrir Sitio del menú Sitio.
- Desde esta opción podrás elegir cualquiera de los sitios que previamente hayas
definido. Una vez seleccionado el sitio se abrirá la ventana Archivos del sitio.
3.8. Modificar Sitio Si una vez que tenemos creado un sitio queremos modificar alguna de las opciones,
seleccionaremos la opción Definir Sitio del menú Sitio, automáticamente se nos abrirá
el cuadro de diálogo Definir Sitio, donde tendremos que seleccionar el sitio a modificar
y pulsar Editar.
3.9. Crear un nuevo Archivo o Carpeta desde la ventana Archivos de sitio Para crear un nuevo archivo o carpeta desde el Gestor de Archivos de Dreamweaver
MX tendremos que seleccionar la opción Nuevo Archivo o Nueva Carpeta del menú
Archivo.
4. AÑADIR TEXTO El texto de la página web que el alumno/a vaya a crear condicionará en gran medida la
apariencia de su página. La elección del tipo, el tamaño y el color, definirán el atractivo
de tu creación para todas las personas que decidan visitarla. Para ello, Dreamweaver
MX posee una gran variedad de herramientas que te permitirán manipular a tu antojo
la apariencia de tu sitio web.
El primer paso debe ser la elección del tipo de fuente. Para ello debes acudir al
Inspector de Propiedades.
- Haz clic sobre el menú correspondiente al tipo de fuente.
- Selecciona la fuente deseada de entre las que se encuentran en la lista.
O también:
- Haz clic sobre el menú Texto y selecciona el comando Fuente.
- Selecciona la fuente deseada.
008 Propiedades del texto
NOTA: LA PALETA PROPIEDADES TE VA A OFRECER EN TODO MOMENTO LOS
ATRIBUTOS DEL OBJETO QUE ESTÉS UTILIZANDO O QUE HAYAS
SELECCIONADO. PARA VERLA, SÓLO TIENES QUE SELECCIONARLA EN EL
MENÚ VENTANA. ESTA PALETA SE PUEDE MINIMIZAR PINCHANDO EN LA
FLECHITA JUSTO AL LADO IZQUIERDO DEL NOMBRE PROPIEDADES, LA BARRA
SE MINIMIZA. SI PINCHAMOS EN LOS PUNTOS JUSTO AL LADO DE LA FLECHA Y
MANTENEMOS EL BOTON IZQUIERDO DEL RATON PULSADO, LA PODEMOS
MOVER A DONDE QUERAMOS DEL ESCRITORIO
009 Expansión y contracción de la paleta propiedades
El segundo paso que debes dar para decidir la apariencia de la fuente es el tamaño
que quieres para la misma. Podemos hablar de tamaño relativo y tamaño absoluto
(que es más sencillo de usar y puede incluirse en el código HTML).
El tamaño relativo puede asignarse de la siguiente manera:
- Selecciona el texto o sitúa el cursor donde deseas que comience el nuevo tamaño.
- Abre el cuadro de lista despegable Tamaño de texto en el Inspector de propiedades.
- Selecciona un valor entre +1 y +7 o entre –1 y –7.
Por otro lado, el tamaño absoluto puede ser asignado de dos maneras:
- Selecciona el texto.
- Abre el cuadro de lista despegable Tamaño de texto en el Inspector de propiedades.
- Selecciona un valor de 1 a 7.
O también.
- Selecciona el texto.
- Ejecuta el comando Tamaño del menú Texto y selecciona un valor del 1 al 7 o el
tamaño Predeterminado (que es un valor 3).
El color de la fuente puede ser modificado de dos maneras diferentes. El Inspector de
propiedades incluye un cuadro de texto en el que podrás indicarlo, dándonos la opción
de seleccionarlo directamente en el cuadro Color. Pero, si se prefiere, también puede
seleccionarse usando comandos de menú:
- Ejecuta el comando Color del menú Texto y selecciona el que prefieras en el cuadro
Color.
10 Definición del color de texto
Alinear el texto y hacerlo de forma adecuada puede hacer bastante por la apariencia
de tu diseño web. Hay varios métodos. Para usar los menús debes hacer lo siguiente:
- Selecciona el comando Alinear del menú Texto.
- Selecciona la alineación que prefieras (izquierda, centro o derecha).
También se puede hacer a través del Inspector de Propiedades. En la parte superior
derecha verás tres iconos formados exclusivamente por líneas rectas. Haz clic sobre
tu preferencia (ya sea la alineación izquierda, centro o derecha) y verás que tu texto se
alinea según el icono elegido.
Para Sangrar párrafos, utiliza los iconos que se encuentran en la parte inferior
derecha del Inspector de Propiedades:
- Selecciona el párrafo que quieres sangrar.
- Haz clic en el icono Sangría de texto para sangrar tu párrafo.
O bien:
- Haz clic sobre el icono Anular sangría de texto para anular tu sangría.
comprueba que dominas el tema 2. - Escribe tres párrafos de tres líneas cada uno. - Selecciona un tipo de fuente diferente para cada uno de ellos. - Selecciona un color de fuente diferente para cada uno de ellos. - Sangra el segundo párrafo. - Alinea el tercer párrafo a la derecha. - Guarda el documento y nombra el archivo como parrafo. - Cierra el documento y vuélvelo a abrir.
5. AÑADIR IMÁGENES Existen dos formatos gráficos capaces de cumplir con la normativa establecida en
Internet para su perfecta visualización: GIF y JPEG.
El formato GIF permite ofrecer imágenes con fondos transparentes, utilizando una
paleta de 256 colores.
El formato JPEG ofrece millones de colores por píxel. Cuanto mayor sea la
compresión de este tipo de imagen, menor será su resolución. El formato JPEG no
permite las transparencias.
También se ha creado en los últimos tiempos el formato PNG. Es el que mejor calidad
de transparencia tiene y ofrece la representación progresiva de las imágenes de un
modo mucho más rápido que las dos anteriores. El problema es que versiones
antiguas de los navegadores no pueden visualizarlo.
Para insertar una imagen, tenemos varias posibilidades:
- En el panel Objetos, selecciona el icono Insertar imagen.
- Haz clic sobre el menú Insertar y seleccione el comando Imagen.
- Pulsa las teclas Control+Alt+I.
En todos estos casos, te aparecerá el cuadro Seleccionar origen de imagen. Cuando
esto suceda haz lo siguiente:
- Selecciona el archivo correspondiente a la imagen que quieres insertar.
- Haz clic sobre el botón Seleccionar.
011 Selección de imágenes
En la mayoría de las ocasiones, las imágenes que insertas no tienen la apariencia que
desearías que tuviesen. Para modificar las imágenes debemos trabajar con el
Inspector de Propiedades.
La anchura y la altura son dos atributos muy importantes. Para modificar dichos
atributos haz lo siguiente:
- Selecciona la imagen que deseas modificar haciendo clic sobre ella.
- En el Inspector de Propiedades, introduce los valores de tamaño que creas
convenientes en las casillas An (anchura) y Al (altura).
También puedes hacer lo siguiente:
- Selecciona la imagen que deseas modificar haciendo clic sobre ella.
- Sitúa el cursor sobre cualquiera de los vértices que aparecen en los bordes de la
imagen hasta que aparezca una flecha de doble sentido.
- Haz clic y arrastra el ratón hasta el punto deseado.
Los márgenes se utilizan para ajustar la cantidad de espacio en blanco existente
alrededor de la imagen. Para ello haz lo siguiente:
- Selecciona la imagen a la que desees aplicar los espacios en blanco haciendo clic
sobre ella.
- Introduce los valores deseados de espacio en blanco que deseas alrededor de la
imagen en los cuadros de texto V (parte superior e inferior de la imagen) y H (parte
izquierda y derecha) del Inspector de propiedades.
012 Propiedades de la imágen
Si deseas nombrar tus imágenes para una mejor identificación, sigue los siguientes
pasos:
- Selecciona la imagen a la que deseas poner nombre haciendo clic sobre ella.
- Haz clic sobre el cuadro de texto situado a la izquierda del Inspector de propiedades
y que está al lado de la imagen en miniatura.
- Introduce el nombre que quieres darle a la imagen.
Cuando las imágenes son de reducido tamaño, es recomendable insertar bordes
para distinguir mejor una imagen de otra. A la hora de añadir borde a tus imágenes
sigue los siguientes pasos:
- Selecciona la imagen a la que quieres añadir borde haciendo clic sobre ella.
- En el Inspector de propiedades, en el cuadro de texto Borde, introduce un número
absoluto para definir el grosor del borde.
El color de borde se asigna según el color del texto predeterminado de la página.
Si deseas cambiar la alineación horizontal de la imagen en tu página, sigue los
mismos pasos que seguiste para alinear el texto.
Para cambiar la alineación vertical: - Selecciona la imagen haciendo clic sobre ella.
- Haz clic sobre el cuadro de texto despegable Alinear del Inspector de propiedades.
- Elige la opción que más te guste para tu imagen.
5.1. Imágenes de sustitución
Las imágenes de sustitución son hoy uno de los efectos más populares entre los
diseñadores de páginas web. El efecto que produce es que cuando se sitúa el cursor
sobre la imagen, se muestra otra diferente. El objeto Imagen de sustitución que
aparece al situar el cursor sobre la primera imagen, desaparece al desplazar el cursor
fuera.
Para añadir una imagen de sustitución en tu página web sigue estos pasos:
- Sitúa el cursor donde quieres que aparezca la imagen de sustitución.
- Selecciona el comando Imagen de sustitución del menú Insertar o haz clic sobre el
icono Insertar imagen de sustitución de la paleta Objetos. Verás que aparece el cuadro
de diálogo Insertar Imagen de sustitución.
- Introduce ahora en el cuadro de texto Imagen original la ruta de acceso a la imagen
que prefieras. También puedes hacer clic sobre el botón Examinar para seleccionar la
imagen.
13 Imagen de sustitución
- Introduce en el cuadro de texto Imagen de sustitución la ruta de acceso a la imagen
que se mostrará cuando situemos el ratón sobre la Imagen original. También puedes
hacer clic sobre el botón Examinar para seleccionar la imagen.
- Especifica, si lo deseas, un vínculo para la imagen en el cuadro de texto Al hacer clic,
ir a URL. Puedes hacer clic sobre el botón Examinar para seleccionar el archivo de
destino.
- Haz clic sobre el botón Aceptar cuando hayas terminado.
comprueba que dominas el tema
3. - Inserta una imagen. - Selecciónala y modifica su tamaño con los dos métodos que hemos visto antes. - Inserta un borde de tamaño 2. - Inserta márgenes de tamaño 4 para V y de tamaño 2 para H. - Nombra la imagen en el cuadro de propiedades. - Guarda el documento y nombra como prefieras al archivo. - Cierra el documento y vuélvelo a abrir.
6. ESTABLECER VÍNCULOS
En los anteriores puntos de esta primera unidad didáctica de Dreamweaver MX han
sido descritas las utilidades básicas que son necesarias para crear un nuevo sitio web.
¿Pero cómo enlazar las distintas páginas que poco a poco vayas diseñando? Muy
fácil: a través de los vínculos.
Es muy común el asignar vínculos a palabras, frases o imágenes. Una vez asignado,
deberás visualizar el vínculo en el explorador, ya que Dreamweaver MX no lo permite.
PARA VER CÓMO QUEDA TU SITIO WEB EN EL EXPLORADOR, SELECCIONA EL
MENÚ ARCHIVO Y HAZ CLIC SOBRE VISTA PREVIA EN EL EXPLORADOR.
APARECERÁ UNA NUEVA VENTANA DONDE PODRÁS VISUALIZAR TU DISEÑO
TAL Y COMO APARECERÁ EN LA RED.
Crear un vínculo en Dreamweaver MX es muy sencillo, sólo tendrás que seguir los
siguientes pasos:
- Selecciona el texto, la imagen o el objeto al que quieres vincular el enlace.
- Ahora introduce la dirección URL en el cuadro de lista despegable Vínculo del
Inspector de propiedades de una de las siguientes formas:
- Escribe la dirección URL directamente en el cuadro de lista despegable Vínculo.
- Selecciona el icono con forma de carpeta situado a la derecha del cuadro de lista
despegable Vínculo para abrir el cuadro de diálogo Seleccionar archivo, donde podrás
tomar como vínculo el archivo deseado.
Un tipo especial de vínculo es el anclaje (o puntos de fijación). El uso de este tipo de
vínculos es muy común dentro de Internet. La principal diferencia con los vínculos
comentados en este mismo apartado es que los anclajes sirven para desplazarse a lo
largo de una misma página. Se pueden insertar en una misma página Web el número
de anclajes que se quiera.
14 Insertar un punto de fijación con nombre
Por ejemplo, supón que tenemos tres textos para visualizar en nuestra página:
poesía1, poesía2 y poesía3. ¿Qué podemos hacer para que nuestro visitante vea la
poesía3 de forma rápida? Muy sencillo: insertar un anclaje. Haz lo siguiente:
- Sitúa el cursor donde desees insertar el anclaje o punto de fijación.
- Pincha en el menú Insertar y selecciona la opción Punto de fijación con nombre.
- En el cuadro de diálogo Insertar punto de fijación con nombre escribe en el cuadro de
texto Nombre el nombre del anclaje (poesía1, poesía2...). Cuando pulses Intro,
Dreamweaver MX situará el punto de fijación en la posición del cursor y abrirá el
Inspector de propiedades del punto de fijación.
Una vez situados los puntos de anclaje en el documento, podrás crear los vínculos a
éstos. Sigue estos sencillos pasos:
- Selecciona el texto o imagen a la que quieres vincular el enlace.
- Escribe el símbolo (#) en el cuadro de texto Vínculo del Inspector de propiedades,
seguido del punto de fijación al que hará referencia. Por ejemplo:
#poesía3
- Pulsa Intro.
Ahora, cuando visualices en el explorador la página, verás como al pulsar el vínculo te
desplazarás automáticamente al punto de anclaje correspondiente.
Vínculos de correo electrónico
Uno de los procesos más habituales en el diseño de páginas web es establecer un
vínculo de correo electrónico para que el navegante que lo desee pueda contactar
contigo o transmitirte algún tipo de información. Para establecer un vínculo de correo
electrónico, haz lo siguiente:
- Abre el menú Insertar y haz clic sobre Vínculo de correo electrónico o selecciona el
icono Insertar vínculo de correo electrónico en la paleta Objetos. Aparecerá la ventana
Insertar vínculo de correo electrónico.
- Escribe en el cuadro Texto el enunciado que quieres que actúe como vínculo hacia tu
correo electrónico (normalmente se utiliza simplemente la palabra e- mail).
- En el cuadro de texto Correo electrónico escribe la dirección de correo a la cual
deseas que te llegue la información que te manden los navegantes.
- Pulsa el botón Aceptar. Ahora aparecerá subrayado en la pantalla el enunciado que
has escrito en el cuadro Texto y que a partir de ahora es tu vínculo de correo
electrónico.
15 Insertar un vínculo de correo electrónico
6.1. Mapas de imágenes Crear vínculos de la forma que acabas de ver está muy bien, pero puede ser que tus
necesidades sean otras. Por ejemplo, imagínate que tienes una imagen con un mapa
de España y que quieres que cada provincia sea un vínculo que lleve a una página
diferente. ¿Cómo puedes hacerlo? La respuesta es con los mapas de imágenes.
Para ver cómo se pueden insertar este tipo de vínculos haz lo siguiente:
- Busca en www.google.com mapa + europa y te descargas el mapa que mas te guste,
luego inserta la imagen en dremwaver.
- Selecciona la imagen y abre el Inspector de propiedades.
- A la izquierda del inspector verás la Zona interactiva rectangular, la Zona interactiva
oval y la Zona interactiva poligonal. Selecciona la Zona interactiva oval haciendo clic
sobre ella.
016 Mapas de imágenes
- Sitúa el cursor encima de Dinamarca, haz clic y arrastra el cursor hasta que cubra
con un círculo aproximado la superficie del mismo. Ahora verás sobre este país un
círculo azul claro.
- Si deseas recolocar la zona interactiva, pincha el Puntero que se encuentra al lado
de las zonas interactivas en el Inspector de propiedades. Después, pincha en la zona
interactiva que has situado en la imagen y arrástrala hasta la nueva posición.
- Haz lo mismo ahora con la Península Ibérica pero esta vez con la herramienta de
cuadrado
- Para nombrar el mapa, escribe el nombre que desees en Mapa, el cuadro de texto
que se encuentra sobre las zonas interactivas del Inspector de propiedades.
17 Propiedades de la zona interactiva del mapa de imágenes
- Para insertar el destino del vínculo pincha una vez sobre la zona interactiva.
Aparecerá el cuadro de propiedades de la zona interactiva. En el cuadro Vínculo
escribe el nombre del archivo destino del vínculo o si lo prefieres, selecciónalo
pinchando sobre el icono con forma de carpeta.
- En el cuadro de texto Alt puedes introducir un texto que aparecerá como indicación
cuando el usuario mueva el cursor sobre esa área.
.- Selecciona el cuadro de texto Destino y después una uno de las siguientes opciones
de destino de la lista desplegable:
- _blank, abre el vínculo en una nueva ventana del explorador y mantiene la
ventana actual disponible.
- _parent, abre el vínculo en el conjunto de marcos “padre” (si lo hay) del marco
actual.
- _self, abre el vínculo en el marco actual, sustituyendo su contenido.
- _top, abre el vínculo en el conjunto de marcos más exterior de la página Web
actual, sustituyendo todos los marcos.
PUEDES INCLUIR EN UNA IMAGEN TANTAS ZONAS INTERACTIVAS COMO
DESEES.
DEBE QUEDARTE CLARO
- Dreamweaver MX es el programa de diseño y mantenimiento de páginas web más
completo que existe.
- Debes comprender a la perfección los conceptos de esta primera unidad didáctica
para saber en todo momento el manejo de las ventanas flotantes y sus utilidades.
RECUERDA ESTAS PALABRAS Direcciones absolutas: es conocida como URL y especifica el tipo de protocolo, el
nombre del dominio, la ruta de acceso y el nombre del archivo.
Direcciones relativas: omiten uno o varios elementos de los citados en las
direcciones absolutas.
Inspector de propiedades: ventana flotante que te va a permitir modificar las
propiedades de la mayoría de los elementos que insertes en Dreamweaver MX.
Conocer su funcionamiento es indispensable para un buen manejo de Dreamweaver
MX.
Ventanas flotantes: sistema de ventanas movibles que te permitirán insertar y
modificar la mayoría de los elementos de Dreamweaver MX. Puedes visualizarlas a
través del menú Ventana.
COMPRUEBA QUE DOMINAS EL TEMA-SOLUCIONES 1.
a) Dirección relativa a documento
b) Dirección absoluta
c) Dirección relativa a un directorio raíz
d) Dirección relativa a documento.
Unidad didáctica 2. Tablas. Formularios. Hojas de estilo Si en la unidad anterior has aprendido los conceptos básicos para dar tus primeros
pasos en Dreamweaver MX, en las páginas siguientes aprenderás a manejar las
herramientas que harán de tu página un sitio con verdadero aire profesional.
Las tablas y los formularios son utilizados por los diseñadores/as para crear sitios web
impactantes e interactivos. Las enormes posibilidades que ofrecen estas herramientas
a la hora de crear tus sitios web se conjugan con su facilidad de manejo.
Además, las hojas de estilo te van a permitir modificar los atributos de un gran número
de páginas de tu sitio con un solo clic de ratón.
EN ESTA UNIDAD VAMOS A APRENDER - Cómo crear un sitio web con aspecto profesional
- Insertar y modificar tablas
- Insertar formularios y sus utilidades
- Utilidades de las hojas de estilo
ESTE ES EL CONTENIDO DE LA UNIDAD 1.Tablas
1.1. Insertar tablas
1.2. Modificar tablas
1.3. Trabajo con las propiedades de tabla
2. Disposición de Páginas
2.1. Dibujar celdas y tablas de disposición
2.2. Añadir contenido a una celda
2.3. Mover y cambiar el tamaño de celdas y tablas de disposición
2.4. Aplicar formato a una celda de disposición
2.5. Aplicar formato a tablas de disposición
3. Formularios
3.1. Insertar formularios
3.2. Crear elementos de formulario
4. Hojas de estilo
4.1. Aplicar un estilo CSS personalizado (clase)
4.2. Los estilos y sus atributos
4.3. Crear y establecer vínculos con una hoja de estilos CSS externa
1. TABLAS
Es muy habitual que las tablas sean la columna vertebral de una página Web. El
método de arrastrar y soltar que te permite controlar el tamaño de la tabla, la sencilla
organización de filas y columnas y otras posibilidades, harán que termines el trabajo
en el tiempo más corto posible.
De esta forma, casi todas las propiedades de las tablas pueden ser controladas
mediante la interfaz de pulsa y arrastra de Dreamweaver MX.
1.1. Insertar tablas Para insertar una tabla de Dreamweaver MX en la posición del cursor, usa uno de los
tres métodos siguientes:
- Selecciona el botón Insertar tabla de la barra de herramientas Objetos.
- Ejecuta el comando Tabla dentro del menú Insertar.
- Usa el acceso rápido mediante el teclado: Control+Alt+T.
A continuación te aparecerá el cuadro de diálogo Insertar tabla. Si no estás seguro del
número de filas o columnas que vas a necesitar, introduce un número aproximado.
Más tarde, podrás añadir o quitar elementos sin ningún problema.
Por defecto, la tabla está configurada para ocupar el 75 por ciento de la ventana del
explorador. Puedes alterar este porcentaje cambiando el valor de la celda Ancho.
18 Insertar tabla
1.2. Modificar tablas
La mayoría de las modificaciones de las tablas se lleva a cabo con el Inspector de
propiedades. Dreamweaver MX te ayuda a controlar los parámetros básicos (anchura,
borde y alineación) y proporciona atributos para otras propiedades útiles de una tabla,
tal y como veremos a continuación.
Para seleccionar una tabla entera tienes varios métodos:
- Ejecuta el comando Seleccionar tabla dentro del menú Tabla que se encuentra en el
menú despegable Modificar.
- Ejecuta el comando Seleccionar todo que se encuentra en el menú despegable
Edición o usa el acceso rápido con el teclado, Control+A.
- Haz clic con el botón derecho dentro de la tabla para mostrar el menú acceso rápido
y escoge Seleccionar tabla dentro de Tabla.
Para seleccionar con el ratón, escoge una de estas técnicas:
- Haz clic sobre la base o sobre el borde derecho de la tabla. También puedes hacer
clic sobre cualquier punto a lo largo del borde de la tabla cuando el cursor se convierte
en una flecha de cuatro lados.
De todas formas, de cualquier modo que selecciones la tabla, ésta será rodeada por
un borde negro con controladores de tamaño en el borde derecho, en el borde inferior
y en la esquina inferior derecha.
Para seleccionar una fila o columna sólo tienes que hacer lo siguiente:
- Sitúa el cursor sobre la columna o a la izquierda de la fila que desees seleccionar.
- Mueve el cursor lentamente hacia la tabla, cuando el cursor se convierta en una
única flecha, con la punta dirigida hacia abajo en caso de columnas y hacia la derecha
en caso de filas, haz clic.
Para seleccionar celdas haz lo siguiente:
- Haz clic en cualquier lugar de la celda.
Y para seleccionar varias celdas:
- Haz clic en una celda y arrastra el cursor a otra celda. Las dos celdas quedarán
seleccionadas.
RECUERDA QUE PARA MOVERTE DENTRO DE UNA TABLA Y PASAR DE UNA
CELDA A OTRA SÓLO TIENES QUE PULSAR LA TECLA TAB.
Para cortar o copiar el contenido y los atributos de una celda, fila o columna, sigue
estos pasos:
- Selecciona las celdas que deseas copiar o cortar. Recuerda que estas celdas deben
formar siempre un área rectangular.
- Para copiar celdas, ejecuta el comando Copiar que se encuentra dentro del menú
despegable Edición o usa el acceso rápido mediante teclado Control+C.
- Para cortar celdas, ejecuta el comando Cortar dentro del menú despegable Edición o
pulsa Control+X.
- Sitúa el cursor donde quieres pegar las celdas.
- Pega las celdas copiadas o cortadas mediante el comando Pegar que se encuentra
en el menú despegable Edición o pulsando Control+V.
comprueba que dominas el tema 1. - Inserta una tabla de seis filas por tres columnas. - Selecciona la primera columna de la izquierda. Deselecciónala. - Selecciona cuatro celdas (cualquiera de ellas). Deselecciónalas. - Introduce seis palabras en cada una de las celdas de la primera columna y córtala. - Pega la columna al final de la tabla.
1.3. Trabajo con las propiedades de tabla
Como habrás podido observar, al seleccionar una tabla el Inspector de propiedades
muestra los atributos de la tabla seleccionada. A continuación se describen las
distintas modificaciones que puedes hacer en tu tabla.
Para alinear una tabla sigue estos pasos:
- Selecciona la tabla con uno de los métodos descritos anteriormente.
- Asegúrate de que en el Inspector de Propiedades, la opción Alinear está ajustada a
Predeterminada.
- Ejecuta el comando Alineación que se encuentra en el menú despegable Texto y
luego escoge una de las tres opciones (izquierda, centro o derecha).
Para controlar y modificar las dimensiones de tu tabla tienes el cuadro de texto Ancho
del Inspector de Propiedades. Puedes introducir un nuevo valor para modificar el
ancho de toda la tabla. Simplemente introduce un nuevo valor y selecciona tanto por
ciento o píxeles en el cuadro desplegable.
Una manera rápida e intuitiva de modificar el ancho total, los anchos de columnas o la
altura de filas es la siguiente:
- Mueve el cursor sobre cualquiera de los bordes y se convertirá en una flecha de dos
puntos (también llamada cursor de redimensionamiento).
- Pulsa el botón del ratón y arrastra hasta una nueva posición.
Insertar filas y columnas es otro de los atributos esenciales que deberás saber para
modificar tu tabla a tu antojo. De esta forma, la configuración por defecto de
Dreamweaver MX de tres filas por tres columnas puede ser modificada en cualquier
momento. Puedes añadir filas y columnas casi en cualquier lugar de la tabla, mediante
varios métodos. Para añadir una fila hay tres:
- Sitúa el cursor en la última celda de la última fila, y pulsa la tecla Tab para añadir una
nueva fila por debajo de la actual.
- Ejecuta el comando Insertar fila dentro del menú Tabla que se encuentra dentro del
menú despegable Modificar.
- Haz clic con el botón derecho del ratón para abrir el menú rápido y ejecuta el
comando Insertar fila del menú Tabla.
18b propiedades de la tabla
Por otro lado, hay dos maneras de añadir una nueva columna a una tabla:
- Escoge el comando Insertar columna dentro del menú Tabla que se encuentra en el
menú despegable Modificar.
- Haz clic con el botón derecho del ratón para abrir el menú rápido y ejecuta el
comando Insertar columna dentro del menú Tabla.
Para añadir varias columnas o filas puedes hacerlo de dos maneras distintas:
- Incrementando el número de filas en el cuadro de texto Filas del Inspector de
propiedades.
- Usando el cuadro de diálogo Insertar filas o columnas.
Para utilizar el cuadro de diálogo Insertar filas o columnas sigue estos pasos:
- Abre dicho cuadro escogiendo la opción Insertar filas o columnas dentro del menú
Tabla que se encuentra en el menú despegable Modificar o escogiendo la opción
Insertar filas o columnas dentro del menú Tabla que se encuentra en el menú rápido.
- Selecciona Filas o Columnas.
- Introduce el número de filas o columnas que quieres insertar y si quieres hacerlo
Sobre la selección o Bajo la selección (en el caso de las filas) y Antes de la columna
actual o Después de la columna actual (en el caso de las columnas).
- Haz clic sobre el botón Aceptar cuando hayas acabado.
LAS TABLAS OFRECEN LA POSIBILIDAD DE INSERTAR DENTRO DE ELLAS
TODOS LOS ELEMENTOS DE LOS QUE DISPONE DREAMWEAVER MX. DESDE
IMÁGENES A FORMULARIOS, TODO PUEDE SER INSERTADO EN UNA CELDA,
INCLUSO OTRA TABLA.
¿Qué pasaría si decides combinar una celda con otra? ¿O si decides que una celda
debe ser dividida en dos o más celdas distintas? Dreamweaver MX también te permite
hacer ambas cosas. Para combinar celdas haz lo siguiente:
- Selecciona las celdas que quieres unir.
- Haz clic sobre el botón Combinar celdas (se encuentra en la esquina inferior
izquierda) del Inspector de propiedades.
- O selecciona el comando Tabla del menú rápido y haz clic sobre Combinar celdas.
Para dividir una celda, sigue los siguientes pasos:
- Sitúa el cursor sobre la celda que quieres dividir.
- En el Inspector de propiedades, selecciona el botón Dividir celda, o pulsa las teclas
Control+Alt+S. Aparece el cuadro de diálogo Dividir Celda.
- Selecciona la opción Filas o Columnas para decidir si la celda será dividida horizontal
o verticalmente.
- Introduce el número de filas o columnas.
- Haz clic sobre Aceptar cuando hayas terminado.
Cuando desees borrar filas o columnas, puedes usar el menú rápido o el Inspector de
propiedades. En el menú rápido puedes hacerlo ejecutando uno de los comandos
Eliminar fila o Eliminar columna respectivamente. Con el Inspector de propiedades
puedes hacerlo reduciendo los números en los respectivos cuadros de texto: Filas y
Cols. (Columnas) .
Otro elemento a tener muy en cuenta de la tabla, y que puede variar en gran medida
la apariencia de ésta, son los bordes. Puedes hacer que el borde sea invisible si en el
cuadro de texto Borde del Inspector de propiedades escribes 0.
Para cambiar el ancho del borde, selecciona la tabla e introduce un nuevo valor en el
cuadro de texto Borde.
También puedes asignar colores al borde y al fondo. Cada uno de los colores se
escogen mediante el Inspector de Propiedades, como se indica a continuación:
- Para escoger un color para el borde, selecciona el color dentro de la paleta que se
encuentra al lado del cuadro de texto Borde del Inspector de propiedades.
- Para escoger el color de fondo de la tabla, selecciónalo en la paleta que se
encuentra al lado del cuadro de texto Fondo del Inspector de propiedades.
Si en lugar de un color de fondo quieres incluir una imagen, sólo tienes que pinchar en
la carpeta del campo Im. fondo y seleccionar la imagen de tu disco duro.
19 Propiedades de la tabla
TEN EN CUENTA QUE LA ELECCIÓN DEL COLOR ES MUY IMPORTANTE PARA
MANTENER LA COHERENCIA DE TU SITIO WEB. ELEGIR COLORES QUE NO
SEAN ADECUADOS AL TEMA QUE ESTÁS TRATANDO PUEDEN PROVOCAR UN
RECHAZO EN EL VISITANTE.
Las tablas en Dreamweaver MX también nos proporcionan la posibilidad de controlar
y ajustar el espacio en blanco dentro de ellas. Se trata de dos utilidades distintas.
Una de ellas te permite controlar el ancho que queda entre distintas celdas, mientras
que el otro te permite controlar los márgenes que existen dentro de la propia celda.
Ambos valores se pueden ajustar con el Inspector de propiedades:
- Para cambiar el ancho entre celdas introduce un nuevo valor en el cuadro de texto
Esp. Celda (Espaciado entre celdas).
- Para ajustar la cantidad de espacio entre los bordes de la celda y la información que
contiene, modifica el valor en el cuadro de texto Rell. Celda (Relleno de celda).
Para modificar el ancho y el alto de las celdas sólo tienes que introducir el valor que
prefieras en los cuadros de texto An (ancho) y Al (alto) del Inspector de propiedades.
Las celdas de encabezamiento permiten que el texto aparezca centrado y en
negrita. Para hacer que una celda contenga esta propiedad, selecciona el texto y haz
clic sobre la casilla de verificación Enc. del Inspector de propiedades.
La última propiedad que nos queda por ver es la del ajuste del contenido de la tabla.
Para la alineación horizontal de la tabla selecciona del cuadro de texto despegable
Horiz. la opción deseada (Predeterminada, Centro, Derecha o Izquierda).
Asimismo, para alinear verticalmente el contenido de la tabla, selecciona del cuadro
despegable Vert. la opción que desees (Inferior, Superior o Medio).
comprueba que dominas el tema 2. - Inserta una tabla de seis filas por tres columnas. - Selecciona la tabla y alinéala a la derecha. - Modifica las dimensiones de la tabla con los controladores de tamaño. - Inserta una fila con el método que prefieras. - Inserta una columna con el método que prefieras, pero distinto al anterior. - Combina todas las celdas de la primera fila. - Divide la última celda de la tabla en dos. 2. DISPOSICIÓN DE PÁGINAS La disposición de páginas es una parte fundamental del diseño Web. El término
disposición de páginas hace referencia a la apariencia de las páginas en el navegador,
es decir, a aspectos tales como la ubicación de los menús o las imágenes. Un método
frecuente para organizar una página consiste en utilizar tablas HTML. Sin embargo,
las tablas pueden resultar difíciles de utilizar, pues su función original no era facilitar el
diseño de las páginas Web, sino presentar datos en forma tabular.
Para simplificar el uso de tablas en la disposición de páginas, Dreamweaver MX ofrece
la vista de Disposición. En ella podemos diseñar una página utilizando tablas como
estructura subyacente al tiempo que evitamos las dificultades tradicionales que
plantea el uso de tablas. Por ejemplo, podemos dibujar fácilmente celdas de tablas en
una página y, a continuación, personalizarlas y colocarlas donde queremos. La vista
de Disposición de Dreamweaver MX es la forma más sencilla de preparar la
disposición de una página.
Para utilizar la vista de Disposición, debemos salir de la vista Estándar de
Dreamweaver MX. Para cambiar a la vista de Disposición podemos:
- Ir a la Pestaña disposición en la parte de arriba de la pantalla y luego hacer clic en el
botón Vista de disposición.
- Pulsar las teclas ctrl.+F6
20 Vista de disposición
2.1. Dibujar celdas y tablas de disposición Una vez activada la vista de Disposición, podemos añadir celdas de disposición. Estas
celdas nos ayudarán a bloquear la disposición de la página. Por ejemplo, podemos
dibujar una celda en la parte superior de la página para insertar un menú, en la parte
derecha para insertar submenús o en un lado para presentar contenido.
Desde la vista de Disposición podemos dibujar celdas y tablas de disposición. Si
creamos una celda, se insertará automáticamente una tabla que actuará como
contenedor de dicha celda. Una celda de disposición siempre se encontrará en una
tabla de disposición. La tabla de disposición que crea automáticamente Dreamweaver
MX tiene el ancho de la ventana de documento. Podremos cambiar su tamaño o hacer
que sea autoampliable si es necesario.
Para dibujar una celda de disposición:
- Sitúate en la vista de Disposición y, a continuación, haz clic en el botón Dibujar celda
de disposición en la categoría Disposición del panel Objetos. El puntero del ratón se
convertirá en un signo más (+).
- Sitúa el puntero del ratón en la parte de la página donde desees que comience la
celda y, a continuación, arrastra para crear la celda de disposición. Para crear varias
celdas sin necesidad de hacer clic repetidamente en el botón de celda de disposición,
mantén presionada la tecla Control.
La celda aparecerá en la página con un contorno azul. El tamaño de cada celda se
muestra en el área de encabezado de la columna, en la parte superior de la celda. Las
celdas nunca pueden superponerse, Dreamweaver MX ayuda a mantener esta
estructura ajustando automáticamente las nuevas celdas a las celdas existentes si se
dibujan próximas entre sí (a una distancia de ocho píxeles). Las celdas también se
ajustarán automáticamente a un lado de la página si se dibujan cerca del borde (a una
distancia de ocho píxeles). Para desactivar temporalmente el ajuste, hay que mantener
presionada la tecla Alt.
Para dibujar una tabla de disposición:
- Nos situaremos en la vista de Disposición y, a continuación, hacemos clic en el botón
Dibujar tabla de disposición en la categoría Disposición del panel Objetos. El puntero
del ratón se convertirá en un signo más (+).
- Sitúa el puntero del ratón en la página y, a continuación, haz clic y arrastra el ratón
para crear la tabla de disposición. Si es la primera tabla que dibujas en la página, se
colocará automáticamente en la esquina superior izquierda de la página.
Para crear varias tablas sin necesidad de hacer clic repetidamente en el botón de tabla
de disposición, mantén presionada la tecla Control. La tabla aparecerá en la página
con un contorno verde. También aparecerá una ficha Tabla de disposición en la parte
superior de cada tabla dibujada, que nos ayudará a distinguir y seleccionar la tabla. El
tamaño de cada tabla se muestra en el área de encabezado de la columna, en la parte
superior de la tabla.
Podemos crear tablas de disposición en áreas vacías de la página, en una tabla de
disposición existente (anidadas) o alrededor de celdas y tablas de disposición
existentes. Cuando se crea una tabla de disposición en un documento en blanco, ésta
se ajusta automáticamente a la esquina superior izquierda de la ventana de
documento. Si la página ya tiene contenido, sólo podremos dibujar la tabla de
disposición debajo del contenido.
20b Creación de una pagina usando tablas de disposición
2.2. Añadir contenido a una celda
En la vista de Disposición podemos añadir texto, imágenes y otros elementos de la
misma forma que en la presentación normal de Dreamweaver MX (vista Estándar).
Haz clic en la celda donde desees insertar contenido y, a continuación, escribe el texto
o inserta otros archivos.
Sólo se puede insertar contenido en celdas de disposición, por lo que deberemos
crearlas en primer lugar. Los espacios grises de la página indican las áreas que no
están disponibles para añadir contenido a menos que inserte una celda de disposición
en ellas. La celda de disposición se amplía automáticamente cuando se añade
material más grande que ella. A medida que se amplía la celda, aumenta de tamaño la
columna en la que se encuentra la celda y, además, pueden verse afectadas las
celdas adyacentes.
2.3. Mover y cambiar el tamaño de celdas y tablas de disposición
Todas las celdas y tablas se pueden mover o cambiar de tamaño, lo que permite
ajustar fácilmente la disposición de la página.
Para cambiar el tamaño de una celda:
- Haz clic en el borde de la celda o mantén presionada la tecla Control y haz clic en
cualquier punto de la celda. Aparecerán los manejadores de selección alrededor de la
celda.
- Utiliza los manejadores de selección para arrastrar la celda hasta obtener el tamaño
deseado.
La celda se ajustará automáticamente a las celdas existentes (cuando se encuentre a
una distancia de ocho píxeles de sus bordes). Una celda de disposición no se puede
superponer a otras celdas y no se puede ajustar su tamaño fuera de los límites de su
tabla de disposición. Una celda de disposición siempre tendrá como mínimo el tamaño
de su contenido.
Para mover una celda:
- Haz clic en el borde de la celda.
- Arrastra la celda hasta el lugar de la página que desees.
Para cambiar el tamaño de una tabla:
- Haz clic en la ficha de tabla. Aparecerán los manejadores de selección alrededor de
la tabla de disposición.
- Utiliza los manejadores de selección para arrastrar la tabla hasta obtener el tamaño
deseado.
Para mover una tabla:
- Haz clic en la ficha de tabla.
- Arrastra la tabla hasta el lugar de la página que desees.
2.4. Aplicar formato a una celda de disposición
Podemos establecer la alineación de contenido, el ancho y el alto y los colores de
fondo en el inspector de propiedades. Para aplicar formato a una celda de disposición
en el inspector de propiedades:
- Haz clic en el borde de la celda o mantén presionada la tecla Control y haz clic en
cualquier punto de la celda.
- Para cambiar el ancho, elige Fijo y escribe un valor en píxeles en el cuadro, o elige
Autoampliar.
- Para cambiar el alto, especifica un valor en píxeles en el cuadro de texto.
- Para establecer un color de fondo para la celda de disposición, selecciona un color
en el selector de colores desplegable o escribe el código hexadecimal del color
deseado en el cuadro de texto.
- Para establecer la alineación horizontal o vertical, selecciónala en el menú
emergente Horiz. o Vert.
- Selecciona No aj. para evitar que se ajuste el texto. Si seleccionamos esta opción, la
celda de disposición se ampliará para dar cabida a todo el contenido sin pasar a una
nueva línea.
2.5. Aplicar formato a tablas de disposición
Para aplicar formato a una tabla de disposición:
- Haz clic en la ficha o el borde de la tabla.
- Para cambiar el ancho, elige Fijo y escribe un valor en píxeles en el cuadro o elige
Autoampliar.
- Para cambiar el alto, especifica un valor en píxeles en el campo de texto.
- Para establecer el relleno de celdas, especifica el número de píxeles en el campo
Rell. celda. El relleno de celdas es la cantidad de espacio que habrá entre el contenido
de una celda de disposición y el límite de la misma. Si se establece este valor por
encima de 0, todas las celdas de la tabla de disposición seleccionadas tendrán este
espaciado. Si aparecen dos números en el área de encabezado de la columna,
utilizaremos la opción Igualar ancho.
- Para establecer el espaciado de celdas, especifica el número de píxeles en el campo
Esp. celda. El espaciado de celdas es la cantidad de espacio que habrá entre cada
celda de disposición.
- Para borrar los valores de alto de todas las celdas de la tabla de disposición que
tengamos seleccionadas, haz clic en el botón Borrar atributos de alto. Si no hay
elementos en la tabla, ésta se contraerá completamente.
20c propiedades de la celda de disposición.
3. FORMULARIOS Los formularios que se utilizan en la red se parecen mucho a los que utilizas en la vida
real para, por ejemplo, solicitar cualquier documento. Son muy precisos y muy �ontinu
de rellenar. Pueden llegar a contener gran cantidad de �ontinuació y están formados
por diversos elementos que conocerás a �ontinuación. Dreamweaver MX te permitirá
diseñar formularios incorporando un diseño sugerente y, sobre todo, con una gran
carga interactiva.
3.1. Insertar formularios Un formulario se inserta como cualquier otro elemento en Dreamweaver MX. Para
ello, hay dos maneras:
- Sitúa el cursor donde quieres que comience el formulario y pulsa el botón
Insertar formulario en el panel formularios de la barra de herramientas Objetos.
- Ejecuta el comando Formulario dentro del menú despegable Insertar.
En ambos casos, Dreamweaver MX insertará un cuadro rojo cuyas líneas son
discontínuas y que indican los límites del formulario.
21 Insertar formulario
Si tienes el Inspector de propiedades abierto (si no es así, hazlo) verás que contiene
tres campos: Nombre, Acción y Método.
En el cuadro de texto Nombre puedes introducir el nombre que quieras para el
formulario. En Acción puedes introducir directamente una URL o una dirección de
archivo de correo electrónico. En Método, la opción predeterminada es Post, que es la
que utilizarás en casi todas las ocasiones.
21 b propiedades del formulario
LOS FORMULARIOS Y LAS TABLAS PUEDEN FUNCIONAR JUNTOS SÓLO SI EL
FORMULARIO ENCIERRA COMPLETAMENTE A LA TABLA O AL REVÉS, PERO
AMBOS ELEMENTOS NO SE PUEDEN SOLAPAR.
3.2. Crear elementos de formulario Para insertar los elementos de los que puede componerse un formulario tienes que
seguir los procedimientos habituales en Dreamweaver MX. Para insertar un campo de texto de una única línea haz lo siguiente:
- Pulsa la pequeña flecha que se encuentra al lado de la palabra Común en el panel
Objetos. Haz clic sobre el menú Formulario de la ventana saliente. Verás que la paleta
Objetos se transforma y contiene todos los elementos que se pueden insertar en un
formulario.
- Ejecuta dentro del menú Insertar la opción Objeto de formulario y haz clic sobre
Campo de texto.
21 c propiedades del campo de texto
El Inspector de propiedades se transforma y muestra los atributos del campo de texto.
Para cambiar la longitud de un campo de texto hazlo insertando un valor en el cuadro
de texto Ancho car (Ancho de caracteres). Por su parte, el cuadro de texto Cars máx.
(Caracteres máximos) indica el número de caracteres que puede ser introducido en el
cuadro de texto.
El cuadro de texto Val inicial (Valor inicial) se usa para introducir y mostrar un valor
por defecto.
Si seleccionas la casilla Contraseña, el texto introducido en un campo de texto se
mostrará como asteriscos.
Cuando quieras que tu campo de texto contenga varias líneas, selecciona la casilla
Varias líneas. Para introducir el número de líneas que deseas, hazlo en el cuadro de
texto Líneas núm. (Número de líneas).
Otro de los elementos de los formularios son las casillas de verificación y los
botones de opción. Ambos elementos son utilizados cuando quieres que el visitante
de tu página elija entre varias opciones para rellenar un apartado del formulario (por
ejemplo, para indicar el sexo), pero tienen una diferencia: las casillas de verificación
permiten que el usuario elija tantas opciones como quiera, mientras que con los
botones de opción el usuario sólo puede elegir una opción.
21 d propiedades de la casilla de verificación
Puedes insertar una casilla de verificación de las siguientes maneras:
- Ejecuta el comando Casilla de verificación dentro del menú Objeto de formulario que
se encuentra dentro del menú desplegable Insertar.
- Haz clic sobre Casilla de verificación en el menú Formulario de la paleta Objetos.
Para insertar un botón de opción haz lo siguiente:
- Ejecuta el comando Botón que se encuentra dentro del menú Objeto de formulario
que está dentro del menú desplegable Insertar.
- Haz clic sobre Botón de opción en el menú Formulario de la paleta Objetos.
En el campo de texto Valor activado del Inspector de propiedades introduce la
información que deseas pasar a un programa cuando el usuario marque la casilla de
verificación o el botón de opción (por ejemplo, si el usuario va a marcar su sexo y es
varón, el Valor activado debe ser V).
La casilla y el botón de opción aparecen sin marcar, pero puedes hacer que
aparezcan marcados activando la casilla Activada del Inspector de propiedades.
Otros dos elementos del formulario son el menú y la lista desplegable. Para
introducir las etiquetas y los valores para un menú o para una lista despegable sigue
estos pasos:
- Selecciona el menú para el que deseas introducir valores.
- Dentro de Inspector de propiedades, pulsa el botón Valores de lista. Aparece el
cuadro de diálogo Valores de lista.
- En la columna Etiqueta de elemento, introduce la etiqueta para el primer elemento
(por ejemplo, Estados Unidos). pulsa la tecla Tab para moverte a la columna Valor.
- Introduce el valor que quieras asociar a este objeto (por ejemplo, USA). Introduce
cuantos valores y etiquetas quieras.
- Para borrar una etiqueta de elemento y su valor en el cuadro de diálogo Valores de
lista, selecciónalo y pulsa el botón del signo menos en la parte alta. Para borrar la
etiqueta de elemento o el valor, pero no ambos, selecciona el que deseas eliminar y
pulsa la tecla Retroceso.
- Si quieres reordenar los objetos de la lista selecciona el que quieras reordenar y
luego pulsa la flecha abajo o la flecha arriba para cambiar su posición.
- Haz clic sobre el botón Aceptar cuando hayas terminado.
Pero aparte de los menús, también puedes trabajar con listas desplegables. Las
diferencias entre las listas y los menús es que las listas desplegables tienen unas
flechas de selección (hacia arriba y hacia abajo) y los menús no disponen de dichas
flechas. Además, la lista desplegable permite controlar la altura de los elementos que
muestra y facilita al usuario la selección de más de un objeto; mientras que el menú no
nos permite controlar la altura y sólo podemos seleccionar un objeto.
Para insertar un menú de lista desplegable haz lo siguiente:
- Selecciona el menú en el que quieres insertar la lista.
- Selecciona la casilla Lista en el Inspector de Propiedades e introduce en la casilla
Alto el número de elementos que quieres que aparezcan por defecto en la lista.
- Para introducir los elementos de la lista haz clic sobre valores de lista y sigue los
mismos pasos que en el menú desplegable.
Activa la casilla Permitir múltiples para que el usuario pueda seleccionar múltiples
elementos de la lista. Si, por otro lado, deseas que aparezcan elementos
seleccionados por defecto en la lista, selecciónalos tú mismo en el cuadro
Seleccionado inicialmente (hazlo con las teclas Mayús y Control, tal y como haría un
usuario normal).
21d configurar las listas desplegables
Ahora que ya tienes diseñado tu formulario, sólo te queda saber cómo activarlo. La
activación de los formularios interactivos se realiza a través de botones. Hay tres
tipos de botones: Submit, Reset y Command.
El botón Submit, envía el formulario al sitio especificado (generalmente una URL o
una dirección de correo). Un botón Reset hace que, cuando el usuario lo pulse, todos
los datos introducidos en el formulario se borren. Un botón Command permite la
ejecución de funciones definidas por el diseñador de la página Web.
Para insertar un botón en tu formulario, sigue estos pasos:
- Sitúa el cursor donde quieres que aparezca el botón. Luego pulsa Insertar botón en
el panel Formularios de la paleta Objetos, o ejecuta el comando Botón dentro del
menú Objetos de formulario del menú desplegable Insertar.
- Escoge el tipo de botón que quieres que aparezca. En el Inspector de propiedades
podrás elegir entre Enviar formulario (Submit); Restablecer formulario (Reset); y para
un botón Command selecciona la opción Ninguno.
Para cambiar el nombre de cualquier botón, introduce el nuevo nombre en el cuadro
de texto Etiqueta.
21f insertar un botón de envío en el formulario
Dreamweaver MX también te permite añadir un campo de imagen del mismo modo
que añades otros elementos al formulario. El campo de imagen te permite utilizar
imágenes que actúan como los tres tipos de botones que acabamos de ver. Haz lo
siguiente para insertar un campo de imagen:
- Sitúa el cursor donde quieras que aparezca el campo de imagen.
- Pulsa el botón Insertar campo de imagen o ejecuta el comando Campo de imagen
dentro del menú Objeto de formulario que se encuentra en el menú desplegable
Insertar.
21g insertar un campo imagen
comprueba que dominas el tema 3. EJERCICIO.
1. Abre una página nueva. Escribe Formulario de inscripción y guárdala como formulario. 2. Antes de nada si el panel Objetos no está visible, seleccionar Ventana--> Objetos. Desde el panel Objetos, seleccionar la categoría Formularios 3.En la, colocar el cursor debajo de lo que has escrito y haz clic en el icono
Formulario. 4. Vamos a configurar antes de nada el formulario tal como muestra la imagen.
21 h configurar el envió del formulario
Debe aparecer un rectángulo delgado y rojo en la página. Esto demuestra la existencia de un formulario en la página, y muestra el área ampliable que el mismo comprende. Es muy recomendable dar varias veces al intro para ampliar el área de trabajo
5. Ahora vamos a agregar una Tabla para los Campos de formulario, para ello selecciona el Panel de objetos comunes. 6. Con el cursor dentro del formulario, seleccionar el icono Tabla. 7. En el cuadro de diálogo Insertar tabla. Establece las Filas a 6, las Columnas a 2, el Ancho a 80 porciento, el Relleno celda a 5, el Espacio celda a 1 y el Borde a 1. 8. Ahora debes tener una tabla insertada dentro de. formulario. Utilizar el Inspector de Popiedades para centrar la tabla. 9. Ahora vamos a agregar campos de formulario a la Tabla. Coloca el cursor en la primera celda de la primera fila de la tabla. 6. Escribir el texto "Nombre: " en la celda. 7. Pasa a la segunda celda de la primera fila y Selecciona Formularios del Panel Objetos. Haz clic en el icono Campo de texto. En el Inspector de propiedades, cambiarel nombre predeterminado del campo de texto a nombre. 8. Coloca el cursor en la primera celda de la segunda fila de la tabla. Escribe el texto "Email : " en la celda. 9. Pasa a la segunda celda de esta fila y haz clic en el icono Campo de texto del panel Objetos. Así se debería insertar un campo de texto en la celda de la tabla. 10. Selecciona este campo para poder cambiar sus propiedades. En el Inspector de propiedades, cambiar el nombre predeterminado del campo de texto a Email. 11. Coloca el cursor en la primera celda de la tercera fila de la tabla. 12 Escribe el texto "comentarios" en la celda. 11. Pasa a la segunda celda de esta fila y haz clic en el icono Campo de texto en el panel Objetos. 12. En el Inspector de propiedades, cambia el nombre predeterminado del campo de
texto a comentrios. 13. Cambia el Tipo de Una línea a Varias líneas. 14. Cambia el Número de Líneas a 4. 15. En las propiedades expandidas, cambia el Valor de Ajuste a Virtual. 16. Cambia el Texto inicial para que diga "Déjenos sus comentarios." 17. Pone el cursor en la primera celda de la cuarta fila de la tabla. 18. Escribe el texto "Reciba nuestro boletín:" en la celda. 19. Pasa a la segunda celda de esta fila y haz clic en el icono Casilla de verificación en el panel Objetos. 20. En el Inspector de propiedades, cambia el nombre predeterminado de la casilla a boletin. Atención sin el acento 21. Cambia el Estado inicial en Activado. 22. Coloca el cursor en la primera celda de la quinta fila de la tabla. 23. Escriba el texto "¿Nos conocía anterioremente?" en la celda. 24. Pasa a la segunda celda de esta fila. 25. Haz clic en el icono Botón de opción en el panel Objetos. 26. En el Inspector de propiedades, cambia el nombre predeterminado del botón de opción a cliente. 27. Cambia el Estado inicial a Activado. 28. Después del botón de opción en la página escribe el texto "Nuevo cliente". 29. Pulsa Intro para desplazarse a la siguiente línea y selecciona el icono de botón de acción en el panel Objetos. 30. En el Inspector de propiedades, cambia el nombre predeterminado del botón de opción a nuevocliente. 31. Después del botón de opción en la página escribi el texto "Nuevo cliente." 32. Coloca el cursor en la primera celda de la sexta fila de la tabla. 33. Escribe el texto "Edad: " en la celda. Pasa a la segunda celda de esta fila. 34. Seleccionar el icono Lista/menú en el panel Objetos. 35. En el Inspector de propiedades, cambia el nombre predeterminado Seleccionar a edad y haz clic en Valores de Lista para agregar o cambiar los valores en la lista. Ingresa los siguientes pares de elementos de selección:
20-34 joven 35-49 adulto 50+ viejo 36. Haz clic en Aceptar. 37. En el Inspector de propiedades, selecciona 20-34 como el valor Inicialmente seleccionado. 38. Coloca el cursor a la derecha de la tabla, dentro del formulario y pulsar Intro. 39. Seleccionar el icono Botón en el panel Objetos. Así se debería insertar un botón denominado Enviar. 40. Guardar el archivo y examinarlo.
4. HOJAS DE ESTILO
Las Hojas de Estilo en Cascada permiten al diseñador/a modificar el tipo de letra, su
tamaño, el espaciado y muchos otros elementos de la página, con una simple
instrucción, extendiendo el efecto no solo a la página en la que esté trabajando el
diseñador/a, sino al sitio Web entero.
Dreamweaver MX es una de las primeras herramientas que permite aplicar las hojas
de estilo en cascada de forma sencilla. Se pueden utilizar tres herramientas para
implementar las hojas de estilo en cascada: la Paleta de estilos, el cuadro de diálogo
Editar hoja de estilo y el cuadro de diálogo Definición de Estilo. Con ellos tres puedes
aplicar estilos a un texto seleccionado o a una etiqueta particular; modificar estilos
creados con anterioridad y vincular tus estilos desde una hoja de estilo externa.
El primero de ellos, la Paleta estilos, es una interfaz flexible y de fácil uso. Para verla,
puedes hacer lo siguiente:
- Ejecuta el comando Estilos CSS del menú Ventana.
- Selecciona el botón Estilos CSS del Lanzador.
- Pulsar las teclas Mayús+F11.
Panel de estilos 22
Para aplicar un estilo, sigue estos pasos:
- Elige Ventana y selecciona Estilos CSS, en el panel Estilos CSS, haz clic con el
botón derecho y elige Nuevo estilo en el menú emergente. También puedes hacer clic
en el icono Nuevo estilo situado en la parte inferior del panel Estilos CSS.
- Dispones de las siguientes opciones de estilos CSS:
Crear estilo person. (clase) crea un estilo que se puede aplicar como un
atributo class a un rango o un bloque de texto.
Redefinir etiqueta HTML redefine el formato predeterminado de una etiqueta
HTML especificada. Recuerda que, al redefinir una etiqueta, puedes alterar la
disposición de muchas páginas.
Usar selector CSS define el formato de una determinada combinación de
etiquetas o de todas las etiquetas que contienen un atributo específico.
- Introduce un nombre, una etiqueta o un selector para el nuevo estilo. Los nombres de
estilo (clase) personalizados deben comenzar por un punto. Si no introduces el punto,
lo hará Dreamweaver MX. Estos nombres pueden contener cualquier combinación de
letras y números, el punto debe ir seguido de una letra. Por ejemplo, .miencabezado1.
Panel de estilos 22a
Para redefinir un estilo de etiqueta HTML, introduce una etiqueta HTML o elige una en
el menú emergente. Para aplicar un selector CSS elige uno en el menú emergente.
Los selectores disponibles en el menú son:
a:active, que personaliza el estilo de un enlace cuando es seleccionado por el
usuario.
a:hover, personaliza el estilo de un enlace cuando el ratón está sobre él.
a:link, personaliza el estilo de un enlace que no ha sido visitado recientemente.
a:visited, personaliza el estilo de un enlace a una página que ha sido visitada
recientemente.
- Selecciona la ubicación donde se definirá el estilo: Nuevo archivo de hojas de estilos
(externo) o Sólo este documento.
Panel de estilos 22b selección de una etiqueta html
- Haz clic en Aceptar. Aparecerá el cuadro de diálogo Definición de estilo.
- Elige la configuración de formato del nuevo estilo CSS.
- Haz clic en Aceptar o Aplicar.
Cuando se crea un estilo personalizado (clase), aparece en el panel Estilos CSS y en
el submenú Texto-Estilos CSS. Los estilos de etiquetas HTML y del selector CSS no
aparecen en el panel Estilos CSS porque no se pueden aplicar. Estos estilos se
reflejan en la ventana de documento automáticamente cada vez que aparece la
etiqueta o el selector.
4.1. Aplicar un estilo CSS personalizado (clase) Los estilos CSS personalizados (clase) son los únicos que se pueden aplicar a
cualquier texto del documento, independientemente de las etiquetas que controlen
dicho texto. El panel Estilos CSS muestra los nombres de todos los estilos disponibles.
Para aplicar un estilo CSS personalizado:
- Elige Ventana y selecciona Estilos CSS
- Selecciona el texto al que deseas aplicar el estilo CSS.
- Haz clic en el nombre de un estilo del panel Estilos CSS.
4.2. Los estilos y sus atributos Después de seleccionar el tipo y nombre del nuevo estilo, o si eliges editar uno
existente, se abre el cuadro de diálogo Definición de estilo. A la izquierda de este
cuadro aparece la lista Categoría, con los siguientes elementos:
- Tipo, especifica la apariencia y diseño de los tipos de fuente de la página en la
ventana del navegador.
- Fondo, controla el color de fondo.
- Bloque, se refiere a la justificación y alineación del texto.
- Cuadro, define la ubicación y ajuste de los elementos de una página.
- Borde, especifica el aspecto de los bordes que rodean las imágenes y textos.
- Lista, nos da la posibilidad de utilizar un elemento específico como viñeta basándose
en una imagen gráfica o usando una de las viñetas estándar incorporadas, como
disco, círculo y cuadrado.
- Posicionamiento, controla la ubicación exacta de un elemento sobre la página.
- Extensiones, afecta a diversos hábitos como son los saltos de página para la
impresión, el cursor del usuario y efectos especiales llamados filtros.
22c definición de estilos.
4.3. Crear y establecer vínculos con una hoja de estilos CSS externa Una hoja de estilos CSS externa es un archivo de texto que contiene estilos y
especificaciones de formato. Si editamos una hoja de estilos CSS externa, todos los
documentos vinculados a esa hoja se actualizarán para reflejar los cambios. Podemos
exportar los estilos CSS de un documento para crear una nueva hoja de estilos CSS,
así como adjuntar o vincular dichos estilos a una hoja de estilos externa para
aplicarlos.
Para adjuntar una hoja de estilos CSS externa:
- Elige Ventana-Estilos CSS o haz clic en el icono Estilos CSS del lanzador.
- En el panel Estilos CSS, haz clic con el botón derecho y selecciona Adjuntar hoja de
estilos en el menú emergente. También puedes hacer clic en el icono Adjuntar hoja de
estilos situado en la parte inferior del panel Estilos CSS.
- Haz clic en Abrir. La hoja de estilos se adjuntará al documento de Dreamweaver MX
y sus estilos aparecerán en el panel Estilos CSS.
Para establecer vínculos o crear una hoja de estilos CSS externa:
- Elige Ventana-Estilos CSS o haz clic en el icono Estilos CSS del lanzador.
- En el panel Estilos CSS, haz clic con el botón derecho y elige Editar hoja de estilos
en el menú desplegable.
- En el cuadro de diálogo Editar hoja de estilos, haz clic en Vínculo.
- En el cuadro de diálogo Vincular hoja de estilos externa, lleva a cabo una de estas
operaciones:
Haz clic en Examinar para localizar una hoja de estilos CSS externa o introduce la ruta
de la hoja de estilos en cuadro Archivo/URL. Es recomendable utilizar el botón
Examinar o Seleccionar, ya que permite localizar la ruta correcta de la hoja de estilos.
Crea una hoja de estilos CSS externa introduciendo un nombre de archivo nuevo (que
no exista en la ubicación especificada). El nombre de archivo debe tener la
extensión.css.
- Elige la opción Vincular o Importar para especificar y crear la etiqueta empleada para
adjuntar la hoja de estilos CSS externa al documento y, a continuación, haz clic en
Aceptar.
Importar lleva la información del archivo de hoja de estilos CSS externa al documento
actual, mientras que Vincular accede a la información y la transmite sin transferirla. Si
bien, tanto Importar como Vincular llaman a todos los estilos de la hoja externa al
documento actual, Vincular ofrece más posibilidades y funciona con más navegadores.
- En el cuadro de diálogo Editar hoja de estilos, selecciona el nombre de la hoja
externa y haz clic en Editar. Se abrirá el cuadro de diálogo Editar hoja de estilos para
esa hoja de estilos.
- Haz clic en Nuevo para definir estilos en la hoja de estilos CSS externa.
- En el cuadro de diálogo Nuevo estilo, define el nuevo estilo.
- Haz clic en Guardar cuando termines de definir los estilos.
EJERCICIO 1: CREAR UN ESTILO PARA UNA ETIQUETA HTML 1. Crea una página nueva. 2. Escribe MI PRIMER ESTILO y ponle como encabezado 1 (h1 en html). 3. Haz clic con el botón derecho en el encabezamiento en la parte superior de la página y selecciona Estilos CSS-->Nuevo estilo.
4.- En el cuadro de diálogo Nuevo estilo, seleccionar h1 en el selector desplegable para la etiqueta, y deja las otras propiedades como te indico: Tag: h1 Tipo: Redefine HTML Tag Defínelo en una Nueva hoja de estilos 5. Haz clic en Aceptar para abrir el cuadro de diálogo Guardar archivo de hoja de estilos como. 6. Llámalo Miestilo.css 7. Haz clic en Guardar para abrir el cuadro de diálogo Definición de Estilo. 8. Con la Categoría de Tipo seleccionado a la izquierda del cuadro de diálogo, ingresar valores para las propiedades de estilos como se muestra a continuación: tipo: font arial helvetica sans serif size 30 color red. 9. Guarda el archivo y previsualizalo
EJERCICIO 2: Configuración de las Propiedades de Estilos 1 . Abre el archivo de antes. 2. Asegurate de estar en la Vista de Diseño para editar. 3. Seleccionar Texto->Estilos CSS->Editar hoja de estilos. 4. En el cuadro de diálogo Editar hoja de estilos, seleccionar la hoja de estilos Miestilo.css y haz clic en Edición. 5. Selecciona h 1 de la lista de etiquetas y hacer clic en Edición. 6. Selecciona la Categoría Fondo e ingresar #CCCCCC como Color de fondo. 7. Selecciona la Categoría Bloque y seleccionar Centro como el valor para Alineación de texto. 8. Selecciona la Categoría Borde y definir los valores de borde todo 1 y los colores que queráis 9. Hacer clic en Aceptar para cerrar el cuadro de diálogo Definición de Estilo. 10. En el cuadro de diálogo Miestilo.css, haz clic en Nuevo.
11. En el cuadro de diálogo Nuevo estilo, selecciona p del Selector de Etiquetas desplegable, y haz clic en Aceptar.
12. En la Categoría Tipo, define: Fuente: Arial, Helvetica, sans-serif Tamaño: 14
píxcles Color: #000036 13. En la Categoría Cuadro, define: a Margen izquierda: 35 píxeles 14. Haz clic en Aceptar. 15. En el cuadro de diálogo Miestilo.css, haz clic en Nuevo. 16. En el cuadro de diálogo Nuevo estilo, selecciona h2 del Selector de Etiquetas
desplegable, y haz clic en Aceptar. 17. En la Categoría Tipo, define:
Fuente: Arial, Helvetica, sans-serif Tamaño: 22 píxeles Color: #000036
18. En la Categoría Borde, escribe lo siguiente:
Superior: 1 pixel Derecha: 0 pixel Abajo: 1 pixe1 Izquierda: 0 pixel Estilo: sólido Color: #000036 (para todos los lados)
19. Haz clic en aceptar y luego en guardar. 21. En el cuadro de diálogo Editar hoja de estilos, haz clic en Listo. 22. Guarda el archivo y examínalo.
DEBE QUEDARTE CLARO - Las tablas son un elemento esencial a la hora de diseñar tu página Web. La
posibilidad que te dan de insertar cualquier elemento dentro de ellas y su facilidad de
manejo, harán de ellas un elemento imprescindible en tu sitio Web.
- Los formularios deben ser lo más concisos y fáciles de rellenar que sea posible. Su
función principal es ahorrar tiempo, pero también mandar datos de una manera
efectiva y rápida.
- Las hojas de estilo te permitirán mantener tu sitio Web y modificarlo con un gran
ahorro de tiempo.
RECUERDA ESTAS PALABRAS Controladores de tamaño: aparecen al seleccionar la tabla y te permiten variar el
tamaño de ésta.
Cursor de redimensionamiento: es el cursor que nos permite cambiar las
dimensiones de una tabla o una imagen, entre otros elementos, con el método de
pinchar y arrastrar.
Hoja de estilo externa: tipo de hoja de estilo que te permite enlazar con ella y
cambiar automáticamente el estilo de tu sitio Web.
Reset: botón que permite volver a introducir todos los datos en un formulario. Submit: botón de formulario cuya función es enviar la información recogida a una URL
o a una dirección de correo.
.
Unidad didáctica 3. Marcos, Capas. Animaciones en Dreamweaver MX: Líneas de tiempo Los marcos y las capas son otros dos de los elementos que hacen de Dreamweaver
MX el programa de diseño más completo del mercado. Pero si a esto le sumamos la
posibilidad de crear nuestras propias animaciones para que luego sean insertadas en
la página Web, Dreamweaver MX se convierte sin duda alguna en un programa único.
Sin necesidad de utilizar sofisticados ni complejos programas de diseño, podremos
llevar a cabo animaciones y dibujos que darán a nuestro sitio Web un aspecto
totalmente distinto.
EN ESTA UNIDAD VAMOS A APRENDER - Cómo diseñar nuestra página Web a través de marcos
- Insertar y modificar capas
- Crear animaciones sencillas
ESTE ES EL CONTENIDO DE LA UNIDAD 1. Marcos
1.1. Crear y modificar marcos
1.2. Invertir un conjunto de marcos predefinido
1.3. Destinar información a un marco
2. Capas
2.1. Insertar capas
2.2. Modificar capas
3. Líneas de tiempo
1. MARCOS La primera lección que debes aprender respecto a los marcos es que cada uno de
ellos es una página Web independiente de la otra. De esta forma, tienes que diseñar
cada uno de ellos como una página Web individual, pero al mismo tiempo, debes
intentar que cada uno de ellos guarde coherencia con el resto.
1.1. Crear y modificar marcos Dreamweaver MX te ofrece dos maneras de dividir tu página Web en marcos y hacer
tu propio conjunto de marcos. El primer método usa los menús y el segundo el
Inspector de propiedades.
Para crear un marco con los menús, sigue los siguientes pasos:
- Activa los bordes del marco en la ventana del documento seleccionando la opción
Bordes de marco del menú desplegable Ver que se encuentra dentro del submenú
Ayudas Visuales. Aparecerá un borde a lo largo de la ventana del documento.
- Coloca el cursor sobre cualquiera de los bordes del marco.
- Pulsa la tecla Alt y mantenla pulsada. Si el cursor está sobre uno de los bordes del
marco, se transformará en una flecha de dos puntas, si está sobre uno de los lados, y
en una flecha de cuatro puntas si está en una esquina.
- Arrastra el borde del marco dentro de la ventana de documento.
Cuando un marco es seleccionado, Dreamweaver MX muestra una línea de puntos
negra a lo largo de los bordes del conjunto de marcos y dentro de cada marco. Puedes
cambiar la posición de cualquier marco haciendo clic sobre él y arrastrando.
Cuando necesites crear marcos adicionales (ya sean filas o columnas) en tu página de
marcos, es preferible utilizar el ratón. Hazlo de la siguiente forma:
- Pulsa Alt y haz clic sobre cualquier línea de marco.
- Arrastra la nueva línea de marco hasta donde prefieras.
Por otro lado, se pueden crear y modificar marcos con el Inspector de propiedades. A
diferencia del menú, el Inspector nos ofrece mucho más control sobre nuestro conjunto
de marcos. Veamos cómo:
- Selecciona la fila o la columna de marcos que quieres modificar.
- Para especificar el tamaño en píxeles o en porcentaje, introduce un número en el
cuadro Valor del Inspector de propiedades. Selecciona píxeles o porcentaje según tu
elección en el cuadro despegable Unidades. Para especificar un tamaño en relación al
de otras columnas, selecciona Relativo en el cuadro Unidades.
Dreamweaver MX también nos permite modificar los bordes de los marcos. Para
eliminar los bordes introduce un valor 0 en el cuadro de texto Ancho del Inspector de
propiedades.
En el menú de opciones Bordes, si escoges la opción Sí, hace que los bordes tengan
una apariencia 3D cuando se muestren en un explorador. Si seleccionas No, los
bordes del marco se mostrarán con un color liso.
Para cambiar el color del borde de un marco, simplemente elige un color en la paleta
Color del borde del Inspector.
Es preciso guardar un archivo de conjunto de marcos y sus archivos relacionados para
poder previsualizar la página en un navegador. Puedes guardar de forma individual
una página del conjunto de marcos o una página de marco, o bien guardar todos los
archivos de marco abiertos y la página de conjunto de marcos.
Para guardar un archivo de conjunto de marcos:
- Selecciona el conjunto de marcos en el panel Marcos o en la ventana de documento.
- Lleva a cabo una de estas operaciones:
Para guardar el archivo de conjunto de marcos, elige Archivo- Guardar conjunto
de marcos.
Para guardar el archivo de conjunto de marcos como un archivo nuevo, elige
Archivo -Guardar conjunto de marcos como.
Para guardar un documento que está dentro de un marco: haz clic en el marco
para seleccionarlo y, a continuación, elige Archivo-Guardar marco o Archivo-
Guardar marco como.
Para guardar todos los archivos de un conjunto de marcos:
- Elige Archivo-Guardar todos los marcos.
De este modo se guardarán todos los documentos abiertos, incluidos los documentos
individuales, los documentos de marcos y los documentos de conjunto de marcos.
DEBES TENER CUIDADO NO SOLO PARA GUARDAR TODOS LOS MARCOS
INDIVIDUALES QUE COMPONEN LA PÁGINA WEB, SINO TAMBIÉN EL PROPIO
CONJUNTO DE MARCOS.
comprueba que dominas el tema 1.Completa el siguiente enunciado con una de las opciones que te damos: Los marcos pueden ser creados de dos formas distintas...
a)...con el ratón y el menú Modificar b)...con los menús y el Inspector de propiedades c)...con el Lanzador y el Inspector de propiedades
Por otro lado, puedes seleccionar el marco sobre el que quieres trabajar de la
siguiente forma:
- Pulsa Alt y haz clic sobre cualquier marco.
- Para seleccionar otro marco, solamente tienes que pulsar una tecla del cursor.
Para nombrar un marco, tienes que seguir las siguientes directrices:
- Selecciona el marco que desees nombrar.
- En el Inspector de propiedades, introduce el nombre en el cuadro de texto que se
encuentra por debajo de la palabra Marco. Para nombrar tu marco debes seguir las
siguientes normas: usa una palabra sin espacios, no utilices caracteres especiales
como comillas o signos de interrogación, el guión bajo está permitido y no utilices
nombres como _blank, _parent, _self, y _top. Luego verás porqué.
23 Propiedades de los marcos
Para abrir una página Web previamente diseñada en un marco sólo tienes que hacer
lo siguiente:
- Selecciona el marco en el quieras insertar una página previamente diseñada.
- En el Inspector de propiedades, introduce en el cuadro de texto Origen el nombre del
archivo o pulsa sobre el icono Carpeta para elegirlo.
Una de las mayores ventajas de los marcos es la posibilidad que nos dan para utilizar
barras de desplazamiento. Éstas se utilizan cuando la ventana del explorador es
demasiado pequeña para desplegar toda la información de la página Web insertada en
él. Hay tres opciones en referencia a las barras de desplazamiento en el Inspector de
propiedades, Para verlas, sólo tienes que abrir el cuadro desplegable Desplaz.:
- No, inhabilita las barras de desplazamiento.
- Predeterminado, deja el uso de barras de desplazamiento en poder del explorador.
- Automático, activa las barras de desplazamiento si el contenido del marco se
extiende horizontal o verticalmente más allá de lo que la ventana del explorador puede
mostrar.
Para evitar que el visitante de tu página Web pueda manipular el tamaño de tus
marcos, selecciona la casilla Mismo tamaño en el Inspector de propiedades.
También puedes controlar los márgenes. Por defecto, suele haber 15 píxeles a la
derecha e izquierda del marco y otros 15 píxeles en la parte superior e inferior del
marco. Para alterar este valor, introduce un valor en los cuadros de texto Ancho del
margen y Alto del margen. Para borrar un marco que hayas creado en un principio y que más tarde decides
eliminar por alguna causa sólo tienes que hacer lo siguiente:
- Haz clic sobre el borde del marco.
- Arrástralo hasta el borde del marco que lo envuelve (si es una fila, hacia arriba o
abajo y si es una columna, hacia la derecha o la izquierda).
1.2. Insertar un conjunto de marcos predefinido Los conjuntos de marcos predefinidos facilitan la selección del tipo de conjunto de
marcos que deseamos crear.
Los iconos de conjuntos de marcos predefinidos de la categoría Marcos del panel
Objetos proporcionan una representación visual de cada conjunto de marcos al
aplicarse a un documento seleccionado.
Para insertar un conjunto de marcos predefinido:
- Sitúa el punto de inserción en el documento.
- A continuación, lleva a cabo una de estas operaciones:
En la categoría Marcos del panel Objetos, selecciona un conjunto de marcos
predefinido. Para insertar el conjunto de marcos, puede hacer clic en un icono o
arrastrar un icono directamente al documento.
Para seleccionar un conjunto de marcos predefinido, elige Insertar-Marcos-Izquierda,
Derecha, Arriba, Abajo, Izquierda y arriba, Superior izquierda, Izquierda superior o
Dividir.
1.3 Destinar información a un marco Otro de las capacidades de los marcos es que actúan como centro de navegación, es
decir, que ofrecen vínculos para transmitir información. Para ello, debes elegir y
asignar un destino al vínculo. En Dreamweaver MX esto se hace mediante el Inspector
de propiedades. Para destinar un vínculo a una sección de tu conjunto de marcos,
sigue estos pasos:
- Selecciona el texto o imagen que quieres usar como vínculo.
- En el Inspector de propiedades de texto o imagen, introduce la URL en el cuadro de
texto Vínculo.
- Selecciona el cuadro de texto Destino y selecciona una de las siguientes opciones de
destino de la lista desplegable que, como recordarás, es la misma que vimos en la
unidad 1 para los mapas de imágenes:
- _blank, abre el vínculo en una nueva ventana del explorador y mantiene la
ventana actual disponible.
- _parent, abre el vínculo en el conjunto de marcos “padre” (si lo hay) del marco
actual.
- _self, abre el vínculo en el marco actual, sustituyendo su contenido.
- _top, abre el vínculo en el conjunto de marcos más exterior de la página Web
actual, sustituyendo todos los marcos.
SI DESEAS QUE EL VÍNCULO TENGA COMO DESTINO UN MARCO DISEÑADO
POR TI, SOLO DEBES PONER EN EL CUADRO DE TEXTO DESTINO EL NOMBRE
QUE PUSISTE AL MARCO AL CREARLO
comprueba que dominas el tema
2. Une las opciones de la primera columna con la que le corresponda de la segunda: a) _blank 1.abre el vínculo en el marco actual b)_top 2.abre el vínculo en el conjunto de
marcos “padre” del marco actual c)_parent 3.abre el vínculo en el marco más
exterior d)_self 4.abre el vínculo en una nueva ventana
EJERCICIO DE MARCOS 1.- Crea una página nueva 2. Define el Título de este documento como "página de marcos". 2. Añade el siguiente texto: Haga una selección en el menú. 3. Guarda la pagina como bienvenida.htm Crear un conjunto de marcos 4. Mediante Marcos, del Panel Objetos, selecciona el icono Insertar marco superior para agregar un conjunto de marcos a una página. El conjunto de marcos mismo y el marco superior ahora están en la memoria RAM pero no se han guardado todavía. Guardar el marco 5. Haz clic dentro del marco superior y cambiar su Título a "Menú." 6. Agrega el siguiente texto el marco: Menu Frame 7. Selecciona Archivo -> Guardar marco. 8. Guarda el archivo como menu.htm. Guardar el conjunto de marcos 9. Selecciona el Archivo --> Guardar todos los marcos. 10. Guarda el conjunto de marcos as frameset.htm. 15. Ve a la presentación preliminar del conjunto de marcos en su explorador. Marcos avanzados 1. Vuelve a la página frameset.htm. Saca el marco de contenido e intercambiarlo con uno nuevo para ver cómo funciona, y devuelve al marco al contenido original. 2. Selecciona el marco inferior colocando el cursor dentro del mismo. 3. Selecciona Archivo -> Abrir en marco. 4. Selecciona la página de formulario que hicistes anteriormente. 5. Vete a Archivo -> Abrir en marco. 6. Haz clic en Bienvenida.htm
Seleccionar los marcos y modificar sus propiedades 7. Selecciona Ventana -> Marcos. 8. En el panel Marcos, selecciona el marco llamado mainFrame. Observa que no hemos cambiado el nombre y es el que está por defecto 9. En el Inspector de propiedades, define el valor Desplaz. en "No". 10. En el panel Marcos, selecciona el marco denominado topFrame. 11. Escribe "0" para Ancho del margen y Alto del margen. Modificar el fondo del marco superior 12. Mientras el cursor se encuentra en el marco superior, selecciona Modificar -> Propiedades de la página. 13. Pon un Color de fondo de Rojo (ubicado en la primera columna de la paleta de
colores, código #FFOOOO). Selecciona el conjunto de marcos y modifica sus propiedades 14. Del panel Marcos, selecciona el borde externo, que significa el conjunto de marcos
mismo. Como método más rápido, se puede seleccionar la etiqueta <frameset> de la barra de estado de la página. 15. Cambiar los Bordes a "Sí" y el Ancho del borde a " 1 16. Pon un Color de borde de Negro (#000000). 17. A la derecha del Panel de Propiedades, asegurarte de que el marco que se encuentra más arriba esté seleccionado. 18. Cambia Alto de Fila a 50. 19. Guarda todos los marcos y mira la presentación preliminar en el explorador.
2. CAPAS Las capas, para que lo entiendas, son como un conjunto de hojas transparentes que
pueden ser apiladas unas encima de otras y que permiten ver lo que hay debajo de
ellas.
Las capas nos ofrecen entre otras posibilidades a la hora de diseñar nuestro sitio Web,
las siguientes: un posicionamiento de exactitud milimétrica; capacidad para poder ser
apiladas unas encima de otras; capacidad para ser desplazadas por la pantalla...etc.
Esto hace que las expectativas del diseñador/a se expandan de forma considerable,
no sólo por las características que acabamos de comentar ya que, además, las capas,
una vez diseñadas pueden ser transformadas en tablas.
24 insertar capas
2.1. Insertar capas La creación de capas en Dreamweaver MX puede realizarse de dos maneras:
- Selecciona el icono Dibujar capa de la paleta Objetos, después arrastra la esquina de
la capa, asegúrate de estar en la Vista estándar y no en la Vista de disposición, de
estar en esta última, no te dejará dibujar la capa.
- Coloca una capa en un lugar predeterminado ejecutando el comando Capa del menú
Insertar.
Ahora vamos por partes. Para crear una capa con la paleta Objetos, sigue estos
pasos:
- Selecciona desde el panel común de la paleta Objetos el botón Dibujar capa.
- Haz clic en cualquier parte del documento para situar la capa y arrastra el rectángulo.
Libera el botón del ratón cuando hayas conseguido la forma y tamaño aproximado
para tu capa.
Verás que la capa dibujada tiene una pequeña caja en la parte superior. Es el control
de selección. Cuando haces clic sobre él, aparecen ocho controles de tamaño
alrededor del perímetro de la capa.
El segundo método para crear una capa se basa en menús. Sólo tienes que hacer lo
siguiente si deseas insertar una capa con este menú:
- Selecciona el menú Insertar.
- Haz clic sobre el comando Capa.
2.2. Modificar capas Lo primero que hay que hacer antes de modificar una capa es seleccionarla. Para
ello hay varios métodos:
- Si tienes capas que no se solapan (es decir, que no están unas encima de otras),
simplemente haz clic sobre el control de selección de la capa.
- Si tienes las capas situadas en lugares específicos del código HTML, elige el icono
Capa (es el cuadradito amarillo con una C dentro que se encuentra en la parte
superior de la Ventana principal).
- Si tienes muchas capas solapadas, utiliza la paleta Capas para elegir la que desees
por su nombre.
- Si trabajas con capas invisibles, haz clic sobre la etiqueta <div> en el selector de
etiquetas para descubrir el contorno de la capa.
Para modificar el tamaño de una capa lo primero que tienes que hacer es
seleccionarla con cualquiera de los métodos que acabas de ver. Verás ocho controles
de tamaño. Pon el cursor sobre cualquiera de ellos, haz clic y arrastra la capa hasta
que adopte el tamaño deseado.
Para mover una capa haz lo siguiente:
- Selecciona la capa que deseas mover.
- Haz clic sobre el Control de selección (es el cuadrado que está en la esquina
superior izquierda de la capa) y arrastra la capa hasta la posición deseada.
También puedes seguir estos pasos con el teclado para mover la capa:
- Selecciona la capa que prefieras.
- Presiona cualquier tecla de flecha para mover la capa seleccionada un píxel en esa
dirección.
- O usa la combinación Mayús- flecha para mover la capa seleccionada a una
distancia igual al incremento de la cuadrícula.
Por otro lado, puedes modificar casi todos los atributos de tus capas en el Inspector
de propiedades de Capa. Ciertos atributos, tales como el ancho (An), Alto (Al), la
imagen de fondo (Im. Fondo) o el color de fondo (Col. Fondo), se modifican igual que
en los otros elementos explicados en unidades anteriores y no necesitamos destinar
nuevas líneas para volver sobre ellos. Pero otros atributos, tales como la visibilidad y
la herencia, requieren una explicación complementaria. Empecemos ya a explicar
éstos y el resto de posibilidades que el Inspector nos ofrece.
Para nombrar una capa, sustituye el nombre por defecto que se encuentra en el
cuadro de texto que está en la esquina superior izquierda del Inspector de
propiedades.
La visibilidad (cuadro Vis. del Inspector) determina si se puede ver o no una capa de
la página Web. Hay cuatro valores disponibles:
- Default, que permite al navegador establecer el atributo visibilidad.
- Inherit, que establece en la visibilidad el mismo valor que en la capa padre, lo que
permite que un conjunto de capas se oculten o se hagan visibles cambiando
solamente la capa.
- Visible, hace que la capa y todos sus contenidos se puedan ver.
- Hidden, hace invisibles una capa y todos sus contenidos.
TANTO SI VES UNA CAPA COMO SI NO, DEBES RECORDAR QUE ÉSTA SIGUE
OCUPANDO ESPACIO EN LA PÁGINA Y REQUIERE PARTE DEL TIEMPO DE
CARGA DE LA MISMA.
25 propiedades de las capas
Normalmente, una capa se extiende hasta ajustarse el texto o imágenes insertadas en
ella. Sin embargo, se puede restringir el tamaño de la capa cambiando los valores de
anchura (An) y altura (Al) en el Inspector de propiedades. Pero, ¿qué sucede cuando
se define una capa demasiado pequeña para una imagen? Es cuando debemos
decidir la opción que tomaremos en el cuadro desbordamiento (Desb) del Inspector
de propiedades. Las opciones que podemos elegir son las siguientes:
- Visible (default), en la que todo el texto o imagen que exceda las dimensiones de la
capa es representado, y los valores establecidos de altura y anchura se ignoran.
- Hidden, en la que el texto o imagen que se sale de las dimensiones de la capa deja
de ser visible.
- Scroll, en la que se añade una barra de desplazamiento horizontal y otra vertical a la
capa, independientemente del tamaño del contenido y de las dimensiones de la capa.
- Auto, en la que se añade una barra de desplazamiento vertical y otra horizontal a la
capa cuando los contenidos exceden el tamaño de la capa.
Una de las características más particulares de las capas es su capacidad para
aparecer unas debajo de otras. Este orden es el conocido como Índice Z y puede ser
modificado.
Cuando añades una capa nueva, Dreamwaver aumenta automáticamente el Índice Z
en una unidad, de modo que las capas con valores mayores se sitúan por encima de
las capas que tienen un Índice Z menor. Este valor puede ser ajustado manualmente
en el Inspector de propiedades y en la paleta Capas. Solamente tienes que asignar el
color en el que quieras que aparezca la capa. Por ejemplo, si tienes tres capas y
quieres que la primera pase a ser la segunda en el orden y la segunda pase a ser la
primera, tienes que asignar a la primera capa un Índice Z 2 y a la segunda un Índice Z
Así de fácil.
comprueba que dominas el tema 3. - Inserta una capa con la paleta Objetos. - Modifica su tamaño e introduce valores 310px para An y 310px para Al.
- Establece un color de fondo azul (el tono que prefieras). - Nómbrala como micapa. - Establece un valor scroll para el menú Desbordamiento.
- Visualízala en el explorador. Si has hecho todo bien, debes ver una capa azul con dos barras de desplazamiento.
La paleta Capas Algunas funciones de las capas también pueden ser controladas desde la paleta
Capas. Para abrir la paleta Capas sólo tienes que hacer clic sobre el comando Capas
del menú ventana o pulsar la tecla F11
La paleta Capas presenta una lista con los ajustes de visibilidad, nombre, e Índice z
de cada capa. Todas estas propiedades se pueden modificar directamente.
026 La paleta capas.
La visibilidad de una capa se indica en la columna que se encuentra debajo del ojo
situado a la izquierda de la paleta. Tiene distintas posiciones:
- Ojo cerrado, indica que la capa es oculta.
- Ojo abierto, indica que la capa es visible.
- Sin ojo, indica que el valor de visibilidad es el predeterminado.
El nombre de la capa puede ser cambiado en la segunda columna. Sólo haz doble clic
sobre el nombre actual de la capa e introduce el nuevo nombre.
El Índice Z también puede ser modificado. Haz doble clic sobre el Índice Z de una
capa e introduce el nuevo valor.
Otra función de la paleta objetos es el anidamiento (o creación de capas padre- hijo).
Para anidar una capa dentro de otra sigue estos pasos:
- Abre la paleta Capas con alguno de los métodos señalados arriba.
- Pulsa la tecla Control y después haz clic sobre el nombre de la capa que vas a anidar
(hijo) y arrástrala encima de la otra capa (padre).
- Cuando veas un rectángulo alrededor del nombre de la capa padre, libera el botón
del ratón. La capa hijo queda por debajo de la capa padre.
- Para ocultar la capa hijo de la vista, selecciona el signo menos del nombre de la capa
padre. Ahora hay un signo más, selecciónalo si deseas ver otra vez la capa hijo.
- Para deshacer el anidamiento de una capa, selecciona la capa hijo y arrástrala hasta
una nueva posición en la paleta Capas.
El anidamiento es muy utilizado para ocultar capas con un solo clic de ratón.
Para trabajar con capas es muy importante la precisión que demos al posicionamiento
de cada una de ellas. De esta forma, el diseñador que quiera conseguir esta precisión
debe saber cómo alinear sus capas a través de las reglas y las cuadrículas.
Para activar la regla, haz lo siguiente:
- Selecciona el menú Ver.
- Selecciona el comando Reglas y ejecuta Mostrar.
Aparecerá una regla en los bordes superior e izquierdo de la Ventana principal. Por
defecto, la regla utiliza los píxeles como unidad, pero puedes cambiar de asignación
en el comando Reglas del menú Ver y elegir pulgadas o centímetros.
La cuadrícula es mejor que la regla para alinear varios objetos. Para activar la
cuadrícula haz lo siguiente:
- Selecciona el menú Ver.
- Selecciona el comando Cuadrícula y haz clic sobre Mostrar.
Para cambiar la configuración de la cuadrícula, selecciona Configuración del comando
Cuadrícula. Aparecerá la ventana Configuración de la cuadrícula. Aquí podrás cambiar
el Espaciado entre los puntos de la cuadrícula, la Unidad de medida del espaciado, y
el Color de la cuadrícula.
027 Poner una cuadrícula y configurarla
Ahora que has creado tu capa, ¿qué hacer para introducir en ella el contenido? La
respuesta es que puedes trabajar en una capa de la misma forma que trabajas con
una página Web, siendo los procedimientos de inserción de elementos los mismos que
hemos estudiado en las unidades anteriores. Así, puedes seguir los pasos que hemos
venido explicando de forma habitual:
- Sitúa el cursor dentro de la capa, elige el menú Insertar y selecciona el objeto a
insertar.
- Con el cursor dentro de la capa, selecciona cualquier objeto de la paleta Objetos.
CUANDO COMBINES FORMULARIOS CON CAPAS, CÍÑETE A ESTA REGLA:
COLOCA SIEMPRE EL FORMULARIO DENTRO DE LA CAPA. SI SITÚAS LA CAPA
DENTRO DEL FORMULARIO, TODOS LOS ELEMENTOS DE ÉSTE SON
IGNORADOS.
Tienes que tener en cuenta que las capas son uno de los elementos más novedosos
del ámbito del diseño web. Es por eso que tiene algún que otro inconveniente, entre
otros, que sólo pueden ser visualizadas en la generación más reciente de
navegadores. La forma que Dreamweaver MX tiene para solucionar este problema es
la posibilidad que te otorga de transformar las capas en tablas para que puedan ser
visualizadas en los navegadores más antiguos. Diseñar de esta manera también tiene
algún inconveniente. Por ejemplo, no se pueden situar los elementos de una capa por
encima de otras. De todos modos, para evitar los solapamientos, sólo tienes que
hacer lo siguiente:
- Selecciona el comando Capas del menú Ventana o pulsa la tecla F11.
- Haz clic en la casilla superior Evitar solapamiento.
Para hacer que tus capas se conviertan en tablas y puedan ser visualizadas en todos
los navegadores, haz lo siguiente:
- Selecciona la opción Modo de diseño del menú Modificar.
- Haz clic sobre Convertir capas en tablas. Aparece Convertir capas en tabla.
028 Convertir capas en tablas
En ella aparecen las siguientes funciones:
- Más preciso, crea una tabla lo más exacta posible para garantizar que los elementos
aparecen tal y como fueron diseñados.
- Mínimo, contrae las celdas vacías a menos de n píxeles de ancho.
- Usar GIF transparente, rellena las celdas vacías con una imagen transparente como
espaciador para asegurar que la tabla se verá igual en una gran variedad de
navegadores.
- Centrar en página, como supones, centra la página en el navegador.
- Evitar superposición de capas, debes activarla cuando vas a convertir capas en
tablas.
- Mostrar paleta Capas, abre automáticamente la paleta Capas en la que se muestran
los nombres de las capas dados por Dreamweaver MX.
- Mostrar cuadrícula, activa la cuadrícula para facilitarte el diseño.
- Ajustar la cuadrícula, las capas se ajustan a la línea de cuadrícula más próxima.
comprueba que dominas el tema 4.Contesta a los siguientes enunciados diciendo si son verdaderos (V) o falsos (F) a) La visibilidad de una capa se indica con el Índice Z
b) El orden de las capas se indica con el Índice Z
c) El anidamiento se utiliza para crear capas “padre-hijo”
d) Una capa puede ser insertada con el menú Insertar o con la paleta Objetos.
3. LÍNEAS DE TIEMPO Para que te hagas una ligera idea de qué es una línea de tiempo, lo primero que
tienes que saber es que puedes controlar una presentación completa: dar comienzo a
la música de fondo, pasar los créditos de presentación y proyectar diapositivas... Que
el diseñador/a pueda disponer de otros programas para crear sus animaciones es muy
tentador, pero aún resulta más tentador que todas esa animaciones puedan ser
creadas, controladas e insertadas con el mismo programa. Ése programa es
Dreamweaver MX.
De esta forma, una línea de tiempo puede alterar tanto la posición como la dimensión,
la visibilidad o la profundidad de una capa.
Para gestionar la línea de tiempo, tienes que utilizar el Inspector de líneas de tiempo.
Haz lo siguiente para visualizarla en la Ventana general:
- Selecciona el comando Líneas de tiempo desde el menú Ventana.
- También puedes pulsar la tecla Alt + F9.
29 líneas de tiempo
En esta ventana puedes ver los siguientes controles:
- Controles, incluye el menú desplegable, la Reproducción automática, Bucle y
botones de Rebobinado, Atrás y Reproducción.
- Canal de comportamiento, muestra el emplazamiento de cualquier
comportamiento vinculado a un cuadro específico de la línea.
- Cuadros, enseña el número de cuadros de toda la línea de tiempo, mientras
que el cabezal de reproducción muestra el número actual de cuadros.
- Canal de Animación, representa la �nimación para cualquier capa o imagen
incluida en la línea.
Para añadir una capa o una imagen al Inspector de líneas de tiempo, a través de los
menús, sigue estos pasos:
- Selecciona el comando Líneas de tiempo del menú Ventana.
- En la ventana �nimación, selecciona la capa o imagen que quieres añadir al
documento.
- Dentro del menú Modificar, selecciona el comando Línea de tiempo y dentro de
éste haz clic sobre Agregar objeto a línea de tiempo.
PUEDES AÑADIR A LA LÍNEA DE TIEMPO TANTOS OBJETOS COMO DESEES. ES
POSIBLE AUMENTAR EL TAMAÑO DE LA VENTANA LÍNEA DE TIEMPO,
ARRASTRANDO CUALQUIERA DE LOS BORDES DE LA VENTANA.
También puedes colocar un objeto dentro de una línea de tiempo con el método de
arrastrar y soltar:
- Selecciona el comando Línea de tiempo que hay en el menú Ventana.
- En la ventana Animación, selecciona el objeto que quieres añadir a la Línea de
tiempo. Arrástralo con el ratón hasta la ventana Línea de tiempo.
- Suelta el botón cuando el objeto esté en el lugar deseado.
Como puedes comprobar, cada objeto que insertas en la línea de tiempo tiene a cada
extremo dos círculos negros. Estos círculos negros son los cuadros clave. Para que
el objeto insertado en la línea de tiempo tenga �nimación hay que cambiar las
�nimación�s del objeto en los cuadros clave. Por ejemplo, para mover una capa a
través de la pantalla, sigue estos pasos:
- Crea una capa y añádele una imagen de fondo.
- Pulsa F9 para que aparezca la ventana de Línea de tiempo.
- Arrastra la capa dentro de la Línea de tiempo.
- Selecciona, en la barra de Animación de la capa el cuadro clave final (el
cabezal de reproducción se moverá hasta ahí).
- En la ventana Animación, selecciona la capa y arrástrala hasta una nueva
posición (la que prefieras). Aparecerá una línea delgada que conecta la
posición inicial con la posición final, esta línea es la senda de �nimación.
- Para ver tu Animación, haz clic sobre el botón Rebobinado de la Línea de
tiempo y haz clic sobre Reproducción.
030 añadir capas a la línea de tiempo
Puede que todos los movimientos de capa, no sean tan sencillos como el que
acabamos de ver. Cuando deseas registrar movimientos en una capa mucho más
sinuosos es necesario insertar una ruta de capa. Para registrar una ruta de capa, haz
lo siguiente:
- Selecciona la capa que estás moviendo. Arrastra la capa hasta situarla en el lugar
donde deseas que comience el movimiento.
- Abre el menú Modificar, selecciona el comando Línea de tiempo y haz clic sobre
Registrar ruta de capa.
- Haz clic sobre la capa y arrástrala sobre la pantalla para definir el movimiento. A
medida que muevas la capa, Dreamweaver MX dibuja una línea que muestra la ruta
que estás creando. Deja de presionar el ratón para finalizar la ruta.
Cuando finalices este proceso verás una nueva barra de animación en la ventana
Líneas de tiempo, que representa el movimiento que acabas de registrar.
Marca la casilla Bucle si deseas que la animación se repita de manera infinita.
Cuando hagas esto, Dreamweaver MX te informará que estás activando la acción Ir a
marco de línea de tiempo. Para establecer un número de repeticiones para una línea,
sigue estos pasos:
- Después de marcar la ventana Bucle, Dreamweaver MX te informa de que se está
agregando la acción Ir a marco de línea de tiempo después del último cuadro de la
actual línea de tiempo. Para eliminar este aviso, activa la opción No volver a mostrar
este mensaje.
- En el canal de Comportamiento de la ventana de la Línea de tiempo (por encima del
número de cuadros y del cabezal de reproducción) haz doble clic sobre el
comportamiento que acabas de añadir. La ventana Comportamiento abre una hoja de
Acciones que muestra un evento onFrame en la hoja Eventos y una acción Ir a marco
de línea de tiempo.
- Haz doble clic sobre el evento onFrame. Se abrirá el cuadro de diálogo Ir a marco de
línea de tiempo.
- Introduce un número en el cuadro de texto Bucle para fijar el número de repeticiones
de la línea de tiempo. Para que se repita, deja el cuadro en blanco.
- Cuando finalices, haz clic sobre Aceptar.
Para realizar otro tipo de acciones más complejas con la Línea de tiempo, es
necesario añadir más cuadros clave. Para ello haz lo siguiente:
- En la ventana Línea de tiempo, selecciona la barra de animación del objeto con el
que estás trabajando.
- Elige el cuadro en el que quieres añadir el cuadro clave.
- Añade el cuadro de una de las dos siguientes maneras:
- Dentro del menú Modificar selecciona el comando Línea de tiempo y haz clic sobre
Agregar cuadro clave.
- Haz clic con el botón derecho del ratón sobre el cuadro de la barra de animación y
aparecerá un menú. Elige Agregar cuadro clave.
31 agregar cuadro clave
El nuevo cuadro clave es añadido y se representa con un círculo en la barra de
animación. Mientras tu nuevo cuadro clave está seleccionado puedes modificar la
posición o el tamaño de la capa.
Para eliminar una línea de tiempo haz lo siguiente: Selecciona Modificar, elige el
comando Línea de tiempo y haz clic sobre Quitar Línea de tiempo.
Para eliminar un solo cuadro clave haz lo siguiente: Selecciona Modificar, elige Línea
del tiempo y haz clic sobre Eliminar objeto.
EJERCICIO LINEAS DE TIEMPO.
1 . Crea un archivo nuevo y llámalo lineadetiempo.htm. 2. Utiliza el icono Insertar capa en el panel Objetos para crear una capa nueva en la esquina superior derecha de la página. 3. Inserta una imagen en la capa: (nos vale cualquiera con tal de que sea pequeña 4. Nombra a la capa Clic mediante el panel Capas o el Inspector de propiedades. Agregar una línea de tiempo a la capa 5. Selecciona la capa nueva y vete a Modificar -> Línea de tiempo --> Agregar objeto a línea de tiempo. 6. Haz clic en el primer fotograma clave (el círculo a la izquierda) para seleccionarlo. 7. Haz clic y arrastra el selector de capas para desplazar la capa hacia la parte superior izquierda de la página. 8. Haz clic en el último fotograma clave (el círculo a la derecha), y luego desplaza la capa hacia la parte superior derecha de la página. 9. En el panel Líneas de tiempo, haz clic en la casilla Reprod. automática. 10. Guarda el archivo y míralo en el explorador; puede actualizar la página para que se reproduzca nuevamente la línea de tiempo. Modificar la ruta de la línea de tiempo 11. Selecciona la capa Clic q ue hemos creado antes. 12. Mueve el cabezal de reproducción rojo al fotograrna 5 al hacer clic sobre el mismo y arrastrándolo. 13. Haz clic con el botón derecho en el cabezal de reproducción rojo y selecciona "Agregar fotograma" del menú emergente. 14. Debería tener un tercer fotograma clave en la línea de tiempo, asegúrate. 15. Con el fotograma clave nuevo todavía seleccionado, desplaza la capa
seleccionada en tu página a un lugar más abajo en la misma. 16. Debería ver la curva de la ruta que hace en el nuevo fotograma clave. 17. Guarda el archivo y míralo explorador; asegúrate de que actualizas la página para que se reproduzca nuevamente la línea de tiempo.
comprueba que dominas el tema 5.
- Abre la capa que creaste en el ejercicio 3. - Inserta una imagen. - Abre el Inspector de Líneas de tiempo. -Añade la capa al Inspector de Líneas de tiempo y crea una animación moviendo la capa como prefieras. - Selecciona la casilla Reproduc. Automática del Inspector de Líneas de tiempo. - Visualiza la página en el explorador. Deberás ver la imagen que has insertado dentro de la capa moviéndose cuando acabe de cargarse la página.
DEBE QUEDARTE CLARO - Los marcos son páginas individuales, pero deben ser diseñadas de acuerdo al
conjunto de la página. Todos los marcos y su diseño, forman tu sitio web.
- Las capas son un elemento de última generación y sólo pueden ser diseñadas con
Dreamweaver MX.
- Las Líneas de tiempo te permiten hacer animaciones sin necesidad de utilizar ningún
sofisticado programa de diseño gráfico.
RECUERDA ESTAS PALABRAS Blank: te permite abrir una nueva ventana en tu sitio al pulsar el vínculo
correspondiente.
Control de selección: control que se encuentra en las capas y que te permite
seleccionarlas y moverlas por la Ventana principal.
Comportamiento: funciones ligadas a un elemento de la página (enlace de texto,
imágenes, etc.) y que necesitan de una etiqueta HTML.
Evento: acción asociada a un comportamiento.
COMPRUEBA QUE DOMINAS EL TEMA- SOLUCIONES 1. La respuesta correcta es b)
2. Las respuestas correctas son: a) 4 ; b) 3 ; c) 2 ; d) 1
4. Las respuestas correctas son a) F ; b) V ; c) V ; d) V
Unidad didáctica 4. Audio y vídeo en Dreamweaver MX. El paso final: la publicación de la página a través del FTP. Con todo lo que has estudiado en las tres unidades anteriores, ¿qué crees que es lo
que te falta por aprender para que tu página tenga un verdadero aire profesional?
Pues bien, la respuesta es: sólo te falta saber cómo insertar audio y vídeo. Podrás, de
esta forma, amenizar tu página con temas musicales o incluir tus películas de vídeo
preferidas. Tras conocer esto y los formatos que más convienen a tu sitio Web, ya
podrás decir que dominas el programa Dreamweaver MX.
Y por último, el paso final: la publicación de tu página en la Red. Entonces todo el
mundo podrá ver tu capacidad para el diseño.
EN ESTA UNIDAD VAMOS A APRENDER - Principales formatos de audio y vídeo en la red.
- Insertar y reproducir sonidos y vídeo en tu página web.
- Configurar tu sitio para publicarlo en la Red.
ESTE ES EL CONTENIDO DE LA UNIDAD 1. Audio
1.1. El sonido digital en Internet
1.2. Incrustar sonidos y música en tu página Web
2. Vídeo
2.1. Quicktime y RealVideo. Otros formatos
2.2. Insertar y reproducir los vídeos en Dreamweaver MX
2.3. Streaming
3. Otros elementos multimedia
3.1. Insertar objetos de botón Flash
3.2. Insertar objetos de texto Flash
3.3. Insertar películas Flash
3.4. Insertar un menú de salto
3.5 Insertar una barra de navegación
4.Publicar tu página
4.1. Configurar un sitio
4.2. Vínculos y roturas
4.3. El mapa del sitio
1. AUDIO El sonido en Internet se incorporó bastante antes que el vídeo y sin embargo, aún no
existe un sonido estándar que se inserte en la Web con unanimidad. De todas formas,
Dreamweaver MX ofrece la posibilidad de trabajar con casi todos los formatos
existentes en la Red, lo cual te dará una gran libertad a la hora de añadir sonido a tu
sitio.
Quizá te preguntes por qué formato de sonido debes inclinarte para crear tu sitio web.
Y la respuesta es que eso depende de diversos factores, como el público al que va
destinado, el ancho de banda disponible y la finalidad del contenido del sonido. De
esta forma, las retransmisiones en directo a través de Internet deben ser creadas en
RealAudio. Para los archivos de sonido cortos se pueden usar la mayoría de los
formatos.
32 insertar un plug-in
1.1. El sonido digital en Internet
El variado conjunto de formatos que existe en la actualidad queda reflejado en la
siguiente lista de extensiones de archivo. Léelo bien y date cuenta de las diferencias
que existen entre unos y otros.
-.au, usado por Next y Sun UNiX. Debe su importancia al hecho de que la mayoría de
los primeros archivos de sonido en Internet estuvieron disponibles únicamente para el
sistema UNiX.
-.aiff, desarrollado por Apple, se utiliza también en las estaciones Silicon Graphics. Es
uno de los formatos preferidos de Adobe.
-.midi o .mid, está constituido por instrucciones que recrean un pasaje musical.
-.mp3, se caracteriza por sus archivos de sonido digital de alta calidad con excelente
comprensión. Todo parece indicar que es el futuro inmediato en Internet.
-.ra o .ram, (RealAudio) fue el primer formato de flujo de sonido.
-.rmf, es usado por el plug-in Beatnik.
-.swa, (Shockwave Audio) fue desarrollado por Macromedia y está basado en el MP3.
-.wav, desarrollado por Microsoft e IBM, es usado en Windows. Su problema es que
ocupa mucho espacio.
Si trabajas con archivos de sonido comunes (tales como .wav, .mid, .mp3), puedes
incorporarlos fácilmente a tu diseño Web.
Para ello, desde el Inspector de propiedades, haz lo siguiente:
-Escribe la ruta del fichero de sonido en el cuadro de diálogo Vínculo o pulsa el icono
con forma de carpeta para buscar el archivo.
Cuando el visitante seleccione este enlace, el archivo de sonido se descargará y,
dependiendo de cuál sea el programa para el que ha sido diseñado, éste se abrirá en
una ventana separada y empezará a reproducir la música.
Todos los reproductores multimedia son muy sencillos de manejar y suelen tener los
controles tradicionales de Reproducción, Stop, Pausa, Rebobinado y Avance rápido.
1.2. Incrustar sonidos y música en tu página Web
Una forma de evitar los paneles de control flotantes en la página web es incrustar los
archivos. Además, de esta forma lograrás un mayor control sobre el volumen de la
reproducción, la parte de los controles que quieres que sea visible y los puntos de
comienzo y final del clip musical.
Dreamweaver MX usa el objeto genérico Plug-in para insertar sonido en tu página
Web. Este objeto necesita sólo tres parámetros: el archivo-origen y el ancho y alto del
objeto. Para insertar un archivo con Dreamweaver MX, sigue estos pasos:
-Sitúa el cursor del ratón donde quieres que aparezca el panel de control para el
archivo de sonido.
- Inserta el Plug-in seleccionando el comando Medio del menú Insertar o mediante el
objeto Plug-in de la Paleta de objetos.
- En el Inspector de propiedades, introduce la ruta y el nombre del archivo en el cuadro
de texto Origen o elige Examinar para buscar tu archivo desde el cuadro de diálogo
seleccionar archivo.
033 insertar un sonido en una pagina web comprueba que dominas el tema 1. Indica si los siguientes enunciados son verdaderos (V) o falsos (F). a) El sonido se incorporó después que el vídeo a Internet. b) El formato MP3 se caracteriza por su baja compresión.
El Plug-in LiveAudio Liveaudio es el reproductor por defecto de Netscape y se usa cuando realiza la
inserción básica de un archivo de sonido. Su importancia radica en que dispone de
varios parámetros diferentes para conformar su apariencia y sus funciones. Para ello,
debes introducir los parámetros y valores del archivo de sonido mediante el Inspector
de propiedades de Dreamweaver MX.
Otros formatos de audio utilizan los mismos parámetros. La lista de parámetros y
valores que puedes utilizar es la siguiente:
Parámetro Valores Descripción Autostart true o false Si introduces true a autostart, el archivo de sonido comienza su
reproducción en cuanto se completa la descarga. Por defecto es false Controls console,
smallconsole,
playbutton,
pausebutton,
stopbutton,
volumelever
Permite visualizar el control de sonido. El valor por defecto es console
Endtime Minutes:
seconds;
ejemplo,
00:00
Establece el punto del clip de sonido en el que se detiene la ejecución
Hidden True Oculta todos los controles, de modo que el sonido se reproduce de
fondo.
Loop true, false o
un valor
entero
Si asignas true al parámetro loop, obligas al archivo de sonido a que se
repita continuamente hasta que se pulsa el botón Detener o el
navegante visita otra página. Para determinar el número de veces que
el sonido se repite, da un valor entero al loop
Startime Minutes;
seconds
ejemplo,
00:00
Establece el punto del clip en que comienza la ejecución.
Volume De 1 a 100 Fija el nivel de volumen del clip de sonido en una escala que va del 1 a
100
Ahora que conoces los parámetros y sus valores sólo te queda insertar el Plug-in en
tu sitio Web. Siguiendo estos pasos puedes hacerlo fácilmente:
- Inserta el objeto Plug-in tal y como hemos visto antes.
- En el Inspector de propiedades selecciona Parámetros. El cuadro de diálogo que se
abre tiene dos columnas: Parámetros y Valores.
- Haz clic sobre la columna Parámetro e introduce el primer parámetro. Por ejemplo, si
quieres que el archivo de sonido comience a ejecutarse cuando acabe la descarga
introduce autostart.
Pulsa la tecla Tab para moverte a la columna Valor y escribe el valor deseado que,
como acabamos de introducir autostart, será true (consulta la tabla de más arriba si
tienes alguna duda).
- Repite el paso anterior hasta que hayas introducido todos los parámetros.
- Pulsa Aceptar cuando hayas terminado.
comprueba que dominas el tema 2. - Inserta un Plug-in de audio - Elige e introduce los parámetros y los valores adecuado para que:
- El Plug- in comience su reproducción en cuanto la descarga haya finalizado. - El Plug-in se detenga transcurrido un minuto desde el comienzo de su ejecución. - El Plug-in tenga un sonido de valor 75. - Visualízalo en el explorador.
34 configurar el plug-in de audio
2. VÍDEO Al igual que el caso del audio, en el del vídeo, no hay todavía un formato estándar que
se haya impuesto a los demás, aunque los más populares en la Web son QuickTime y
RealVideo. Una reciente innovación que ha causado gran impacto en la Red ha sido
el streaming vídeo (flujo de vídeo continuo), que permite reproducir películas al mismo
tiempo que son descargadas.
Ahora vamos a ver las distintas formas de incorporar vídeo a tu página web, ya sea
para descargar un archivo MPEG o una película RealVideo.
2.1. Quicktime y RealVideo. Otros formatos Al igual que hicimos con el audio, vamos a ver cuáles son los formatos de vídeo más
usuales. Son los siguientes:
- Quicktime, desarrollado por Apple demostrando una eficacia de tal grado que la
versión3.0 de QuickTime es la base del último estándar MPEG. Las extensiones de los
archivos son .qt o .mov
- RealVideo, la versión actual de este formato, permite la reproducción continua tanto
de audio como de vídeo. Las extensiones de archivos son .ra, .rpm y .ram.
- MPEG, se han desarrollado varias versiones diferentes del estándar MPEG, de las
cuales MPEG-1 es la más ampliamente difundida. Las extensiones de los archivos son
.mpg o .mpeg.
- ActiveMovie y Vídeo for Windows, aunque Vídeo for Windows es el formato estándar
para Windows, las limitaciones ha hecho que sea menos popular en la Web.
ActiveMovie se presentó como parte del programa ActiveMedia y fue en general
comparable al anterior. Puede reproducir vídeo descargado y continuo, pero ha
causado muchos problemas debido a la incompatibilidad de la sintaxis de sus
comandos de reproducción.
RECUERDA QUE TANTO UNA BUENA ELECCIÓN DE AUDIO COMO DE VÍDEO
HARÁN DE TU PÁGINA ALGO ATRAYENTE. PERO UNA MALA ELECCIÓN DE
AMBOS FORMATOS PUEDE LLEVAR A UN RECHAZO EN EL VISITANTE.
comprueba que dominas el tema 3. Indica si los siguientes enunciados son verdaderos (V) o falsos (F). a) El vídeo en Internet tiene un formato estándar que todo el mundo utiliza. b) El streaming te permite ver parte de la película sin que ésta haya acabado de descargarse. 2.2. Insertar y reproducir los vídeos en Dreamweaver MX Para incorporar un archivo de vídeo digitalizado en tu página web usando
Dreamweaver MX, sigue estos pasos:
- Elige el texto o la imagen que desees utilizar como enlace al archivo de vídeo.
- En el Inspector de propiedades, introduce el nombre del archivo de vídeo en el
cuadro de texto del enlace o selecciona el icono con forma de carpeta para buscar el
archivo en el explorador.
- Debido a que los archivos de vídeo pueden ser bastante grandes, es una buena
costumbre indicar el tamaño del archivo junto al nombre del enlace o escribirlo en el
cuadro de texto alternativo Alt. Por ejemplo, Vídeodecasa (30K).
Hasta hace poco, los vídeos en línea sólo podían reproducirse con un navegador.
Esta situación hacía que la composición de la página con vídeos fuese muy laboriosa
e implicara una gran cantidad de tiempo. Sin embargo esto ha cambiado radicalmente
y a través de los siguientes pasos podrás ver tu vídeo en la misma ventana del
documento:
- Para reproducir el vídeo ejecuta el menú Ver, selecciona el comando Plug-ins y haz
clic sobre Reproducir o Detener para pararlo.
Si has insertado más de un vídeo en tu página, haz lo siguiente para visualizarlos
todos:
- Ejecuta el menú Ver, selecciona Plug-ins y haz clic sobre Reproducir todo para ver
los vídeos o Detener todo para pararlos.
35 características del plug-in de video
Quicktime se ha convertido en uno de los principales formatos para contenidos
multimedia. Al igual que con el audio, sólo se requieren tres parámetros para insertar
una película QuickTime: el archivo origen, el ancho de la película y su altura. Sin
embargo, aquí tienes otra lista de parámetros que te puede ser de gran utilidad: Parámetro Valores Descripción Autoplay true o false Permite comenzar la reproducción de una película en cuanto se haya
descargado suficientemente Controller true o false Visualiza el panel controlador junto a la película QuickTime. Debes añadir
24 píxeles a la altura de la película. Href Ninguno /Establece un enlace a un URL cuando el visitante selecciona la película. Loop true o false Hace que la película se repita continuamente
Volume De 0 a 256 Controla el volumen de la banda sonora de la película QuickTime. Por
defecto tiene el valor 256.
DEBES TENER EN CUENTA QUE LOS ÚNICOS VALORES QUE ADMITE UN
PARÁMETRO SON LOS QUE SE EXPONEN EN LA TABLA. LOS VALORES NO
PUEDEN SER INTERCAMBIADOS ENTRE LOS DISTINTOS PARÁMETROS.
Para añadir una película QuickTime a tu página web haz lo siguiente:
- Inserta un objeto Plug-in desde la paleta Objetos.
- En el cuadro de diálogo Insertar Plug-in, escribe el nombre y la ruta de acceso del
archivo QuickTime en el cuadro de texto Origen o selecciona el icono con forma de
carpeta.
- En el Inspector de propiedades de Plug-in introduce la anchura (An) y la altura (Al) en
los cuadros de texto o arrastra los controles de dimensión del cuadro del Plug-in.
- En el cuadro de texto URL plg, escribe la dirección a la que tienen que dirigirse los
visitantes de tu página que no tienen instalado el correspondiente Plug-
in.(www.quicktime.apple.com)
- Selecciona el botón Parámetros para abrir el cuadro de diálogo Parámetros.
Introduce los parámetros en la columna de la izquierda y los valores deseados en los
de la derecha.
36 propiedades del plug-in de video
2.3. Streaming En estos días en los que el tiempo es un bien escaso, esperar a que se descargue de
manera completa un archivo para poder visionarlo es algo que quizá muy pocas
personas están dispuestas a soportar. El vídeo continuo (streaming vídeo) permite
reproducir parte del contenido del archivo en cuanto éste se ha descargado.
El primer sistema de streaming lo desarrolló RealNetworks y se llama RealPlayer,
siendo la versión más reciente RealPlayerG2. Ésta admite tipos de datos como
Realflash y RealText aparte de RealVideo y RealAudio.
Para insertar un objeto RealVideo sólo necesitas saber el nombre del archivo de
origen y sus dimensiones, ya que los demás factores son añadidos sin necesidad de
tu colaboración; aunque como en QuickTime, se pueden añadir parámetros con sus
respectivos valores. La lista de algunos parámetros y valores de RealVideo es la
siguiente: Parámetro Valores Descripción Autostart true o false Permite empezar la reproducción de RealVideo en cuanto dispone de
algún contenido Nolabels true o false Suprime las etiquetas de Título, Autor y Copyright del Panel de
Estado. Si el valor es true, esa información es visible. Por defecto, es
false. Controls all, controlpanel,
imagewindow,
infovolumepanel,
playbutton,
stopbutton,
volumeslider
Permite situar elementos individuales del panel de control en la
página Web
Para añadir un objeto RealVideo sigue estos pasos:
- Inserta un objeto Plug-in desde la paleta Objetos.
- En el cuadro de diálogo Insertar Plug-in, escribe el nombre y la ruta de acceso del
archivo RealVideo en el cuadro de texto Origen o selecciona el icono con forma de
carpeta.
- En el Inspector de propiedades de Plug-in introduce la anchura (An) y la altura (Al) en
los cuadros de texto o arrastra los controles de dimensión del cuadro del Plug-in.
- Selecciona el botón Parámetros para abrir el cuadro de diálogo Parámetros.
Introduce los parámetros en la columna de la izquierda y los valores deseados en los
de la derecha.
comprueba que dominas el tema 4. Une los parámetros de la primera columna con la función que se les atribuye, y que se encuentra en la columna de la derecha. a) Controller 1.Permite comenzar la reproducción de
una película en cuanto se haya descargado lo suficiente
b) Volume 2.Visualiza el panel controlador c) Autoplay 3.Controla el volumen de la película d) Controls 4.Permite situar elementos individuales
del panel de control
3. OTROS ELEMENTOS MULTIMEDIA Macromedia Dreamweaver MX no sólo nos va a permitir añadir sonido y vídeo en el
sitio Web de forma rápida y sencilla, también nos va a permitir incorporar y editar otros
archivos y objetos multimedia. 3.1. Insertar objetos de botón flash El objeto de botón flash nos permite personalizar e insertar un conjunto de botones
flash prediseñados.
Para insertar un objeto de botón flash:
- En la vista de Diseño de la ventana de documento, selecciona Insertar botón flash en
el panel Objetos o elige Insertar-Imágenes interactivas-Botón flash. También puedes
arrastrar el icono de botón flash sobre la ventana de documento. Aparecerá el cuadro
de diálogo Insertar botón flash.
- Selecciona el estilo de botón que desees utilizar en la lista Estilo. Verás un ejemplo
del botón en el campo Muestra. Puedes hacer clic en esta muestra para ver cómo
funciona en el navegador. Sin embargo, el campo Muestra no se actualizará
automáticamente para mostrar los cambios realizados en el texto o la fuente. Estos
cambios aparecerán en la vista de Diseño.
- En el campo Texto del botón, escribe el texto que desees mostrar.
- En el campo Fuente, especifica un tamaño de fuente y selecciona la fuente que
deseas utilizar en el menú emergente.
- En el campo Vínculo, introduce un vínculo absoluto o relativo al documento para el
botón.
- En el campo Destino, especifica un marco o una ventana de destino para cargar el
vínculo del botón flash.
- En el campo Color fondo, establece el color del fondo de la película flash.
- En el campo Guardar como, introduce un nombre de archivo para guardar el nuevo
archivo SWF.
Puedes utilizar el nombre de archivo predeterminado (por ejemplo, button1.swf) o
escribir uno nuevo. Si el archivo contiene un vínculo relativo al documento, deberás
guardarlo en el mismo directorio que el documento HTML actual para mantener los
vínculos relativos al documento.
- Haz clic en Aceptar para insertar el botón flash en la ventana de documento.
37 insertar un botón de flash
EJERCICIO: Agregar botones de Macromedia Flash 1 . Crea una página nueva y ponlo un color de fondo el que más te gsute. 2. Seleccionar Insertar --> Imágenes interactivas --> Botón Flash. 4.Definir Estilo a Blue Warper. 5.Introduce como texto del botón CEDECO. 6.DefinE Vínculo a la siguiente dirección URL: http://www.cedeco.com 7.Definir Destino a -blank. 8.Utilizar el selector de Color de Fondo y la herramienta cuentagotas para seleccionar el color de fondo de la página existente. Esto hará que el botón aparezca como recortado sobre el fondo de la página. 9.Hacer clic en Aceptar. 10. Guardar el archivo y visualízalo con el navegador.
3.2. Insertar objetos de texto flash
El objeto de texto flash permite crear e insertar una película flash que sólo contiene
texto. Esto permite crear una pequeña película de gráficos vectoriales con fuentes de
diseño y el texto que elijas.
Para insertar un objeto de texto flash:
- En la vista de Diseño de la ventana de documento, selecciona Insertar texto flash en
el panel Objetos o elige Insertar- Imágenes interactivas-Texto flash. Aparecerá el
cuadro de diálogo Insertar texto flash.
- Selecciona una fuente en el menú emergente Fuente e introduce un tamaño de
fuente en el campo tamaño.
- Especifica los atributos de estilo, como negrita o cursiva, y la alineación del texto
haciendo clic en los botones del estilo correspondiente.
- En el campo Color, establece el color del texto utilizando el selector de colores o
introduciendo un valor hexadecimal para la Web (como #FFFFFF).
- En el campo Color de sustitución, establece el color que aparece cuando el puntero
pasa sobre el objeto de texto flash.
- Introduce el texto deseado en el campo Texto.
- En el campo Color fondo, elige un color de fondo para el texto.
- En el campo Guardar como, introduce un nombre para el archivo y haz clic en Aplicar
o Aceptar para insertar el texto flash en la ventana de documento.
38 insertar texto en flash
3.3. Insertar películas flash
Para insertar y previsualizar una película flash:
- En la vista de Diseño de la ventana de documento, sitúa el punto de inserción en el
lugar donde deseas insertar la película.
- Inserta la película de una de estas formas:
Haz clic en el icono Insertar flash en el panel Objetos o Elige Insertar-Medio-flash.
- En el cuadro de diálogo que aparece, selecciona el archivo de la película flash (.swf)
y pulsa Seleccionar.
39 insertar flash en una página html
3.4. Insertar un menú de salto El menú de salto no es realmente una imagen interactiva como las llama macromedia
sino un elemento de formulario. No obstante es muy interesante utilizarlo ya que nos
ahorra mucho espacio para poner enlaces.
Para insertarlo vamos a insertar – objetos de formulario – menú de salto.
En la ventana que aparece insertamos el nombre que aparece en el menú de salto y el
enlace en cuestión.
Aparecerá un menú desplegable. Es recomendable hacer clic en la casilla Insertar
botón ir tras menú para clarificar la acción al navegante.
40 insertar un menú de salto
EJERCICIO MENU DE SALTO 1 . abre una página nueva y guárdala como Menudesalto.htm 2. Selecciona Panel Objetos, Formularios. 3. Haz clic en el icono Menú de Salto. Esto debería abrir el cuadro de diálogo Insertar Menú de Salto. 4. Cambia el texto a "Seleccione un buscador" 5. Agregar los 3 nuevos elementos siguientes haciendo clic en
a. Texto = GoogLe, URL = http://www.GOOGLE.com b. Texto = Yahoo, URL = http://www.yahoo.com c. Texto = Excite, URL = http://www.excite.com d. Marca la casilla Seleccionar primer elemento tras el cambio de URL. e. Haz clic en Aceptar.
6. Guardar el archivo y ver la presentación preliminar en el explorador.
3.5. Insertar una barra de navegación Una barra de navegación se compone de una imagen o un conjunto de imágenes cuya
visualización cambia según las acciones que realiza el usuario. Las barras de
navegación permiten desplazarse fácilmente entre las páginas y los archivos de un
sitio. Antes de usar el comando Insertar barra de navegación, debemos crear un
conjunto de imágenes para los estados que se mostrarán con cada elemento de
navegación. Un elemento de barra de navegación se puede considerar como un botón,
ya que al hacer clic en él, lleva al usuario a otra página.
Un elemento de barra de navegación puede tener cuatro estados:
- Arriba: es la imagen que aparece cuando el usuario aún no ha hecho clic en el
elemento o interactuado con él.
- Sobre: es la imagen que aparece cuando el puntero se mueve sobre la imagen.
- Abajo: es la imagen que aparece después de hacer clic en el elemento. Por ejemplo,
cuando un usuario hace clic en un elemento, se carga una nueva página y la barra de
navegación sigue mostrándose, pero el elemento en el que se ha hecho clic aparece
oscurecido para indicar que se ha seleccionado.
- Sobre mientras abajo: la imagen que aparece cuando el puntero pasa sobre la
imagen Abajo después de haber hecho clic en el elemento. Por ejemplo, el elemento
puede aparecer atenuado o gris. Podemos utilizar este estado para indicar
visualmente a los usuarios que no pueden volver a hacer clic en el elemento mientras
se encuentren en esta parte del sitio.
Para crear una barra de navegación debemos seguir estos pasos:
- Sitúa el cursor donde quieres que aparezca la barra de navegación
- Haz clic en el menú Insertar, despliega la opción Imágenes interactivas y selecciona
la opción Barra de Navegación o haz clic sobre el icono Insertar Barra de Navegación
de la paleta Objetos. Verás que aparece el cuadro de diálogo Insertar Barra de
Navegación.
- En el campo Nombre de elemento, introduce un nombre para el elemento de la barra
de navegación. Por ejemplo, Productos. Cada elemento corresponde a un botón con
una serie de hasta cuatro imágenes de estado.
- En el campo Imagen arriba, haremos clic en Examinar para seleccionar la imagen
que desea mostrar inicialmente.
- En el campo Sobre imagen, hacemos clic en Examinar para seleccionar la imagen
que deseemos mostrar cuando el usuario mueva el puntero sobre el elemento cuando
se muestre la imagen Arriba.
- En el campo Imagen abajo, haremos clic en Examinar para seleccionar la imagen
que queremos mostrar después de que el usuario haga clic en el elemento.
- En el campo Sobre imagen mientras imagen abajo, hacemos clic en Examinar para
seleccionar la imagen que desea mostrar cuando el usuario mueva el puntero sobre la
imagen Abajo.
- En el campo Al hacerse clic, ir a URL, teclearemos la ubicación en la que se abrirá el
archivo vinculado. Es muy importante tener en cuenta el campo en, que se utiliza para
decidir el marco donde se abrirá el archivo.
- Marcaremos la opción Carga previa de imágenes que se encarga de transferir las
imágenes cuando se carga la página. Si esta opción no está seleccionada, es posible
que se produzca una demora cuando el usuario mueva el puntero sobre la imagen de
sustitución.
- Por último, decidiremos si queremos insertar la barra horizontal o verticalmente.
Puedes ver un ejemplo de este tipo de barras en las siguientes páginas:
http://www.macromedia.com
http://www.cedeco.com
41 insertar una barra de navegación
4. PUBLICAR TU PÁGINA No creas que por haber diseñado tu sito Web ya está todo hecho. Es entonces cuando
quizá viene el trabajo más constante. La publicación de la página y su mantenimiento
es una tarea que te llevará bastante tiempo. Es precisamente a esto, a mantener
páginas Web, a lo que se dedican la mayoría de los Webmasters.
Por su parte, Dreamweaver MX incluye un proceso llamado FTP que maneja todas las
necesidades de gestión Web. Veamos cómo.
4.1. Configurar un sitio Gestionar un sitio, tu sitio, no es otra cosa que transmitir tus archivos a un servidor de
publicación. Así el FTP de Dreamweaver MX te permite:
- Una rápida visión de los elementos de tu sitio.
- Ver un mapa del sitio.
- Gran eficacia a la hora de arrastrar y soltar archivos.
- Herramientas de inscripción y eliminación para gestión de sitios.
- Un Verificador de conexiones que te ayuda a identificar elementos estropeados.
42 configurar un sitio
Para llevar a cabo todo esto, debes crear una carpeta que contenga todo el HTML,
archivos, gráficos, etc. El primer paso a dar es este:
- Abre el menú Sitio.
- Haz clic sobre Sitio nuevo. El cuadro de diálogo Definición de sitio se abre. Aquí
podrás configurar tu sitio.
En Datos locales tienes varias opciones. Son las siguientes:
- Nombre del sitio. Es sólo una referencia y puedes asignarle el nombre que desees.
- Carpeta de raíz local. Es la localización del archivo en el disco duro.
- Dirección HTTP. Debes introducir el URL remoto que corresponde a la carpeta raíz
local, como si fuese de una dirección Web normal.
- Caché. Si marcas esta casilla, tu sitio se gestionará con mayor rapidez.
La siguiente opción que tienes en la ventana de Definición de sitio es Datos de
servidor Web. Lo primero que tienes que hacer es marcar en el menú desplegable
43 configuración del ftp
Acceso al servidor, la opción FTP. Así, visualizas las siguientes opciones:
- Servidor FTP. Se refiere al nombre del servidor en el que vas a destinar tu
documento.
- Directorio del servidor. Es el directorio en el que los documentos a los que tiene
acceso todo el mundo están almacenados dentro del servidor.
- Contraseña. Es la contraseña que el servidor te va a solicitar cada vez que cargues o
bajes un archivo. Debe ser conocida sólo por ti.
- Cortafuegos. Se utilizan para que nadie pueda acceder a documentos internos. Si
seleccionas la casilla debes ir al menú Edición y seleccionar Preferencias. Una vez
allí, haz clic sobre FTP del sitio e introduce el nombre del Servidor del cortafuegos y el
Número de puerto (normalmente suele ser 21).
La siguiente selección en la ventana Definición de sitio es Desproteger/Proteger.
Cuando selecciones Desproteger y proteger archivos activados, podrás acceder a los
otros dos campos. El nombre que introduzcas en Nombre de protección, hace que se
muestre un mapa de tu sitio en la ventana Diseño del mapa. Para ello, selecciona la
penúltima opción, Diseño del mapa de sitio, de la ventana Definición de sitio.
En Diseño de mapa de sitio, tienes varias opciones:
- Página principal. Dreamweaver MX buscará de forma automática un archivo llamado
index.htm o index.html para empezar a realizar el mapa del sitio.
- Número de columnas/ Ancho de columna. Definen la presentación del mapa del sitio
en pantalla.
- Etiquetas de iconos. Permite que los iconos que están en el mapa del sitio vayan
acompañados de los Nombres de archivo o de los Títulos de la página.
- Opciones. Si señalas la opción Mostrar archivos marcados como ocultos incluirás en
tu sitio archivos HTML designados como ocultos. Si marcas la casilla Mostrar archivos
dependientes, incluirás en el mapa del sitio otro tipo de archivos, como archivos
gráficos, de imágenes, etc.
La ventana sitio En la ventana sitio puedes observar las utilidades del FTP. La ventana sitio te permitirá
mover archivos desde tu carpeta local a tu sitio remoto y viceversa. Para visualizarla,
haz lo siguiente:
- Selecciona el menú Ventana.
- Haz clic sobre el comando Archivos de sitio.
En la ventana Sitio puedes ver la ventana de Sitio remoto y la ventana de la Carpeta
local.
44 ventana de sitio contraída
El botón Conectar/ Desconectar te permite comenzar o acabar lo que estés haciendo a
través del servidor.
45 la ventana del sitio ampliada y conectada con el servidor mediante ftp
El botón Obtener recupera los archivos y carpetas seleccionados del servidor.
El botón Colocar transfiere los archivos que hayas seleccionado desde Raíz local
hasta el servidor. Para transferir archivos sigue estos pasos:
- Selecciona los archivos en Raíz local.
- Pulsa el botón Colocar o selecciona el comando Colocar del menú Sitio. Si el archivo
que quieres transferir tiene algún archivo dependiente, Dreamweaver MX te
preguntará si quieres transferir dicho archivo. Sólo debes indicar Sí o No.
Si, por otro lado, deseas transferir archivos de Sitio remoto a Raíz local, sigue estos
pasos:
- Selecciona los archivos en Sitio remoto.
- Haz clic sobre el botón Obtener o selecciona el comando Obtener del menú Sitio.
Es muy frecuente que varios/as programadores/as se encuentren trabajando al mismo
tiempo en un mismo sitio web. ¿Qué sucedería si dos personas estuviesen
modificando el mismo archivo al mismo tiempo? Pues que seguramente harían las
mismas modificaciones y harían el trabajo del otro un tanto inservible.
Para que esto no suceda, Dreamweaver MX dispone de la opción Desproteger/ proteger archivos. Cuando un archivo, cualquiera, ha sido protegido por una persona,
el archivo tiene que ser desprotegido por otra persona si quiere trabajar sobre él.
Para proteger uno o varios archivos, haz lo siguiente:
- Selecciona los archivos que quieres transferir.
- Haz clic sobre el botón Proteger o elige el comando Proteger del menú Sitio.
Para desproteger uno o varios archivos haz lo siguiente:
- Selecciona los archivos que debas transferir.
- Haz clic sobre el botón Desproteger o selecciona el comando Desproteger del menú
Sitio.
4.2. Vínculos y roturas Una de las cosas que más preocupa a los programadores Web es la rotura de vínculos. Cuando un archivo no es encontrado por el servidor, debido a un vínculo
roto, puede hacer que todo tu trabajo se venga abajo.
Para solucionar este problema Dreamweaver MX posee el comando Comprobar
Vínculos. Este comando puede ser utilizado para comprobar y verificar un sitio
completo.
Para verificar los vínculos sigue estos pasos:
- Abre el archivo en el que quieres comprobar los vínculos y selecciona el comando
Comprobar vínculos en todo el sitio del menú Sitio.
46 comprobar vínculos en todo el sitio
El menú desplegable Verificación de vínculos (Ver.) te permite ver los vínculos rotos,
externos y huérfanos (éstos solamente se muestran cuando un sitio ha sido revisado
completamente).
El botón Guardar te permite guardar los errores encontrados para que te sirvan de
referencia en futuras ocasiones en las que tengas que revisar nuevamente tu sitio
web.
Pero, ¿cómo arreglar los vínculos rotos que nos muestra el Verificador de vínculos?
Es muy fácil, sólo tienes que seguir estos pasos:
- Selecciona cualquiera de los vínculos rotos que te muestre la ventana Verificador de
vínculos.
- Introduce la ruta correcta del archivo erróneo.
PARA VER UNA PÁGINA DESDE LA VENTANA COMPROBAR VÍNCULOS SÓLO
TIENES QUE HACER DOBLE CLIC SOBRE SU NOMBRE
4.3. El mapa del sitio Un sitio web puede contener simplemente dos o tres páginas, o por el contrario, llegar
a tener decenas de ellas. Tienes que tener en cuenta que cuantas más páginas tenga
tu sitio web, más difícil te resultará recordar su estructura. Para ello, Dreamweaver MX
nos facilita el mapa de nuestro sitio.
Para ver el mapa de tu sitio web haz lo siguiente:
- Abre el menú Sitio y selecciona el comando Mapa del sitio.
O también:
- Pulsa Mayús-F5.
Inicialmente, el mapa del sitio sólo te presenta los archivos HTML y no los archivos
ocultos o los dependientes.
Deberás observar que si el vínculo está en buen estado, aparece en color verde, y si
está roto, aparece en color rojo.
47 Mapa del sitio
Una de las tareas que Dreamweaver MX te facilita con el Mapa del sitio es hacer el
cambio de un vínculo de una página a otra o, también, puedes hacer que todas las
páginas se vinculen con una distinta de las que ya estaban.
Para cambiar un vínculo de una página a otra con el Mapa del sitio, haz lo siguiente:
- Selecciona el icono de la página que deseas modificar en el Mapa del sitio.
- Selecciona dentro de la ventana Sitio el menú Sitio y haz clic sobre el comando
Cambiar vínculo. Se abrirá entonces el cuadro Seleccionar archivo.
- Introduce la ruta y el nombre del archivo en el cuadro de texto Nombre de archivo o
presiona Seleccionar. Haz clic sobre Aceptar cuando hayas terminado.
Otro caso en el que puedes encontrarte alguna vez es que tengas dos o más páginas
vinculadas a una sola y que quieras modificar ésta última. Para ello, haz lo siguiente:
- Selecciona el icono de la página a la cual están vinculadas el resto de páginas.
- Selecciona en la ventana Sitio el menú Sitio y haz clic sobre Cambiar vínculo en todo
el sitio. Se abre el cuadro Cambiar vínculos en todo el sitio.
- Introduce en el cuadro de texto Por vínculo al nombre del archivo al cual quieres
vincular las páginas o presiona el icono con forma de carpeta para buscar el archivo.
Por otro lado, puede darse el caso de que quieras eliminar un vínculo. Para ello,
selecciona el icono del archivo y haz una de las siguientes cosas:
- Presiona la tecla Supr.
- Selecciona en la ventana Sitio el menú Sitio y haz clic sobre el comando Quitar
vínculo.
comprueba que dominas el tema 5.Elige la opción correcta para cada enunciado. a) Para evitar que una persona se ponga a trabajar en el mismo archivo que tu lo estas haciendo hay que...
1...cerrar el archivo 2...activar la opción desproteger/ proteger
b) La gestión de tu sitio web se maneja a través de...
1...el ftp del sitio 2...los formularios
c) El comando comprobar vínculos te permite...
1...insertar vínculos de correo electrónico 2...arreglar los vínculos rotos
DEBE QUEDARTE CLARO - Dreamweaver MX te permite insertar la mayoría de formatos existentes en la Red de
audio y vídeo. Una elección acertada del sonido y las imágenes que van a acompañar
a tu página Web harán mucho por ella.
- A través del FTP de Dreamweaver MX puedes mover y borrar archivos, diseñar el
mapa de tu sitio y arreglar los vínculos rotos. El ahorro de tiempo y la seguridad en el
manejo de archivos que te ofrece a la hora de trabajar Dreamweaver MX con el FTP,
harán más cómoda tu labor de diseño Web.
RECUERDA ESTAS PALABRAS FTP: proceso de gestión integrado en Dreamweaver MX que te permite controlar tu
sitio Web y hacer todo tipo de operaciones con tus archivos (nombrarlos, moverlos,
borrarlos, etc.).
LiveAudio: reproductor de sonido de Netscape.
Mapa de sitio: nos permite ver la distribución que hemos dado a nuestro sitio web, así
como reestructurarlo.
MP3: sistema de sonido digital con una excelente compresión y alta calidad de
reproducción. Parámetros: definen la apariencia y las funciones del sonido y el vídeo que insertes
en tu página web. La mayoría de ellos tiene que ir acompañados de un valor.
Quicktime: principal reproductor de vídeo y contenidos multimedia.
Streaming vídeo: sistema de vídeo que te permite visualizar la película sin esperar a
que ésta termine de descargarse del servidor.
Vínculos rotos: la avería más habitual que encontrarás en tu sitio Web. Se arreglan a
través de la ventana Verificador de vínculos.
COMPRUEBA QUE DOMINAS EL TEMA- SOLUCIONES 1. a) F ; b) F
3. a) F ; b) V
4 a) 2 ; b) 3 ; c) 1 ; d) 4
5 a) 2 ; b) 1 ; c) 2
GLOSARIO VI Blank: te permite abrir una nueva ventana en tu sitio al pulsar el vínculo
correspondiente.
Comportamiento: funciones ligadas a un elemento de la página (enlace de texto,
imágenes, etc.) y que necesitan de una etiqueta HTML.
Control de selección: control que se encuentra en las capas y que te permite
seleccionarlas y moverlas por la Ventana principal.
Controladores de tamaño: aparecen al seleccionar la tabla y te permiten variar el
tamaño de ésta.
Cursor de redimensionamiento: es el cursor que nos permite cambiar las
dimensiones de una tabla o una imagen, entre otros elementos, con el método de
pinchar y arrastrar.
Direcciones absolutas: es conocida como URL y especifica el tipo de protocolo, el
nombre del dominio, la ruta de acceso y el nombre del archivo.
Direcciones relativas: omiten uno o varios elementos de los citados en las
direcciones absolutas.
Evento: acción asociada a un comportamiento.
FTP: proceso de gestión integrado en Dreamweaver MX que te permite controlar tu
sitio Web y hacer todo tipo de operaciones con tus archivos (nombrarlos, moverlos,
borrarlos, etc.).
Hoja de estilo externa: tipo de hoja de estilo que te permite enlazar con ella y
cambiar automáticamente el estilo de tu sitio Web.
Inspector de propiedades: ventana flotante que te va a permitir modificar las
propiedades de la mayoría de los elementos que insertes en Dreamweaver MX.
Conocer su funcionamiento es indispensable para un buen manejo de Dreamweaver
MX.
LiveAudio: reproductor de sonido de Netscape.
Mapa de sitio: nos permite ver la distribución que hemos dado a nuestro sitio web, así
como reestructurarlo.
MP3: sistema de sonido digital con una excelente compresión y alta calidad de
reproducción. Parámetros: definen la apariencia y las funciones del sonido y el vídeo que insertes
en tu página web. La mayoría de ellos tiene que ir acompañados de un valor.
Quicktime: principal reproductor de vídeo y contenidos multimedia.
Reset: botón que permite volver a introducir todos los datos en un formulario. Streaming vídeo: sistema de vídeo que te permite visualizar la película sin esperar a
que ésta termine de descargarse del servidor.
Submit: botón de formulario cuya función es enviar la información recogida a una URL
o a una dirección de correo.
Ventanas flotantes: sistema de ventanas movibles que te permitirán insertar y
modificar la mayoría de los elementos de Dreamweaver MX. Puedes visualizarlas a
través del menú Ventana.
Vínculos rotos: la avería más habitual que encontrarás en tu sitio Web. Se arreglan a
través de la ventana Verificador de vínculos.
