Cómo utilizar imágenes para su HTML5 y CSS3 titulares de páginas web basadas

En general, usted debe utilizar fuentes estándar para el contenido principal de la página web HTML5 y CSS3, así que tener un conjunto limitado de tipos de letra no es un problema tan grande. A veces, sin embargo, desea utilizar fuentes en sus titulares. Puede utilizar un editor gráfico, como GIMP, para crear imágenes basadas en texto y después incorporarlos en sus páginas.

Conteúdo

    imagen0.jpg

    Aquí está el procedimiento para el uso de una fuente especial:

    1. Planifique su página.

      Al utilizar gráficos, se pierde un poco de flexibilidad. Usted necesita saber exactamente lo que los titulares deben ser. También es necesario saber qué título se mostrará en qué nivel. En lugar de confiar en el navegador para visualizar sus titulares, va a crear gráficos en su herramienta gráfica y colocarlos directamente en la página.

    2. Crea tus imágenes.

      Puede la característica maravillosa Logos en GIMP (elija Xtns # 10153- Script-fu # 10153- logos) para crear su texto.

    3. Especifique tamaños de fuente directa.

      En la imagen, tiene sentido para especificar los tamaños de fuente en píxeles porque aquí usted está realmente hablando de un número específico de píxeles. Usted está creando " texto virtual " en su editor de fotos, por lo que el texto sea el tamaño que queramos que sea en la página terminada.

    4. Utilice cualquier fuente que desee.

      Usted no tiene que preocuparse de si el usuario tiene la fuente, ya que no va a enviar el tipo de letra, sólo una imagen compuesta con la fuente.

    5. Crear una imagen separada para cada titular.

      Este ejercicio en particular tiene dos imágenes - un título de nivel 1 y nivel 2. Dado que está creando imágenes directamente, le toca a usted para hacer un seguimiento de cómo la imagen se comunicará su nivel titular.

    6. Considere el nivel de titular.

      Asegúrese de hacer nivel encabezado 2 valores se ven un poco más pequeña o menos hincapié en que el nivel 1. Es decir, si usted tiene imágenes que se utilizarán en un 1 ajuste de la partida, deben utilizar un tipo de letra más grande que las imágenes que se utilizarán en un menos enfatizado nivel de partida. Por lo general, esto se hace mediante el ajuste del tamaño de la fuente en sus imágenes.

    7. Creación de la página de la manera que normalmente lo haría.

      Después de crear estas imágenes de la especialidad, construir una página web normal. Poner

      y

      etiquetas en exactamente los mismos lugares que suelen hacer.

    8. Poner etiquetas dentro de las rúbricas.

      En lugar de texto ordinario, las etiquetas de imagen lugar dentro de la

      y

      las etiquetas. Ver la próxima imageTitles.html código si estás un poco confundido.

    9. Ponga el texto en el título alt atribuir.

      los alt atributo es especialmente importante aquí porque si el usuario tiene gráficos desactivado, el texto sigue apareciendo como un título debidamente estilo. Las personas con conexiones lentas ver el texto antes de la carga de imágenes y personas que utilizan lectores de texto todavía se puede leer el texto alternativo de la imagen.

    Aquí está el código usado para generar las cabeceras basados ​​en imágenes:

    imageTitles.html

    Esta página describe las vacas famosas de la historia

    La mayoría de las personas no son conscientes de que el ganado realidad tookpart en la batalla. No lo hicieron, por supuesto. Acabo de inventarlo.

    Esta técnica es un buen compromiso entre los gráficos personalizados y HTML ordinaria como sigue:

    • Usted tiene un gran control de sus imágenes. Si usted es hábil con su herramienta de gráficos, se puede hacer cualquier tipo de imagen que desea actuar como un titular. Hay, literalmente, no hay límite a excepción de su habilidad y creatividad.

    • La página conserva su estructura. Usted todavía tiene etiquetas de título en su lugar, por lo que es fácil ver que te refieres a una imagen particular para actuar como titular. Todavía se puede ver la organización de la página en el código HTML.

    • Usted tiene texto de reserva. los alt atributos activarán si las imágenes no se pueden mostrar.

    • El significado semántico de los titulares de imagen se conserva. los alt etiquetas proporcionan otra gran característica. Si se replican el texto de la imagen, este texto sigue estando disponible para los lectores de pantalla y los motores de búsqueda, por lo que el texto no está enterrado en la imagen.

    Esta técnica es ideal para titulares u otras áreas, pero se dio cuenta de que el texto del título se repitió en el etiqueta. Esto es importante porque usted no quiere perder el texto. Herramientas de búsqueda del motor y los lectores de pantalla necesitan el texto.

    No tener la tentación de utilizar esta técnica para grandes cantidades de texto del cuerpo. Si lo hace, provoca algunos problemas:

    • El texto ya no se puede buscar. Los motores de búsqueda no pueden encontrar el texto si está enterrado en imágenes.

    • El texto es difícil de cambiar. No puede actualizar su página con un editor de texto. En su lugar, usted tiene que descargar la imagen, modificarla, y subirlo de nuevo.

    • Imágenes requieren un ancho de banda mucho más que el texto. No utilice imágenes si no añaden sustancialmente a su página. Puede hacer que el caso de algunas imágenes de rumbo, pero es más difícil de justificar que su página entera almacena como una imagen sólo para usar una fuente en particular.




    » » » » Cómo utilizar imágenes para su HTML5 y CSS3 titulares de páginas web basadas