Layout, fazendo...

Front-end

12/05/2014

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

Curtidas 0

Respostas

Roniere Almeida

Roniere Almeida

12/05/2014

eu só conheci essa forma e bem chatinha diga-se de passagem. hehehe
GOSTEI 0
Raphael Souza

Raphael Souza

12/05/2014

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.
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

12/05/2014

obrigado pelas respostas Raphael e Roniere.

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

Roniere Almeida

12/05/2014

poxa, tambem quero saber, conhecer novas formas. isso é deixado de lado sempre.
GOSTEI 0
Raphael Souza

Raphael Souza

12/05/2014

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.
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

12/05/2014

Obrigado, irei procurar na apostila essa parte de layout. obrigado.
GOSTEI 0
Roniere Almeida

Roniere Almeida

12/05/2014

Obrigado. valeu mesmo.
GOSTEI 0
Raphael Souza

Raphael Souza

12/05/2014

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.
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

12/05/2014

show de bola, irei gostar.
GOSTEI 0
Roniere Almeida

Roniere Almeida

12/05/2014

ai sim hein, otimo.
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

12/05/2014

gostei da apostila, obrigado para quem divulgou e informou.
parece boa, pratica.
GOSTEI 0
Raphael Souza

Raphael Souza

12/05/2014

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


;)
GOSTEI 0
POSTAR