Passo 15 – Adicionar conteúdo do footer

Só falta mais uma secção para a página ficar totalmente completa: o footer!

<div id=”footer”>
<div class=”container”>

<div class=”footer_column long”>
<h3>Designed by Collis Ta’eed, do with this as you please</h3>
<p>You can read a photoshop tutorial for creating the design at <a href=”http://psdtuts.com”>PSDTUTS</a>, You can read a PS->HTML tutorial for creating the site at <a href=”http://nettuts.com”>NETTUTS</a> and you can learn how to turn the HTML into a Wordpress theme in the upcoming book <a href=”http://freelanceswitch.com/book”>How to be a Rockstar Wordpress Designer</a></p>
</div>

<div class=”footer_column”>
<h3>More Links</h3>
<ul>
<li><a href=”http://vectortuts.com”>VECTORTUTS</a></li>
<li><a href=”http://flashden.net”>FlashDen</a></li>
<li><a href=”http://audiojungle.net”>AudioJungle</a></li>
<li><a href=”http://freelanceswitch.com”>FreelanceSwitch</a></li>
<li><a href=”http://faveup.com”>FaveUp</a></li>
</ul>
</div>

<div class=”footer_column”>
<h3>RSS</h3>
<ul>
<li><a href=”">RSS Feed</a></li>
<li><a href=”">What is RSS?</a></li>
</ul>
</div>

</div>
</div>

Algumas notas:

1. Criei a <div class=”footer_column”> para conter o conteúdo do footer. Iremos colocar isto no sítio já de seguida.

2. Dado que a primeira coluna tem uma largura diferente, criei uma nova classe chamada “long”. Note, que para atribuir duas classes a uma div tem de fazê-lo assim (class=”nome1 nome2″) e não assim (class=”nome1″ class=”nome2″).

3. Dentro das colunas utilizei listas <ul> e <h3> para os títulos. É sempre bom utilizar estes termos pois o código torna-se mais fácil de ler e os motores de busca gostam de ver estes títulos e estas listas.

Partilhar esta Entrada

Passo 14 – Últimos toques no Portfolio Home

Finalmente, chegámos ao fim. Apenas fiz umas pequenas alterações: alterei as imagens e os textos dos blocos pequenos para não serem três blocos exactamente iguais, livrei-me do botão “View Project” e apenas coloquei um link. Fica mais limpo e claro. Aqui está o Portfolio Home acabado!

Partilhar esta Entrada

Passo 13 – Adicionar faixa

Agora vamos adicionar uma faixa ao primeiro item, tal como anteriormente. Vejámos o HTML:

<div class=”mini_portfolio_item”>
<img src=”images/ribbon_recent.png” class=”ribbon” alt=”Recent Projects”/>
<div class=”block_inside”>
<img src=”images/sample_mini_portfolio3.jpg” class=”thumbnail” alt=”AudioJungle” />
<h3>AudioJungle Site Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href=”#” class=”button”>View Project</a>
</div>
</div>

Depois atribuímos o atributo postion:relative ao mini_portfolio_items:

.mini_portfolio_item {
border:1px solid #a3a09e;
margin-bottom:10px;
position:relative;
}

Mas algo estranho acontece… O lado direito da faixa parece estar bem mas o topo não.

A razão para isso é que onde o mini_portfolio_item está dentro está a cortá-lo. Os mini_portfolio_item’s estão dentro do <div id=”portfolio_items”>. Então, a solução é muito fácil. Adicionámos 3px de padding ao topo e é o suficiente para que a faixa seja mostrada correctamente.

#portfolio_items {
width:615px;
margin-right:25px;
float:left;
padding-top:3px;
}

Partilhar esta Entrada

Passo 12 – Criar o segundo bloco

No último passo, o nosso primeiro bloco ficou completo. Agora vamos começar a trabalhar no segundo bloco. Este segundo bloco terá uma lista dos últimos trabalhos. Vejámos o HTML:

<div id=”block_portfolio”>

<div id=”portfolio_items”>

<div class=”mini_portfolio_item”>
<div class=”block_inside”>
<img src=”images/sample_mini_portfolio.jpg” class=”thumbnail” alt=”PSDTUTS”  />
<h3>PSDTUTS Theme Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href=”#” class=”button”>View Project</a>
</div>
</div>

<div class=”mini_portfolio_item”>
<div class=”block_inside”>
<img src=”images/sample_mini_portfolio.jpg” class=”thumbnail” alt=”PSDTUTS”  />
<h3>PSDTUTS Theme Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href=”#” class=”button”>View Project</a>
</div>
</div>

<div class=”mini_portfolio_item”>
<div class=”block_inside”>
<img src=”images/sample_mini_portfolio.jpg” class=”thumbnail” alt=”PSDTUTS”  />
<h3>PSDTUTS Theme Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href=”#” class=”button”>View Project</a>
</div>
</div>

</div>

<div id=”text_column”>
<h2 id=”text_title”>Creatif is a WordPress portfolio theme for designers and creatives</h2>
<p>You can use it to quickly turn WordPress into a portfolio website.  Not familiar with WordPress? Fear not, the theme accompanies a book called <a href=”#”>How to Be a Rockstar Wordpress Designer</a> by Rockstar Resources due for release in 2008.</p>
<p>The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.</p>
<p>And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at <a href=”http://psdtuts.com”>PSDTUTS</a> and <a href=”http://nettuts.com”>NETTUTS</a>.</p>
</div>

</div>

Parece muito código, mas na verdade não é. Vejámos:

1. Primeiro criámos o container <div id=”block_portfolio”> que irá conter este segmento de código.

2. Depois temos uma <div id=”portfolio_items”> que contém três <div class=”mini_portfolio_item”>. Já iremos falar sobre elas…

3. Depois temos um <div id=”text_column”> com algum texto e sub-títulos com a tag <h2>.

4. O que iremos fazer é flutuar o texto e os items do portfolio, lado a lado para formar duas colunas de conteúdo.

5. Substituiremos aquele <h2> por uma imagem.

6. Vamos adicinar códigos para que os mini_portfolio_items fiquem com aquela borda dupla.

Aqui está o CSS:

/*
Portfolio-Home-Styles
*/

#block_portfolio {
overflow:auto;
margin-bottom:20px;
}
#portfolio_items {
width:615px;
margin-right:25px;
float:left;

}
#text_column {
float:right;
width:310px;
}
#text_column h2#text_title {
text-indent:-9999px;
background-image:url(images/creatif.jpg);
background-repeat:no-repeat;
width:310px;
height:129px;
}

.mini_portfolio_item {
border:1px solid #a3a09e;
margin-bottom:10px;

}
.mini_portfolio_item .block_inside {
background:none; background-color:#e2dddc;
padding:25px 30px 15px 30px;
}
.mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }

Novamente, parece muito, mas vejámos passo a passo:

1. Primeiro, usámos novamente o overflow:auto no elemento principal do #block_portfolio. Isto é porque temos duas colunas e se não fizermos isto, elas irão passar para cima do footer.

2. Depois, definimos que o #portfolio_items flutue à esquerda, tenha uma margem para o separar da coluna de texto e uma largura de 615px.

3. A #text_column é definida para flutuar à direita com uma largura de 310px.

4. Dentro da coluna de texto temos novamente aquele truque com a tag <h2> onde usámos o text-indent para azer com que o texto desapareça e depois usar uma imagem de fundo.

Depois temos três definições para o mini_portfolio_items.

1. Definimos uma borda escura de 1px e uma margem entre eles.

2. Depois redifinimos o .block_inside para que se adapte a estes elementos. Lembre-se que o .block_inside foi definido antes quando fizemos a área do “Fetured Project”. Então, aqui estamos a ultrapassar a imagem de fundo, alterando a cor de fundo e o padding.

Depois de todas estas alterações, aqui fica o resultado:

Partilhar esta Entrada

Passo 11 – Adicionar faixa do canto

Vamos agora adicionar uma pequena faixa no canto do bloco. Isto é possível com uma mistura de CSS com PNG’s transparentes.

Bem, primeiro, iremos precisar da imagem. Podem encontrá-la no pack disponibilizado no início destes tutoriais.

Depois disso, vamos adicionar este HTML:

<div class=”block”>
<img src=”images/ribbon_featured.png” class=”ribbon”/>
<span class=”block_inside”>

<div class=”image_block”>
<img src=”images/sample_feature.jpg” />
</div>
<div class=”text_block”>
<h2>Eden Website Design</h2>
<small>in <a href=”">web design</a> tagged <a href=”">corporate</a>, <a href=”">web2</a></small>

<p>And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
<br />
<a href=”" class=”button”>View Project</a>
</div>

</span>
</div>

Como podem ver, ali está a tag <img> na segunda linha. Note que demos a class=”ribbon” e pusemos dentro do .block, mas fora do .block_inside. Se a imagem estivesse dentro do .block_inside, descotrolaria a propriedade overflow:auto que definimos antes.

Agora que inserimos tudo no layout, vamos colocar tudo no sítio:

.block {
border:1px solid #a3a09e;
background-color:#ffffff;
margin-bottom:20px;
position:relative;
}
.ribbon {
position:absolute;
top:-3px;
right:-3px;
}

Podemos ver que:

1. Adicionámos o atributos position:relative ao .block. Fizemos isto porque podemos usar o posicionamento absoluto dentro e tê-lo relativo ao .block (e não a toda a página).

2. Colocámos para que a imagem apareça 3px ao lado do bloco e 3px para cima do bloco.

Aqui está, o layout actualizado:

Partilhar esta Entrada

Passo 10 – Adicionar estilos ao texto

Para já o nosso texto está a “denegrir” a página pois não está lá muito bonito, pois não? Bem, vamos adicionar estes bocados de CSS para corrigir isso:

body {
margin:0px; padding:0px;
background-color:#131211;
font-family:Arial, Helvetica, sans-serif;
color:#7f7d78;
font-size:13px;
line-height:19px;
}

/*
Text-Styles
*/

h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }

a.button {
background:#32312f url(images/button_bg.jpg) repeat-x;
padding:5px 10px 5px 10px;
color: #ffffff;
text-decoration: none;
border:1px solid #32312f;
text-transform:uppercase;
font-size:9px;
line-height:25px;
}
a.button:hover {
background:#007de2 url(images/button_bg_o.jpg) repeat-x;
border-color:#007de2;
}

Mais umas notas:

1. Actualizámos o campo “body” para que tenha, como padrão, uma fonte, cor, tamanho e altura de linha.

2. Depois criámos um estilo para a tag <h2> que corrige as margens e altera a fonte para Helvetica.

3. Também criámos um estilo para a tag <small>, para os sub-títulos.

4. Criámos os estilos para o “link” e o “link:hover”.

5. Corrigimos as margens das tags <p>.

6. Finalmente, criámos a classe “button”. Note que definimos como “a.button”, por outras palavras, todas as tags <a> que tenham como classe=”button”. Porque não fazer logo “.button”? Pode ser que mais para a frente eu queira fazer uma classe de botões para outras ferramentas.

7. Na classe “button” nós temos padding, uma borda, umas imagem de fundo, um estilo para o hover e o atributo de altura de linha… altura de linha?! Sim, isto é para corrigir um bug do IE…

Com todo este CSS, a nossa página está assim:

Partilhar esta Entrada

Passo 9 – Adicionar mais algum estilo

Bem, aqui vem mais um bloco de CSS:

/*
Block-Styles
*/

.block {
border:1px solid #a3a09e;
background-color:#ffffff;
margin-bottom:20px;
}
.block_inside {
display:block;
border:1px solid #ffffff;
background: #ffffff url(images/background_block_slice.jpg) repeat-x;
padding:30px;
overflow:auto;
}

.image_block {
border:1px solid #b5b5b5;
background-color:#d2d2d2;
padding:5px;
float:left;
}
.image_block img {
border:1px solid #b5b5b5;
}
.text_block {
float:left;
width:430px;
margin-left:30px;
}

Já falei aqui da classe .border que cria uma borda e a margem em baixo. Dentro temos a classe .block_inside que cria uma borda branca, uma “fatia” do fundo”, posicionamento e ainda um valor overflow.

Nós temos “overflow:auto” porque iremos ter dois elementos a flutuar neste bloco.

Dentro temos a classe .image_block que dá à nossa imagem uma borda dupla (uma na div e outra na própria imagem) que está a flutuar à esquerda com também a classe .text_block também a flutar à esquerda para dar um layout em colunas.

E o resultado é este:

Partilhar esta Entrada

Passo 8 – Adicionar o conteúdo item “Featured Portfolio”

Agora que temos a nossa base, chegou a hora de colocar-mos os blocos de conteúdo. O primeiro bloco chama-se “Featured  Project”. Vamos adicionar algum HTML:

<div id=”block_featured” class=”block”>
<span class=”block_inside”>

<div class=”image_block”>
<img src=”images/sample_feature.jpg” />
</div>
<div class=”text_block”>
<h2>Eden Website Design</h2>
<small>in <a href=”">web design</a> tagged <a href=”">corporate</a>, <a href=”">web2</a></small>

<p>And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
<br />
<a href=”" class=”button”>View Project</a>
</div>

</span>
</div>

O código em cima fica logo a seguir à <div id=”header></div>. Sem qualquer estilo fica assim:

Duas notas:

1. Note que temos uma <div class=”block”> seguida de um <span class=”block_inside”>. Isto deve-se porque as caixas que estámos a criar têm uma borda dupla, primeiro tem uma borda cinzenta de 1px e dentro uma borda branca de 1px.

2. No botão “View Project”, em vez utilizar uma imagem, criámos a classe “button” edeplois aplicá-la a links normais.

Partilhar esta Entrada

Passo 7 – Corrigir o menu

Para já o nosso menu está muito feio… Vamos adicionar mais algumas linhas de CSS para o deixar mais bonito:

ul#menu {
margin:0px; padding:0px;
position:absolute;
right:0px;
}
ul#menu li {
display:inline;
margin-left:12px;
}
ul#menu li a {
text-decoration:none;
color:#716d6a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#211e1e;
}

Nada de especial foi adicionado excepto a função “:hover” que dá outro ar ao menu. Este “:hover” é como se comporta determinado elemento quando o rato passa por cima dele. Neste caso, o link escurece.

Partilhar esta Entrada

Passo 6 – Corrigir a transparência no IE6

O único problema com as PNG’s transparentes é que o IE6 não suporta a transparência. Felizmente, isto é fácil de resolver graças a este script. Basta fazer download e colocar esta linha extra no CSS:

/* Corrige o suporte a PNG’s no IE6 */
img, #logo { behavior: url(scripts/iepngfix.htc); }

Pronto, agora o problema da transparência deve estar resolvido.

Partilhar esta Entrada