Criando Layout – Empresa de Tecnologia: Parte 2

UASHUSAHHUSAUHSAUHAS
Usa ae lekão

Bom tutorial mais só vou usar mesmo a imagem do 'Blocos de Conteúdo' como base de um layout aqui :D

<p>Vamos à conclusão deste <em>layout</em>?!</p>
<h2><span style="color: rgb(255, 153, 0);">Pré-Requisitos</span></h2>
<ul>

<li>Ter concluído a 1ª parte deste tutorial. Se não, <strong><a title="Criando Layout - Empresa de Tecnologia: Parte 1 " href="http://www.habboz-forum.net/tutoriais-f34/criando-layout-empresa-de-tecnologia-parte-1-t8925.htm" target="_blank">clique aqui</a></strong>.</li>
<li>Facilidade quanto ao manuseio do <em>Fireworks </em>CS3/CS4.</li>
</ul>
<h2><span style="color: rgb(255, 153, 0);">Objetivo</span></h2>
<p>Concluir um <em>layout </em>para uma empresa de tecnologia utilizando o <em>Fireworks.</em></p>
<h2><span style="color: rgb(255, 153, 0);">Conteúdo</span></h2>

<h3><span style="color: rgb(51, 51, 153);">1º Passo – Barra de Separação</span></h3>
<p>Observando bem o <em>layout</em> final da 1ª parte deste tutorial, é percebido a necessidade de criarmos uma divisória entre o conteúdo principal e o secundário. Podemos fazer de diversas maneiras: criando caixas com cores diferenciadas, gradientes, bordas…</p>
<p>Mas neste caso, utilizaremos uma simples e eficiente, barra de separação.</p>
<p>Então, vamos criar dois retângulos com as dimensões <strong>940 x 1 pixel</strong> cada, nas cores de preenchimento, <strong>#FFFFFF</strong> e <strong>#D3DDE4</strong>.</p>

<div style="width: 361px;">
<div id="attachment_2617" class="wp-caption aligncenter" style="width: 361px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig01-barras.jpg"><img class="size-full wp-image-2617" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig01-barras.jpg" alt="Fig. 01: Barras divisórias" width="351" height="415"></a><p class="wp-caption-text">Fig. 01: Barras divisórias</p></div>
</div>
<p>Aí você me pergunta:</p>
<blockquote>
<h3><em><span style="color: rgb(255, 102, 0);">“Mas Carlos, eu poderia ter criado duas linhas ao invés de dois retângulos?” </span></em></h3>
</blockquote>
<p>Sim, poderia, mas, por incrível que pareça, um arquivo/imagem fica mais “leve” quando utilizamos menos linhas, bordas para as artes gráficas. Aí vai uma dica que vale ouro….hehehe  <img src="http://www.mxstudio.com.br/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley"> </p>
<h3><span style="color: rgb(51, 51, 153);">2º Passo – Criando o Blocos de Conteúdo</span></h3>
<p>Lembram do <em>wareframe </em>criado no tutorial anterior?</p>

<div style="width: 210px;">
<div id="attachment_2618" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig01-wareframe1.jpg"><img class="size-medium wp-image-2618" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig01-wareframe1-300x181.jpg" alt="Fig. 02: Wareframe do layout" width="300" height="181"></a><p class="wp-caption-text">Fig. 02: Wareframe do layout</p></div>
</div>
<p style="text-align: left;">Pois bem, existem 3 blocos de conteúdo. Então vamos lá!</p>
<p style="text-align: left;">Criemos 2 retângulos com as dimensões<strong> 240 x 143 px </strong>nos dois das extremidades, 1 retângulo de <strong>245 x 143 px</strong>, no bloco do centro e os coloquemos de acordo com a imagem:</p>
<p style="text-align: center;">
</p><div id="attachment_2619" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig02-blocos.jpg"><img class="size-medium wp-image-2619" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig02-blocos-300x114.jpg" alt="Fig. 02: Posicionamento dos blocos de conteúdo secundário no layout." width="300" height="114"></a><p class="wp-caption-text">Fig. 02: Posicionamento dos blocos de conteúdo secundário no layout.</p></div>
<p style="text-align: left;">Observemos que o alinhamento através das linhas-guia são fundamentais para organizarmos e harmonizarmos os elementos e conteúdos do <em>layout</em>.</p>

<p style="text-align: left;">Sabendo destes posicionamentos, agora é só inserir o devido conteúdo:</p>
<div style="width: 590px;">
<div id="attachment_2620" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig03-conteudo.jpg"><img class="size-medium wp-image-2620" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig03-conteudo-300x112.jpg" alt="Fig.03: Conteúdo dos blocos secundários" width="300" height="112"></a><p class="wp-caption-text">Fig.03: Conteúdo dos blocos secundários</p></div>
</div>
<h3><span style="color: rgb(51, 51, 153);">3º Passo – Rodapé</span></h3>
<p style="text-align: left;">E para finalizarmos, basta inserirmos o <em>copyright </em>(direitos autorais) e, com a autorização prévia do cliente, nosso <a href="http://www.carloshps.com.br/blog/criando-layout-empresa-de-tecnologia-parte-2/#"></a>logotipo ou dizeres “desenvolvido por”. E eis o resultado final:</p>
<div style="width: 590px;">
<div id="attachment_2621" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/layout_final.jpg"><img class="size-medium wp-image-2621" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/layout_final-300x172.jpg" alt="Fig. 04: Layout finalizado" width="300" height="172">