Linda Martins, 18, Salvador. Livros (os que leio e os que escrevo), cristianismo, estudos aleatórios e comida definem minha vida. Em constante evolução.

ENTREVISTA
Rudson Xaulin

RESENHA
Um beijo inesquecível

AUTORAIS
Baed

29.5.16

Aprendendo html #06 - Corpo do site e elementos essenciais

Então, eu estava numa expectativa imensa para esse post porque é aqui onde o processo de construção do template de fato começa. Todos os elementos anteriormente apresentados  faziam parte da etapa mais fácil e básica do CSS; usava-se poucas propriedades, a maioria relacionada a cores e detalhes decorativos, e não havia muitos riscos de erro. Provavelmente vai haver uma parte 2 ou 3 desse post porque os seletores apresentados aqui são muito mais complexos do que aparentam, e uma série de novas propriedades precisam ser explicadas.

Existem basicamente quatro elementos essenciais que formam o design de um site e um quinto que será mostrado no próximo post. Como eu quero evitar que a postagem fique muito grande, eu decidi por não somente por esse último elemento para a parte 2, mas também uma série de outras propriedades feitas para posicionar, ajustar, afastar, aumentar ou diminuir coisas; as únicas propriedades que serão apresentadas na parte 1 são "width", "height", "float", "margin", "word-wrap" e "display".

Vamos ao esquema.


*Toda a imagem foi feita com 1110px de largura, incluindo os blocos de outer, main, sidebar e as partes em branco, como uma tentativa de demonstrar uma resolução de tela.

Uma coisa para ser deixada bem clara: nós vamos trabalhar com pixel de agora em diante. Todas as margens, tamanhos ou qualquer coisa relacionada a unidades de comprimento serão definidas em pixels. Sim, você pode achar porcentagem ou outras unidades dentro de um código html/xml, mas o pixel é mais frequentemente utilizado. 

Existem alguns nomes bem característicos estampando cada bloco do esquema: outer, header, main e sidebar. Esses blocos e seus respectivos nomes formam o corpo do site e somente depois de definir seus tamanhos, larguras, alturas e margens que se pode trabalhar no estilo e "decoração" do template. 

Vamos aos códigos: 

#header-wrapper {height: 250px; background: #fff url (‘’) repeat; margin: 10px 0 auto auto; }
#outer-wrapper {width: 960px;}
#main-wrapper {width: 516px; margin: 93px 80px 0 auto 46px; word-wrap: break-word; display: block; float: left;}
#sidebar-wrapper {width: 280px; float: right; margin: 72px 46px 0 auto 80px; display: block; } 

  • Header-wrapper: corresponde ao cabeçalho do site. É nele onde fica o título e descrição. 
  • Outer-wrapper: para quem não conseguiu notar, corresponde à parte em amarelo-claro no esquema. Corresponde a toda área de "trabalho" do site. Dentro do outer fica todos os outros blocos que compõem o template. 
  • Main-wrapper: corresponde a caixa de post. 
  • Sidebar-wrapper: como o próprio nome diz, corresponde a sidebar, o bloco que fica ao lado das postagens abrigando a bio, os widgets e outras informações. 

As propriedades:

  • Width: define a largura de determinado elemento. Segundo o código, o template no todo tem 960 pixel de largura, enquanto a caixa de posts tem 516 pixel de largura e a sidebar, 280 pixel. 
  • Height: define a altura. Segundo o código, a header do template tem 250 pixel de altura. 
  • Word-wrap: propriedade usada para quebra de linha dos textos dentro da caixa. O texto permanece dentro das extremidades do bloco e não corre o risco de escapar. Quanto ao valor posto: "break" (quebrar), "word" (palavra).
  • Float: Propriedade que define se determinado bloco vai "flutuar", localizar-se à esquerda ou à direita. Segundo o código, a caixa de post passa a localizar-se à esquerda, enquanto a sidebar passa a localizar-se à direita. 
  • Display: usada para definir qual o perfil de determinado elemento. Possui três valores: inline (elemento de linha), block (elemento de bloco) e none. Segundo o código, os elementos "main" e "sidebar" são blocos. O valor "none" é usado para ocultar um elemento sem removê-lo do código. 
  • Margin: propriedade usada para definir as margens de um determinado elemento, respectivamente: "margin-top" (margem do topo), "margin-right" (margem da direita), "margin-bottom" (margem da base), e "margin-left" (margem da esquerda). 

Abreviações: 


  • A propriedade "background-repeat" foi embutida dentro da propriedade "background", assim como "background-color" e "background-image". Apenas seus valores foram explicitados: "repeat", "#fff" e "url ('')"
  • Margin do header-wrapper: 
[..] margin: 10px 0 auto auto; 
          Retirando as abreviações:
[..] margin-top: 10px;
margin-right: 0 auto; (esse valor permite que o elemento se estenda até as extremidades do outer e permaneça posicionado no centro, com equilíbrio)
margin-bottom: auto; (esse valor foi posto para evitar que a base do header se esticasse, desobedecendo as notações de margem dos outros elementos)
margin-left: 0 auto; 

  • Margin do main-wrapper: 
[..] margin: 93px 80px 0 auto 46px; 
          Retirando as abreviações:

[..] margin-top: 93px;
      margin-right: 80px;
      margin-bottom: 0 auto; (obedecendo ao esquema na imagem)
      margin-left: 46px;
  • Margin do sidebar-wrapper:

[..] margin: 72px 46px 0 auto 80px; 
          Retirando as abreviações:

[..] margin-top: 72px;
     margin-right: 46px;
     margin-bottom: 0 auto; (obedecendo ao esquema na imagem)
     margin-left: 80px; 
Dúvidas, sugestões, perguntas e outras coisas sobre o post nas redes sociais!