[Tutorial] Como criar um Layout Responsivo - Parte 2

[Joao Vitor]

A segunda parte do tutorial faz referência ao Header, topo do site onde fica os menus e o logo. Por vezes algumas empresas usam slides ou uma imagem de destaque, abrangendo 100% da largura da tela.

Definindo topo e menus: 

<div id="topo">
<div id="elementos-do-topo">
<nav id="menus-do-topo">
<ul>
<li>Home</li>
<li>Hospedagem</li>
<li>Revenda de Hospedagem</li>
<li>Infraestrutura</li>
<li>Atendimento</li>
</ul>
</nav>
</div>
</div>

Após isso, vamos definir as classes no CSS.
 

/***** Topo ******/
#topo {height5em;width100%;background#1a1919}
#elementos-do-topo {width960px;margin 0 auto}
#menus-do-topo {width600px;floatright}
#menus-do-topo ul {}
#menus-do-topo li {float left;color #fff;border-right 1px solid #FFF;height 65px;padding 0 20px;font lighter 12px65px 'Opens Sans',sans-serif}

Após isso, vamos inserir o logo. Não é muito difícil, mas por falta de ideias no momento, farei em custom-font:
 

CSS:

#logo {color #fff;float left;font 25px65px Handlee,cursive}
[b]
HTML:

<div id="logo"> Nome da sua Host </div>

E para quem quiser usar essa fonte, basta colocar esse código no CSS
 

@import url(http://fonts.googleapis.com/css?family=Handlee);

Agora vamos colocar algo de destaque no header para chamar atenção dos visitantes (d'oh, serious).
Fiz um *.psd supersimples, deixando o header assim.

Pra quem quiser, segue o link do *.psd: clique aqui. O código em CSS do destaque no topo ficou assim:

#plano-destaque {height:20em;width:100%;background:url(biblioteca/imagens/destaque.png) no-repeat center top #191919}

Bom, hoje vamos parar por aqui. Custei escrever essa pequena parte, pois tive problema com o Google Chrome, pensando que meu voto de confiança valeria a pena, mas o Chrome acabou chutando a galinha inteira.

 

Até a próxima parte, onde vamos fazer o conteúdo da Home Page!

[Anger]

Oi João,

Parabéns por estar criando este tutorial.. só recomendo avisar o pessoal que não é tão simples e que tu está mostrando apenas algumas coisas básicas.

Para que a responsividade começe a tomar efeito, primeiramente tu deves setar tudo.

Exemplo: 

html, body, body div, span, h1, h2, h3, h4, h5, h6, p, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, footer, header, menu, nav, etc etc {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

Este é apenas um exemplo de Setar as configurações do código, onde que cada site pode mudar cada estrutura dependendo exclusivamente dos nomes das tag que será utilizado.  :)

[Joao Vitor]

Boa, Anger! Bem lembrado!

Só não coloquei porque na primeira parte do tutorial, integramos o Bootstrap que usa o Normalize.css e que já faz esse serviço automaticamente.

 

Muito obrigado por lembrar! :D

[Anger]

João, não. O Bootstrap ele é um código padronizado para efeitos muito bons que funcionam bem com a responsividade. 

Exemplo: TAG: .btn

É uma tag padrão do Bootstrap para fazer os botões ficarem muito bem estilizados!

Mas está show! Continua fazendo os tutorias.. precisamos de mais membros assim.. rsrs

É que se tu não especificar que está contornando o básico para eles, vai vir gente dizendo que teu tutorial não deu certo e blá blá. 

Xablau, entende.

[Joao Vitor]

Xablau pra você (foi mal, não podia deixar essa passar, hahaha).

Combinado Anger, valeu pelo toque (no bom sentido)!

[Tasso]

que mal te pergunte... levando em conta que sou noob em css... como faz pra por um logo ao invés do texto 'host do joao'.. da pra imagem ser 'responsiva' também?

[Joao Vitor]

Não faz mal algum perguntar, cara. Estamos aqui pra isso!

 

Como estamos trabalhando com bootstrap, eu ia deixar pra chegar na parte de responsive mais pro final, quando íamos fazer o código do mobile, já que quero que o tutorial seja pro pessoal aprender a desenvolver um layout e deixar ele responsivo.

 

Mas então vamos lá.

Ao invés de 'Host do João', coloque:

 

<div class="hidden-xs"><div id="logo"><img src="endereço do seu logo"></div></div>.

 

Esse código fará com que quando você usar telas de tamanhos normais, o logo aparecerá. Agora para ele aparecer no responsive, você tem que colocar esse:

 

<div class="visible-xs"><div id="logo"><img src="endereço do seu logo"></div></div>

 

Não usei a "técnica" de redimensionar do CSS, pois por vezes acaba ficando distorcido. Mas caso alguém tiver algo que seja melhor, POR FAVOR, poste!

[Anger]

Não faz mal algum perguntar, cara. Estamos aqui pra isso!

 

Como estamos trabalhando com bootstrap, eu ia deixar pra chegar na parte de responsive mais pro final, quando íamos fazer o código do mobile, já que quero que o tutorial seja pro pessoal aprender a desenvolver um layout e deixar ele responsivo.

 

Mas então vamos lá.

Ao invés de 'Host do João', coloque:

 

<div class="hidden-xs"><div id="logo"><img src="endereço do seu logo"></div></div>.

 

Esse código fará com que quando você usar telas de tamanhos normais, o logo aparecerá. Agora para ele aparecer no responsive, você tem que colocar esse:

 

<div class="visible-xs"><div id="logo"><img src="endereço do seu logo"></div></div>

 

Não usei a "técnica" de redimensionar do CSS, pois por vezes acaba ficando distorcido. Mas caso alguém tiver algo que seja melhor, POR FAVOR, poste!

Seu usar apenas definição width ele não fica distorcido pois redimensionará proporcionalmente.

[Tasso]

Entendi... valeu!