Cómo crear una página web a partir de una imagen fija individual

Escrito por Ashley Poland | Traducido por John Font

Un sitio web eficaz no necesita ser complejo ni tampoco estar lleno de imágenes. Si tienes una sola imagen que desea centrar en tu sitio web, descárgala. Puedes utilizarla como elemento de fondo de una capa o puedes colocar elementos de texto al lado o cerca de ella. Si la imagen tiene texto para los elementos de navegación, puedes utilizar un mapa de imagen para que puedas hacer clic sobre éstos elementos. Probablemente será una simple página web, pero "simple" no significa que sea "mala".

Ubica tu imagen en la página. Si desea centrar la imagen en la página, configura tu sitio web completo para que se centre alineada con la hoja de estilo, por ejemplo: body { text-align: center; }

Crea una capa para el contenido del texto. Trata de que la capa encaje detro del contenido. Sin no tienes un estilo, simplemente ajustala al ancho de la pantalla del visitante. Con CSS, sin embargo, puedes organizarla, asignarle color y ubicarla e incluso apilarla de manera que juegue bien con tu imagen.

Utiliza CSS para ubicar la capa como quieras con tu imagen. Por ejemplo, si deseas que aparezca la imagen a la izquierda de la capa, puedes utilizar el siguiente CSS: #img { float: left;} #content { width: 500px; padding: 5px; } Couple this with the HTML:

Text Content
Sin embargo, si quieres ajustar la imagen ligeramente por debajo de la capa, podrías utilizar position. Digamos que tu imagen es de 600 píxeles de alto y 800 píxeles. Podrías definir la posición relativa de la capa superior y ubicarla por defecto en la página. Tu CSS se vería como sigue: #content { position: relative; top: -550px; height: 600px; width: 800px; overflow-x: hidden; overflow-y: scroll; } Parece mucho, pero esto ajusta la capa para que cubra todo menos los 50 píxeles de la imagen, con la barra de desplazamiento horizontal oculta y la barra de desplazamiento vertical habilitada. Lo que tenemos es esencialmente el equivalente funcional de un marco en línea, sin el inconveniente de la utilización de un marco flotante. Además, puedes modificarla usando la opacidad. Por ejemplo, los valores de color RGBA te permiten definir un color como transparente. Si quieres un fondo blanco y que además tenga un 70% de transparencia necesitas agregar: background: RGBA(250,250,250,0.7); Sin embargo, ten cuidado con los valores RGBA para que funcionen en Internet Explorer 8 y en versiones anteriores. En IE, tu sitio web no tendrá ningún color de fondo en absoluto.

Utiliza un mapa de imágenes si quieres que ciertas partes de tu imagen queden activadas. Los mapas de imagen utilizan coordenadas en la imagen para crear vínculos. Puede escribir tu mapa de imagen de forma manual, ubicando las coordenadas de cada zona con tu programa de edición de imágenes preferido o puedes utilizar una herramienta en línea para la generación de un mapa. Para aplicar un mapa de tu imagen, tendrás que añadir el atributo "usemap" : A continuación, agrega el propio mapa en tu página de la siguiente manera: Alt Text Alt Text

Agrega otros elementos dentro del sitio web para que encajen. Simple no es una escusa de subdesarrollo. Usa una imagen de fondo sutil para todo lo demás o un color para que parezca menos intenso. Agregar bordes, si te gusta la estética. Siéntete libre de experimentar con elementos como sombras y transformaciones de CSS3.

Guarda la página y abréla en el navegador de tu elección. Puede ser que tengas que ajustar su ancho ysu altura así como la opacidad de la imagen hasta que estés satisfecho con el producto final.

Consejos

  • Para ajustar la imagen como fondo de la capa, sólo tiene que añadir esto a tu capa CSS: background: url('URL');
  • Puede utilizar capas múltiples en una página de elementos múltiples. Por ejemplo, puedes utilizar una capa de contenido y una capa de barra lateral para crear la navegación y el contenido.
  • Revisa en la herramienta @font-face de CSS3, la cual te permite utilizar fuentes personalizadas en un sitio web sin el uso de una imagen.

Créditos de las fotos

  • Jupiterimages/Comstock/Getty Images