Aula 10/03/2026 - Programação do leiaute de dashboard - Parte I

Nesta aula, utilizamos os conhecimentos adquiridos sobre divs e estilização de divs com flex-layout para elaborar uma página com leiaute admin - ou dashboard, como é conhecido popularmente -. Esse tipo de leiaute é muito utilizado para criação de sistemas de gestão online, ou páginas de administração de sistemas.

Pré-requisitos

Para esta aula, é necessário que você tenha conhecimento sobre divs, seletores em CSS e leiaute em Flexbox. Esses conteúdos estão disponíveis em:

• Divisórias
• Tipos de seletores
• Flexbox

Objetivo da aula

O objetivo desta aula é apresentar aos alunos os conceitos fundamentais de estruturação de leiaute utilizando HTML e CSS, por meio da organização de elementos com divs estruturais e da aplicação do Flexbox para controle de distribuição de espaço na página. Ao final da aula, espera-se que o você seja capaz de construir a base estrutural de um dashboard web, compreendendo o papel da div container como estrutura principal do viewport, bem como a separação lógica entre as áreas de menu e conteúdo, além da subdivisão dessas áreas em elementos funcionais como logo, left-navbar e top-navbar.

Resultado esperado

O resultado final esperado após a realização da aula é um leiaute organizado em divs, sendo a div container, responsável por abrigar as divs estruturais da pagina; a div menu, responsável para separação de 1/5 da pagina, e a div conteudo, responsável por conter o conteúdo da página apresentado em 4/5 da página:

Estruturação da página: div container e divs estruturais

A página de dashboard possui três divs principais, sendo a div container, responsável pela organização do leiaute do viewport, a principal estrutura.

  <div class="container">
    <div class="menu">
      <div class="logo"></div>
      <div class="left-navbar"></div>
    </div>
    <div class="conteudo">
      <div class="top-navbar"></div>
    </div>
  </div>

Essa div ocupará todo os espaço disponível do viewport, com height: 100vh. A div também estrutura as divs internas (menu e conteudo) utilizando flex-layout com orientação padrão horizontal.

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(153, 153, 248);
}

Observe que as divs menu e conteúdo possuem divs internas, sendo as divs logo e left-navbar para menu e top-navbar para conteúdo. A div logo estrutura seus filhos também usando flex-leyout, porém com a orientação vertical. Seus filhos tem a proporção 35/100 e 65/100.

.menu {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: rgb(254, 251, 251);
}

.conteudo {
  height: 100%;
  flex: 4;
  background-color: rgb(244, 28, 28);
}

.top-navbar {
  height: 7%;
  background-color: rgb(32, 244, 28);
}

.logo {
  flex: 35;
  background-image: url('./images/logo.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.left-navbar {
  flex: 65;
  background-color: rgba(0, 0, 0, 0.656);
}

Note que também foi utilizado o reset de leiaute do css no início do arquivo, utilizando o seletor *:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

Conclusão

Nesta aula, foi apresentada a construção da estrutura base de um dashboard, utilizando divs organizadas de forma hierárquica e controladas por flex-layout. Foi possível entender como a div container atua como elemento principal de organização do viewport, distribuindo os espaços entre menu e conteúdo, além de permitir a criação de subdivisões internas responsáveis pela navegação e apresentação das informações da página.

Também foi demonstrado o uso de proporções com flex-layout, o controle de altura relativa ao viewport (vh), e a importância do reset de CSS para padronizar o comportamento dos elementos no navegador, principalmente para remover bordas e espaçamentos internos (padding).