Guia do Usuário Cancelar

Sobre usar o CSS para criar o layout da página

  1. Guia do usuário do Dreamweaver
  2. Introdução
    1. Noções básicas de web design responsivo
    2. Novidades do Dreamweaver
    3. Desenvolvimento Web com o Dreamweaver – Visão geral
    4. Dreamweaver/Perguntas frequentes
    5. Atalhos de teclado
    6. Requisitos de sistema do Dreamweaver
    7. Resumo dos recursos
  3. Dreamweaver e Creative Cloud
    1. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    2. Bibliotecas da Creative Cloud no Dreamweaver
    3. Uso de arquivos do Photoshop no Dreamweaver
    4. Trabalhe com o Adobe Animate e o Dreamweaver
    5. Extraia das Bibliotecas arquivos SVG otimizados para a Web
  4. Áreas de trabalho e exibições do Dreamweaver
    1. Espaço de trabalho do Dreamweaver
    2. Otimizar espaço de trabalho no Dreamweaver para desenvolvimento visual
    3. Pesquisa de arquivos baseada no nome de arquivo ou no conteúdo | Mac OS
  5. Configurar sites
    1. Sobre sites do Dreamweaver
    2. Configurar uma versão local do site
    3. Conectar-se a um servidor de publicação
    4. Configurar um servidor de teste
    5. Importar e exportar configurações de site do Dreamweaver
    6. Trazer sites existentes de um servidor remoto para a raiz do site local
    7. Recursos de acessibilidade do Dreamweaver
    8. Configurações avançadas
    9. Definir preferências de site para transferência de arquivos
    10. Especificar configurações do servidor proxy no Dreamweaver
    11. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    12. Como usar o Git no Dreamweaver
  6. Gerenciar arquivos
    1. Criar e abrir arquivos
    2. Gerenciamento de arquivos e pastas
    3. Obter e colocar arquivos no servidor
    4. Devolver e retirar arquivos
    5. Sincronizar arquivos
    6. Comparar arquivos em busca de diferenças
    7. Encobrir arquivos e pastas em seu site do Dreamweaver
    8. Ativar as Design Notes para sites do Dreamweaver
    9. Impedir possível ataque ao Gatekeeper
  7. Layout e design
    1. Usar auxílios visuais para layout
    2. Sobre usar o CSS para criar o layout da página
    3. Criar sites responsivos usando o Bootstrap
    4. Criar e usar consultas de mídia no Dreamweaver
    5. Apresentar conteúdo em tabelas
    6. Cores
    7. Design responsivo usando layouts de grade fluida
    8. Extract no Dreamweaver
  8. CSS
    1. Noções sobre as folhas de estilos em cascata
    2. Aplicar layout às páginas usando o CSS Designer
    3. Usar pré-processadores de CSS no Dreamweaver
    4. Como definir preferências de estilo CSS no Dreamweaver
    5. Mover regras de CSS no Dreamweaver
    6. Converter CSS inline em uma regra de CSS no Dreamweaver
    7. Trabalhar com tags div
    8. Aplicação de degradês ao fundo
    9. Criar e editar efeitos de transição do CSS3 no Dreamweaver
    10. Formatar código
  9. Conteúdo e ativos de página
    1. Definir propriedades da página
    2. Configurar propriedades de cabeçalho e propriedades de link de CSS
    3. Trabalhar com texto
    4. Localizar e substituir texto, tags e atributos
    5. Painel DOM
    6. Editar na Visualização dinâmica
    7. Codificar documentos do Dreamweaver
    8. Selecionar e exibir os elementos na janela Documento
    9. Definir propriedades de texto no Inspetor de propriedades
    10. Verificar ortografia de uma página Web
    11. Usar regras horizontais no Dreamweaver
    12. Adicionar e modificar combinações de fontes no Dreamweaver
    13. Trabalhar com ativos
    14. Inserir e atualizar datas no Dreamweaver
    15. Criar e gerenciar ativos favoritos no Dreamweaver
    16. Inserir e editar imagens no Dreamweaver
    17. Adicionar objetos de mídia
    18. Adição de vídeos no Dreamweaver
    19. Inserir vídeo HTML5
    20. Inserir arquivos SWF
    21. Adicionar efeitos de áudio
    22. Inserir áudio HTML5 no Dreamweaver
    23. Trabalhar com itens da biblioteca
    24. Usar texto em árabe e hebraico no Dreamweaver
  10. Vinculação e navegação
    1. Sobre vinculação e navegação
    2. Vinculação
    3. Mapas de imagem
    4. Solucionar problemas com links
  11. Efeitos e widgets do jQuery
    1. Usar widgets de interface e para dispositivos móveis do jQuery no Dreamweaver
    2. Usar efeitos do jQuery no Dreamweaver
  12. Programar sites
    1. Sobre codificação no Dreamweaver
    2. Ambiente de codificação no Dreamweaver
    3. Definir preferências de codificação
    4. Personalizar codificação por cores
    5. Escrever e editar código
    6. Dicas de código e preenchimento de código
    7. Recolher e expandir código
    8. Reutilizar código com snippets
    9. Linting de código
    10. Otimizar código
    11. Editar código na Visualização de design
    12. Trabalhar com conteúdo do cabeçalho das páginas
    13. Inserir inclusões de servidor no Dreamweaver
    14. Usar bibliotecas de tags no Dreamweaver
    15. Importar tags personalizadas para o Dreamweaver
    16. Usar comportamentos JavaScript (instruções gerais)
    17. Aplicar comportamentos internos do JavaScript
    18. Sobre XML e XSLT
    19. Executar transformações XSL do servidor no Dreamweaver
    20. Executar transformações XSL do cliente no Dreamweaver
    21. Adicionar entidades de caracteres para XSLT no Dreamweaver
    22. Formatar código
  13. Fluxos de trabalho entre produtos
    1. Instalar e usar extensões no Dreamweaver
    2. Atualizações dentro do aplicativo no Dreamweaver
    3. Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
    4. Trabalho com o Fireworks e o Dreamweaver
    5. Editar conteúdo em sites do Dreamweaver usando o Contribute
    6. Integração do Business Catalyst ao Dreamweaver
    7. Criar campanhas de email personalizadas
  14. Modelos
    1. Sobre os modelos do Dreamweaver
    2. Reconhecimento de modelos e documentos baseados em modelo
    3. Criar um modelo do Dreamweaver
    4. Criar regiões editáveis nos modelos
    5. Criar regiões e tabelas repetitivas no Dreamweaver
    6. Usar regiões opcionais em modelos
    7. Definir atributos de tag editáveis no Dreamweaver
    8. Como criar modelos aninhados no Dreamweaver
    9. Editar, atualizar e excluir modelos
    10. Exportar e importar conteúdo xml no Dreamweaver
    11. Aplicar ou remover um modelo em um documento
    12. Editar conteúdo em modelos do Dreamweaver
    13. Regras de sintaxe para tags de modelo no Dreamweaver
    14. Definir preferências de realce para regiões de modelo
    15. Vantagens de usar modelos no Dreamweaver
  15. Dispositivo móvel e multitela
    1. Criar consultas de mídia
    2. Alterar a orientação de página para dispositivos móveis
    3. Criar aplicativos Web para dispositivos móveis usando o Dreamweaver
  16. Sites dinâmicos, páginas e formulários Web
    1. Noções sobre aplicativos Web
    2. Configurar o computador para desenvolvimento de aplicativos
    3. Solucionar problemas de conexões de banco de dados
    4. Remover scripts de conexão no Dreamweaver
    5. Criar páginas dinâmicas
    6. Visão geral das fontes de conteúdo dinâmico
    7. Definir origens de conteúdo dinâmico
    8. Adicionar conteúdo dinâmico a páginas
    9. Alterar conteúdo dinâmico no Dreamweaver
    10. Exibir registros de banco de dados
    11. Fornecer e solucionar problemas de live data no Dreamweaver
    12. Adicionar comportamentos personalizados de servidor no Dreamweaver
    13. Criar formulários usando o Dreamweaver
    14. Usar formulários para reunir informações de usuários
    15. Criar e ativar formulários do ColdFusion no Dreamweaver
    16. Criar formulários Web
    17. Suporte aprimorado a HTML5 para elementos de formulário
    18. Desenvolver um formulário usando o Dreamweaver
  17. Criação visual de aplicativos
    1. Criar páginas mestre e detalhadas no Dreamweaver
    2. Criar páginas de pesquisa e de resultados
    3. Criar uma página de inserção de registro
    4. Criar uma página de registro de atualização no Dreamweaver
    5. Criar páginas de exclusão de registro no Dreamweaver
    6. Usar comandos ASP para modificar um banco de dados no Dreamweaver
    7. Criar uma página de registro
    8. Criar uma página de logon
    9. Criar uma página que apenas usuários autorizados podem acessar
    10. Proteger pastas no ColdFusion usando o Dreamweaver
    11. Usar componentes do ColdFusion no Dreamweaver
  18. Testar, visualizar e publicar sites
    1. Visualizar páginas
    2. Visualizar páginas Web do Dreamweaver em vários dispositivos
    3. Testar seu site do Dreamweaver

 

Saiba a estrutura básica de um layout CSS e como criar páginas e conteúdo usando CSS no Dreamweaver.

Sobre o layout da página CSS

Um layout de página CSS usa o formato de folhas de estilos em cascata, em vez dos quadros e tabelas HTML tradicionais, para organizar o conteúdo em uma página da Web. O bloco de criação básico do layout de CSS é a tag div, uma tag HTML que, na maioria dos casos, atua como um contêiner de texto, imagens e outros elementos de página. Quando você cria um layout de CSS, coloque tags div na página, adicione conteúdo a elas e posicione-as em vários lugares. Diferente das células de tabela, que são restritas a algum lugar dentro das linhas e colunas de uma tabela, as tags div podem aparecer em qualquer lugar de uma página da Web. É possível posicionar tags div de forma absoluta (especificando coordenadas x e y) ou relativa (especificando o seu local em relação ao seu local atual). Você também pode posicionar as tags div especificando flutuações, preenchimentos e margens, o método preferido pelos padrões da Web de hoje.

Sobre a estrutura do layout da página CSS

Antes de passar para esta seção, você deve estar familiarizado com os conceitos básicos de CSS.

O bloco de criação básico do layout de CSS é a tag div, uma tag HTML que, na maioria dos casos, atua como um contêiner de texto, imagens e outros elementos de página. O exemplo a seguir mostra uma página HTML que contém três tags div separadas: uma tag de “contêiner” grande e duas outras tags, uma tag de barra lateral e uma tag de conteúdo principal, dentro da tag de contêiner.

A. Div de contêiner B. Div de barra lateral C. Div de conteúdo principal 

Este é o código das três tags div do HTML:

<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     
<!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div>

No exemplo acima, não há nenhum “estilo” anexado a nenhuma das tags div. Sem as regras de CSS definidas, cada tag div e seu respectivo conteúdo ficam em uma local padrão da página. No entanto, se cada tag div tiver uma ID exclusiva (como no exemplo anterior), você poderá usar suas IDs para criar regras de CSS que, quando aplicadas, alteram o estilo e posicionamento das tags div.

A regra de CSS a seguir, que pode residir no cabeçalho do documento ou em um arquivo CSS externo, cria regras de estilo para a primeira tag div ou a de “contêiner”, na página:

#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

A regra #container dita que a tag div de contêiner deve ter uma largura de 780 pixels, um fundo branco, nenhuma margem (no lado esquerdo da página), uma borda sólida preta de 1 pixel e o texto alinhado à esquerda. Os resultados da aplicação da regra à tag div de contêiner são os seguintes:

Tag div de contêiner, 780 pixels, sem margem

A. Texto alinhado à esquerda B. Fundo branco C. Borda sólida preta de 1 pixel 

A próxima regra de CSS cria regras de estilo para a tag div de barra lateral:

#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}

A regra #sidebar dita que a tag div de barra lateral tem uma largura de 200 pixels, um fundo cinza, um preenchimento superior e inferior de 15 pixels, um preenchimento à direita de 10 pixels e um preenchimento à esquerda de 20 pixels. (A ordem padrão de preenchimento é da parte superior direita para a parte inferior esquerda.) Além disso, a regra posiciona a tag div de barra lateral com float: left — uma propriedade que coloca a tag div de barra lateral no lado esquerdo da tag div de contêiner. Estes são os resultados da aplicação da regra à tag div de barra lateral:

Div de barra lateral, flutuação à esquerda

A. Largura de 200 pixels B. Preenchimento superior e inferior, 15 pixels 

Por fim, a regra de CSS da tag div de contêiner principal finaliza o layout:

#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
}

A regra #mainContent dita que a div de conteúdo principal terá uma margem esquerda de 250 pixels; isso significa que ela colocará 250 pixels de espaço entre o lado esquerdo da div de contêiner e o lado esquerdo da div de conteúdo principal. Além disso, a regra fornece 20 pixels de espaçamento nos lados direito, inferior e esquerdo da div de conteúdo principal. Estes são os resultados da aplicação da regra à div mainContent:

Esta será a aparência do código completo:

Div de conteúdo principal, margem esquerda de 250 pixels

A. Preenchimento esquerdo de 20 pixels B. Preenchimento direito de 20 pixels C. Preenchimento inferior de 20 pixels 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
} 
#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
} 
</style> 
</head> 
<body> 
<!--container div tag--> 
<div id="container"> 
    <!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     <!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div> 
</body>
Observação:

o código de exemplo acima é uma versão simplificada do código que cria o layout de barra lateral fixa de duas colunas quando você cria um novo documento usando os layouts predefinidos que acompanham o Dreamweaver.

Criação de uma página com um layout de CSS

Ao criar uma nova página no Dreamweaver, você pode criar uma que já contenha um layout de CSS. O Dreamweaver vem acompanhado de 16 layouts de CSS diferentes qua você pode escolher. Além disso, é possível criar seus próprios layouts de CSS e adicioná-los à pasta de configuração, a fim de que eles apareçam como opções de layout na caixa de diálogo Novo documento.

Criação de uma página com um layout de CSS

  1. Selecione Arquivo > Novo.
  2. Na caixa de diálogo Novo documento, selecione a categoria Página em branco. (Essa é a seleção padrão.)
  3. Em Tipo de página, selecione o tipo de página que você deseja criar.
    Observação:

    você deve selecionar um tipo de página em HTML para o layout. Por exemplo, você pode selecionar HTML, ColdFusion®, PHP etc. Não é possível criar uma página ActionScript™, CSS, Item de biblioteca, JavaScript, XML, XSLT ou Componente do ColdFusion com um layout de CSS. Além disso, os tipos de página da categoria Outros da caixa de diálogo Novo documento apresentam restrição na inclusão de layouts de página CSS.

  4. Em Layout, selecione o layout de CSS que deseja usar. Você pode escolher entre 16 layouts diferentes. A janela Visualizar mostra o layout e fornece uma breve descrição do layout selecionado.

    Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna:

    Fixa

    A largura da coluna é especificada em pixels. A coluna não é redimensionada com base no tamanho do navegador ou nas configurações de texto do visitante do site.

    Líquida

    A largura da coluna é especificada como uma porcentagem da largura do navegador do visitante. O design se adapta caso o visitante do site torne o navegador mais largo ou mais estreito, mas não se altera com base nas configurações de texto do visitante do site.

  5. Selecione um tipo de documento no menu pop-up TipoDoc.
  6. Selecione um local para a CSS do layout em Layout de CSS no menu pop-up.

    Adicionar a cabeçalho

    Adiciona CSS do layout ao cabeçalho da página que você está criando.

    Criar novo arquivo

    Adiciona a CSS do layout à nova folha de estilos CSS externa e anexa a nova folha de estilos à página que você está criando.

    Vincular a arquivo existente

    Permite a você especificar um arquivo CSS existente que já contém as regras de CSS necessárias ao layout. Essa opção é especialmente útil quando você deseja usar o mesmo layout de CSS (as regras de CSS contidas em um único arquivo) em vários documentos.

  7. Siga um destes procedimentos:
    • Se você selecionou Adicionar a cabeçalho em Layout de CSS no menu pop-up (a opção padrão), clique em Criar.
    • Se você selecionar Criar novo arquivo no menu pop-up Layout de CSS, clique em Criar e especifique um nome para o novo arquivo externo na caixa de diálogo Salvar arquivo de folha de estilos como.
    • Se você selecionou Vincular a arquivo existente em Layout de CSS no menu pop-up, adicione o arquivo externo à caixa de texto Anexar arquivo CSS, clicando no ícone Adicionar folha de estilos, preenchendo a caixa de diálogo Anexar folha de estilos externa e clicando em OK. Quando terminar, clique em Criar na caixa de diálogo Novo documento.
    Observação:

    quando você selecionar a opção Vincular a arquivo existente, o arquivo especificado já deverá ter regras para o arquivo CSS nele contido.

    Quando você aplicar o layout de CSS em um novo arquivo ou vincular a um arquivo existente, o Dreamweaver automaticamente vincula o arquivo à página em HTML que você está criando.

    Observação:

    os comentários condicionais do Internet Explorer, que ajudam a resolver os problemas de processamento do IE, permanecem incorporados no cabeçalho do novo documento do layout de CSS, mesmo se você selecionar Novo arquivo externo ou Arquivo externo existente como local do layout de CSS.

  8. (Opcional) Você também pode anexar as folhas de estilos CSS à nova página (não relacionada ao layout de CSS) ao criar a página. Para fazer isso, clique no ícone Anexar folha de estilos acima do painel Anexar arquivo CSS e selecione uma folha de estilos CSS.

    Para obter uma descrição detalhada desse processo, consulte o artigo Anexar automaticamente uma folha de estilos a novos documentos de David Powers.

Adição dos layouts de CSS personalizados à lista de opções

  1. Crie uma página HTML que contém o layout CSS que você gostaria de adicionar à lista de opções na caixa de diálogo Novo documento. A CSS do layout deve residir no cabeçalho da página HTML.
    Observação:

    para tornar seu layout de CSS personalizado consistente com outros layouts que acompanham o Dreamweaver, você deverá salvar seu arquivo em HTML com a extensão .htm.

  2. Adicione a página HTML à pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
  3. (Opcional) Adicione uma imagem de visualização do layout (por exemplo, um arquivo .gif ou .png) à pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. As imagens padrão fornecidas com o Dreamweaver são arquivos PNG de 227 pixels de largura x 193 pixels de altura.
    Observação:

    atribua à imagem de visualização o mesmo nome do arquivo HTML, a fim de que você possa controlá-la facilmente. Por exemplo, se o arquivo HTML for myCustomLayout.htm, atribua o nome myCustomLayout.png à imagem de visualização.

  4. (Opcional) Crie um arquivo de anotações para o layout personalizado, abrindo a pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, copiando e colando qualquer arquivo de anotação existente na mesma pasta e renomeando a cópia do layout personalizado. Por exemplo, você pode copiar o arquivo oneColElsCtr.htm.mno e renomeá-lo como myCustomLayout.htm.mno.
  5. (Opcional) Após criar um arquivo de anotações para o layout personalizado, você poderá abrir o arquivo e especificar o nome, a descrição e a imagem de visualização do layout.
Logotipo da Adobe

Fazer logon em sua conta