Instruções para conteúdo – Tabelas avançadas I

Olá pessoal vamos aprender a criar uma forma de disposição de conteúdo no site usando a ferramenta de tabela no Site Force, veja abaixo como ficará a disposição de conteúdo.

Importante: Na hora de se criar conteúdo é pegar a caneta e um pedaço de papel e desenhar como ficará cada imagem e texto e seus respectivos espaços.

Se desenhar não é sua  praia você pode fazer no Excel e usa-lo para marcar os espaços

Agora com o projeto na mão vamos começar a criar as tabelas, mas antes vamos projetar as coisas, veja abaixo  o desenho do conteúdo em caixas e observe as linhas coloridas:

Para cada linha temos uma tabela vamos começar com a tabela vermelha!

Vá na ferramenta de criar tabela e abrirá uma tela como mostra abaixo:

Vamos criar aqui a tabela vermelha com uma linha e 3 colunas, 100% de largura (depois iremos ajustar isso), sem espaçamento, margem e nenhuma borda, ficando assim a caixa de Formatar Tabela:

Ao clicar em OK no seu editor de texto ficará as marcações da tabela como mostra a imagem abaixo:

Agora vamos configurar as células da tabela, clique com o botão direito na primeira coluna

Ao clicar aparecerá a caixa de Propriedades desta célula

Aqui você pode configurar largura, altura, cores de fundo  e bordas desta célula. Uma dica muito importante é que ao criar uma tabela na célula que vai colocar texto vá no menu Alinhamento Vertical e use “Superior”, com isso seu texto que digitar vai sempre ficar no topo, por padrão o HTML alinha todo o conteúdo de uma célula na esquerda e no centro caso isso aconteça basta clicar sobre a celular e colocar a opção de Alinhamento Vertical.

alinhado

Faça isso para a primeira e terceira célula desta tabela que criamos, agora repita o mesmo processo para a célula do meio, mas aqui vamos mudar a largura dela deixar ela menor para dar um espaço entre a notícia grande e a notícia pequena como mostra abaixo

Na opção de largura coloque 20 e na caixa ao lado marque a opção pixel como mostra abaixo:

Ao clicar em “Ok” você perceberá que a largura da tabela ficará como mostra a tabela abaixo:

Pronto a tabela das linhas vermelhas está pronta, vamos agora criar a tabela de linhas azuis, com a notícia em destaque.

Para isso clique sobre a primeira coluna e clique novamente no ícone de criar tabela (icon-001) e na caixa de Formatar tabela vamos criar uma tabela com 2 linhas e 1 coluna como no desenho acima, vamos colocar a largura de 100% nenhum espaçamento e nem borda.

Veja que criamos uma tabela dentro de outra, no editor veremos assim:

Com isso temos o espaço da imagem e do texto garantido, clique na primeira linha desta nova tabela e insira a imagem através do ícone icon-003, logo abaixo iremos colocar o texto e configurar para que o título fique maior na aba de tamanho (icon-004) e alinhar o texto e o link conforme o desenho.

Dica experta: use a opção de tela cheia (este ícone icon-002 )para ver melhor o conteúdo, ele se abrirá em todo sua tela assim facilita a visualização.

 

Com isso pronto vamos para a tabela verde, onde temos mais linhas e colunas.

 

Aqui vamos precisar de um pouco mais de atenção, pois temos mais colunas e linha. Clique sobre a terceira célula da tabela vermelha (Dica: clique na segunda célula e pressione a seta do seu teclado para a esquerda) e depois no botão de tabela icon-001 e ao abrir a caixa vamos criar uma tabela com 5 linhas e 3 colunas, sem borda sem espaços e com largura de 100%.

Veja a imagem abaixo de como ficou essa nova tabela.

Note que a tabela ficou pequena demais para enxergarmos, use as setas do seu teclado para navegar entre as celulares, ou coloque uma largura fixa de 100px apenas para visualizarmos suas células.

Para entender melhor o porque de tanta linha e coluna, veja o desenho abaixo onde tem o espaço de cada linha e coluna marcado por número

Agora vamos começar a configurar primeiro os espaços, na horizontal vá na segunda célula  clique cm o botão esquerdo e configure ela para ter a largura de 20px.

largura

Assim como no Excel as celular da primeira linha controlam a largura das demais linhas, então não precisa repetir o processo para as linhas de baixo. Agora vamos configurar os espaços entre as imagens na vertical vá na segunda célula clique com o botão esquerdo do mouse e coloque a altura para 20px. Repita o processo na vertical vá na quarta célula e altere sua altura para 20px.

Com os espaços no lugar basta colocar as imagens e os textos e configurando seu tamanho conforme mostramos acima ficará como o desenho. Note que os textos aqui ficaram no meio da célula, isso acontece porque não configuramos para que a célula de texto tenha o alinhamento superior.

Para ajustar basta clicar com o botão esquerdo do mouse sobre a célula e ir na opção de célula e depois clicar em  Alinhamento Vertical e depois em Superior.

Agora para finalizar vamos remover as larguras de 100% das tabelas para que possam ficar no tamanho das imagens que criamos, para isso clique em qualquer célula com o botão esquerdo do mouse e vá em Propriedades da Tabela, note que vai abrir a caixa de Formatar Tabela, ai basta ir em largura e remover o valor de 100 deixar vazio. Repita para as três tabelas, vermelha, azule  verde.

E por fim teremos o resultado final bem bacana. Você pode usar tabelas dentro de tabela, basta apenas desenhar como deseja que elas fiquem.

Uma dica da produção, o Site Force por segurança encerra sua sessão de hora em hora, ou seja, se estiver logado por mais de uma hora ele irá fechar. Para que não perca o seu conteúdo aconselhamos a copiar o código fonte e cole em um bloco de notas. O código fonte fica no ícone icon-005

Até mais pessoal!

 

Este artigo foi útil para você?!