Integração com Dreamweaver e jQuery Mobile

• Pode 12, 2024

Nos últimos anos, o Dreamweaver^R recebeu um número crescente de recursos para a criação de conteúdo da Web para dispositivos móveis e aplicativos para dispositivos móveis. Esta nova atualização para o CS6 não é exceção. O Dreamweaver CS6 possui um fluxo de trabalho aprimorado com os recursos do jQuery Mobile.

Iniciar um novo projeto móvel é simples com a nova opção Página da amostra na caixa de diálogo Novo documento. Você pode escolher uma amostra do jQuery Mobile na pasta Mobile Starters. Esta página de amostra é fornecida com alguns arquivos gráficos, css e JavaScript pré-criados.

Nesta página de amostra, podemos começar a construir nosso projeto adicionando elementos à página.

1. No painel Inserir, escolheremos o jQuery Mobile no menu de categorias. Isso exibirá os componentes pré-construídos.
   
   
2. Para adicionar um novo componente, colocaremos o cursor no local onde o novo elemento de design será adicionado e clicaremos em um dos componentes da lista. Para o nosso exemplo, vamos escolher um Slider.
   
   O Dreamweaver adicionará automaticamente o código do controle deslizante à nossa página. Na exibição ao vivo, podemos ver nosso novo controle deslizante.
   
   

Mas esta página é um pouco genérica. Temos uma maneira rápida e fácil de estilizar nossa página com o novo painel Amostras móveis do jQuery.

1. Na barra de menus, clique em Janela - Amostras do jQuery Mobile. Se você ainda não carregou os arquivos de suporte gráfico, css e JavaScript, verá uma caixa de diálogo pop-up. Clique em Copiar para carregar os arquivos.
   
   
2. O novo painel Amostras do jQuery Mobile fica vazio até você selecionar um elemento na sua página de amostra. Quando você seleciona um elemento, o painel exibe as amostras correspondentes disponíveis para esse elemento. Se selecionarmos o elemento do cabeçalho, veremos vários temas de cabeçalho.
   
   
3. Se mudarmos para a exibição ao vivo, podemos clicar em cada amostra do tema para ver uma prévia da aparência deles.
   
   

Podemos repetir isso para todos os elementos de design em nossa página. Ao fazer isso, o painel Amostras do jQuery Mobile exibirá as amostras de temas correspondentes disponíveis. Também podemos usar o Comutador de resolução para visualizar o design como ele será exibido nas resoluções de desktop e tablet.

Se usarmos o link Obter mais temas na parte inferior do painel, um navegador será aberto no site ThemeRoller for jQuery Mobile.

* A Adobe me forneceu uma cópia deste software para fins de revisão.

Direitos autorais 2018 Adobe Systems Incorporated. Todos os direitos reservados. As capturas de tela do produto Adobe foram impressas com permissão da Adobe Systems Incorporated. Adobe, Photoshop, Álbum do Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst e Flash Paper é / é [a] marca registrada ou marca comercial da Adobe Systems Incorporated nos Estados Unidos e / ou em outros países.

Instruções De Vídeo: AnimateCC to Muse (Pode 2024).