Criando um site móvel com dreamweaver

Mais de 100 milhões de consumidores usam seus smartphones para navegar na internet, de acordo com uma pesquisa realizada pela "comScore Inc". Saiba como criar um site projetado especificamente para o seu público móvel. Para este guia, você vai precisar "Dreamweaver CS5" ou uma versão mais recente. Leia mais para aprender como criar um jQuery mobile site.

passos

1
Abra Dreamweaver e vá em "Arquivo gt; Novo ". Você verá a janela "Novo documento". À esquerda da tela, selecione a opção "Página de exemplo" na próxima coluna, selecione "Mobile Starters" e depois "jQuery Mobile (CDN)".
  • 2
    Criar páginas. Uma vez que você abrir o "jQuery Mobile (CDN)" arquivo, você verá uma página semelhante a esta:
  • Embora tecnicamente um documento de uma única página, cada rubrica representa diferentes "páginas". Por exemplo, "uma página" é a página inicial do site móvel ", página dois," pode ser a página "Sobre", o "Página Três" podem ser os "serviços" de página, etc.


  • 3
    Olhe para o código. Estes passos podem ser um pouco difícil se você não tem conhecimento básico de HTML. Para criar o conteúdo, para mim, pessoalmente, eu gosto de trabalhar com a opção "Dividir" para ver o código e visualizar como a página faria. Para selecionar este modo, no canto esquerdo do Dreamweaver, sob o menu "Arquivo", você verá quatro opções de "Código", "Dividir", "Design" e "Live View", como mostrado na figura:
  • Selecione a opção que diz "Divide" e ver o código eo local atual. Vamos nos concentrar primeiro no código.
  • 4


    Editar cabeçalhos para cada página. O código (div-papel de dados ="página" ID ="página"), Estabelece o princípio de uma nova página. Note-se que cada página está associado com um número `div-papel de dados ="página" ID ="page2""É a segunda página, `div em função de dados ="página" ID ="page3"`É a terceira principal e assim por diante.

    `Data-role Div ="cabeçalho"`É a área de cabeçalho e deve colocar todas as informações entre as tags "h1" e "/ h1".
  • 5
    Editar itens de conteúdo e menu. `Data-role Div ="conteúdo""É o início da seção de conteúdo. Este é onde você coloca o conteúdo real de cada página. Tenha em mente que a primeira página é exibida:
  • E se você olhar para a página atual, você vai ver que a primeira página tem uma lista de links. Dados-papel `Ul ="listview"`Significa que você quer uma lista de links que aparecem na área de conteúdo. Quando você adiciona itens de menu ou `em função de dados ="listview"`Certifique-se o texto do link correto para as páginas corretas. Por exemplo, se a página dois é página "Sobre" é os três "Nossos serviços" e página quatro é "Contacto", então deve ser a seguinte:
  • Agora para editar o conteúdo, basta colocar o texto entre div data-role os `tags ="conteúdo"`E` / div `. Por exemplo:

  • 6
    Editar o rodapé. Para editar a nota, basta colocar seu texto em vez de texto "Rodapé".
  • 7
    Verifique se o seu site em modo "Live View". Será que a visão se lembrar de onde ativo "Divide"? À direita da área, há um botão que diz "Live View". Clique aqui e veja como seu site vai olhar como em um telefone.
    • Artigos Relacionados