}
33
3.3. Exemplo de um layout fixo
Casa do Código
Aproveitando, vamos mexer, também, no título principal desta página, colo-
cando um tamanho de fonte considerável para que não haja dúvidas quanto a sua
importância.
h1 {
font-size: 32px;
}
Como teremos uma padronização para elementos do tipo .brief, não há mal
algum em já estilizar este elemento genérico de nosso site-exemplo.
.brief {
margin: 5px 0;
}
Os conteúdos principais do site ficam em .content que, por sua vez, abriga
.content-main e .content-sidebar, respectivamente (lembra-se do SEO?). E, den-
tro de ambos, mais estilos para que nosso exemplo fique numa estrutura interessante e funcional.
.content-main {
float: left;
width: 593px;
}
.hero {
margin: 25px 0;
}
.last-contents {
font-size: 12px;
}
.last-content-call {
float: left;
margin: 15px 15px 15px 0;
width: 280px;
}
.last-content-call .secondary-title {
margin-bottom: 0;
34
Casa do Código
Capítulo 3. layout fluído
}
.last-content-call .brief {
margin: 5px;
}
.content-sidebar {
background-color: #F0F0F0;
float: right;
padding: 10px;
width: 322px;
}
.main-nav ul {
list-style-type: none;
}
.main-nav li {
background-color: #F9F9F9;
float:left;
margin: 15px;
outline: 1px solid #DEDEDE;
text-align: center;
width: 130px;
}
.main-nav a {
display: block;
padding: 10px;
text-decoration: none;
}
Por fim, temos nosso .main-footer que, no momento, serve somente para exibir
algumas informações de copyleft, mas nada impediria de conter um menu secundá-
rio, com links de menor importância que nosso menu principal, localizado na barra
lateral.
.main-footer {
background-color: #F0F0F0;
clear: both;
float: left;
35
3.3. Exemplo de um layout fixo
Casa do Código
font-size: 12px;
margin: 15px 0;
padding: 15px;
text-align: center;
width: 100%;
}
Como prometido,
é um CSS bastante simples, sem implementações polêmicas
e/ou técnicas mirabolantes para conseguir efeitos diversos. O objetivo deste livro não é esse. Nosso CSS de um layout fixo completo pode ser encontrado em: https:
//gist.github.com/3630828
Com isso, terminamos nosso arquivo style.css que, como você bem observou
no código completo do HTML, é referenciado e fará com que a camada de conteúdo
receba sua devida estilização. Abrindo ambos os arquivos em um bom browser, você
será premiado com uma tela muita parecida com:
Finalizamos o esqueleto de nossa página de exemplo. Não foi nada de mais, ob-
viamente, mas, neste ponto, você pode estar se perguntando: E agora, como trans-
formar esse layout fixo em um layout fluído?. E essa é exatamente a pergunta certa a se fazer.
36
Casa do Código
Capítulo 3. layout fluído
3.4
Metatag viewport
Veremos como converter um layout fixo em layout fluído. Primeiro, devemos nos
ater a um dos mais importantes detalhes técnicos quando o assunto é web design
responsivo: a meta tag viewport.
Meta tags
Teoricamente, se você está lendo este livro, já deve saber o que é uma meta tag HTML. De qualquer forma, uma breve revisão pode ser útil.
O termo meta tag é, na verdade, formado por 2 palavrinhas que se juntam para
dar seu significado. E, para entender este significado, é preciso entender as 2 palavras, em separado:
Meta é um prefixo grego que significa algo como após, que ultrapassa, que engloba, que está além. Este não é um prefixo utilizado somente no desenvolvimento web; você já deve ter ouvido e lido palavras como metabolismo
e metamorfose. Este prefixo meta refere-se à coisa sobre a própria coisa ou,
em outras palavras, dados sobre dados, informação sobre a informação.
Tag é uma palavra do inglês que significa etiqueta ou rótulo. Tanto nos EUA, no Brasil ou em qualquer parte do mundo, etiquetas servem para identificar, nomear e marcar algo ou alguma coisa para que possa ser identificado
e/ou corretamente catalogado.
Então, juntando os 2 termos, meta e tag, temos meta tag, que são tags que
descrevem o documento web a qual pertencem (informação sobre a informação);
as meta tags são para descrever informações sobre sites e páginas que as contém;
informam sobre qual conteúdo está ali e mostra informações extras a respeito deste conteúdo.
As metatags são colocadas como elementos-filho de head no HTML. Sua sintaxe
obedece à seguinte convenção:
<meta name="nome-da-meta" content="conteudo-da-meta">
Então, para qualquer das meta tags existentes que você for usar, a convenção
para seu uso é esta, onde se informa, primeiramente, de qual meta se está inserindo e, posteriormente, qual valor se dá.
No documento do W3C, Visual formatting model (http://ow.ly/baEmW), é ex-
plicado que:
37
3.4. Metatag viewport
Casa do Código
"Agentes do usuário de mídia contínua em geral oferecem aos usuários uma viewport (uma janela ou outra área de visualização na tela) através do qual os usuários consultam um documento. Os agentes podem alterar o layout do documento quando o
viewport é redimensionado. Quando a viewport é menor que a área da tela em que o