Vídeo: Aula Centralizando página com html e css 2025
O Dreamweaver permite que você centre seu layout usando margens CSS. Muitos projetos de páginas da web estão centrados na página para que eles pareçam flutuar entre os lados da janela do navegador, independentemente da amplitude ou estreita que a janela se torne. Isso ajuda a criar a ilusão de que o projeto preenche a página, mesmo que a janela do navegador seja muito maior do que o design da página.
A maioria dos projetos de páginas web criados com o CSS conseguem esse efeito criando uma tag que envolve todo o conteúdo da página e, em seguida, aplicando um estilo a essa tag que inclua uma regra de estilo que centraliza essa tag. Como você descobre nas seguintes instruções passo a passo, criar um estilo para centrar uma etiqueta não é tão óbvio quanto você pode imaginar, mas é fácil de implementar.
A prática comum é usar um estilo de identificação para a etiqueta que centra seu design e nomeá-lo #wrapper ou #container.
Se a sua página ainda não estiver configurada com uma tag em torno de todo o seu conteúdo, aqui está uma dica para adicionar uma. Clique primeiro e arraste para selecionar todo o texto, imagens e outros conteúdos na página. Em seguida, escolha Inserir → Objetos de layout → Div Tag. Na caixa de diálogo Inserir etiqueta de div, certifique-se de que a opção Seleção de envoltório seja selecionada na lista suspensa Inserir.
Deixe o restante dos campos em branco e clique em OK para adicionar uma etiqueta em torno de todos os conteúdos da sua página, e você está pronto para as etapas a seguir.
Para centrar um design de página inteira, verifique se uma etiqueta envolve todo o conteúdo da página e siga estas etapas:
-
Clique no sinal de mais no painel CSS Designer Selectors.
Dependendo do que está na página, um novo nome de estilo ou um campo em branco onde você pode inserir um nome de estilo é adicionado ao painel Seletores.
-
Clique duas vezes para selecionar o nome que o Dreamweaver adicionou 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 desejado no campo vazio. Você pode nomear o estilo qualquer coisa que quiser, mas certifique-se de inserir um período antes do nome, se você criar um estilo de classe ou um sinal # para um estilo ID.
-
No painel Propriedades, especifique a largura, margens e quaisquer outras configurações de formatação que você deseja definir.
A largura para a etiqueta do 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 etiqueta, efetivamente centrando-a na página.
-
Selecione a ID que envolve todo o conteúdo da página.
Para ter certeza de que você selecionou a etiqueta certa, clique para colocar seu cursor em qualquer lugar na parte principal da página e, em seguida, clique na etiqueta listada para o mais à esquerda no Selector de tags rápidas na parte inferior do espaço de trabalho.
-
Com a tag selecionada, selecione o nome do estilo que você criou na lista suspensa ID no Inspetor de propriedades.
As regras de estilo que você definiu quando você criou o estilo são aplicadas automaticamente à tag. Neste exemplo, o resultado é que o tamanho da tag é alterado para 980 pixels de largura e a etiqueta e todos os seus conteúdos estão centrados na página.
Nem todos os recursos funcionam quando o Dreamweaver está configurado para exibição em modo Live. Embora a Visualização ao vivo seja uma ótima maneira de visualizar como os projetos da sua página serão exibidos na maioria dos navegadores modernos, o uso do recurso Visualização ao vivo torna inúmeras as ferramentas de edição do Dreamweaver inutilizáveis. Se, por exemplo, o inspetor de propriedades aparecer esvaziado quando quiser usá-lo, verifique se o botão Live está desmarcado.
