Como editar os estilos em um layout CSS no Dreamweaver
Depois de criar uma nova página com um layout CSS no Dreamweaver, você tem um número aparentemente infinito de opções para editá-lo, mas primeiro você tem que determinar quais estilos na folha de estilo correspondem aos elementos que você deseja editar.
Menu
Como você provavelmente pode imaginar, você pode editar os estilos em um layout de CSS de muitas maneiras para criar seus próprios designs.
Depois de ajustar os estilos existentes para obter a página de projeto básico do jeito que você quiser, você pode criar tantos estilos adicionais como você deseja.
Como verificar os estilos disponíveis e fazer edições básicas
Você pode usar essas mesmas instruções básicas com qualquer layout CSS incluído no Dreamweaver. Para editar estilos em um layout CSS, siga estes passos:
Abra um arquivo de página que é baseado em um layout Dreamweaver CSS e escolha Estilos Window-CSS (ou clique na guia CSS Designer para expandir o painel).
O painel CSS Designer abre ou expande.
Clique para selecionar o nome da folha de estilo no painel Fontes no topo da CSS Designer.
Todos os estilos associados com a nova página estão listados no painel de seletores.
Selecione o nome de qualquer estilo listado no painel Seletores CSS Designer.
As regras CSS correspondentes definidos para o estilo são exibidas no painel Propriedades, na parte inferior do painel CSS Designer. Consultando a lista de estilos e rever as respectivas regras é uma boa maneira de ter uma visão geral do projeto e ver onde as várias opções de formatação de página são armazenados.
o HTML5 cabeçalho, .nav, e rodapé tags de controlar as principais seções da página. Por exemplo, a cabeçalho estilo inclui uma regra que faz com que a cor verde do fundo. Assim, para mudar a cor da área de cabeçalho no topo da página, alterar a definição de cor de fundo na cabeçalho regra.
Como editar as configurações de largura de página
Para editar as configurações de largura de página - tais como a cor de fundo da página ou a face da fonte principal, o tamanho ea cor do texto usado em toda a página - siga estes passos:
No painel Seletores CSS Designer, selecione o estilo chamado corpo.
As propriedades definidas na regra de estilo selecionado são exibidas no painel Propriedades.
Clique no ícone de T na parte superior do painel Propriedades e mudar ou adicionar a fonte desejada e outros ajustes de texto.
Você pode alterar o tipo de letra, tamanho, estilo, e peso. Para alterar o espaço entre linhas de texto, altere a altura da linha.
Desloque-se para a área de fundo do painel Propriedades e use a cor poço no campo background-color para especificar uma cor para o fundo inteiro da página.
Alternativamente, você pode entrar em qualquer código de cor hexadecimal no campo cor de fundo ou usar o conta-gotas para provar qualquer cor. Para adicionar uma imagem de fundo, clique no campo URL na seção de fundo e, em seguida, clique no botão Procurar que aparece e selecione a imagem que você quer servir como pano de fundo. Use os ícones background-repeat para especificar como a imagem de fundo deve repetir na página.
Faça outras alterações ou aditamentos ao regra de estilo.
Mudanças nas regras de estilo no painel Propriedades são automaticamente salvas e aplicadas para o conteúdo formatado com a regra.
Como personalizar áreas de conteúdo
Para alterar a largura ou outras configurações das principais áreas de conteúdo, que controlam o tamanho total da página e o cabeçalho, rodapé e barra lateral, siga estes passos:
Para alterar a largura de toda a área de criação principal:
Clique no .recipiente estilo no painel Seletores do painel CSS Designer.
As propriedades do .recipiente regra de estilo são exibidas no painel Propriedades, onde você também pode editar o estilo.
Alterar o tamanho no campo Largura ou digite um novo número para a largura da página desejada.
A largura do design da página é alterado automaticamente com base no tamanho que você inseriu. Ao alterar a largura da .recipiente estilo, você alterar a largura de todo o projeto, porque todas as tags e outros elementos estão contidos no formatado com o .recipiente estilo - e está tudo pronto para expandir-se para preencher o .recipiente .
Para alterar o tamanho da área de conteúdo da página, selecione o estilo chamado .conteúdo e especificar o tamanho e outras opções que você deseja no painel Propriedades.
Se você alterar a largura da área de conteúdo em um layout que inclui uma barra lateral, você deve alterar a largura da barra lateral também.
Para alterar a cor de qualquer estilo no fundo da página, clique no nome do estilo correspondente e alterar as configurações na seção de fundo do painel de Propriedades.
Por exemplo, nos layouts CSS no Dreamweaver, a barra lateral é definido em um estilo chamado .sidebar1. Assim, para mudar a cor de fundo, você deverá clicar .sidebar1 no painel Seletores, selecione a categoria de fundo no painel Propriedades e selecione a cor desejada. Da mesma forma, para mudar a cor do cabeçalho do fundo, selecione o estilo chamado de cabeçalho no painel Seletores e usar a cor também.
Para adicionar uma imagem para o cabeçalho:
Selecione a imagem espaço reservado marcado Insert Logo e pressione a tecla Delete ou Backspace.
Escolha Inserir -Image-Imagem e escolha uma imagem usando a caixa de diálogo Select Image Source.
Substituir texto e inserir imagens na barra lateral e principais áreas de conteúdo.
Você pode adicionar ou substituir o texto e inserir imagens em qualquer página criada a partir de um layout CSS, tal como faria em qualquer outra página da web.
Escolha Arquivo-Salvar tudo para salvar a página e estilos.