Dreamweaver

Podemos definir un estilo para una sección de un documento, un documento completo o incluso un sitio completo. Los estilos nos permiten controlar la mayoría de los atributos de formato del texto tradicional. Podemos definir una variedad de estilos en las Cascading Style Sheets (Hojas de estilo) y utilizarlas para tener control sobre la fuente, el fondo, los bordes y mucho más. Las hojas de estilo residen en el HEAD del documento HTML. Las hojas de estilo funcionan en navegadores 4 en adelante. Internet Explorer 3 reconoce algunas hojas de estilo pero la mayor parte de esa generación de navegadores las ignora.

Para definir un nuevo estilo debemos ir a Ventana/Estilos (Window/Styles) para abrir la paleta de estilos. Hacemos clic en el botón Hacer estilo personalizado (Make Custom Style Class) y escribimos un nombre para nuestro estilo (debe comenzar con un punto para asegurarnos de que el estilo funcione adecuadamente).

estilos y comportamientos

Se abrirá la ventana de definición del estilo. Seleccionamos los parámetros deseados para nuestro nuevo estilo y pulsamos OK para terminar .
Para aplicar un estilo seleccionamos la porción de texto a la cual queremos aplicar determinado estilo, vamos a la paleta de estilos y hacemos clic sobre el estilo deseado.
También podemos aplicar un estilo a todo el BODY de un documento.
Esto se hace desde la paleta de estilos, desplegando el menú Aplicar a (Apply to) y seleccionando BODY. Si seleccionamos <p> se aplicará a todo el párrafo.

estilo html

Además de permitirnos definir nuevos estilos, las hojas de estilo nos permiten asociar opciones adicionales de formato a las etiquetas existentes de HTML. Por ejemplo, si tenemos una serie de encabezados ya formados con la etiqueta de encabezado H2 y ahora deseamos aplicarle una sangría al centro, podemos agregar la especificación a la definición de estilo para la etiqueta H2 para que con ello se aplique el cambio automáticamente a todos los textos formados con la etiqueta H2.
Para realizar esto debemos abrir la paleta Estilos Css (Css styles) que se encuentra en el menú Ventana (Window). Hacemos clic en el boton Nuevo y seleccionamos la segunda opción:

HTML (Redefine HTML tag). Debajo, seleccionamos qué etiqueta queremos redefinir, por ej. H6. Cuando le damos Aceptar se abrirá la ventana de definición de estilo para dicha etiqueta. Una vez que definimos el estilo le damos Aceptar .

Podemos guardar el formato de texto y párrafos para utilizar luego en otro lado. Una vez que establecemos un estilo HTML podemos reutilizarlo en cualquier texto utilizando la paleta Estilos HTML. A diferencia de las hojas de estilo, el estilo HTML solo afecta el texto al cual los aplicamos. Si cambiamos la apariencia de un estilo HTML, el texto que previamente formateamos con él, no se actualizará. Si queremos estilos que actualicen el texto cuando son cambiados, debemos usar hojas de estilo.

Remover estilo de párrafo (Clear paragrarph style): remueve cualquier formato del párrafo actual.
Remover estilo a la selección (Clear selection style): remueve cualquier formato del texto seleccionado.
Bold: Negrita
Red: tipografía de color rojo.

 

nuevo estilo

Comportamientos

Un comportamiento es una combinación de un evento con una acción.
Por ejemplo, cuando el usuario mueve el mouse sobre una imagen (evento) y esta cambia (acción). Una acción consiste en una porción de código Javascript que realiza tareas determinadas como abrir la ventana del navegador, ejecutar un sonido, etc. Los browsers definen los eventos para cada elemento de las páginas, por ejemplo:

OnMouseOver, onMouseOut y onClick son eventos asociados con links en muchos navegadores y OnLoad es un evento asociado con imágenes y el BODY (cuero) de un documento. Los eventos son generados por los navegadores en respuesta a las acciones del
usuario; por ejemplo, cuando un usuario mueve el puntero sobre un enlace, el navegador genera un evento OnMouseOver y llama a la función Javascript (si es que ya) que nosotros le hayamos asociado a ese evento. Las acciones que podemos usar para disparar una acción dada pueden variar dependiendo del navegador.

Cuando adosamos un comportamiento aun elemento de una página, especificamos una acción y el evento que la dispara. Varias acciones pueden ser disparadas por el mismo evento. Podemos especificar el orden en el que las acciones ocurrirán. Dreamweaver incluye varios
comportamientos y se pueden encontrar comportamientos adicionales en el sitio Web de Macromedia.
Utilizamos el inspector de comportamientos que se encuentra en Ventana/inspector de comportamientos (Window/Behavior inspector) para asignar comportamientos a los objetos y para modificar parámetros de comportamientos previamente asignados. Los comportamientos se encuentran listados alfabéticamente por evento.

acciones

Si hay varias acciones para el mismo evento, las acciones parecen en el orden en el que serán ejecutadas.

Acciones (Actions) ( + ) : Muestra un listado de acciones que pueden ocurrir. Si seleccionamos una acción, aparecerá el cuadro de diálogo de parámetros.
Borrar (Delete) ( -) : Remueve una acción dada y su evento asociado de la lista del inspector de comportamientos.
Eventos para (Events for): Especifica los navegadores para los cuales el comportamiento actual funcionará. La selección que hagamos en este menú determinará qué eventos aparecen en el menú desplegable de eventos.
Flecha hacia arriba y hacia abajo: Mueve la acción seleccionada hacia arriba o hacia abajo en la lista de comportamientos. Las acciones son ejecutadas en el orden especificado.
Eventos: Muestra todos los eventos que pueden disparar determinada acción. Diferentes eventos aparecen dependiendo del objeto seleccionado.

Algunos eventos que pueden ser asociados a acciones:
onLoad (NS3 NS4, IE3, IE4): se genera cuando una imagen o , página termina de cargar.
onMouseDown (NS4, IE4): se genera cuando el usuario oprime el botón del mouse.
onMouseMove (IE3 IE4): se genera cuando el usuario mueve el mouse mientras apunta a un objeto determinado (el puntero tiene que estar dentro de los límites del objeto )
onMouseOut (NS3, NS4, IE4): se genera cuando el puntero se mueve fuera del objeto especificado. (El objeto especificado es por lo general un enlace.)
onMouseOver (NS3 NS4, IE3, IE4): cuando el mouse se mueve para apuntar un objeto determinado. (Esto es cuando pasa de NO estar sobre el objeto a estar sobre el objeto).
onResize (NS4 IE4): se genera cuando el usuario redimensiona la ventana del navegador o un marco.

acciones

Podemos adosar un comportamiento a un documento entero (esto es a la etiqueta BODY), a enlaces, a imágenes, elementos de formulario y otros elementos HTML. El navegador determina qué elementos pueden aceptar comportamientos. Internet Explorer 4, por ejemplo, soporta más eventos para cada elemento que Netscape Navigator 4.

Podemos especificar más de una acción para cada evento. Las acciones ocurren en el orden que el que están listadas en la columna Acciones del Inspector de comportamientos.
Para adosar un comportamiento seleccionamos un objeto (Para seleccionar una página entera hacemos clic sobre la etiqueta BODY que se encuentra en el selector de etiquetas en el pie de la ventana documentos. Vamos a Ventana/Comportamientos (Window/Behaviors) para abrir el inspector de comportamientos. La etiqueta HTML del objeto seleccionado aparece en la barra de título del inspector de comportamientos. Oprimimos el botón ( +) y seleccionamos una acción del menú desplegable. Las acciones en gris no se pueden aplicar para el objeto seleccionado. Aparecerá un cuadro de diálogo con parámetros específicos para la acción
seleccionada. Ingresamos los parámetros y pulsamos OK.

Todas las acciones proporcionadas por Dreamweaver funcionan en navegadores de generación 4 y superiores. Algunas acciones no funcionan en navegadores anteriores.

El evento por omisión para la acción seleccionada aparecerá en la columna de eventos. Si este no es el evento que queremos, elegimos otro de la lista de eventos. Los eventos varían dependiendo del objeto seleccionado y del navegador especificado en el menú de Eventos
para.
Algunas acciones: Chequear navegador, chequear plug-in, ir a URL, mensaje emergente, ejecutar sonido.

25 diciembre, 2014
dreamweaver

Estilos y Comportamientos en DreamWeaver

Podemos definir un estilo para una sección de un documento, un documento completo o incluso un sitio completo. Los estilos nos permiten controlar la mayoría de […]
25 diciembre, 2014
dreamweaver

Tablas en DreamWeaver

Las tablas sirven para organizar datos e imágenes en un archivo HTML. Consisten de tres elementos básicos: filas, columnas y celdas (que surgen de la intersección […]
25 diciembre, 2014
dreamweaver

Introducción a la creación de formularios con DreamWeaver

Los formularios poseen campos que son enviados a una secuencia de comandos CGI que se encuentra en el servidor para su procesamiento. Los formularios nos permiten […]
25 diciembre, 2014
dreamweaver

Área de trabajo en DreamWeaver

Pantalla inicial de Dreamweaver El área de trabajo de Dreamweaver puede adaptarse a distintas formas de trabajar y a diversos niveles de experiencia. Cuando inicie Dreamweaver, […]
25 diciembre, 2014
dreamweaver

Estilos en Cascada (CSS) con DreamWeaver

Los Estilos en cascada, estilos css, nos permiten controlar los parámetros de estilo para todos los documentos que forman un sitio web. Esto es así cuando […]
25 diciembre, 2014
dreamweaver

Introducción a la disposición en DreamWeaver

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 […]
25 diciembre, 2014
dreamweaver

Bases y Planificación de un Sitio Web

Pasos en el trabajo de desarrollo Web El trabajo de desarrollo de una página Web comienza con el proceso de definición de una estrategia y unos […]
25 diciembre, 2014
dreamweaver

Propiedades de la página en DreamWeaver

Utilice el cuadro de diálogo Propiedades de la página para especificar diversas opciones de la página. Para abrir el cuadro de diálogo Propiedades de la página, […]
25 diciembre, 2014
dreamweaver

Copiar y pegar pasos entre documentos

Todos los documentos abiertos tienen su propio historial de pasos. Puede copiar los pasos de un documento y pegarlos en otro. Nota: Copiar pasos (un botón […]
25 diciembre, 2014
dreamweaver

Repetir Pasos con DreamWeaver

Para repetir el último paso realizado, utilice el comando Edición > Repetir, o utilice el método abreviado de teclado Control+Y (Windows) o Comando+Y (Macintosh). El nombre […]
25 diciembre, 2014
dreamweaver

Automatizar tareas con DreamWeaver

Al crear documentos, es posible que desee realizar la misma tarea muchas veces. En esta sección se explica cómo utilizar el panel Historial para automatizar tareas […]
25 diciembre, 2014
dreamweaver

Crear un nuevo documento basado en una plantilla con DreamWeaver

1 Elija Archivo > Nuevo de plantilla. Aparecerá un cuadro de diálogo con las plantillas disponibles para el sitio actual. Deberá crear plantillas antes de crear […]
25 diciembre, 2014
dreamweaver

Puntos de Fijación, Anclas o Anchors, en DreamWeaver

Para colocar un enlace a otro punto de la misma página debemos primero colocar un ancla en el punto de destino del vínculo. Para ello, ubicamos […]
25 diciembre, 2014
dreamweaver

Los Colores en DreamWeaver

A estas alturas ya hemos empleado unas cuantas veces las paletas de color del Dreamweaver. Si ninguno de estos colores nos gusta, pulsando en podemos crear […]
25 diciembre, 2014
dreamweaver

Notas en DreamWeaver

Es una herramienta de Dreamweaver muy útil cuando el sitio se construye entre varias personas o cuando queremos realizar alguna anotación que nos sirva para el […]
25 diciembre, 2014
dreamweaver

Trabajando con Capas en DreamWeaver

Es difícil definir qué es una capa. Una de las formas consistiría en imaginar que es una página web dentro de otra página web. En realidad […]
25 diciembre, 2014
dreamweaver

Línea de Tiempo en DreamWeaver

HTML dinámico se refiere ala capacidad de cambiar el estilo o propiedades de posicionamiento por medio de un lenguaje de script. Las líneas de tiempo utilizan […]
25 diciembre, 2014
dreamweaver

Adaptar web a distintas resoluciones con DreamWeaver

Siempre que se crea una página web hay que tener en cuenta que va a ser vistada por usuarios con monitores de distintos tamaños y con […]
25 diciembre, 2014
dreamweaver

Las plantillas en DreamWeaver

Una plantilla es una estructura en la que hay partes no editables (que no se van a poder modificar) y otras que son modificables para llenarse […]
25 diciembre, 2014
dreamweaver

Uso básico de las capas en DreamWeaver

Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas […]
25 diciembre, 2014
dreamweaver

Uso del refresh en DreamWeaver

Con esta opción se podrá redirigir la página actual o simplemente actualizar el documento al transcurrir cierta cantidad de segundos, regularmente está opción se usa para […]
25 diciembre, 2014
dreamweaver

Validar nuestro código en DreamWeaver

Poniendo a tono nuestro programa Simplemente abra Dreamweaver MX 2004 y seleccione en el menú Edición » Preferencias (PC: Ctrl+U, MAC: Cmd+U). Seleccione la opción Accesibilidad […]