Como centro um layout de página com margens css no dreamweaver

Video: Curso Básico HTML5 + CSS3 - Margem, Borda, Espaçamento e Box Model em CSS3 #16

Dreamweaver permite centralizar o layout usando margens CSS. Muitos designs de página web estão centradas na página para que eles parecem flutuar entre os lados da janela do navegador, não importa quão grande ou estreitar a janela fica. Isso ajuda a criar a ilusão de que o projeto preenche a página, mesmo se a janela do navegador é muito mais amplo do que o design da página.

A maioria dos designs de página web criados com CSS conseguir este efeito através da criação de uma marca que rodeia todo o conteúdo da página e, em seguida, aplicar um estilo a essa marca, que inclui uma regra de estilo que gira essa marca. Como você descobrir nos seguintes instruções passo-a-passo, criando um estilo para centralizar a tag não é tão óbvia como se poderia imaginar, mas é fácil de implementar.

A prática comum é usar um estilo de ID para o tag que centra o seu design, e nomeá-lo #embrulho ou #recipiente.

Video: Aula Centralizando página com html e css

Se a sua página não estiver configurado com uma tag em torno de todo o seu conteúdo, aqui vai uma dica para adicionar um. Primeiro clique e arraste para selecionar todo o texto, imagens e outros conteúdos na página. Em seguida, escolha Inserir → Disposição Objetos → Div Tag. Na caixa de diálogo Inserir Tag Div, verifique se a opção Moldar seleção ao redor é selecionado a partir da lista drop-down Inserir.

Deixe o resto dos campos em branco e clique em OK para adicionar uma marca em torno de todo o conteúdo de sua página, e você está pronto para as etapas que se seguem.

Video: Dreamweaver cs6 - 018 - parte 2 - aplicando: margem, borda e espaçamento

Para centralizar um design de página inteira, certifique-se de que a tag rodeia todo o conteúdo da página, e siga estes passos:

1. Clique no sinal de mais no painel Seletores CSS Designer.

   Dependendo do que está na página, um novo nome de estilo ou um campo em branco onde você pode digitar um nome de estilo é adicionado ao painel de seletores.

2. Clique duas vezes para selecionar o nome que o Dreamweaver adicionado ao painel e alterá-lo para o nome que deseja para o seu novo estilo, ou clique para selecionar o campo em branco e digite um nome.

   
   
   
   

   Se nenhum nome for adicionado, digite o nome que deseja no campo vazio. Você pode nomear o estilo que quiser, mas certifique-se de entrar em um período antes do nome se você criar um estilo de classe, ou um sinal # para um estilo de ID.

3. No painel Propriedades, especifique a largura, margens e quaisquer outros ajustes de formatação que você deseja definir.

   A largura para o tag de recipiente é definida como 980 pixels. Aqui está o truque para centralizar uma tag como esta: Defina as margens esquerda e direita para Auto. Dessa forma, um navegador adiciona automaticamente uma quantidade igual de espaço de margem para cada lado da tag, efetivamente centrando-a na página.

   

4. Selecione o ID que rodeia todo o conteúdo da página.

   Para certificar-se de que você selecionou a marca direito, clique para colocar o cursor em qualquer lugar na parte principal da página, e depois clique na tag listado para o mais distante esquerdo no Seletor Rápido de marca na parte inferior do espaço de trabalho.

5. Com a tag selecionada, selecione o nome do estilo que você criou a partir da lista drop-down ID no Inspetor de propriedades.

   As regras de estilo que você definiu quando criou o estilo é automaticamente aplicado à tag. Neste exemplo, o resultado é que o tamanho da etiqueta é alterado para 980 pixels de largura e a etiqueta e todo o seu conteúdo estão centradas na página.

Nem todos os recursos funcionam quando Dreamweaver é definido para o Live View. Embora vista ao vivo é uma ótima maneira de visualizar como seus designs de página vai olhar na maioria dos navegadores modernos, o uso do recurso de visualização ao vivo faz com que muitas das ferramentas de edição do Dreamweaver inutilizável. Se, por exemplo, o inspetor de propriedades aparece esmaecido quando você quiser usá-lo, certifique-se de que o botão vivo está desmarcada.