Pesquisar no blog

Mostrando postagens com marcador site responsivo. Mostrar todas as postagens
Mostrando postagens com marcador site responsivo. Mostrar todas as postagens

Desenho de páginas web usando um layout de grade fluido no Dreamweaver CS6


Figura 1
Nos exercícios a seguir, você vai trabalhar em duas páginas de um site protótipo em Adobe Dreamweaver. Você vai aprender como criar rapidamente um layout de página web que se adapta a diferentes tamanhos de tela e visualizar o projeto em um navegador da web.
  1. Iniciar o Dreamweaver, e na tela de layout clique Bem-vindo Grade Fluid. 
  2. Na caixa de diálogo Novo documento, o número dentro de cada gráfico de tela de tamanho é o número de colunas através do desenho, e a percentagem inferior de cada gráfico representa a percentagem da largura da tela usada para o corpo da página.
  3. Agora você vai salvar a página pela primeira vez. Isso acontece em duas etapas: Salvando um arquivo CSS e, em seguida, um arquivo HTML. O arquivo CSS define estilos da página e layout, enquanto o arquivo HTML descreve o que está incluído no arquivo.Em outras palavras, para uma página web, CSS e HTML define forma define o conteúdo.
  4. Deixe os padrões e clique em Criar.
  5. Na folha de estilo Salvar como caixa de diálogo que aparecer, navegue para selecionar a pasta CSS dentro da pasta Lesson05. Com a subpasta CSS selecionado, o nome do arquivo do CSS fluid.css , e clique em Salvar.
  6. Escolha Arquivo> Salvar. Nomeie o arquivo fluid.html , e salve o arquivo novo HTML5.Certifique-se de salvá-lo no nível superior de Lesson05 pasta, juntamente com a subpasta CSS.
  7. Na caixa de diálogo Copiar arquivos dependentes que aparece, clique em Copiar para salvar os dois arquivos listados (que são obrigatórios) automaticamente para a subpasta apropriada dentro de sua pasta Lesson05.