viernes, 4 de abril de 2008
jueves, 3 de abril de 2008
miércoles, 23 de enero de 2008
Crear un álbum o galería de fotos
1. Para crear una galería de fotos, sólo haz clic sobre el documento en que estás trabajando y ve al menú Comandos > Crear álbum de fotos Web.
2. Aparecerá un cuadro de diálogo donde debes llenar los siguientes datos:
Título del álbum de fotos: Es autoexplicativo, ¿no?
Información de subencabezado y Otra nformación: En forma opcional, se puede agregar texto adicional que aparecerá bajo el título del álbum. Útil para mencionar al autor de las fotos, el lugar donde se tomaron u otros datos.
Carpeta de imágenes de orígen y de destino: En la primera, seleccionaremos la carpeta donde se encuentran las fotos que deseamos agregar. En la segunda, crearemos o elegiremos una carpeta dentro de nuestro sitio Web para que se almacenen las fotos procesadas. Ojo, que no puede ser compartida con otro álbum.
Tamaño de miniatura: Aquí elegiremos las dimensiones en pixeles de las muestras que se crearán de cada imagen. Podemos elegir desde un tamaño tan pequeño como 36x36 pixeles hasta 200x200.
Columnas: Sencillamente, la cantidad de columnas que deseamos. Debería ir en concordancia no sólo con el tamaño de las miniaturas, sino también con nuestro diseño.
Formato de miniatura y de fotos: Permite elegir el formato en que deseamos comprimir las imágenes una vez procesadas. Para la mayoría de los casos, JPEG de calidad superior estará bien cuando se trate de fotografías. También se puede elegir un tamaño final para las imágenes originales, reduciéndolas (o ampliándolas) en un factor de porcentaje.
Crear página de navegación para cada foto: Si seleccionas esta casilla, cada vez que se amplie una foto desde una miniatura aparecerán opciones de "anterior" y "siguiente" para
visualizar el resto de la galería en la misma ventana. Si prefieres que no sea así, cada miniatura enlazará directamente a su original.
3. Sorpréndete con el resultado.
Exportar hacia Dreamweaver
Para probar las opciones de exportación utilizaremos un botón que insertaremos en un documento html de Dreamweaver.
Para exportar la pieza gráfica que creamos con Fireworks MX debemos dirigirnos al menú File y seleccionar Export (exportar), donde hay que escoger la opción Html and Images, Para mantener un orden, es recomendable crear con anterioridad una carpeta para almacenar los archivos que vamos a exportar.
Ya realizado este paso, por un momento nos olvidamos de Fireworks y nos dirigimos a Dreamweaver.
Esta acción es muy fácil debido a la integración entre ambos software explicada con anterioridad. Antes de insertar nuestro botón debemos asegurarnos de que los archivos exportados se encuentren dentro de la carpeta del sitio, elemento imprescindible para que Dreamweaver reconozca
el documento.
Finalmente, ubicamos la barra de "Objetos" de Dreamweaver (si no aparece la podemos sacar presionando "Control + F2") y seleccionamos la opción "Insertar Html de Fireworks" (Insert Fireworks HTML) como lo muestra la figura a continuación.
Una vez hecho esto se desplegará una ventana donde debemos ubicar el archivo htm que exportamos, y listo, nuestro botón queda "incrustado" en nuestro documento web.
Nota: El editor HTML de Microsoft, Frontpage, también trae una opción para insertar HTML de Fireworks, que se utiliza en forma similar.
Exportar hacia otros editores
Para exportar archivos de Fireworks a otros editores html debemos copiar el código fuente del documento htm que exportamos, para luego pegarlo en nuestra nueva página web.
Para acceder al código de nuestro botón activo hay que abrir el archivo htm que exportamos desde Fireworks en cualquier editor web. En la modalidad que permite ver el código fuente del documento copiamos lo que corresponda al botón activo (por lo general aparece marcado desde hay que empezar a copiar y hasta donde).
Botones activos y menús desplegables
Otra de las opciones que nos permite Fireworks MX es realizar nuestros propios botones, aprovechando una sencilla herramienta para crear “roll over”, el efecto que “activa” elementos de
una página web cuando desplazamos el cursos sobre ellos.
Botones activos
Lo primero que debes hacer es abrir un documento en blanco con un tamaño superior en algunos píxeles a las dimensiones finales del botón, en el cual dibujaremos un rectángulo o un circulo de acuerdo a la forma que queremos dar a este elemento.
Una vez definidas sus propiedades procederemos a configurar el “comportamiento” del botón, para que este cambie de color al colocar el mouse sobre el, en lo que se conoce como “roll over”.
Para realizar esta acción lo primero que debemos hacer es convertir nuestro vector en "simbolo” (Convert to symbol). Para ello podemos ubicar el cursor sobre el objeto y desplegar el menú contextual en donde nos aparecerá la opción “Convert to symbol” o seleccionar la figura y presionar la tecla “F8” del teclado.
Al escoger cualquiera de las dos posibilidades, nos aparecerá en pantalla un cuadro en donde debemos ingresar un nombre para el símbolo (se recomienda un nombre genérico como “botón 1”) y luego elegir el tipo de gráfico que deseamos hacer, en este caso un botón (button).
Al convertir nuestro objeto en un símbolo, aparecerá sobre él una capa verde que indica la transformación y el tipo de gráfico que es, con lo que estaríamos listos para echar a volar nuestra imaginación.
Para configurar el “roll over” debemos hacer doble clic en la zona verde que cubre el botón con lo cual nos aparecerá el siguiente cuadro:
1. Up: El estado normal del botón.
2. Over: Este estado se muestra al colocar el puntero del mouse sobre el botón.
3. Down: Esto se muestra al hacer clic sobre el botón.
4. Over while down: Lo que se verá al mantener presionado el botón
5. Active Area: Esta opción se activa automáticamente y determina la zona interactiva.
En este punto es necesario seleccionar la opción “Copy Down Graphic”, la cual copia automáticamente el botón en los distintos estados, para ser modificados posteriormente.
OJO!:
Para que resulte el “roll over” debemos asegurarnos de realizar cambios en los distintos estados. Tampoco es obligación modificar todos los estados, sólo los que estimemos convenientes.
Una vez terminadas las modificaciones, simplemente apretamos “Done”.
Para ver en funcionamiento nuestro botón podemos escoger la lengüeta “preview”, que se encuentra en la parte superior de la ventana de trabajo, o simplemente presionar la tecla “F12”, con la cual se abrirá una ventana del navegador que mostrará el botón en acción.
Menús desplegables
Para agregarle la opción de menú desplegable a nuestro botón debemos seleccionarlo y dirigirnos al menú “Modify” opción “Pop-up Menu” >> Add Pop-up Menu. En ese punto aparecerá un
cuadro que nos permitirá configurar el menú desplegable.
Las opciones modificables son:
1. Content: Acá configuramos el texto que se desplegará, el vínculo que tendrá y el destino del vínculo. OJO!: Debemos tener claro el vínculo de cada opción que se desplegara debido a que no se pueden modificar con facilidad una vez exportados.
2. Appearance: Acá podemos escoger la apariencia que tendrán los submenús, modificando
los colores, tipos de fuentes, etc.
3. Advanced: Esta opción nos permite entregarle propiedades a las celdas de los submenús,
como tamaños, color de bordes, etc.
4. Position: Acá podemos configurar la posición del menú desplegable, lo que también se puede hacer en forma manual.
Una vez configuradas todas las opciones seleccionamos “Done”.
Para ver una previsualización del trabajo realizado presionamos la tecla “F12” del teclado.
Suerte!!