Novo layout de grade de fluidos Dreamweaver CS6

• Pode 20, 2024

Se você desenvolve sites simples ou CMS complexo, sempre tem essa pergunta incômoda - estou fazendo tudo o que posso para atingir todos os tipos de públicos e resoluções de tela? Bem, o Dreamweaver^R O CS6 possui novos recursos que tornam essa tarefa mais fácil.

No passado, seria necessário criar um arquivo CSS diferente para cada resolução de tela diferente e usar a consulta de mídia para atribuir o arquivo CSS necessário. Isso consumiu muito tempo e aumentou o custo geral do desenvolvimento do site, o que foi uma má notícia para o desenvolvedor e o cliente. O Dreamweaver CS6 retirou grande parte do trabalho da criação de sites adaptáveis.

Esse novo processo de fluxo de trabalho depende do novo Layout da grade do fluido, que é como um modelo inicial com layouts e tipografia padrão para cada resolução de tela do seu site.

1. Basta clicar em Arquivo - Novo layout de grade de fluido na barra de menus.
   
   
2. Na caixa de diálogo Novo documento, você verá os padrões desta nova página da Web adaptável. A largura é fixa para cada uma das diferentes resoluções de tela.
   
   480px para celular
   Tabela 768px
   Desktop 1232px
   
   
3. Você tem a opção de alterar o número padrão de colunas e a porcentagem de largura da coluna para cada resolução de tela. Os padrões são:
   
   Celular 5 colunas - 91%
   Tablet 8 colunas - 93%
   Desktop 10 colunas - 90%
   
   
4. O espaço de trabalho padrão pode mostrar o código e as visualizações de design. Como você pode ver na exibição de design, o novo arquivo já possui uma tag div. Você pode alterar o ID e a classe padrão da div no painel Propriedades.
   
   Obviamente, sua página precisará de mais de uma div. Assim, podemos adicionar mais divs para o cabeçalho, navegação, principal, lado e rodapé.
   
   
5. Para adicionar uma nova div, escolha Inserir etiqueta de div de layout de grade de fluido no painel Inserir.
   
   
6. Na caixa de diálogo, você pode nomear o ID da marca.
   
   
7. Quando adicionamos todos os principais divs da nossa página, podemos clicar e arrastá-los para reposicioná-los na grade.
   
   

Sugere-se que comecemos a criar a versão móvel do nosso site e passemos para os tamanhos maiores. Você pode comparar facilmente os resultados visuais enquanto trabalha usando o Resolution Switcher para resoluções de dispositivos móveis, tablets e computadores.

Quando salvamos nosso layout, obtemos um arquivo HTML5 e CSS3 que funcionará nas três resoluções de tela. Se dermos uma olhada nesses arquivos, podemos encontrar informações sobre como os arquivos funcionam para criar nossa página da Web adaptável.

* 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: Como criar seu próprio Grid System Responsivo em CSS sem usar Frameworks (Pode 2024).