Diseño de páginas web

Transcripción

1 Diseño de páginas web Utilidades en Dreamweaver Ricardo Esteban Alonso

2 Preferencias. Edición En el menú Edición > Preferencias...,podemos modificar a nuestro gusto las opciones que de forma predeterminada nos aparecen al utilizar Dw. Utilidades en Dreamweaver 11.-1

3 Insertar líneas rectas Ruta: Insertar > Regla horizontal, cuyas propiedades podemos modificar con el inspector correspondiente. An (ancho) en píxeles o en porcentaje Al (alto) grosor de la línea Alinear, con las opciones de Izquierda, Centro, Derecha. Si eliges Predet. la línea se situará según esté por defecto en el navegador. Desactiva la opción Sombreado si quieres que la línea no tenga el efecto tridimensional que ofrece la línea al crearla. Utilidades en Dreamweaver 11.-2

4 Zonas interactivas Podemos hacer que partes de una imagen insertada en nuestra página tenga vínculos a otras zonas o páginas externas. Para ello es necesario crear las llamadas zonas interactivas para lo cual emplearemos los botones Herramienta Puntero Her. Zona oval Her. Zona rectangular Her. Zona poligonal del inspector de propiedades que aparecen al seleccionar una imagen cuyas partes vamos a vincular. Asignación de vínculos: Utilidades en Dreamweaver 11.-3

5 Inserción de sonidos y vídeo Los sonidos suelen ser de baja calidad con el fin de que tarden menos en descargarse. Se suelen subir a la red en formato MP3 que consigue una calidad de sonido similar a la de un CD de audio. Para que se pueda escuchar una canción empezaremos por hacer clic en la etiqueta <body>, y a continuación activaremos el panel de comportamientos y activaremos el botón para desplegar las opciones y seleccionar Controlar sonido, y al pulsar en ella nos permitirá elegir el nombre del archivo que contenga la canción a escuchar (los distintos eventos que nos permite elegir Dw los veremos cuando expliquemos los Comportamientos). En el caso de los videoclips es similar, agravado por el peso aunque se reduzca su calidad, y así lo que se suele hacer es reducir las imágenes para que sean minúsculas y se puedan ver en una ventana pequeña. El formato suele ser AVI, MPEG o MOV. En Dw pueden añadirse videoclips mediante el menú Insertar > Medio > Generator, que nos llevará a un cuadro de diálogo en el que podremos establecer los datos del archivo de vídeo que se incorporará a nuestra página. Cuando se inserte en la página aparece como un recuadro con un icono que podremos ajustar el tamaño con los manejadores. Utilidades en Dreamweaver 11.-4

6 Deshacer y repetir Dw permite anular las operaciones que se van realizando cuando no estemos satisfechos de lo obtenido y queramos recuperar lo anterior, y así al activar Deshacer se anulará ña última operación realizada. Si cambiamos de opinión y queremos volver otra vez al cambio tenemos la opción de Repetir. Búsqueda y reemplazo automático de datos Funciones que se emplean cuando se tienen páginas Web con contienen textos largos en los que resulta complicado buscar una palabra. Basta seleccionar la ruta: Edición > Buscar y reemplazar, y que se obtiene un cuadro de diálogo donde podemos indicar los datos necesarios del texto a encontrar. Utilidades en Dreamweaver 11.-5

7 Caracteres especiales y símbolos Ruta: Insertar > Caracteres especiales Se pueden insertar uno de los símbolos que se ofrecen o bien elegir la opción Otro y se obtiene un cuadro de diálogo con el que podemos incorporar otros caracteres: Utilidades en Dreamweaver 11.-6

8 Insertar la fecha Menú Insertar > Fecha Se genera el cuadro de diálogo de la derecha donde nos permite elegir el Formato de día, el formato de fecha, el Formato de hora (o Sin hora) y si activamos la casilla Actualizar automáticamente al guardar la fecha cambia por la del día en que nos encontremos cada vez que modifiquemos y guardemos la página en el disco. Utilidades en Dreamweaver 11.-7

9 Comentarios Podemos añadir mensajes de texto que no aparezcan en nuestra página al navegar, pero que nos sirvan a modo de recordatorio en nuestra creación de la página con Dw. Se accede a ellos a través del menú insertar > Etiquetas invisibles > Comentario, y nos lleva a un cuadro de diálogo: El comentario aparece en la página mediante un pequeño icono, que al ser pulsado nos aparecerá el comentario en el inspector de propiedades, y donde también se puede teclear cambiando o añadiendo el contenido del comentario. Utilidades en Dreamweaver 11.-8

10 Insertar partes de programa en JavaScript Todavía hay navegadores que no reconocen las instrucciones de lenguajes como JavaScript o VBScript, por lo que se puede mostrar un enlace en las páginas para que sea el usuario quien elija si su navegador soporta o no Java y que el enlace les lleve a ofrecer el mismo contenido, pero sin las funciones que ofrece dicho lenguaje. Para añadir un programa escrito en Java se utiliza el menú Insertar > Etiquetas invisibles > Secuencia y se obtiene un cuadro de diálogo. Selecciona el Lenguaje, y las instrucciones de ese lenguaje se deben teclear en el cuadro Contenido. Utilidades en Dreamweaver 11.-9

11 Imágenes de sustitución Ruta. Insertar > Imágenes interactivas > Imagen de sustitución Muchas veces en el menú de navegación o en cualquier otra imagen dentro de la página, podemos incluir, para hacer más llamativo imágenes de sustitución, de forma que al pasar el ratón dentro de una imagen, ésta se sustituya por otra. Lo más adecuado es que ambas sean del mismo tamaño y de colores complementarios. Utilidades en Dreamweaver

12 Barra de navegación Es parecido a una barra de herramientas con botones. Dw permite crear una barra con pequeñas imágenes que simularán botones, y cada uno de estos botones nos pueden llevar a una página web diferente. Ruta: Insertar > Imágenes interactivas > Barra de navegación, y nos ofrece el diálogo de la derecha Es recomendable activar la casilla Carga previa de imágenes ya que así el navegador las leerá al abrir la página, y al hacer clic el cambio de la imagen será instantáneo. También se puede elegir si los botones de la barra se colocarán Horizontalmente o Verticalmente. Dw sólo permite colocar una barra de navegación por cada página web. Utilidades en Dreamweaver

13 Botones de Flash Dw ofrece una serie de botones ya definidos con Flash que se pueden emplear en nuestras páginas web. Se accede: Insertar > Imágenes interactivas > Botón Flash, y nos aparece el cuadro de diálogo de la izquierda. Si pulsas el botón Obtener más estilos (y te encuentras conectado a Internet) accederás al sitio web de Macromedia en el que puedes encontrar más tipos de botones Flash (también con las extensiones de Dw). Los botones Flash deben colgar de la misma carpeta que el archivo donde se insertan. Similar a los botones Flash es el Texto Flash que se encuentra en el mismo menú o ruta. Utilidades en Dreamweaver

14 Álbum de fotos Si tenemos instalado Fireworks junto con Dreamweaver podemos crear una colección de imágenes en miniatura, como un álbum de fotos. Para ello es necesario recopilar todas las imágenes que compondrán el álbum en una carpeta del disco. Una vez tengamos todas las fotos o imágenes en una carpeta se accede al menú Comandos en el que activamos Crear álbum de fotos web, y se obtiene el diálogo. Si se activa la casilla Crear página de navegación para cada foto, Dw coloca mensajes con vínculos para acceder a las demás fotos. Cuando pulsamos el botón Aceptar Dw pone a trabajar a Fireworks para que éste diseñe y grabe en el disco las miniaturas. Al final del proceso aparece un mensaje indicando que el álbum se ha creado, y presenta la primera página con todas las miniaturas (thumbnails). Cuando Dw termina de crear la página de miniaturas se puede retocar. Cuando se examina la Carpeta de imágenes de origen, éstas no aparecen relacionadas, pero si se encuentran en la carpeta, y por lo tanto hay que dar a Seleccionar. La Carpeta de destino debe colgar de la carpeta raíz del sitio. Utilidades en Dreamweaver

15 Corrector ortográfico Dw puede comprobar el texto que se escribe, deteniéndose en las palabras que no figuren en su diccionario y ofrece una lista de posibles palabras correctas. Ruta: Texto > Ortografía, que al ser pulsada hace que el corrector se ponga en marcha, y si encuentra alguna palabra errónea, aparece un cuadro de diálogo con varias opciones y botones. Como sabemos los correctores no comprenden el significado de las palabras, sólo comparan con las que tiene en su diccionario. Utilidades en Dreamweaver

16 Comportamientos (1) A excepción del texto corriente, cada objeto que coloquemos en la página, puede tener asociado uno o más comportamientos. Ruta: Ventana > Comportamientos Al hacer clic sobre una imagen, por ejemplo, el panel Comportamientos mostrará: Al pulsar el botón se despliega una lista de comportamientos posibles, en función del objeto seleccionado. Utilidades en Dreamweaver

17 Comportamientos (2) Eventos: Aparecen cuando todo está definido, en el panel Comportamientos, y obligan a que el comportamiento realice una acción. Los más utilizados son: onclick: al hacer clic on MouseOver: al pasar el ratón sobre onload: al cargar el objeto en la página ondblclick: al hacer doble clic sobre el objeto onmouseout: al salir el ratón del objeto Podemos eliminar un comportamiento de la página haciendo clic sobre su evento (en el panel Comportamientos) y pulsando la tecla SUPR o el botón del panel. Utilidades en Dreamweaver

18 Ayuda en Dreamweaver La ayuda de Dw emplea páginas Web para ofrecer información. En cualquier momento se puede pulsar la tecla F1 con el fin de obtener ayuda sobre un tema concreto. El sistema más común para entrar en la ayuda es seleccionar la opción Uso de Dreamweaver del menú Ayuda. La ventana de ayuda posee tres botones, Contenido, Índice y Buscar También cuando se pulsa el icono en el inspector de propiedades se obtiene ayuda sobre el manejo de esas propiedades. Utilidades en Dreamweaver