Design On Brasil - Skin De Download
|
E ai pessoal, irei ensinar à vocês como criar uma Skin de Download, como essa de cima, por Tabela <table>.
Primeiro vamos entender o que é uma tabela. Tabela é uma divisória que pode ser composta por borda ou sem borda.
Irei mostrar como criar uma tabela sem bordas. É algo bem simples:
<table align="center" cellpadding="0" cellspacing="0" style="border: 0px solid black;"> </table>Align = Alinhamento (Center = Centro)
Cellpadding e Cellspacing é a distância entre as partes da tabela.
Border = Borda (Sem borda = 0)
Agora irei mostrar os componentes internos da tabela. Em seguida irei dividi-la em partes e explica-la.
<table align="center" cellpadding="0" cellspacing="0" style="border: 0px solid black;"><tbody>
<tr><td height="63px" style="background: url(http://i1242.photobucket.com/albums/gg531/JonnyUp/skinpartes1_01.png) no-repeat;" width="300px"><div style="font-size: 15px; padding: 30px 0px 0px 20px;">
Design On Space - Skin De Download</div>
</td></tr>
<tr><td height="221px" style="background: url(http://i1242.photobucket.com/albums/gg531/JonnyUp/skinpartes1_02.png) no-repeat;" width="300px">
<a href="http://designonbrasil.blogspot.com/" target="_blank"><img height="202px" src="http://i1242.photobucket.com/albums/gg531/JonnyUp/lay3.png" style="margin-left: 29px; margin-top: -10px;" width="243px" /></a></td></tr>
<tr> </tr>
<tr><td height="116px" style="background: url(http://i1242.photobucket.com/albums/gg531/JonnyUp/skinpartes1_03.png) no-repeat;" width="300px"><a href="http://designonbrasil.blogspot.com/" target="_blank"><img height="53px" src="http://i1242.photobucket.com/albums/gg531/JonnyUp/fatias2_07.png" style="margin-left: 30px; margin-top: -20px; padding: 0px 0px 20px 0px;" width="237px" /></a></td></tr>
</tbody></table>
<tr>Separa as linhas da tabela e as colunas. No caso eu estou usando apenas uma coluna.</tr>
<td>É o complemento que há dentro da linha.</td>
Height e Width são as devidas medidas das imagens. Dependo do local em que ela está posta. A imagem pode está posta como Background ou como Imagem "Src".
Background: Url(Imagem da parte da tabela. Depende da parte da Skin).
Src="Imagem que ficará dentro da Skin."
Padding: Moverá as partes da internas da Skin como a imagem ou o nome "Design On Brasil - Skin de Download".
Primeiramente para criar uma skin utilizando <table> você deve ter algum conhecimento em <div>. Por que sem div você não será capaz de mover as partes internas da skin.
Resumindo, essa é uma skin rápida mas complicada de fazer por conter muitos códigos. Essa é uma versão simplificada de como criar um Skin básica usando <table>. Boa sorte ao tentar criar uma por sima do que ensinei. Até o outro tutorial que será Skin a partir de Div.
0 Deixe um Comentário:
Postar um comentário