Como usar imagens para o seu HTML5 e CSS3 baseado na web página Headlines

Geralmente, você deve usar fontes padrão para o conteúdo principal da página web HTML5 e CSS3, assim que ter um conjunto limitado de fontes não é um problema tão grande. Às vezes, porém, você quer usar fontes em suas manchetes. Você pode usar um editor gráfico, como o GIMP, para criar imagens baseadas em texto e, em seguida, incorporá-las em suas páginas.

Menu

    image0.jpg

    Aqui está o processo para a utilização de uma fonte especial:

    1. Planeje sua página.

      Quando você usa gráficos, você perde um pouco de flexibilidade. Você precisa saber exatamente o que as manchetes deve ser. Você também precisa saber o que título irá mostrar em que nível. Ao invés de confiar no navegador para exibir seus headlines, você está criando gráficos em sua ferramenta gráfica e colocá-los diretamente na página.

    2. Criar suas imagens.

      Pode o recurso maravilhoso Logos no GIMP (escolha Xtns # 10153- Script-fu # 10153- logos) para criar o seu texto.

    3. Especificar tamanhos de fonte diretamente.

      Na imagem, faz sentido para especificar tamanhos de fonte em pixels porque aqui você está realmente falando de um número específico de pixels. Você está criando # 147 virtual texto # 148- em seu editor gráfico, assim que o texto seja qual for o tamanho que você quer que seja na página acabado.

    4. Usar qualquer fonte que você quer.

      Você não tem que se preocupar se o usuário tem o tipo de letra porque você não está enviando a apenas uma imagem composta com o da fonte,.

    5. Criar uma imagem separada para cada título.

      Esse exercício tem duas imagens - um título de nível 1 e nível 2. Porque você está criando imagens diretamente, cabe a você a manter o controle de como a imagem irá comunicar seu nível manchete.

    6. Considere o nível manchete.

      Certifique-se de tornar os valores nível manchete 2 olhar um pouco menor ou menos acentuada do que o nível 1. Isto é, se você tem imagens que serão usados ​​em uma configuração 1 posição, eles devem usar uma fonte maior do que as imagens que serão usados ​​em uma menos enfatizou dirigindo nível. Normalmente, isso é feito ajustando o tamanho da fonte em suas imagens.

    7. Criar a página da maneira que você normalmente faria.

      Depois de criar essas imagens especiais, construir uma página web regular. Coloque tags e em exatamente os mesmos lugares que você costuma fazer.

    8. Colocar etiquetas dentro das rubricas.

      Ao invés de texto comum, colocar tags de imagem dentro do e tags. Veja a próxima imageTitles.html código se você está um pouco confuso.

    9. Coloque um texto de título no alt atributo.

      o alt atributo é especialmente importante aqui, porque se o usuário tem gráficos desligado, o texto ainda aparece como um título apropriadamente denominado. As pessoas com conexões lentas ver o texto antes da carga imagens, e as pessoas que utilizam leitores de texto pode ainda ler o texto alt da imagem.

    Aqui está o código usado para gerar os cabeçalhos com base em imagens:

    imageTitles.html

    Esta página descreve as vacas famosas da história

    A maioria das pessoas não sabem que o gado realmente tookpart na batalha. Eles não é claro. I justmade isso.

    Esta técnica é um bom compromisso entre gráficos personalizados e HTML comum como se segue:

    • Você tem um grande controle de suas imagens. Se você é hábil com a sua ferramenta de gráficos, você pode fazer qualquer tipo de imagem que deseja agir como um título. Não há literalmente nenhum limite, excepto a sua habilidade e criatividade.

    • A página mantém a sua estrutura. Você ainda tem tags de cabeçalho no lugar, por isso é fácil de ver que você quer dizer por uma determinada imagem para agir como um título. Você ainda pode ver a organização da página no código HTML.

    • Você tem texto fallback. o alt atributos será ativado se as imagens não podem ser exibidas.

    • O significado semântico de manchetes imagem é preservada. o alt marcas fornecem uma outra grande característica. Se eles replicam o texto da imagem, o texto ainda está disponível para leitores de tela e motores de busca, de modo que o texto não está enterrado na imagem.

    Esta técnica é ótimo para manchetes ou outras áreas, mas aviso que o texto do título foi repetida na tag. Isto é importante porque você não quer perder o texto. Ferramentas de pesquisa do motor e leitores de tela precisa o texto.

    Não fique tentado a usar esta técnica para grandes quantidades de corpo de texto. Isso faz com que alguns problemas:

    • O texto já não é pesquisável. Os motores de busca não pode encontrar um texto se ele está enterrado em imagens.

    • O texto é mais difícil de mudar. Você não pode atualizar sua página com um editor de texto. Em vez disso, você tem que baixar a imagem, modificá-lo e enviá-lo novamente.

    • Imagens de exigir muito mais largura de banda do que o texto. Não use imagens se não substancialmente adicionar à sua página. Você pode fazer o caso para algumas imagens de título, mas é mais difícil de justificar ter a sua página inteira guardada como uma imagem apenas para usar uma fonte particular.

    menu