Modificação de layout css em adobe cs5 dreamweaver

Video: Dreamweaver CS5 - CSS Tutorial: Layout

Abode Creative Suite 5 (Adobe CS5) Dreamweaver fornece várias maneiras de mudar um layout de página Cascading Style Sheets. Um layout CSS é controlado completamente por regras de folhas de estilo, assim você pode modificar a aparência da página diretamente do painel de estilos CSS e Inspetor de propriedades.

Cada coluna, caixa, e espaço em sua nova página está posicionado e dimensionado utilizando regras CSS e propriedades, os quais você pode ajustar tanto a partir do Inspetor de propriedades (no painel Estilos CSS) ou o painel Definição de regra CSS.

  1. Se o painel Estilos CSS ainda não estiver aberto, escolha Janela → Estilos CSS para abri-lo.

  2. Selecione a guia Tudo para exibir a folha de estilo e suas regras.

    A folha de estilo interna é mostrada como no topo. Clique na seta para a esquerda para expandi-la e mostrar todas as regras que ela contém. Layouts usando uma folha de estilo ligados (externo) exibir o nome de folha de estilo (tal como styles.css) em vez da tag.

  3. Selecione os corpo regra.

    Este estilo baseado em tag controla a formatação geral de toda a página (tudo dentro do tag).

  4. Clique no campo ao lado da regra de fundo para editar ele- ao invés de manter o # 4E5869 (Cinzento médio) definindo, digite uma cor hexadecimal (tal como # CC0000 para o vermelho) para alterar a cor de fundo da página.



  5. Clique na amostra ao lado da regra de cor para abrir as Amostras Painel de escolher uma nova cor tipo padrão para o texto em sua página.

  6. Na parte superior do painel Estilos CSS, selecione outro estilo (por exemplo, o .estilo #container twoColElstHdr) Para visualizar as suas propriedades.

    o .twoColHybLtHdr #style ID recipiente controla o tamanho ea aparência do contêiner de layout principal da página.

  7. No Inspetor de propriedades, edite as propriedades para alterar a aparência do estilo.

    Por exemplo, você pode alterar a largura da regra introduzindo um novo número na caixa de texto da Regra Largura. Se você digitar 95%, por exemplo, você faz todo o layout mais amplo.

Video: How To Design a Website in Adobe Dreamweaver | Adobe Dreamweaver CS5 Beginners Tutorial

Cada coluna e seção que compreende o seu layout é controlado por um dos estilos de identificação listados no painel Estilos CSS. A maioria cada estilo ID possui uma propriedade de largura você pode usar para alterar o tamanho de áreas diferentes na página.

Continue a modificar estilos diferentes listados no painel CSS Styles e ver como eles afetam elementos diferentes em sua página. Tente mudar a cor tipo, família de fonte e outras propriedades, como o preenchimento ea cor de fundo.

Para descobrir exatamente quais controles de identificação que coluna ou seção, clique dentro da área de página e olhar para o seletor de tags na parte inferior da janela do documento. A última tag no final da cadeia mostra quais recipiente onde se encontra e seu ID correspondente no painel Estilos CSS (por exemplo,).


Publicações relacionadas