Nesta era tecnologicamente rica, o site é o ingrediente principal para apresentar seus negócios, produtos ou serviços. O layout fornece instruções claras para os usuários navegarem em sites e coloca os elementos mais cruciais de um site no topo da lista. O layout do site geralmente depende dos requisitos do usuário. No entanto, existem algumas diretrizes que os desenvolvedores têm em mente para obter um bom layout para um site.

Neste artigo, criamos várias possibilidades para planejar o layout de um site.

Como planejar o layout de um site

Conforme descrito anteriormente, o layout de um site depende dos requisitos do usuário. Aqui, estamos listando vários elementos -chave que ajudam a criar um layout personalizado de um site.

Cabeçalho

Esta seção é exibida no topo de um site, e existem inúmeras maneiras de exercer este espaço. Poucos moderadores mantêm o nome ou o logotipo do site dentro desse cabeçalho, mas pode -se adicionar um controle deslizante também.

O código a seguir refere -se à criação de um cabeçalho de amostra

Html

Bem -vindo ao Linuxhint

A é criado com um class = "cabeçalho" e um

elemento está contido dentro daquele div.

CSS

O código CSS acima refere -se ao classe de cabeçalho e adiciona uma propriedade de cor, preenchimento e alinhamento de texto a essa classe.

Saída

A saída mostra que o cabeçalho foi colocado no topo da página e contém as propriedades personalizadas que foram alocadas a ele.

Links de navegação

Após o cabeçalho, é recomendável ter uma barra de navegação que direcione os visitantes para várias páginas do seu site. Uma barra de navegação de amostra é criada usando o seguinte código.

Html

Lar
Tutoriais
Categorias

No código acima, o div é criado que contém várias tags de ancoragem referentes a vários links.

CSS

O código CSS acima contém estilo para o div class = "Nav". O ““.navegação ” refere -se à principal barra de navegação e ao ““.NAV A ” A classe contém propriedades de estilo para links da barra de navegação.

Saída

A saída contém um cabeçalho e uma barra de navegação com três links.

Conteúdo principal

O conteúdo principal geralmente começa logo após sua barra de navegação. E o design do conteúdo principal varia de usuário para usuário. Vários usuários preferem uma área de conteúdo de uma única coluna, enquanto um layout de várias colunas também pode ser usado.

O código a seguir refere -se à criação do conteúdo principal da página do site.

Html

Html

CSS

No código acima, um div class = "main" é criado que contém dois filhos Class de div = "prim".

CSS

.PRIM
flutuar: esquerda;
largura: 49%;
Alinhamento de texto: centro;

.Principal: depois
contente: "";
exibição: tabela;
limpar ambos;

O código CSS ajusta o Propriedade flutuante para a esquerda, A largura está definida como 49%, e o alinhamento do texto é definido para o Centro. Além disso, a propriedade clara é exercida no ““.Principal: depois ” Para desaparecer o efeito flutuante.

Observação: Para uma única coluna, você deve ajustar a largura de acordo e seu valor é definido como “Conteúdo do ajuste”. Para 3 colunas, a largura pode ser ajustada para 33% para cada coluna e assim por diante.

Saída

A saída mostra que o conteúdo principal possui duas colunas nomeadas "HTML" e "CSS". Essas colunas podem ser alimentadas pelo conteúdo conforme sua exigência.

Rodapé

O rodapé é outro componente importante do layout, onde você pode colocar as informações de contato, links para suas contas de mídia social ou qualquer tipo de informação pode ser colocada no rodapé. Para criar um rodapé, fizemos uso do seguinte código.

Html

Informações sobre rodapés

O código acima cria um div class = "rodapé" isso seria considerado um rodapé da página.

CSS

.rodapé
cor de fundo: laranja;
preenchimento: 20px;
Alinhamento de texto: centro;

O Propriedades de fundo de fundo, preenchimento e alinhamento de texto são aplicados no class = "rodapé".

Saída

A imagem acima mostra que o rodapé foi adicionado com sucesso. Além disso, pode -se adicionar estilos e informações detalhadas para uma melhor estética da página.

Conclusão

O layout do site é composto por poucos ingredientes principais, como cabeçalho, seção de navegação, corpo principal e rodapé. Esses componentes servem como o principal player no planejamento de um layout para um site e a interface ou arranjo desses componentes depende do requisito do usuário. Este post forneceu um guia detalhado sobre como planejar o layout de um site. Para uma melhor compreensão, demonstramos o uso de todos os componentes acima mencionados.