Fórum Layout, fazendo... #478689

12/05/2014

0

Front-end

amigos, a melhor forma de fazer um layout é usando apenas o css e o html com auxilio do Grid 960?

um exemplo

html


<html>
<head>
<title>Aula 10</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<link rel="stylesheet" href="../css/imagem.css" type="text/css">

</head>
<body>	
	<div id="topo">
		
	</div>

	<div id="menu">
		
	</div>

	<div id="esquerda">
		
	</div>

	<div id="conteudo">
		
	</div>

	<div id="direita">
		
	</div>

	<div id="rodape">
		
	</div>
	
</body>
</html>


css


#topo{
	width:1500px;
	height:200px;
	background-color:#A9A9A9
}

#menu{
	width:1500px;
	height:50px;
	background-color:#00FFFF
}

#esquerda{
	width:300px;
	height:900px;
	background-color:#0000FF
}

#conteudo{
	width:900px;
	height:900px;
	background-color:#000000;
	margin-left:300px;
	margin-top:-900px
	
}

#direita{
	width:300px;
	height:900px;
	background-color:#A52A2A;
	margin-left:1200px;
	margin-top:-900px
}


#rodape{
	width:1500px;
	height:150px;
	background-color:#A9A9A9
}


vocês concorda que é ou pode ser feito assim?
Claudio Aguiar

Claudio Aguiar

Responder

Posts

13/05/2014

Roniere Almeida

eu só conheci essa forma e bem chatinha diga-se de passagem. hehehe
Responder

Gostei + 0

13/05/2014

Raphael Souza

O termo "grid" atualmente está associado ao termo responsividade quando se trata em prototipar layout. Vejo que seus grids estão estáticos. Fato este que, ao meu ver não tem efetividade. Esse mesmo layout pode ser facilmente prototipado com floats comuns, sem necessidade de grid, e sem quebrar tanto a cabeça calculando os blocos.
Existem várias ferramentas no mercado que trabalham com grids responsivos, como o bootstrap e o próprio grid 360. Comumente se acha sistemas com 12 grids principais inteiros ou subdividos de forma responsiva. Aí sim vejo efetividade em se usar grid.
Sempre opto por não utilizar ferramentas externas para esse fim e gasto um pouco mais de tempo desenvolvendo minha própria estrutura de grid, pois as de fora muitas vezes acompanham coisas que não utilizo e fazem uso de muitas classes nos elementos.

Outra dica que dou é começar a usar as tags do HTML5 para diagramar. Manter a semântica do código é essencial nos dias de hoje.

Abraço.
Responder

Gostei + 0

14/05/2014

Claudio Aguiar

obrigado pelas respostas Raphael e Roniere.

existe algum material que possa me indicar, essas facilidade de criação de layout, ficaria bastante feliz, hehehe
Responder

Gostei + 0

14/05/2014

Roniere Almeida

poxa, tambem quero saber, conhecer novas formas. isso é deixado de lado sempre.
Responder

Gostei + 0

15/05/2014

Raphael Souza

obrigado pelas respostas Raphael e Roniere.

existe algum material que possa me indicar, essas facilidade de criação de layout, ficaria bastante feliz, hehehe


Existem sim ótimos materiais disponíveis na rede sobre dev front-end.
Recomendo MUITO esta apostila aberta da caelum e leitura constante do site Tableless. Lá fala muito sobre design responsivo, pré-processadores CSS, dicas jQuery e outros.
A API do bootstrap passa uma boa noção de responsividade de 12 colunas tb. Particularmente eu não uso bootstrap, mas o conceito empregado na API é legal e fácil de entender.

Abraço.
Responder

Gostei + 0

15/05/2014

Claudio Aguiar

Obrigado, irei procurar na apostila essa parte de layout. obrigado.
Responder

Gostei + 0

15/05/2014

Roniere Almeida

Obrigado. valeu mesmo.
Responder

Gostei + 0

16/05/2014

Raphael Souza

Obrigado, irei procurar na apostila essa parte de layout. obrigado.


Ela toda fala de layout. Acredito que o projeto da apostila seja montar o front-end de uma loja virtual. Manda bala! Essa apostila é muito boa.
Responder

Gostei + 0

16/05/2014

Claudio Aguiar

show de bola, irei gostar.
Responder

Gostei + 0

16/05/2014

Roniere Almeida

ai sim hein, otimo.
Responder

Gostei + 0

17/05/2014

Franzé Peixoto

gostei da apostila, obrigado para quem divulgou e informou.
parece boa, pratica.
Responder

Gostei + 0

22/05/2014

Raphael Souza

gostei da apostila, obrigado para quem divulgou e informou.
parece boa, pratica.


;)
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar