Aplicar layout às páginas usando o CSS Designer

Definir consultas de mídia

Se você adicionar as condições de consulta de mídia pelo código, apenas as condições permitidas serão preenchidas na caixa de diálogo Definir consulta de mídia. A caixa de texto Código na caixa de diálogo, entretanto, mostra o código completo (incluindo condições não permitidas).

Se você clicar em uma consulta de mídia na visualização dinâmica/de design, a janela de visualização é alterada para corresponder à consulta de mídia selecionada. Para exibir o tamanho total da janela de visualização, clique em Global no painel @Mídia.

Definir seletores do CSS

Copiar e colar estilos

Agora é possível copiar estilos de um seletor e colá-los em outro. Você pode copiar todos os estilos ou copiar apenas uma categoria de estilos específica, como Layout, Texto e Borda. 

Clique com o botão direito no mouse em um seletor e escolha entre as opções disponíveis:  

Reorganizar seletores

Clique no seletor requerido e arraste-o para a nova posição com o painel Seletores.

Definir propriedades do CSS

As propriedades são agrupadas nas seguintes categorias e representadas por ícones diferentes na parte superior do painel Propriedades:

• Layout
• Texto
• Borda
• Fundo
• Mais (lista de propriedades “somente texto” e não de propriedades com controles visuais)
  

Marque a caixa de seleção Exib. conj. para exibir apenas as propriedades de grupo. Para exibir todas as propriedades que você pode especificar para um seletor, desmarque a caixa de seleção Exib. conj.

Para definir uma propriedade como, por exemplo, width ou border-collapse, clique nas opções necessárias exibidas perto da propriedade no painel Propriedades.

As propriedades substituídas são indicadas em formato tachado.

Definir margens, preenchimento e posição

Usando os controles de caixa no painel Propriedades do CSS Designer, é possível definir rapidamente as propriedades de margens, preenchimento e posição. Se preferir o código, você poderá especificar o código abreviado para margem e preenchimento nas caixas de edição rápida, como exibido neste exemplo.

Clique nos valores e insira o valor necessário. Se você desejar que os quatro valores sejam iguais e alterados simultaneamente, clique no ícone de vínculo no centro.

A qualquer momento, você pode desativar ou excluir valores específicos, por exemplo, o valor da margem esquerda e manter os valores das margens direita, superior e inferior.

Definir propriedades de borda

As propriedades de controle de bordas são organizadas em guias lógicas para ajudá-lo a exibir ou alterar as propriedades. 

Se preferir o código, você poderá especificar o código abreviado para bordas e raio da borda na caixa de texto de edição rápida.

Para especificar as propriedades de controle de bordas, defina a propriedade na guia “Todos os lados”. As outras guias são ativadas e as propriedades definidas na guia “Todos os lados” são refletidas nas bordas individuais.

Ao alterar uma propriedade nas guias de borda individual, o valor da propriedade correspondente na guia “Todos os lados” muda para “undefined” (valor padrão). 

No exemplo abaixo, a cor da borda estava definida como preto e foi alterada para vermelho na borda superior. 

O código inserido é baseado na configuração da preferência para o formato abreviado ou longo. 

Durante a Inspeção, as guias são focadas com base na prioridade das guias “definidas”. A prioridade mais alta é para a guia “Todos os lados”, seguida por “Superior“, “Direita”, “Inferior” e “Esquerda”. Por exemplo, se estiver definido um valor apenas para a borda superior, o modo computado direciona o foco à guia “Superior”, ignorando a guia “Todos os lados”, pois não havia um valor definido para “Todos os lados”.

Desativar ou excluir propriedades

O recurso Desativar/Ativar propriedade de CSS permite comentar partes do CSS a partir do painel CSS Designer, sem ter que fazer alterações diretamente no código. Quando você comenta partes do CSS, pode ver que tipos de efeitos as propriedades e os valores específicos têm na sua página.

Quando você desativa uma propriedade do CSS, o Dreamweaver adiciona tags de comentários de CSS e um rótulo [desativado] à propriedade do CSS que você desativou. Você pode, em seguida, reativar ou excluir a propriedade do CSS desativada, de acordo com sua preferência.

Você pode desativar ou excluir qualquer propriedade usando o CSS Designer.

As capturas de tela a seguir mostram os ícones de desativar e excluir da propriedade height. Esses ícones ficam visíveis quando você passa o mouse na propriedade.

Também é possível usar as opções de excluir e desativar no nível de grupo de controle de bordas para aplicar essas ações a todas as propriedades.

Atalhos do teclado

Você pode adicionar ou excluir seletores e propriedades CSS usando atalhos de teclado. Também é possível navegar entre os grupos de propriedades no painel Propriedades.  

Identificação de elementos de página associados a um Seletor CSS

Geralmente, um único Seletor CSS é associado a vários elementos de página. Por exemplo, o texto no conteúdo principal de uma página, um cabeçalho, e um texto de rodapé podem ser associados ao mesmo seletor CSS. Ao editar as propriedades do seletor CSS, todos os elementos associados ao seletor serão afetados, incluindo aqueles que não devem ser alterados.

Realce dinâmico ajuda a identificar todos os elementos associados a um seletor CSS. Para alterar apenas um elemento ou alguns elementos, você pode criar um novo seletor CSS para os elementos e editar as propriedades.

Para identificar elementos de página associados a um seletor CSS, passe o mouse sobre o botão na Visualização dinâmica (com Código ativo “desligado”). O Dreamweaver realça os elementos associados com linhas pontilhadas.

Para fixar o realce dos elementos, clique no seletor. Agora, os elementos estão realçados com uma borda azul.

Para remover o realce azul em torno de elementos, use o seletor novamente.

O Realce dinâmico está ativado por padrão. Para desativar o Realce dinâmico, clique nas opções de Visualização dinâmica na barra de ferramentas Documento e clique em Desativar realce dinâmico. 

Vincular a uma folha de estilos CSS externa

Quando você edita uma folha de estilos CSS externa, todos os documentos vinculados a essa folha de estilos CSS são atualizados para refletir essas edições.

É possível exportar os estilos CSS localizados em um documento para criar uma nova folha de estilos CSS, e anexar ou vincular-se a uma folha de estilos externa para aplicar os estilos encontrados nesse local.

Você pode anexar às páginas qualquer folha de estilos criada ou copiada no site.