CHR Designer » Google http://chrdesigner.com/blog Sat, 27 Mar 2010 12:04:08 +0000 en hourly 1 http://wordpress.org/?v=3.0 Como iniciar um recorte em Tableless http://chrdesigner.com/blog/index.php/como-iniciar-um-recorte-em-tableless/ http://chrdesigner.com/blog/index.php/como-iniciar-um-recorte-em-tableless/#comments Sun, 31 May 2009 01:01:39 +0000 CHR Designer http://chrdesigner.com/blog/?p=411 E ai pessoal, esse post vai ser dedicado ao Alex um amigo meu que trabalha comigo na Lógica Digital,  sempre que vai começar um recorte do zero ele tem muitas dúvidas de como iniciar. Ele não sabe como as DIVs tem que ficar e toda vez eu explico mas agora se ele perguntar para mim eu vou mandar esse link para ele…hahahaha….

Vamos lá então primeiro tem que ter algum editor de HTML eu uso o Aptana aqui em casa mas na Lógica eu uso o Dreamweaver mas se vocês não quiserem instalar nenhum desse software pode usar o NotePad do Windows mesmo.

Abaixo tem um modelo de HTML crú:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>

</body>
</html>

Agora eu vou colocar as DIVs:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>

<div>TOPO</div>
<div”>LATERAL</div>
<div>CONTEUDO</div>
<div>RODAPE</div>

</body>
</html>

Agora para finalizar vou colocar as IDs nas DIVs e lembrando que nunca pode ter duas IDs com o mesmo nome senão não valida o seu código, vou colocar mais uma DIV que e a “container” que nele vai o css para determinar a largura do site e vou adicionar o css na pagina mesmo “<style type=”text/css”>”:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>


<style type=”text/css”>
*{margin:0; padding:0;}
#container{width:998px; margin:0 auto; text-align:center;}
#header{float:left; width:996px; height:40px; border:1px solid black;}
#nav{float:left; width:98px; height:100px; border:1px solid blue;}
#content{float:left; width:896px; height:100px; border:1px solid red;}
#footer{clear:both; height:40px; border:1px solid black;}
</style>


</head>
<body>


<div id=”container”>
<div id=”header”>TOPO</div>
<div id=”nav”>LATERAL</div>
<div id=”content”>CONTEUDO</div>
<div id=”footer”>RODAPE</div>
</div>


</body>
</html>

Visualizar o Exemplo
Download do Exemplo

]]> http://chrdesigner.com/blog/index.php/como-iniciar-um-recorte-em-tableless/feed/ 2 Google revela novos logos de produtos http://chrdesigner.com/blog/index.php/google-revela-novos-logos-de-produtos/ http://chrdesigner.com/blog/index.php/google-revela-novos-logos-de-produtos/#comments Sat, 23 May 2009 20:43:04 +0000 CHR Designer http://chrdesigner.com/blog/?p=375 Pode ser uma coisa muito pequena, mas quando é sobre a dimensão do Google, é uma mudança que milhões de pessoas vão notar. A empresa atualizou todos os seus produtos logos – Textos, notícias, mapas, etc…

Especificamente, todos os logotipos (além de produtos com sua própria marca, como o do Gmail agora incluem padrão logotipo do Google, além do nome do produto na mesma “limpa”. Veja alguns dos novos logotipos:

google_logos1

Além disso, os logotipos agora são “padronizado para ser do mesmo tamanho e cor onde quer que elas apareçam”.

Referência: mashable

]]> http://chrdesigner.com/blog/index.php/google-revela-novos-logos-de-produtos/feed/ 0