Compartilhar via


Diretrizes de layout HTML para globalização de página Web ASP.NET

A prática recomendada para layout HTML é para garantir que localizadores precisem converter somente sequências de caracteres, porque as interfaces de usuário redimensiona todos os controles para ajustar o texto que contêm as sequências.Isso é uma vantagem porque a etapa do redimensionamento manual dos controles é removida do processo de localização, assim, removendo erros e bugs que pode resultar.Entretanto, o layout das alterações do controles dependem do comprimento da sequência, então sites da Web localizados precisam ser cuidadosamente testados.

A lista a seguir fornece diretrizes recomendadas para criar páginas da Web ASP.NET para globalização.

  • Evite usar posições absolutas.

    Especificar posições absolutas impede elementos de serem posicionados e dimensionados automaticamente.O exemplo de código a seguir demonstra o que não fazer.

    <!-- Do not do this. -->
    <div id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">
    
  • Utilizar a largura e altura disponíveis para formulários.

    Há duas maneiras para fazer isso, da seguinte forma:

    • Defina o tamanho para elementos, como tabelas, para uma largura que é igual a 100 %.

      Por exemplo:

      <!-- A table sized to take up entire width of the form.-->
        <table width=100%>
      
    • Defina o tamanho para elementos usando expressões de folha de estilo em cascata com base no tamanho geral do formulário.

      Por exemplo:

      <!-- A div element sized to take up half the width and height of the form. -->
      <div style=' 
        height: expression(document.body.clientHeight / 2);
        width: expression(document.body.clientWidth / 2); '>
      
  • Use uma célula de tabela separada para cada controle.

    Isso permite que o texto se disponha independentemente e assegura alinhamento correto para culturas nos quais layout de texto fluem da direita para esquerda.

  • Permita a disposição do texto e evitar usar o atributo nowrap para células de tabela que contenham texto.

    Use o atributo nowrap somente quando desejar que o texto permaneça em uma linha e não há espaço suficiente para o texto expandir para acomodar qualquer idioma.

  • Separe caixas de seleção e botões de opção de seus texto do rótulo.

    Coloque os rótulos para caixas de seleção e botões de opção em células que são separadas dos controles.Isso permite que o texto seja disposto corretamente quando o texto expandir.Ainda no entanto, você deve projetar o formulário para que o texto tenha uma chance razoável de ficar em uma linha quando ele é convertido.

  • Deixar espaço para crescimento e evitar largura fixa.

    Texto pode se expandir quando convertido em outros idiomas.Uma boa de regra consiste em deixar espaço para 300% de crescimento em sequências curtas (menos de 10 caracteres), 200 % crescimento em sequências médias (de 10 a 20 caracteres) e 100 % crescimento em grande sequências (mais de 20 caracteres).

    Uma solução aceitável é definir a largura da célula da tabela em uma porcentagem da largura do formulário para que a célula possa expandir em relação à tabela inteira.Entretanto, tente especificar como alguns tamanhos relativos (diferente de 100 por cento) quando possível, porque você deseja que o mecanismo de layout HTML faça a maioria do trabalho para você.

    Por exemplo:

    <!-- The table cell is sized to take up one quarter of the width of the table. -->
    <td width=25%>
    
  • Defina o tamanho de botões em poucos locais quanto possível.

    Geralmente não é um conjunto de botões que deve ter o mesmo tamanho.Defina este tamanho em um local para o conjunto completo de botões, se possível.Permitir espaço para o texto expandir em caixas de listagem e caixas de grupo.

  • Defina a altura raramente quando possível.

    Não defina a altura da célula para qualquer célula da tabela ou controle que contém texto.(Você pode definir a altura de linha para elementos de folha de estilos em cascata). Caso contrário, a aparência da página altera, se o usuário define o tamanho do texto em um navegador.

  • Não use alinhamento à esquerda ou à direita em marcas HTML

    Em geral, evite definir align="left" ou align="right" de qualquer célula da tabela.Essas configurações pode interferir com o layout dos formulários para culturas nos o fluxo do texto no layout é da direita para esquerda.

  • Evite valores embutido em folha de estilo em cascata que talvez precisem ser alterados.

    Manter todos os valores de folhas de estilos em cascata que localizadores talvez precisem alterar em folhas de estilos, em vez de interno.Isso inclui a definição da fonte para uma página.

  • Defina o tamanho para elementos, como tabelas, para uma largura que é igual a 100 %.

    Por exemplo:

    <!-- A table sized to take up entire width of the form.-->
      <table width=100%>
    
  • Defina o tamanho para elementos usando expressões de folha de estilo em cascata com base no tamanho geral do formulário.

    Por exemplo:

    <!-- A div element sized to take up half the width and height of the form. -->
    <div style=' 
      height: expression(document.body.clientHeight / 2);
      width: expression(document.body.clientWidth / 2); '>
    

Consulte também

Outros recursos

Globalização e Localização no ASP.NET