Jump to content

[Tutorial] Como criar um Layout Responsivo - Parte 2


Recommended Posts

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}

81yn5t.png
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.
K8N4yE.png

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!

Link to comment
Share on other sites

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.  :)

Ajude o fórum! Antes de postar, leiam as regras de postagem aqui.

Link to comment
Share on other sites

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.

Ajude o fórum! Antes de postar, leiam as regras de postagem aqui.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Ajude o fórum! Antes de postar, leiam as regras de postagem aqui.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

Do you agree with our terms?