InícioCalendárioFAQBuscarMembrosGruposRegistrar-seConectar-se

Compartilhe | 
 

 [Tutorial] Layout: dar estilo (parte 3)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
Miss Days

avatar

Mensagens : 4
Data de inscrição : 16/04/2011

MensagemAssunto: [Tutorial] Layout: dar estilo (parte 3)   Ter Abr 26, 2011 1:58 am

Já sabemos o que é HTML, já aprendemos a usar o Bloco de Notas para fazer páginas Web e já aprendemos a fazer tabelas... Mas... as tabelas eram um pouco... sem graça, não eram? Não tinham cores, não tinham o tamanho que queríamos... Vamos então aprender a modificar todos estes valores =) Há mil maneiras de o fazer, quando posso eu gosto de usar o atributo “style” porque dá para meter tudo lá dentro! Very Happy No entanto há alguns atributos que é mais fácil de usar como atributos e não dentro do style.

Primeiro que tudo vamos relembrar o código de uma tabela (que, como se lembram, podem colocar num documento do Bloco de Notas e guardar com a extensão .htm para visualizar no vosso browser Wink ):
<table>
<tr><td>Esta é a primeira coluna da primeira linha.</td>
<td>Segunda coluna da primeira linha.</td>
<td>Terceira coluna da primeira linha.</td>
<tr><td>Primeira coluna da segunda linha.</td>
<td>Segunda coluna da segunda linha.</td>
<td>Terceira coluna da segunda linha.</td>
</tr>
</table>

Tal e qual como está, esta maravilha aparece sem linhas nenhumas e com as colunas ajustadas para o tamanho ficar justo ao texto. O que é que podemos querer alterar?

Arrow Tamanho
Podemos querer um tamanho específico para a tabela. Se dermos um tamanho, a tabela não vai alargar para os lados. O tamanho é dado numa unidade, os pixeis. Simbolizam-se por px. O atributo que se usa para a largura é “width”. Este é um daqueles casos em que pode não funcionar dentro do style e por isso eu uso como atributo. Não se esqueçam, estamos a modificar a tabela e não as células dentro dela. Por isso, estes valores vão todos para a tag da tabela. Imaginemos que queremos uma tabela com 500px de largura. O código fica:
<table width=”500px”>
<tr><td>Esta é a primeira coluna da primeira linha.</td>
<td>Segunda coluna da primeira linha.</td>
<td>Terceira coluna da primeira linha.</td>
<tr><td>Primeira coluna da segunda linha.</td>
<td>Segunda coluna da segunda linha.</td>
<td>Terceira coluna da segunda linha.</td>
</tr>
</table>

Basta mudar o valor de 500 para o número que quiserem para controlar a largura da tabela =)
Dica: Para terem uma noção, a maioria dos computadores tem 1024 px de largura, mas o tamanho “limite” para as nossas apresentações é de 800px para a página não alargar Wink

Arrow Alinhar tabela
Esta é uma maravilha... Geralmente queremos alinhar ao centro. Automaticamente o alinhamento é feito à esquerda. Neste caso não temos com que nos chatear. Basta abrir uma tag “center” antes da tabela e fechá-la depois:
<center>
<table width=”500px”>
<tr><td>Esta é a primeira coluna da primeira linha.</td>
<td>Segunda coluna da primeira linha.</td>
<td>Terceira coluna da primeira linha.</td>
<tr><td>Primeira coluna da segunda linha.</td>
<td>Segunda coluna da segunda linha.</td>
<td>Terceira coluna da segunda linha.</td>
</tr>
</table></center>

Arrow Borda da tabela
Ora bem, esta é um pouco mais complicada porque é fácil fazer algo errado e descobrir o que é... Ou então conseguir editar para ficar como queremos... A borda da tabela serve precisamente para vermos as bordas da tabela. Aqui há uma coisa importante a notar, é que as tabelas têm bordas e depois cada célula também tem “bordas”... Por isso quando dão uma borda à tabela ela fica mesmo só na parte “de fora” da tabela.
Uma vez mais usa-se um atributo, cujo valor é a espessura da linha. A espessura é uma vez mais dada em px. Se não quisermos que apareçam bordas, o que é mais comum, basta pôr uma espessura igual a zero Wink O atributo que associamos à tag table é o border=”valor”. Imaginemos que queremos uma tabela simples com a borda do mais simples que há. Ficaria:
<center>
<table width=”500px” border=”1px”>
<tr><td>Esta é a primeira coluna da primeira linha.</td>
<td>Segunda coluna da primeira linha.</td>
<td>Terceira coluna da primeira linha.</td>
<tr><td>Primeira coluna da segunda linha.</td>
<td>Segunda coluna da segunda linha.</td>
<td>Terceira coluna da segunda linha.</td>
</tr>
</table></center>

Se quiséssemos sem borda, bastava substituir o border=”1px” por border=”0px”.

Arrow Usar o atributo “style” para modificar a borda da tabela
Pois, lembram-se de eu dizer que gostava muito de pôr as coisas dentro do “style”? Este é um daqueles casos em que o style ajuda muito e nos deixa fazer virtualmente qualquer coisa com as bordas!!!
A solução mais simples quando não querem bordas é usar o border=”0px”. Quando querem cores, larguras, “embelezamentos”, este atributo é do melhor que há! Wink Vamos começar...
Como se lembram, a linguagem dentro do style é um bocadinho diferente... Por isso, vamos por partes, relembrando como se deve pôr o style:
<table width=”500px” style=”elemento:valor”>
<tr><td>Esta é a primeira coluna da primeira linha.</td>
<td>Segunda coluna da primeira linha.</td>
<td>Terceira coluna da primeira linha.</td>
<tr><td>Primeira coluna da segunda linha.</td>
<td>Segunda coluna da segunda linha.</td>
<td>Terceira coluna da segunda linha.</td>
</tr>
</table>

Agora vamos pegar só na parte inicial e modificar Wink
<table width=”500px” style=”elemento:valor”>

Estilo da borda
O estilo da borda é isso mesmo... dar estilo Wink Há o simples, mas também há borda dupla, aos pontinhos, aos risquinhos... O que se põe dentro do style é “border-style:nome do estilo”. A simples codifica-se assim:
<table width=”500px” style=”border-style:solid”>
Em vez do solid podem pôr ou dashed ou dotted. Experimentem o código com um deles Wink
<table width=”500px” style=”border-style:dashed”>

A espessura da linha
Pois é, em vez do border=”2px” também se pode usar dentro do style, com uma vantagem muito engraçada... é que aqui dá para separar as bordas! Podemos fazer uma borda muito espessa na parte de cima e não ter mais bordas à volta da tabela Very Happy Mas já lá vamos =)
Aqui o que pomos dentro do style é “border-width:2px” (para uma espessura de 2px). Vamos exagerar e fazer uma com 10px! É só colocar na parte de cima:
<table width=”500px” style=”border-width:10px”>

Então e aquela conversa de poder mudar as linhas de cima e as de baixo?... Bem, é que podemos dizer em que borda é que queremos aquela espessura! Existem 4 bordas: a de cima, a do fundo, a da esquerda e a da direita. Cada uma tem o seu “nome”, que são, por ordem: border-top; border-bottom; border-left; border-right. Ou seja, se não quisermos os 10px em todas as bordas e quisermos só na borda de cima, basta escrever:
<table width=”500px” style=”border-top-width:10px”>

Juntar tudo dentro do style
Antes de passarmos às cores, que é assunto mais complicado, vamos aprender a juntar tudo dentro do style. Porque imaginem que não querem só uma certa espessura de borda, também querem dar um certo estilo e uma certa cor... A lógica seria fazer um style para cada coisa:
<table width=”500px” style=”border-top-width:10px” style=”border-style:dashed”>

Bem, também resulta, mas dá trabalho... E podemos juntar tudo dentro do mesmo style. É só pôr ; entre “coisas” diferentes!!! Very Happy Ou seja, podemos colocar o estilo e a espessura da borda no mesmo style:
<table width=”500px” style=”border-top-width:10px; border-style:dashed”>

Estão a ver a facilidade? E podemos pôr muito mais coisas dentro do style! =)

Arrow Alinhar o texto
Mais um exemplo de coisas que podemos pôr no style Wink Na maioria das vezes queremos o texto centrado ou justificado. O que colocamos é style=”text-align:alinhamento”. Se queremos centrado fica style=”text-align:center”. Para justificado é style=”text-align:justify”. Para o texto à direita é style=”text-align:right”. Para texto à esquerda basta não colocar isto, ficará automaticamente à esquerda =) Mas, se não ficar, é style=”text-align:left”.

Tabela toda centrada:
<center>
<table width=”500px” border=”1px” style="text-align:center; border-style:dotted; border-top-width:10px;">
<tr><td>Esta é a primeira coluna da primeira linha.</td>
<td>Segunda coluna da primeira linha.</td>
<td>Terceira coluna da primeira linha.</td>
<tr><td>Primeira coluna da segunda linha.</td>
<td>Segunda coluna da segunda linha.</td>
<td>Terceira coluna da segunda linha.</td>
</tr>
</table></center>


Como as cores são um pouco mais complicadas vamos trabalhá-las numa secção separada do tutorial, a próxima que aí virá Wink
Voltar ao Topo Ir em baixo
Ver perfil do usuário
Administradora
Admin
avatar

Mensagens : 69
Data de inscrição : 10/04/2011
Idade : 18
Localização : Portugal

MensagemAssunto: Re: [Tutorial] Layout: dar estilo (parte 3)   Ter Abr 26, 2011 12:46 pm

Muito Obrigada Miss Days! Very Happy

_________________

I I love you Gypsys Horses!

"O mais difícil não é chegar ao nosso destino , mas sim mantermos-nos lá".
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://howrseajuda.forumeiros.net
Cathrine

avatar

Mensagens : 14
Data de inscrição : 11/04/2011
Localização : Nao digo! HAHAHA!

MensagemAssunto: Re: [Tutorial] Layout: dar estilo (parte 3)   Sex Abr 29, 2011 6:04 pm

Olá!
Bem, o CSS também ajuda a dar estilo, né?
Então podem ir aqui
Voltar ao Topo Ir em baixo
Ver perfil do usuário
Conteúdo patrocinado




MensagemAssunto: Re: [Tutorial] Layout: dar estilo (parte 3)   

Voltar ao Topo Ir em baixo
 
[Tutorial] Layout: dar estilo (parte 3)
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» [TUTORIAL] Camera de visão noturna estilo OUTLAST
» [TUTORIAL] Camera que segue o Player ( estilo GTA )
» [TUTORIAL] Camera com colisão e Follow dinamico estilo RPG WOW
» Pedindo demissão com estilo
» Airbus A320: Auto Landing Tutorial

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
Howrse Ajuda e Diversão :: Dúvidas e Explicações :: Explicações-
Ir para: