Como centralizar uma página de layout com margens CSS no Dreamweaver
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 se torna. 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 as 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.
Se a 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 layout 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 da sua página, e você está pronto para as etapas que se seguem.
Para centralizar um design de página inteira, certifique-se de que uma tag rodeia todo o conteúdo da página, e siga estes passos:
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.
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.
No painel Propriedades, especifique a largura, margens e quaisquer outros ajustes de formatação que você deseja definir.
A largura para o tag recipiente é definida para 980 pixels. Aqui está o truque para centralizar uma tag assim: Defina as margens esquerda e direita para Auto. Dessa forma, um navegador adiciona automaticamente uma quantidade igual de espaço de margem de cada lado da etiqueta, de forma eficaz centrando-a na principal.
Selecione o ID que rodeia todo o conteúdo da página.
Para certificar-se de que você selecionou a marca da direita, clique para colocar o cursor em qualquer lugar na parte principal da página, e depois clique na tag indicada à extremidade esquerda no Seletor Rápido de marca na parte inferior da área de trabalho.
Com a tag selecionada, selecione o nome do estilo que 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 tag 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 muitos de 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.