Mais de 100 milhões de consumidores usam seus smartphones para navegar na Internet de acordo com a com.score Inc. Saiba como criar um site móvel especificamente para o público móvel. Para este tutorial, você precisará do dreamweaver CS5 e superior. Este artigo detalha como criar um site móvel jquery.
Passos
Etapa 1. Abra o Dreamweaver e vá para arquivo> Novo
Você verá uma janela "Novo documento". No lado esquerdo, você deseja escolher a opção "página da amostra" e, na próxima coluna, escolher "mobile Starters" e, em seguida, "jQuery Mobile (CDN)"
Etapa 2. Crie as páginas
Depois de abrir o arquivo jQuery Mobile (CDN), você verá uma página semelhante a esta:
Embora este seja tecnicamente um documento de uma página, cada cabeçalho representa uma "página" diferente. Por exemplo, "Página Um" é a página inicial do site para celular, "Página Dois" pode ser a página sobre nós, "Página Três" pode ser sua página de serviços e assim por diante
Etapa 3. Analise o Código
Essas etapas podem ser bem complicadas se você não estiver familiarizado com HTML básico. Para criar o conteúdo, tente trabalhar em "visualização dividida" no Dreamweaver. Como chegar a esse modo é se você olhar para o canto esquerdo do Dreamweaver, abaixo do menu de arquivo, você verá quatro opções "codificar, dividir, projetar e viver" assim:
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
Etapa 4. Edite os cabeçalhos de cada página
Existe (div data-role = "page"), o que significa que é o início de uma nova página. Observe que cada página está associada a um número 'div data-role = "page"' é a segunda página, 'div data-role = "page"' é a terceira página e assim por diante
'div data-role = "header"' é a área do cabeçalho e você coloca as informações do cabeçalho entre as duas tags "h1" e "/ h1".
Etapa 5. Edite o conteúdo e os itens do menu
'div data-role = "Content"' é o início da seção de conteúdo. É aqui que você coloca o conteúdo real de cada página. Observe que na primeira página há:
-
e se você olhar a página da web real, verá que a primeira página contém uma lista de links. 'ul data-role = "listview"' significa que você deseja uma lista de links na área de conteúdo. Ao adicionar qualquer item de menu ou 'data-role = "listview"', certifique-se de vincular o texto correto às páginas corretas. Por exemplo, se a página dois for "Sobre nós", a página três for "Nosso serviço" e a página quatro for "Entre em contato", você deverá inserir:
Crie um site para celular com o Dreamweaver Etapa 5, ponto 1 -
Agora, para editar o conteúdo, basta colocar seu texto entre as tags 'div data-role = "content"' e '/ div'. Por exemplo:
Crie um site móvel com o Dreamweaver Etapa 5, ponto 2
Etapa 6. Edite o rodapé
Para editar o rodapé, basta colocar seu texto no lugar do texto "Rodapé da Página".
Etapa 7. Dê uma olhada em seu site no "modo ao vivo"
Lembra onde você mudou para o "modo de divisão?" bem nessa área, há um botão que diz "ao vivo". Clique nele e você verá como será a aparência do seu site em um telefone!
