Clicky

Jump to content
Portal do Host
  • Sign Up

Sign in to follow this  
Joao Vitor

[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!

  • Like 2

Windows Longhorn... :wub: 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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


Windows Longhorn... :wub: 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

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


Windows Longhorn... :wub: 

Share this post


Link to post
Share on other sites

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?


"Embora ninguém possa voltar atrás e fazer um novo começo, qualquer um pode começar agora e fazer um novo fim." - Chico Xavier

Share this post


Link to post
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!


Windows Longhorn... :wub: 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Entendi... valeu!


"Embora ninguém possa voltar atrás e fazer um novo começo, qualquer um pode começar agora e fazer um novo fim." - Chico Xavier

Share this post


Link to post
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
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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.



×
×
  • Create New...