Como criar um site móvel com o dreamweaver

Mais de 100 milhões de consumidores usam seus smartphones para navegar na Internet de acordo com com.Pontuação Inc. Aprenda a criar um site móvel especificamente para o público móvel. Para este tutorial, você precisará do Dreamweaver CS5 e. Este artigo detalha como criar um site do JQuery Mobile.

Passos

  1. Criar um site móvel com Dreamweaver Passo 1
1. Abra o Dreamweaver e vá para o arquivo > Novo. Você então verá um "Novo Documento" Janela. No lado esquerdo, você quer escolher a opção "Página da amostra" então na próxima coluna, escolha "Entradas móveis", então "jquery mobile (cdn)"
  • Criar um site móvel com Dreamweaver Passo 2
    2. Crie as páginas. Depois de abrir o arquivo JQuery Mobile (CDN), você verá uma página que se parece com isso:
  • Embora isso seja tecnicamente um documento de uma página, cada cabeçalho representa um "página". Por exemplo, "Página um" é a página inicial do site móvel, "Página Dois" poderia ser a página sobre nós, "Página Três" poderia ser sua página de serviços e assim por diante.
  • Criar um site móvel com Dreamweaver Passo 3
    3. Olhe para o código. Essas etapas podem ser bem complicadas se você não estiver familiarizado com o HTML básico. Para criar o conteúdo, tente trabalhar em "Vista dividida" no Dreamweaver. Como chegar a esse modo é se você olhar para o canto esquerdo do Dreamweaver, abaixo do menu Arquivo, você verá quatro opções "Código, dividir, design e viver" como isso:
  • Escolha a opção destacada "dividir", e você verá uma visão do código e do site real lado a lado. Dê uma olhada no código.
  • 4. Edite os cabeçalhos para cada página. Existe (div Data-Papel ="página" id ="página"), o que significa que é o começo de uma nova página. Observe que cada página está associada a um número "DIV Data-Papel ="página" id ="página 2"`é a segunda página,` DIV Data-Papel ="página" id ="Página3"`é a terceira página e assim por diante

    `DIV Data-Papel ="cabeçalho"`é a área de cabeçalho, e você coloca informações de cabeçalho entre os dois "H1"e "/ h1" Tag.


  • Criar um site móvel com Dreamweaver Passo 5
    5. Edite os itens de conteúdo e menu. `DIV Data-Papel ="Contente"`é o começo da seção de conteúdo. Isto é onde você coloca o conteúdo real de cada página. Observe que na primeira página é:
  • E se você olhar para a página da Web real, você verá que a primeira página tem uma lista de links. `Data-Papel UL ="exibição de lista"`significa que você quer uma lista de links na área de conteúdo.Ao adicionar qualquer item de menu ou `Data-Papel ="exibição de lista"`, certifique-se de vincular o texto correto com as páginas corretas. Por exemplo, se a página dois é "Sobre nós", página três é "Nosso serviço", e a página quatro é "Contate-Nos" Então você quer colocar:Criar um site móvel com Dreamweaver Passo 5Bullet1
  • Agora, para editar conteúdo, simplesmente coloque seu texto entre os `DIV Data-Papel ="contente"`e` / div `tags. Por exemplo:Criar um site móvel com Dreamweaver Passo 5Bullet2
  • 6. Edite o rodapé. Para editar o rodapé, basta colocar seu texto no lugar do "Rodapé da página" texto.
  • Criar um site móvel com Dreamweaver Passo 7
    7. Dê uma olhada no seu site em "modo ao vivo". Lembre-se de onde você mudou para dentro "modo dividido?" Nessa área, há um botão que diz "viver". Clique nisso, e você verá como será o seu site em um telefone!

    • Pontas

    Compartilhe na rede social:
    Semelhante