¿Qué puede hacer Fireworks?
Fireworks es una herramienta para desarrolladores Web y artistas
gráficos profesionales que permite diseñar, editar y optimizar gráficos
para Internet. Las imágenes se pueden dividir, y cada división se puede
optimizar individualmente para obtener una calidad óptima y permitir una
descarga más rápida. Asimismo, Fireworks permite exportar JavaScript,
que controla funciones como la carga previa de imágenes, el intercambio
de imágenes para rollovers, los menús emergentes y el control de la
interacción de imágenes intercambiadas para permitir al usuario crear
barras de navegación. Esto convierte a Fireworks en un producto
indispensable para los diseñadores de interfaces de usuario, y no sólo
lo utilizan con esta finalidad los diseñadores y desarrolladores Web,
sino también los desarrolladores de multimedia y software en su trabajo
de diseño de interfaces de usuario. Ahora Fireworks puede utilizar
archivos XML para importar dinámicamente texto en una serie de imágenes.
¿Puedo crear un sitio Web en Fireworks?
Aunque es posible generar archivos HTML vinculados entre sí mediante
Fireworks, este programa no es un editor HTML. Muchos usuarios trabajan
con Dreamweaver y Fireworks en Studio MX para desarrollar sus sitios
Web, ya que ambos productos están integrados para ofrecer un conjunto de
creación Web completo. Dreamweaver permite a los usuarios insertar
varios tipos de contenido Web en páginas HTML, así como establecer
información de etiquetas <head>. La manipulación de la parte
<head> de un documento permite establecer que los motores de
búsqueda encuentren las páginas, así como configurar propiedades de la
página como el color o la imagen de fondo y los márgenes. Dreamweaver
también admite CSS y otras características de capas DHTML no disponibles
en Fireworks. Además, Dreamweaver permite vincular y acceder a bases de
datos mediante distintas configuraciones para controlar sitios Web
dinámicos. Las funciones de FTP incorporadas en Fireworks MX 2004
permiten a los usuarios cargar archivos y sincronizar sus archivos
locales con la fecha y hora del servidor.
¿Qué formatos de archivo puede importar y exportar Fireworks?
Fireworks importa: Fireworks exporta:
PNG de Fireworks
Photoshop PSD*
Freehand FH7-11
Illustrator 8
CorelDRAW (sin comprimir)
GIF animado
JPEG
PNG
BMP
PICT (sólo en Macintosh)
TIFF
AI
TGA
* El texto de Photoshop 6 y 7 se importa como texto en Fireworks MX y posterior
GIF animado
GIF
JPEG
PNG 8, 24 y 32 bits
BMP 8 y 24 bits
PICT 8 y 24 bits
TIFF 8, 24 y 32 bits
WBMP
domingo, 27 de abril de 2014
Proceso para dar efecto a texto en swish
Texto Animado
Acá aprenderán a crear textos animados. Pueden aplicarlos para presentaciones .exe, tipo PowerPoint, para animar alguna firma, avatar, header/banner o para aplicarlos a videos como introducciones.
Antes de comenzar dividiré las áreas del programa en 4 secciones, para que se nos haga más fácil.
En la parte 1, se aprecia la línea de tiempo. Ahí es donde aplicarán la duración de los efectos.
En la parte 2 vemos las escenas, pueden ser varias o una si es una presentación simple.
En la 3 están las herramientas y pizarra de nuestra animación.
Y en la 4 opciones múltiples, como por ejemplo el tamaño de nuestra película, ajustes de textos, alineaciones, etc.
Pues bien, ya definido eso, nos vamos a la sección 4 y en la pestaña "movie" seleccionamos el tamaño. 400px por 150px.
Ahora en la sección 3 pongan el ajuste de la pantalla en 100%
Escribiremos algo y lo animaremos.
Entonces pinchamos en la herramienta texto(sección 3). Escribimos un título
Si se fijan, en la sección 2, aparece nuestro elemento texto, y continuarán apareciendo mientras más cosas le pongamos a nuestro proyecto.
Ahora para animar, pinchamos con el botón derecho sobre nuestro texto y seleccionamos "effect" verán que esa sección contiene muchos efectos agrupados según animación. (efectos de entrada, de salida, de repetición, etc)
Yo seleccioné en Appear into position, el efecto: "Bullet-Fly by in"
Pueden ver como es su animación pinchando el botón "play" del reproductor que está en la sección 1. (línea de tiempo). Tienen la opción de alargar o achicar el tiempo del mismo. Pueden agregar más de un efecto a un mismo elemento,
Mi segundo efecto será uno de salida. Asi que me voy a "effect", luego en "Disappear from position" selecciono "Wild-X-Y-Scaleway"
Acá una imagen de los tiempos que le dí:
Ahora que tenemos nuestra pequeña animación nos vamos a "files" (en la barra de menúes), luego "export" y por último a "SWF". Le dan nombre y ubicación de donde lo guardan.
Acá aprenderán a crear textos animados. Pueden aplicarlos para presentaciones .exe, tipo PowerPoint, para animar alguna firma, avatar, header/banner o para aplicarlos a videos como introducciones.
Antes de comenzar dividiré las áreas del programa en 4 secciones, para que se nos haga más fácil.
En la parte 1, se aprecia la línea de tiempo. Ahí es donde aplicarán la duración de los efectos.
En la parte 2 vemos las escenas, pueden ser varias o una si es una presentación simple.
En la 3 están las herramientas y pizarra de nuestra animación.
Y en la 4 opciones múltiples, como por ejemplo el tamaño de nuestra película, ajustes de textos, alineaciones, etc.
Pues bien, ya definido eso, nos vamos a la sección 4 y en la pestaña "movie" seleccionamos el tamaño. 400px por 150px.
Ahora en la sección 3 pongan el ajuste de la pantalla en 100%
Escribiremos algo y lo animaremos.
Entonces pinchamos en la herramienta texto(sección 3). Escribimos un título Si se fijan, en la sección 2, aparece nuestro elemento texto, y continuarán apareciendo mientras más cosas le pongamos a nuestro proyecto.
Ahora para animar, pinchamos con el botón derecho sobre nuestro texto y seleccionamos "effect" verán que esa sección contiene muchos efectos agrupados según animación. (efectos de entrada, de salida, de repetición, etc)
Yo seleccioné en Appear into position, el efecto: "Bullet-Fly by in"
Pueden ver como es su animación pinchando el botón "play" del reproductor que está en la sección 1. (línea de tiempo). Tienen la opción de alargar o achicar el tiempo del mismo. Pueden agregar más de un efecto a un mismo elemento,
Mi segundo efecto será uno de salida. Asi que me voy a "effect", luego en "Disappear from position" selecciono "Wild-X-Y-Scaleway"
Acá una imagen de los tiempos que le dí:
Ahora que tenemos nuestra pequeña animación nos vamos a "files" (en la barra de menúes), luego "export" y por último a "SWF". Le dan nombre y ubicación de donde lo guardan.
¿Que es la linea del tiempo?
Las líneas de tiempo solamente pueden mover capas.Por tanto:
Para hacer que se
muevan imágenes o texto, se debe crear una capa usando el botón Capa de la
paleta de objetos y luego insertar imágenes, texto o cualquier otro tipo de
contenido en la capa.
Tambien hay que
tener en cuenta que las lineas de tiempo solamente funcionan en las versiones
de exploradores 4.0 o posteriores
Para crear una animación de líneas de tiempo:
Ir al menú
Ventana> Líneas del tiempo. (Ctrl+F9)
Seleccionar la
capa a animar -con un imagen, o texto, dentro- y colocarla en el lugar que
estará cuando se inicie la animación.
Asegúrarse de
haber seleccionado el elemento deseado. Hacer clic en el marcador de capa, o
usar la paleta de capas para seleccionar una capa. Al seleccionar una capa, a
su alrededor aparecen manejadores.
Escoger Menú
Modificar>Línea del tiempo>Agregar objeto a línea del tiempo, o
simplemente arrastrar el objeto seleccionado al interior del inspector de
líneas de tiempo. Aparecerá una barra en el primer canal de la línea de tiempo.
En la barra se mostrará el nombre de la capa.
Hacer clic
ahora en el último cuadro de la barra y colocar la capa en el lugar que se
desee como final de la animación.
Si desea
que la capa se desplace describiendo una curva,
Seleccionar la barra de animación y, manteniendo pulsada la tecla
Control, hacer clic para agregar un cuadro clave en un punto de inserción (en
la línea de tiempo "ejemplo anim", en el cuadro 8), ó
Hacer
clic en un marco en medio de la barra de animación y elegir menú contextual
(clic botón derecho): Agregar cuadro clave
Repetir este paso para definir más cuadros clave.
5. Mantener
pulsado el botón de reproducir y se verá cómo se desplaza del primer lugar al
último.
Repetir el
procedimiento para agregar otras capas -e imágenes- a la línea de tiempo y para
crear una animación más compleja.
Para usar las acciones Reproducir línea de tiempo y Detener
línea de tiempo:
1 Abrir el
inspector de líneas de tiempo e
Elegir menú
Ventana > Línea de tiempo y asegurarse de que el documento contiene una
línea de tiempo.
¡Atención!: Si
no se ve ninguna barra de animación de color azul claro en el inspector de
líneas de tiempo, el documento no contiene ninguna línea de tiempo.
2 Seleccionar un
objeto y abrir el inspector de comportamientos.
3 Hacer clic en el
botón de signo más (+) y elegir Reproducir línea de tiempo, o Detener línea de
tiempo del menú emergente Acciones.
4 Seleccionar la
línea de tiempo que desea reproducir o detener, o en el menú emergente, elegir
detener todas las líneas de tiempo, .
5 Hacer clic en
Aceptar.
Comprobar que el
evento predeterminado es el que se desea. Si no lo es, seleccionar otro evento
en el menú emergente.
Para que nos sirve Rollover
Paso 1 - Reúna las imágenes
He seleccionado 3 imágenes, muy similares en tamaño. Uso de Photoshop que hice cada imagen W 300 px por 200 px H con una resolución de 72 ppp. Todo lo que realmente importa aquí es que aunque las imágenes son compatibles en tamaño entre sí.
Paso 2 - Crear un Div que contiene una barra de navegación
Abra el Panel de Insertar, ponerlo a disposición y seleccione la opción Dibujar Div PA.
Dibuja una Div PA en su página, utilice el Panel de propiedades para establecer el tamaño de 930px 220px v.
Paso 3 - Coloque 3 imágenes
Arrastra cada imagen, a su vez a la Div PA para que estén alineadas horizontalmente, sin espacios entre ellos.
Paso 4 - Crear una clase denominada barra de navegación
El uso de CSS para controlar lo que sucede a una transferencia significa que todos los vuelcos, texto o imágenes que ser de estilo de la misma. Para evitar esa situación, en primer lugar crear un estilo de clase que debe atribuirse a cada imagen.
En el panel Estilos CSS, crear una nueva regla CSS, establezca el tipo a la clase y el nombre de barra de navegación. Utilice las opciones de borde estilos para crear una izquierda
Paso 5 - Aplicar el estilo de clase
Seleccione cada imagen y el uso de la clase en el menú desplegable en el Panel de Propiedades para establecer cada uno de ellos a la clase llamada barra de navegación.
Paso 6 - Creación de un estilo compuesto Hover
Ahora, para definir el estilo de rollover a aplicar.
Nombre del estilo a: hover (el estilo a: hover controla la configuración de estilo para los enlaces cuando el ratón está sobre ellos).
Paso 7 - Crear una transparencia
Para terminar el efecto, y hacer que las imágenes se desvanecen al 50% de opacidad, cuando se dio la vuelta, cambiar a la vista de código (o dividir si el youd prefiera) y encontrar el un parámetro: hover que se enumeran cerca de la parte superior del código.
Agregue el siguiente código al estilo compuesto para crear un cambio de la opacidad del 50%:
{
Filtro: alpha (opacity = 50);
opacidad: 0,5;
}
Paso 8 - Crear enlaces
Ahora selecciona la primera imagen y utilizar el campo de enlace en el panel de propiedades para crear un enlace, intenta insertar http://www.macprovideo.com/hub en él, por ejemplo.
Repita este procedimiento para todas las 3 imágenes para que todos se convierten en enlaces.
Paso 9 - Probar la página
Por último, guarde el archivo de paginación
¿Como insertar una imagen
En
el ejemplo siguiente se muestra un diseño de marcos formado por tres
marcos: un marco estrecho a un lado que contiene una barra de
navegación, un marco que se extiende por la parte superior y contiene el
logotipo y el título del sitio Web, y un marco grande que ocupa el
resto de la página y presenta el contenido principal. Cada uno de estos
marcos muestra un documento HTML diferente.
En
este ejemplo, el documento mostrado en el marco superior nunca cambia
cuando el visitante explora el sitio. El marco lateral de barra de
navegación contiene vínculos; al hacer clic en uno de ellos, cambia el
contenido del marco de contenido principal, aunque el del marco lateral
permanecerá estático. El marco de contenido principal de la derecha
mostrará el documento correspondiente al vínculo de la izquierda
seleccionado por el visitante.
Un marco no es un archivo. Podría pensarse que el documento mostrado en un marco forma parte integral del mismo, pero en realidad esto no es así. El marco es el contenedor que alberga el documento.
Un marco no es un archivo. Podría pensarse que el documento mostrado en un marco forma parte integral del mismo, pero en realidad esto no es así. El marco es el contenedor que alberga el documento.
Nota: La palabra
página puede utilizarse para hacer referencia a un único documento HTML o
a todo el contenido de una ventana del navegador en un momento
determinado, aunque se estén mostrando varios documentos HTML al mismo
tiempo. Por ejemplo, la frase “una página que utiliza marcos” suele
hacer referencia a un conjunto de marcos y a los documentos que aparecen
en ellos inicialmente.
Un sitio que aparece en un navegador como una sola página compuesta
de tres marcos consta realmente de al menos cuatro documentos HTML: el
archivo de conjunto de marcos y los tres documentos que albergan el
contenido que aparece inicialmente en los marcos. Al diseñar una página
utilizando conjuntos de marcos en Dreamweaver, deberá guardar cada uno
de estos cuatro archivos para que la página funcione correctamente en el
navegador.Cuándo utilizar marcos
Adobe
desaconseja el uso de marcos para el diseño de páginas Web. Estas son
algunas de las desventajas que presenta el uso de marcos:
El uso más habitual de los marcos, en el caso de que decida utilizarlos, es para navegación. Un conjunto de marcos suele incluir un marco con una barra de navegación y otro que muestra las páginas de contenido principal. El uso de marcos de esta forma ofrece estas ventajas:
Los
sitios mal diseñados utilizan los marcos de forma innecesaria, por
ejemplo, un conjunto de marcos que vuelve a cargar el contenido de los
marcos de navegación cada vez que el visitante hace clic en un botón de
navegación. Cuando se utilizan bien los marcos (por ejemplo, para
mantener controles de navegación estáticos en un marco y permitir que
cambie el contenido de otro marco), pueden resultar muy útiles para el
sitio.
No todos los navegadores son compatibles con el uso de marcos, por lo que algunos visitantes con discapacidades pueden experimentar dificultades para navegar. Si utiliza marcos, incluya siempre una sección noframes en su conjunto de marcos para los visitantes que no pueden verlos. También puede incluir un vínculo explícito con una versión sin marcos del sitio.
- Lograr una alineación gráfica precisa de los elementos en distintos marcos puede resultar difícil.
- Comprobar las opciones de navegación puede llevar mucho tiempo.
- Los URL de las páginas con marcos no aparecen en el navegador,
por lo que puede resultar complicado para un visitante marcar una página
concreta (salvo que incluya código de servidor que le permita cargar la
versión con marcos de una determinada página).
El uso más habitual de los marcos, en el caso de que decida utilizarlos, es para navegación. Un conjunto de marcos suele incluir un marco con una barra de navegación y otro que muestra las páginas de contenido principal. El uso de marcos de esta forma ofrece estas ventajas:
- El navegador de un visitante no tendrá que volver a cargar los gráficos de navegación para cada página.
- Cada marco dispone de su propia barra de desplazamiento (si el
contenido es demasiado grande para una ventana), permitiendo al
visitante desplazarse por los marcos de forma independiente. Por
ejemplo, si la barra de navegación se encuentra en otro marco, cuando el
visitante se desplaza al final de una página de contenido muy grande en
un marco no es necesario que vuelva al principio de la página para
acceder a la barra de navegación.
No todos los navegadores son compatibles con el uso de marcos, por lo que algunos visitantes con discapacidades pueden experimentar dificultades para navegar. Si utiliza marcos, incluya siempre una sección noframes en su conjunto de marcos para los visitantes que no pueden verlos. También puede incluir un vínculo explícito con una versión sin marcos del sitio.
¿Como insertar un marco?
En
el ejemplo siguiente se muestra un diseño de marcos formado por tres
marcos: un marco estrecho a un lado que contiene una barra de
navegación, un marco que se extiende por la parte superior y contiene el
logotipo y el título del sitio Web, y un marco grande que ocupa el
resto de la página y presenta el contenido principal. Cada uno de estos
marcos muestra un documento HTML diferente.
En
este ejemplo, el documento mostrado en el marco superior nunca cambia
cuando el visitante explora el sitio. El marco lateral de barra de
navegación contiene vínculos; al hacer clic en uno de ellos, cambia el
contenido del marco de contenido principal, aunque el del marco lateral
permanecerá estático. El marco de contenido principal de la derecha
mostrará el documento correspondiente al vínculo de la izquierda
seleccionado por el visitante.
Un marco no es un archivo. Podría pensarse que el documento mostrado en un marco forma parte integral del mismo, pero en realidad esto no es así. El marco es el contenedor que alberga el documento.
Para obtener información más completa sobre marcos, consulte el sitio Web de Thierry Koblentz en www.tjkdesign.com/articles/frames/.
Un marco no es un archivo. Podría pensarse que el documento mostrado en un marco forma parte integral del mismo, pero en realidad esto no es así. El marco es el contenedor que alberga el documento.
Nota: La palabra
página puede utilizarse para hacer referencia a un único documento HTML o
a todo el contenido de una ventana del navegador en un momento
determinado, aunque se estén mostrando varios documentos HTML al mismo
tiempo. Por ejemplo, la frase “una página que utiliza marcos” suele
hacer referencia a un conjunto de marcos y a los documentos que aparecen
en ellos inicialmente.
Un sitio que aparece en un navegador como una sola página compuesta
de tres marcos consta realmente de al menos cuatro documentos HTML: el
archivo de conjunto de marcos y los tres documentos que albergan el
contenido que aparece inicialmente en los marcos. Al diseñar una página
utilizando conjuntos de marcos en Dreamweaver, deberá guardar cada uno
de estos cuatro archivos para que la página funcione correctamente en el
navegador.Para obtener información más completa sobre marcos, consulte el sitio Web de Thierry Koblentz en www.tjkdesign.com/articles/frames/.
Cuándo utilizar marcos
Adobe
desaconseja el uso de marcos para el diseño de páginas Web. Estas son
algunas de las desventajas que presenta el uso de marcos:
El uso más habitual de los marcos, en el caso de que decida utilizarlos, es para navegación. Un conjunto de marcos suele incluir un marco con una barra de navegación y otro que muestra las páginas de contenido principal. El uso de marcos de esta forma ofrece estas ventajas:
Los
sitios mal diseñados utilizan los marcos de forma innecesaria, por
ejemplo, un conjunto de marcos que vuelve a cargar el contenido de los
marcos de navegación cada vez que el visitante hace clic en un botón de
navegación. Cuando se utilizan bien los marcos (por ejemplo, para
mantener controles de navegación estáticos en un marco y permitir que
cambie el contenido de otro marco), pueden resultar muy útiles para el
sitio.
No todos los navegadores son compatibles con el uso de marcos, por lo que algunos visitantes con discapacidades pueden experimentar dificultades para navegar. Si utiliza marcos, incluya siempre una sección noframes en su conjunto de marcos para los visitantes que no pueden verlos. También puede incluir un vínculo explícito con una versión sin marcos del sitio.
- Lograr una alineación gráfica precisa de los elementos en distintos marcos puede resultar difícil.
- Comprobar las opciones de navegación puede llevar mucho tiempo.
- Los URL de las páginas con marcos no aparecen en el navegador,
por lo que puede resultar complicado para un visitante marcar una página
concreta (salvo que incluya código de servidor que le permita cargar la
versión con marcos de una determinada página).
El uso más habitual de los marcos, en el caso de que decida utilizarlos, es para navegación. Un conjunto de marcos suele incluir un marco con una barra de navegación y otro que muestra las páginas de contenido principal. El uso de marcos de esta forma ofrece estas ventajas:
- El navegador de un visitante no tendrá que volver a cargar los gráficos de navegación para cada página.
- Cada marco dispone de su propia barra de desplazamiento (si el
contenido es demasiado grande para una ventana), permitiendo al
visitante desplazarse por los marcos de forma independiente. Por
ejemplo, si la barra de navegación se encuentra en otro marco, cuando el
visitante se desplaza al final de una página de contenido muy grande en
un marco no es necesario que vuelva al principio de la página para
acceder a la barra de navegación.
No todos los navegadores son compatibles con el uso de marcos, por lo que algunos visitantes con discapacidades pueden experimentar dificultades para navegar. Si utiliza marcos, incluya siempre una sección noframes en su conjunto de marcos para los visitantes que no pueden verlos. También puede incluir un vínculo explícito con una versión sin marcos del sitio.
¿Que es un marco?
Un marco es una zona de una ventana de
navegador que puede mostrar un documento HTML independiente de lo que se
muestra en el resto de la ventana. Los marcos permiten dividir la
ventana de un navegador en varias regiones, cada una las cuales puede
mostrar un documento HTML diferente. Por lo general, un marco muestra
un documento que contiene controles de navegación, mientras que otro
muestra un documento con contenido
Un conjunto de marcos es un archivo HTML que define el diseño y las propiedades de un grupo de marcos, que incluyen el número, el tamaño, la ubicación de los marcos y el URL de la página que aparece inicialmente en cada marco. El archivo de conjunto de marcos no incluye el contenido HTML que se muestra en el navegador, excepto en la sección noframes. El archivo únicamente ofrece al navegador información sobre cómo debe mostrarse un conjunto de marcos y los documentos que deben incluirse en los marcos.
Para ver un conjunto de marcos en un navegador, introduzca el URL del archivo de conjunto de marcos; el navegador abre entonces los documentos que deben mostrarse en los marcos. El archivo de conjunto de marcos de un sitio suele llamarse index.html. Así, cuando el visitante no especifica ningún nombre de archivo, este archivo se muestra de forma predeterminada.
Un conjunto de marcos es un archivo HTML que define el diseño y las propiedades de un grupo de marcos, que incluyen el número, el tamaño, la ubicación de los marcos y el URL de la página que aparece inicialmente en cada marco. El archivo de conjunto de marcos no incluye el contenido HTML que se muestra en el navegador, excepto en la sección noframes. El archivo únicamente ofrece al navegador información sobre cómo debe mostrarse un conjunto de marcos y los documentos que deben incluirse en los marcos.
Para ver un conjunto de marcos en un navegador, introduzca el URL del archivo de conjunto de marcos; el navegador abre entonces los documentos que deben mostrarse en los marcos. El archivo de conjunto de marcos de un sitio suele llamarse index.html. Así, cuando el visitante no especifica ningún nombre de archivo, este archivo se muestra de forma predeterminada.
¿Como insertar un frame?
Esta es una pequeña guía para crear una web con marcos , usando el Dreamweaver de Macromedia.
Para empezar pincharemos en “Archivo/nuevo”.
Se nos abrirá una ventana en la que elegiremos “Conjunto de marcos” y para este ejemplo elegiremos “Superior fijo, izquierdo anidado” y le daremos a crear.
Y obtendremos como resultado lo siguiente:
En la parte derecha de la ventana de Dreamweaver veremos el panel de Marcos (si no lo viera basta con pinchar en “Ventana/Marcos” y aparecerá).
Teniendo elegido el marco tal como aparece en la imagen por el marco en negrita (si no estuviera así basta con pinchar con el ratón en la parte que más externa, osea la que debería aparecer en negrita para que asi quede seleccionado el conjunto de marcos), tendremos bajo la vista de la página la siguiente ventana de propiedades
en la que podremos elegir si el marco “topframe” tenga borde, de que anchura y de que color, así como la medida que más se ajuste a nuestro gusto.
Del mismo modo, si en el panel de marcos seleccionaramos con el ratón en el rectángulo que conforman el “leftframe” y el “mainframe”, nos quedaría en negrita tal como se muestra
nos aparecera las propiedades tal que
en donde igualmente nos dará la posibilidad de poner borde, su anchura y color, y el espacio que queramos que ocupe el “leftframe”.
Por ejemplo, en este caso elegí poner bordes en ambos casos con un ancho de 10 y un color azulado. Y dando valor a fila de 125 pixeles, y a la columna de 200 pixeles.
Para guardar lo que hemos hecho, deberemos guardar lo que es el “conjunto de marcos” así como cada uno de los marcos que hayamos puesto, en este caso, el conjunto de marcos lo llamaremos index.html y a los marcos respectivamente titulo.html , menu.html , pagina1.html
Para ello, lo mejor (desde mi punto de vista) para estar seguros que lo guardamos correctamente es que teniendo en el panel de marcos elegido el conjunto de todos luego elijamos la opción “guardar conjunto de marcos como” y le pondremos index.html
Y luego eligiendo cada uno de los marcos elegimos “guardar marco como” (acción que se hará con cada uno de los marcos para así estar seguros de que marco guardamos y con que nombre). A cada cual el que le corresponda: titulo.html , menu.html y pagina1.html
Una vez que lo hayamos guardado la primera vez, para el resto de ocasiones que trabajemos con la página bastará con elegir “guardar todo” y guardara las 4 a la vez.
Otro punto a tener en cuenta es el de los enlaces, si queremos que un enlace que este en el marco “leftFrame” al ser pinchado salga en el marco “mainFrame” habrá que una vez seleccionada la palabra u objeto que queremos vincular y luego en “Vínculo” poner la dirección correspondiente y en “Dest” elegir la opción mainframe
Para realizar las páginas que vayan saliendo en el mainframe, basta con hacerlo desde una página basica en html, ya que al pinchar en el enlace hará que se habrán directamente en el mainframe.
Para un mejor entendimiento de lo que se hace es recomendable tener nociones de html ya que en este tutorial sólo se trata de explicar como realizar la página con marcos, pero no los restantes aspectos (fondos, imágenes, textos, botones, etc), que se supone deben ser ya conocidos.
Para empezar pincharemos en “Archivo/nuevo”.
Se nos abrirá una ventana en la que elegiremos “Conjunto de marcos” y para este ejemplo elegiremos “Superior fijo, izquierdo anidado” y le daremos a crear.
Y obtendremos como resultado lo siguiente:
En la parte derecha de la ventana de Dreamweaver veremos el panel de Marcos (si no lo viera basta con pinchar en “Ventana/Marcos” y aparecerá).
Teniendo elegido el marco tal como aparece en la imagen por el marco en negrita (si no estuviera así basta con pinchar con el ratón en la parte que más externa, osea la que debería aparecer en negrita para que asi quede seleccionado el conjunto de marcos), tendremos bajo la vista de la página la siguiente ventana de propiedades
en la que podremos elegir si el marco “topframe” tenga borde, de que anchura y de que color, así como la medida que más se ajuste a nuestro gusto.
Del mismo modo, si en el panel de marcos seleccionaramos con el ratón en el rectángulo que conforman el “leftframe” y el “mainframe”, nos quedaría en negrita tal como se muestra
nos aparecera las propiedades tal que
en donde igualmente nos dará la posibilidad de poner borde, su anchura y color, y el espacio que queramos que ocupe el “leftframe”.
Por ejemplo, en este caso elegí poner bordes en ambos casos con un ancho de 10 y un color azulado. Y dando valor a fila de 125 pixeles, y a la columna de 200 pixeles.
Para guardar lo que hemos hecho, deberemos guardar lo que es el “conjunto de marcos” así como cada uno de los marcos que hayamos puesto, en este caso, el conjunto de marcos lo llamaremos index.html y a los marcos respectivamente titulo.html , menu.html , pagina1.html
Para ello, lo mejor (desde mi punto de vista) para estar seguros que lo guardamos correctamente es que teniendo en el panel de marcos elegido el conjunto de todos luego elijamos la opción “guardar conjunto de marcos como” y le pondremos index.html
Y luego eligiendo cada uno de los marcos elegimos “guardar marco como” (acción que se hará con cada uno de los marcos para así estar seguros de que marco guardamos y con que nombre). A cada cual el que le corresponda: titulo.html , menu.html y pagina1.html
Una vez que lo hayamos guardado la primera vez, para el resto de ocasiones que trabajemos con la página bastará con elegir “guardar todo” y guardara las 4 a la vez.
Otro punto a tener en cuenta es el de los enlaces, si queremos que un enlace que este en el marco “leftFrame” al ser pinchado salga en el marco “mainFrame” habrá que una vez seleccionada la palabra u objeto que queremos vincular y luego en “Vínculo” poner la dirección correspondiente y en “Dest” elegir la opción mainframe
Para realizar las páginas que vayan saliendo en el mainframe, basta con hacerlo desde una página basica en html, ya que al pinchar en el enlace hará que se habrán directamente en el mainframe.
Para un mejor entendimiento de lo que se hace es recomendable tener nociones de html ya que en este tutorial sólo se trata de explicar como realizar la página con marcos, pero no los restantes aspectos (fondos, imágenes, textos, botones, etc), que se supone deben ser ya conocidos.
¿Que es un frame?
Los
marcos o frames sirven para distribuir mejor los datos de las páginas,
ya que permiten mantener fijas algunas partes, como pueden ser el logotipo
y la barra de navegación, mientras que otras sí pueden cambiar.
Además de mejorar la funcionalidad, pueden mejorar también
la apariencia.
Cada uno de los marcos de una página,
contiene un documento HTML individual. Por ejemplo, en la imagen de la
derecha puedes ver una página con dos marcos. El marco izquierdo
contiene el documento menu.htm y el derecho el documento
quienes.htm. Para poder visualizar la página de
este modo, hemos tenido que abrir en el navegador el documento marcos.htm,
que es la página que contiene los marcos agrupados.
Es posible editar los documentos
contenidos en los marcos desde la página que contiene el grupo
de marcos. Esto facilita el trabajo, ya que es más fácil
hacerse una idea de cómo quedará la página al final,
cosa que no es posible si se editan individualmente cada uno de los documentos
que contiene el marco.
El trabajar con marcos puede resultar una
tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar
mucho en el tema, y veremos solamente algunos conceptos básicos
y ejemplos sencillos.
Herramientas de Dreamweaber
Principales barras y menús
La barra de herramientas
La
barra de herramientas de Dreamweaver contiene botones que permiten
alternar entre diferentes vistas del documento rápidamente, cambiar el
título del documento o previsualizar la página en el navegador. Los
elementos del menú Opciones (botón situado en el extremo derecho de la
barra de herramientas) cambia en función de la vista que seleccione.
- Para ver u ocultar la barra de herramientas, elija en el menú Ver la opción Barra de herramientas.
- Para ver sólo código en la ventana de documento, haga clic en el botón Vista de código.
- Para ver una vista que contenga las vistas de Código y de Diseño, haga clic en el botón Vistas de código y diseño.
- Para ver sólo la vista de Diseño, haga clic en el botón Vista de diseño.
- Para introducir un título para el documento, utilice el campo Título. Si el documento ya tiene título, éste aparecerá en dicho campo.
- Para poner, obtener o proteger un archivo, haga clic en el botón de menú de "Estado de archivo".
- Para previsualizar o depurar un documento en un navegador, haga clic en Vista previa/depurar en navegador y elija uno de los navegadores enumerados en el menú emergente.
- Para actualizar la vista de Diseño, haga clic en el botón Actualizar vista de diseño.
- Para obtener información de referencia sobre código HTML, CSS y JavaScript, haga clic en el botón Referencia.
- Para desplazarse por el código, haga clic en el botón Navegación por el código. Para obtener más información, consulte "Introducción al depurador JavaScript".
- Para mostrar u ocultar la regla, la cuadrícula y las ayudas visuales, haga clic en el botón de menú Opciones.
El pánel objetos
Este
pánel contiene botones que permiten la creación e inserción de diversos
tipos de objetos, como tablas, vínculos, capas e imágenes. El pánel contiene siete categorías de forma predeterminada: Común, Formularios, Marcos, Head, Invisibles y Caracteres.
También contiene botones que cambian de vista: Estándar y Disposición.
Cada uno de estos elementos serán explicados en temas posteriores.
Para cambiar de categoría dé clic sobre alguna de las pestañas situadas en la parte superior del pánel.
Si
desea insertar un objeto en el documento haga clic en el
correspondiente botón del pánel o arrastre el ícono del botón hasta la
ventana de documento. Dependiendo del objeto, aparecerá un cuadro de
diálogo en el cual se le pedirá que seleccione o inserte el archivo u
objeto deseado.
Si
desea insertar un marcador de posición mantenga presionada la tecla
Control mientras da clic en el ícono para insertar el objeto. (Por
ejemplo, para insertar un marcador de posición para una imagen sin
especificar un archivo de imagen, mantenga presionada la tecla Control y
haga clic en el botón Imagen.)
Nota: Esto
no permite omitir todos los cuadros de diálogo. Algunos objetos, como
las barras de navegación, las capas, los botones Flash, los marcos,
etc., no insertan marcadores de espacio.
El
inspector de propiedades permite examinar y editar las propiedades del
elemento que esté seleccionado actualmente, puede ser un objeto o texto.
Es posible seleccionar los elementos en la ventana de documento o en el
inspector de código.
La
mayoría de los cambios realizados en las propiedades se aplicarán de
inmediato en la ventana de documento. (Para algunas propiedades, los
cambios no se aplican hasta que se hace clic fuera de los campos de
texto de edición de la propiedad, se presiona Enter o se presiona Tab
para cambiar a otra propiedad.)
El
contenido del inspector de propiedades varía en función del elemento
seleccionado. Si quiere obtener información sobre propiedades concretas,
seleccione un elemento en la ventana de documento y, a continuación,
haga clic en el icono Ayuda, situado en la esquina superior derecha del
inspector de propiedades.
El
inspector de propiedades muestra inicialmente las propiedades del
elemento seleccionado que se utilizan con mayor frecuencia; para ver
todas las propiedades haga clic en la flecha de ampliación situada en la
esquina inferior derecha del inspector de propiedades, para ver más
propiedades del elemento.
¿Que es Dreamweaver?
Dreamweaver hace muy fácil el crear complejas páginas Web dinámicas, con la conocida técnica de "arrastrar y soltar", permitiendo que los diseñadores puedan crear entornos Web sin tener que escribir una sóla linea de código.
Adobe Dreamweaver es compatible con las últimas tecnologías y tendencias en el desarrollo web, incluyendo Javascript, CSS, AJAX, XHTM, Adobe AIR, Smart Objects de Photoshop, subversiones (SVN), frameworks Javascript y un largo etcétera.
Proceso para sar intervalos en los fotogramas
Para seleccionar un intervalo de fotogramas:
Realice una de las siguientes acciones:
■
Arrastre sobre las miniaturas de un clip para seleccionar un intervalo de fotogramas.
Aparece un borde amarillo en torno al intervalo seleccionado.
■
Haga clic en un clip.
Cuando hace clic en un clip de su vídeo
original, se selecciona automáticamente un intervalo de fotogramas. Por
omisión, la selección es de cuatro segundos de vídeo. Con la selección
automática de intervalo, puede crear fácilmente un proyecto con un ritmo
uniforme. Tiene la posibilidad de modificar esta opción por omisión en
las Preferencias de iMovie. Para obtener más información al respecto,
consulte el apartado Temas relacionados que encontrará más abajo.
Cuando hace clic en un clip de un proyecto, se selecciona automáticamente todo el clip.
Para extender o reducir la selección:
Realice una de las siguientes acciones:
■
Arrastre los tiradores de cada lado del borde de selección para ajustar sus puntos finales.
■
Mueva el puntero a cualquier fotograma, dentro del mismo clip, que desee
que sea el punto de inicio o final de la selección. Mantenga pulsada la
tecla Mayúsculas mientras hace clic.
■
Arrastre la parte superior del borde de selección para volver a centrarlo sobre un nuevo fotograma del mismo clip.
Un intervalo permanece seleccionado incluso aunque mueva el puntero fuera de él.
Para quitar la selección a un intervalo, seleccione otro intervalo o haga clic fuera de él.
Diferencia entre Vector y Mapa de Bits
El Vector, es una descripción matemática de una forma geométrica. que se
definen mediante puntos. Al estar descritos de forma matemática, los
trazados vectoriales no muestran ninguna degradación de su calidad a la
hora de realizar deformaciones, cambios de tamaños. Podrá visualizar que
un objeto vectorial no pierde calidad y sus bordes seguirán siendo
suaves a pesar de los cambios realizados.
Así, las formas que componen la imagen vendrán definidas en el archivo por una serie de puntos con curvas, un relleno y un contorno de color determinado.
Una imagen bitmap o mapa de bits, esta compuesta por pequeños puntos. Cada uno de estos puntos o cuadros, llamados píxeles poseen un valor cromático y de luminosidad, independiente del resto de los píxel que componen la imagen en su conjunto con unos valores de color y luminancia propios. El conjunto de esos pixeles componen la imagen total.
Así, las formas que componen la imagen vendrán definidas en el archivo por una serie de puntos con curvas, un relleno y un contorno de color determinado.
Una imagen bitmap o mapa de bits, esta compuesta por pequeños puntos. Cada uno de estos puntos o cuadros, llamados píxeles poseen un valor cromático y de luminosidad, independiente del resto de los píxel que componen la imagen en su conjunto con unos valores de color y luminancia propios. El conjunto de esos pixeles componen la imagen total.
¿Que es un fotograma?
Explicamos los conceptos de capas y fotogramas y su uso.
La línea de tiempo es donde podremos organizar la sucesión de imágenes
que dan lugar a una animación. En este capítulo introduciremos los
conceptos de capa y fotograma, vitales para una compresión del
funcionamiento de Flash.
En cierta medida, Flash trabaja como si fuese una película. Una animación es una sucesión de imágenes fijas que, al pasar rápidamente unas detrás de otras, dan la impresión de un movimiento. Cada una de estas imágenes fijas es llamada también fotograma. Los fotogramas son representados bajo forma de rectángulos en la parte derecha del escenario.
En estos rectángulos podemos alojar tres tipos diferentes de imágenes:
Por otra parte, una animación esta generalmente constituida de una variedad de objetos diferentes, cada uno de los cuales se introduce en un momento diferente y presenta un comportamiento independiente al resto de los objetos. De manera a organizar y editar todos estos elementos Flash permite el uso de capas o calcos.
Así, una animación Flash esta compuesta de una superposición de capas en cada una de las cuales introduciremos un objeto que tendrá su propia línea de fotogramas. Estas capas nos permiten trabajar la animación en distintos planos independientes.
Por defecto, al comenzar una nueva escena encontraremos en nuestra línea de tiempo una sola capa. Progresivamente iremos introduciendo más capas que nos permitan separar cada uno de los elementos de la animación: objetos, fondo, sonidos o trayectorias.
Un uso inteligente de las capas es la base para crear animaciones de calidad.
En cierta medida, Flash trabaja como si fuese una película. Una animación es una sucesión de imágenes fijas que, al pasar rápidamente unas detrás de otras, dan la impresión de un movimiento. Cada una de estas imágenes fijas es llamada también fotograma. Los fotogramas son representados bajo forma de rectángulos en la parte derecha del escenario.
En estos rectángulos podemos alojar tres tipos diferentes de imágenes:
- Imágenes clave
Se trata de las imágenes que nosotros mismos dibujaremos
- Imágenes fijas
Son las imágenes claves copiadas en los fotogramas siguientes al de la
primera imagen clave de manera a producir un efecto de objeto estático.
- Imágenes de interpolación Se trata de imágenes calculadas por Flash que permiten la transición gradual entre dos imágenes claves. Este tipo de imágenes muy útiles ya que se generan automáticamente y proporcionan un efecto suave de movimiento o transformación.
Por otra parte, una animación esta generalmente constituida de una variedad de objetos diferentes, cada uno de los cuales se introduce en un momento diferente y presenta un comportamiento independiente al resto de los objetos. De manera a organizar y editar todos estos elementos Flash permite el uso de capas o calcos.
Así, una animación Flash esta compuesta de una superposición de capas en cada una de las cuales introduciremos un objeto que tendrá su propia línea de fotogramas. Estas capas nos permiten trabajar la animación en distintos planos independientes.
Por defecto, al comenzar una nueva escena encontraremos en nuestra línea de tiempo una sola capa. Progresivamente iremos introduciendo más capas que nos permitan separar cada uno de los elementos de la animación: objetos, fondo, sonidos o trayectorias.
Un uso inteligente de las capas es la base para crear animaciones de calidad.
¿Que es una capa?
Desde ya hace bastante años, casi todas las
versiones de los navegadores más extendidos
(Mozilla, Internet Explorer, Ópera...) incluyen
funcionalidades que permiten la utilización de capas
o layers. Esta nueva característica permite
diseñar páginas HTML con diferentes capas con
la particularidad de que cada una de ellas puede ser
mostrada de forma independiente, unas encima de otras o
moverlas por la página produciendo efectos de
animación. Por esta razón, a estas nuevas
características del
En HTML, las capas se definen con una etiqueta que ha visto ya en las lecciones anteriores: < DIV>.. </DIV>.
Todo el contenido HTML incluido entre esas dos etiquetas es tratado como una capa, y por tanto, como un elemento único de la página.
Entre esas <DIV> y </DIV> puede escribir cualquier cosa: texto, imágenes, tablas, e incluso otras capas, como veremos más tarde.
El principal atributo de una capa es ID, pues define un nombre para la capa. Este identificador será utilizado para referimos a él cuando estemos en otras capas o cuando lo manipulemos desde una función JavaScript. Este atributo es opcional. Si no se pone, la capa no tendrá nombre y no podrá ser referenciada más tarde.
Así pues, por ahora, el esquema básico de una capa es:
El estilo lo puede definir de forma explícita para una capa concreta, o de forma genérica para varias capas. En el primer caso, definiremos mediante una etiqueta STYLE el estilo de la capa, del mismo modo que se vio en el capítulo la, de forma que éste estará unívocamente vinculado a una capa, y sólo se le aplicará a ella.
En este caso, se definirá así;
Por último, si queremos definir las propiedades de forma genérica para varias capas, en primer lugar deberemos definir el estilo mediante:
Esta última forma se utiliza poco. Las más empleadas son las dos primeras. A continuación se recogen las dos formas de definir las propiedades de una capa. No se preocupe por el contenido del estilo. Se verá a continuación. . Definición con una clase de estilos.
En HTML, las capas se definen con una etiqueta que ha visto ya en las lecciones anteriores: < DIV>.. </DIV>.
Todo el contenido HTML incluido entre esas dos etiquetas es tratado como una capa, y por tanto, como un elemento único de la página.
Entre esas <DIV> y </DIV> puede escribir cualquier cosa: texto, imágenes, tablas, e incluso otras capas, como veremos más tarde.
El principal atributo de una capa es ID, pues define un nombre para la capa. Este identificador será utilizado para referimos a él cuando estemos en otras capas o cuando lo manipulemos desde una función JavaScript. Este atributo es opcional. Si no se pone, la capa no tendrá nombre y no podrá ser referenciada más tarde.
Así pues, por ahora, el esquema básico de una capa es:
<DIV ID=NombreCapa>
Codigo HTML de la capa
</DIV>
Con todo esto, tenemos que una capa queda definida por un
nombre, que es un identificador único que la
distingue de las otras capas. Además, hay que
definir un estilo para ella, como los que ya ha visto en el
capítulo lo. En ese estilo, se especifican
propiedades como la posición que va a tener en la
pantalla o el color de fondo.
El estilo lo puede definir de forma explícita para una capa concreta, o de forma genérica para varias capas. En el primer caso, definiremos mediante una etiqueta STYLE el estilo de la capa, del mismo modo que se vio en el capítulo la, de forma que éste estará unívocamente vinculado a una capa, y sólo se le aplicará a ella.
En este caso, se definirá así;
<DIV NAME="Nombre capa" STYLE = "Valores del
estilo">
<DIV>
También podemos hacer esta
definición de las propiedades de la capa fuera de la
etiqueta DIV, del siguiente modo:
<STYLE>
.NombreCapa {
position:absolute;
LEFT: 60px;
TOP: 120px;
WIDTH: 300px;
Z-INDEX: 1;
}
</STYLE>
<DIV NAME="Nombre capa">
<DIV>
Como ya sabe, en este caso, el nombre del estilo debe estar
precedido por un punto. En este ejemplo, estamos indicando
las propiedades que tendrá la capa.
Por último, si queremos definir las propiedades de forma genérica para varias capas, en primer lugar deberemos definir el estilo mediante:
<STYLE>
.NombreEstiloCapas{
position:absolute;
LEFT: 60px;
TOP: 120px;
WIDTH: 300px;
Z-INDEX: 1;
}
</STYLE>
Y posteriormente, a la hora de definir la capa, debemos
indicar que queremos utilizar el estilo que se ha definido
previamente con:
CLASS = "NombreEstiloCapas"
del siguiente modo:
<DIV NAME="Nombre capa" CLASS =
"NombreEstiloCapas">
<DIV>
Como ya hemos comentado, esto es útil cuando
deseamos definir un estilo que vamos a aplicar a varias
capas.
Esta última forma se utiliza poco. Las más empleadas son las dos primeras. A continuación se recogen las dos formas de definir las propiedades de una capa. No se preocupe por el contenido del estilo. Se verá a continuación. . Definición con una clase de estilos.
<STYLE>
. Estilo{
position:absolute;
LEFT: 60px;
TOP: 120px;
WIDTH: 300px;
Z-INDEX: 1;
}
</STYLE>
<DIV ID=IdCapa CLASS=Estilo>
</DIV>
Definición directa en la declaración.
<DIV ID=IdCapa
STYLE="
position:absolute;
LEFT: 60px;
TOP: 120px;
WIDTH: 300px;
Z-INDEX: 1; ">
</DIV>
¿Como insertar un fondo de imagen?
Colocar un fondo en una página web
Para incluir un fondo en una página web necesitamos utilizar el atributo background en la etiqueta <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la página web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localización.
<body background="fondo.gif">
Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la página como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repitiéndose a lo largo de todo el espacio de la página.
Fondo en otros elementos
No solo la página puede tener un fondo, también lo podemos colocar a las tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.
<table background="fondo.gif">
<td background="fondo.gif">
Consejos para utilizar fondos
Veamos ahora algunos consejos que se deberían seguir para una correcta utilización de los fondos de imagen.
1) Colocar un fondo de color parecido a la imagen
Cuando colocamos un fondo en una página debemos utilizar el atributo bgcolor para asignar un color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muchos de nosotros habremos accedido a una página en la que no se ve nada y, cuando se carga el fondo, nos damos cuenta que sí que había texto en la página, lo que ocurre es que no se veía porque no contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de fondo fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se puede ver nada. Este problema se agrava si el fondo no se llega a cargar por un error en la transferencia del archivo o porque la imagen ha sido borrada del servidor accidentalmente.
2) Que se puedan leer bien los textos
Los fondos están para hacer más vistosa la página, no para molestar en la lectura de los textos. Es un error muy común utilizar un fondo que luego molesta al leer los textos. Ya es bastante difícil leer una web en un monitor como para que encima el texto no contraste bien con el fondo que se está utilizando. En este caso cabe indicar también que es muy importante que las combinaciones de color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien, provocan unas combinaciones difíciles de leer, por ejemplo un fondo con un color azul predominante y el texto en rojo.
3) Los fondos de imagen de color homogéneo
Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una misma gama. Si la imagen tiene partes oscuras y claras, ¿de qué color pondremos el texto para asegurarnos de que se lea bien siempre? Si el texto es claro no contrastará bien con las partes del fondo que también son claras. Igual pasará si colocamos el texto con un color oscuro, que no contrastará bien con las partes oscuras del fondo.
4) Tener cuidado con las distintas definiciones de pantalla
Es importante saber que un visitante puede acceder a una página con un tamaño de ventana variable. A veces un fondo se comporta bien con una definición dada, pero no con otras mayores. Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de 800x600 ó 1024x768. Luego accede una persona con una definición de 1280x1024, o superior, y ve la página incorrectamente porque se realiza un mosaico con el fondo que no había tenido en cuenta el desarrollador.
5) Hacer un fondo suficientemente grande
Es importante que el tamaño del archivo que vamos a utilizar como fondo tenga un cierto tamaño. Si utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajará mucho para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco más grande, para realizar el mosaico hubiera trabajado mucho menos.
En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden dificultar mucho la presentación de la información en la página de una manera clara.
Si deseamos utilizar un fondo que pudiera dar algún problema, una idea para asegurarnos que los textos se visualicen correctamente es colocar todo el contenido de la página dentro de una tabla y asignarle a la tabla un color de fondo con el atributo bgcolor.
<html>
<head>
<title>Fondo de prueba</title>
</head>
<body background="fondo1.jpg" bgcolor="FFCECB">
<table width="550" bgcolor=FFCECB align=center>
<tr>
<td>
<h1 style="color:000000">Probando...</h1>
<br>
Este texto se lee bien porque tiene un fondo plano.
<br>
</td>
</tr>
</table>
</body>
</html>
Para incluir un fondo en una página web necesitamos utilizar el atributo background en la etiqueta <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la página web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localización.
<body background="fondo.gif">
Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la página como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repitiéndose a lo largo de todo el espacio de la página.
Fondo en otros elementos
No solo la página puede tener un fondo, también lo podemos colocar a las tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.
<table background="fondo.gif">
<td background="fondo.gif">
Consejos para utilizar fondos
Veamos ahora algunos consejos que se deberían seguir para una correcta utilización de los fondos de imagen.
1) Colocar un fondo de color parecido a la imagen
Cuando colocamos un fondo en una página debemos utilizar el atributo bgcolor para asignar un color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muchos de nosotros habremos accedido a una página en la que no se ve nada y, cuando se carga el fondo, nos damos cuenta que sí que había texto en la página, lo que ocurre es que no se veía porque no contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de fondo fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se puede ver nada. Este problema se agrava si el fondo no se llega a cargar por un error en la transferencia del archivo o porque la imagen ha sido borrada del servidor accidentalmente.
2) Que se puedan leer bien los textos
Los fondos están para hacer más vistosa la página, no para molestar en la lectura de los textos. Es un error muy común utilizar un fondo que luego molesta al leer los textos. Ya es bastante difícil leer una web en un monitor como para que encima el texto no contraste bien con el fondo que se está utilizando. En este caso cabe indicar también que es muy importante que las combinaciones de color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien, provocan unas combinaciones difíciles de leer, por ejemplo un fondo con un color azul predominante y el texto en rojo.
3) Los fondos de imagen de color homogéneo
Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una misma gama. Si la imagen tiene partes oscuras y claras, ¿de qué color pondremos el texto para asegurarnos de que se lea bien siempre? Si el texto es claro no contrastará bien con las partes del fondo que también son claras. Igual pasará si colocamos el texto con un color oscuro, que no contrastará bien con las partes oscuras del fondo.
4) Tener cuidado con las distintas definiciones de pantalla
Es importante saber que un visitante puede acceder a una página con un tamaño de ventana variable. A veces un fondo se comporta bien con una definición dada, pero no con otras mayores. Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de 800x600 ó 1024x768. Luego accede una persona con una definición de 1280x1024, o superior, y ve la página incorrectamente porque se realiza un mosaico con el fondo que no había tenido en cuenta el desarrollador.
5) Hacer un fondo suficientemente grande
Es importante que el tamaño del archivo que vamos a utilizar como fondo tenga un cierto tamaño. Si utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajará mucho para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco más grande, para realizar el mosaico hubiera trabajado mucho menos.
En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden dificultar mucho la presentación de la información en la página de una manera clara.
Si deseamos utilizar un fondo que pudiera dar algún problema, una idea para asegurarnos que los textos se visualicen correctamente es colocar todo el contenido de la página dentro de una tabla y asignarle a la tabla un color de fondo con el atributo bgcolor.
<html>
<head>
<title>Fondo de prueba</title>
</head>
<body background="fondo1.jpg" bgcolor="FFCECB">
<table width="550" bgcolor=FFCECB align=center>
<tr>
<td>
<h1 style="color:000000">Probando...</h1>
<br>
Este texto se lee bien porque tiene un fondo plano.
<br>
</td>
</tr>
</table>
</body>
</html>
¿Como insertar un fondo liso?
Para definir un fondo de página, solo debemos aplicar algunas
propiedades a la etiqueta nativa de HTML, llamada <body>. El
<body>, como ya comenté en otros artículos, es una etiqueta que NO
definimos nosotros, sino que ya viene definida por defecto. Solo
cambiamos los valores de sus propiedades.
Lo que tenemos que hacer para aplicar los fondos html es ingresar en nuestro código del archivo CSS, lo siguiente:
body {
propiedad: valor;
}
Las propiedades que usaremos para los fondos, serán :
background-color:
Define el color del fondo. Se le asigna el código hexadecimal del color elegido, por ej: #ff0000 (rojo)
background-image url(nombre_de_imagen.jpg):
Define la imagen de fondo. Se le asigna el camino y nombre del archivo de imagen para el fondo.
background-repeat:
Define como se repetirá o no, la imagen en nuestro fondo.
Se le puede asignar:
repeat (para repetir la imagen horizontal y verticalmente)
repeat-x (para repetir la imagen horizontalmente)
repeat-y (para repetir la imagen verticalmente)
no-repeat (para no repetir la imagen, solo se aplica una sola vez ubicándola arriba a la izquierda)
background-attachment:
Determina si el fondo quedará fijo o no, cuando hagamos scroll en nuestro navegador.
Se le puede asignar:
fixed (fijo, sin scroll)
scroll (con scroll)
background-position:
Determina donde se colocará la imagen de fondo. Si no hay valores, por defecto se coloca arriba a la izquierda. Si le asignamos valores en pixeles, su origen se desplazará a los pixeles que le asignemos, primero en el eje horizontal y luego el vertical.
Ej:
background-position: 10px 10px;
(10 px a la derecha, y 10 px hacia abajo)
EJEMPLOS
Entonces, vamos a ver los diferentes códigos CSS que usaríamos para cada uno de los 3 tipos de fondos que nombré arriba:
Fondo Liso (definimos solo un color de fondo):
body {
background-color: #ff0000;
}
Fondo Unico (se define la imagen de fondo, y se le asigna no repetirla):
body {
background-image: url(fondo_pantalla.jpg);
background-repeat: no-repeat;
}
Fondo de Mosaico o Patterns (se define una imagen y se asigna repetirla horizontal y verticalmente:
body {
background-image: url(fondo_pantalla.jpg);
background-repeat: repeat;
}
Te aconsejo que aunque tengas un fondo fijo o de mosaico, siempre definas un color de fondo para tu pagina que sea similar al predominante de la imagen. Asi, si el fondo tarda en cargar, el usuario puede ver un color parecido al de la imagen.
Te propongo que practiques definiendo diferentes tipos de fondos html para tus paginas, y combinando las diferentes propiedades y valores.
Lo que tenemos que hacer para aplicar los fondos html es ingresar en nuestro código del archivo CSS, lo siguiente:
body {
propiedad: valor;
}
Las propiedades que usaremos para los fondos, serán :
background-color:
Define el color del fondo. Se le asigna el código hexadecimal del color elegido, por ej: #ff0000 (rojo)
background-image url(nombre_de_imagen.jpg):
Define la imagen de fondo. Se le asigna el camino y nombre del archivo de imagen para el fondo.
background-repeat:
Define como se repetirá o no, la imagen en nuestro fondo.
Se le puede asignar:
repeat (para repetir la imagen horizontal y verticalmente)
repeat-x (para repetir la imagen horizontalmente)
repeat-y (para repetir la imagen verticalmente)
no-repeat (para no repetir la imagen, solo se aplica una sola vez ubicándola arriba a la izquierda)
background-attachment:
Determina si el fondo quedará fijo o no, cuando hagamos scroll en nuestro navegador.
Se le puede asignar:
fixed (fijo, sin scroll)
scroll (con scroll)
background-position:
Determina donde se colocará la imagen de fondo. Si no hay valores, por defecto se coloca arriba a la izquierda. Si le asignamos valores en pixeles, su origen se desplazará a los pixeles que le asignemos, primero en el eje horizontal y luego el vertical.
Ej:
background-position: 10px 10px;
(10 px a la derecha, y 10 px hacia abajo)
EJEMPLOS
Entonces, vamos a ver los diferentes códigos CSS que usaríamos para cada uno de los 3 tipos de fondos que nombré arriba:
Fondo Liso (definimos solo un color de fondo):
body {
background-color: #ff0000;
}
Fondo Unico (se define la imagen de fondo, y se le asigna no repetirla):
body {
background-image: url(fondo_pantalla.jpg);
background-repeat: no-repeat;
}
Fondo de Mosaico o Patterns (se define una imagen y se asigna repetirla horizontal y verticalmente:
body {
background-image: url(fondo_pantalla.jpg);
background-repeat: repeat;
}
Te aconsejo que aunque tengas un fondo fijo o de mosaico, siempre definas un color de fondo para tu pagina que sea similar al predominante de la imagen. Asi, si el fondo tarda en cargar, el usuario puede ver un color parecido al de la imagen.
Te propongo que practiques definiendo diferentes tipos de fondos html para tus paginas, y combinando las diferentes propiedades y valores.
Suscribirse a:
Comentarios (Atom)