Uso do Adobe Device Central com o Dreamweaver

O Device Central habilita os designers e desenvolvedores da Web do Dreamweaver a visualizarem a aparência dos arquivos do Dreamweaver em uma ampla variedade de dispositivos móveis. O Device Central usa a Renderização em Tela Pequena do Opera™ para proporcionar aos designers e desenvolvedores uma impressão da aparência da página da Web em uma tela pequena. Ela também habilita os designers e desenvolvedores a testarem se o CSS comporta-se corretamente.

Por exemplo, um desenvolvedor da Web pode ter um cliente que deseja tornar o site da Web disponível para celulares. O desenvolvedor da Web pode usar o Dreamweaver para criar páginas preliminares e usar o Device Central para testar a aparência das páginas em dispositivos diferentes.

  1. Inicie o Dreamweaver.
  2. Abra um arquivo.
  3. Siga um destes procedimentos:
    • Selecione Arquivo > Visualizar no Navegador > Device Central.

    • Na barra de ferramentas da janela do documento, clique no botão do navegador Visualizar/Depurar em , mantendo-o pressionado, e selecione Visualizar no Device Central.

Dicas para criação de conteúdo da Web para dispositivos móveis usando o Dreamweaver

O Device Central visualiza páginas da Web criadas no Dreamweaver usando a Renderização em Tela Pequena do Opera. Essa visualização pode proporcionar uma boa ideia da aparência de uma página da Web em um dispositivo móvel.

Nota: a Renderização em Tela Pequena do Opera pode ou não estar pré-instalada em qualquer dispositivo emulador individual. O Device Central simplesmente proporciona uma visualização da aparência do conteúdo, caso a Renderização em Tela Pequena do Opera estivesse instalado.

Use as seguintes dicas para garantir que as páginas da Web criadas no Dreamweaver sejam exibidas corretamente em dispositivos móveis:

  • Se você usar a estrutura do Adobe® Spry para desenvolver conteúdo, adicione a seguinte linha de HTML às páginas para que elas possam renderizar CSS e executar JavaScript™ corretamente no Device Central:<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/> <link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>

  • A Renderização em Tela Pequena do Opera não oferece suporte a quadros, pop-ups, sublinhados, tachados, linhas sobrepostas, intermitências e letreiros. Tente evitar esses elementos de projeto.

  • Mantenha as páginas da Web simples para dispositivos móveis. Em especial, use um número mínimo de fontes, tamanhos de fontes e cores.

  • A redução de tamanhos de imagem e a redução do número de cores necessárias aumentam as chances de que as imagens sejam exibidas como planejado. Use CSS ou HTML para especificar uma altura e uma largura exatas para cada imagem usada. Forneça texto alternativo para todas as imagens.

Observação:

o site da Web do software Opera é uma boa fonte de informações sobre a otimização de páginas da Web para dispositivos móveis.

Para obter mais dicas e técnicas sobre como criar conteúdo para celulares e outros dispositivos móveis, consulte www.adobe.com/go/learn_cs_mobilewiki_br.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online