[Tutorial] Aprendendo A Modificar Seu Website (Gesior) - Tutoriais de Websites - xTibia

athermillard

Campones

INFOS

Grupo: Campones

Registrado: 07/12/11

Posts: 8

Char no Tibia: Taylor Brasil

Postado em janeiro 07, 2012

Bem durante o tópico estarei ensinado vocês a modificar o seu site a gosto.

Para que fique de acordo como você gostaria.

Subtítulos:

Criando e modificando tabelas
Escrevendo com acentos
Adicionando imagens
Criando botões
Pegando informações da sua database

Vamos começar:

Criando e Modificando tabelas

Para você criar uma tabela é bem simples você deve sempre começar com o comando "<table>" e finalizar com "</table>".

Toda tabela é dividida em três partes:

<table> (toda a tabela)
<tr> (uma divisão horizontal em sua tabela)
<td> (uma divisão vertical em sua divisão horizontal)

Regras de divisões:

Você não pode colocar uma "<td>" antes de uma "<tr>"
Todo comando iniciado deve ser finalizado exemplo: "<tr><td>ESCREVA AKI</td></tr>"
Você pode colocar se quiser uma tabela dentro de uma tabela mais lembrando que ela deve começar e terminar dentro do comando "<td>" exemplo:

<table>

<tr>

<td>

Escreva aki algo antes de sua segunda tabela(se quizer)

<table>

<tr>

<td>

Escreva aki algo na sua nova tabela

</td>

<tr>

</table>

</td>

</tr>

</table>

Comandos internos básicos:

width="100" ou width="100%" -- Largura aumente o número e sua tabela ficará mais larga
height="100" ou height="100%" -- Altura aumente o número e e sua tabela ficará mais alta
border="1" -- Borda aumente o número e a borda ficará maior
bordercolor="#000000" -- Cor da borda
bgcolor="#FFFFFF" -- Cor de fundo da tabela
align="right" -- Alinhamento

Exemplo de utilização:

<tr>

Ola

</td>

</tr>

</table>

Fazendo tabelas como essas: (imagem retirada do tibia.com)

Utilize assim substituindo apenas as áreas que estão em vermelho:

<div class="Text" >SEU TITULO AKI</div>

</div>

<tr>

<td>

<tr>

<td>CONTEUDO DA PARTE INTERNA</td>

</tr>

</table>

</div>

</table>

</div>

</td>

</tr>

Faça modificações a vontade em sua tabela mais tome cuidado para não buga-la.

Obs: Sempre em qualquer conteúdo escrito, de imagens e entre outros você deve utilizar isso:

$main_content .= 'Seu conteudo aki';

-----------------------------------------------------------------------------------------------------------------------------------------------------------

Escrevendo com acentos

Bem para escrever com acentos é bem simples basta você escrever um código para cada letra acentuada exemplo:

á = á

é = é

Á = Á

É = É

Colocando em prática:

Título = T&iacutetulo

Atenção = Atenç&atildeo

Tabelas de Acentos

Obs: Sempre em qualquer conteúdo escrito, de imagens e entre outros você deve utilizar isso:

$main_content .= 'Seu conteudo aki';

-----------------------------------------------------------------------------------------------------------------------------------------------------------

Adicionando imagens

Para adicionar uma imagem você deve sempre utilizar este código:

Onde se encontra em verde é onde fica a localização da imagem apartir da pasta "htdocs" do seu site.

Tamanho:

width="100" ou width="100%" -- Largura aumente o número e sua imagem ficará mais larga
height="100" ou height="100%" -- Altura aumente o número e e sua imagem ficará mais alta
align="right" -- Alinhamento

Colocando sua imagem para redirecionar à um link:

Onde se encontra em azul é o seu link.

Obs: Sempre em qualquer conteúdo escrito, de imagens e entre outros você deve utilizar isso:

$main_content .= 'Seu conteudo aki';

-----------------------------------------------------------------------------------------------------------------------------------------------------------

Criando botões

Agora vamos aprender a criar um botão desse estilo:

Copie estes códigos e modifique de acordo com a legenda:

1ª opção:

</div>

</div>

2ª opção: (como tabela)

<td>

<tr>

</div>

</div>

</div></td>

</tr>

</table>

</td>

</tr>

</table>

Legenda:

Verde: imagem que aparece no centro do botão

Azul: local da imagem

Vermelho: Local em que ao clicar no botão você será redirecionado

Rosa: Alinhamento

Obs: Sempre em qualquer conteúdo escrito, de imagens e entre outros você deve utilizar isso:

$main_content .= '

Seu conteudo aki

';

-----------------------------------------------------------------------------------------------------------------------------------------------------------

Pegando informações de sua database

Vou ensinar agora como você vai pegar uma informação de sua database.

Exemplo: (pegando o nº de guilds da sua database)

$guildsbyather = $SQL->query('SELECT COUNT(*) FROM `guilds` WHERE `id`>0;')->fetch();

Legenda:

Verde: tabela que você deseja em sua database e que irá seu calculada o numero de colunas

Vermelho: Comando que você usará para escrever a quantidade depois lembre-se de usar sempre o "$" antes de escrever nessa parte e para adicionar o seu número colocar sempre assim " '.$OQUEVOCEDIGITOUNOINICIO.' "

Bem a partir do momento que você colocou esse código quando você inserir isso '.$guildsbyather.' irá aparecer o numero de guilds que existem em seu server

Obs: Sempre em qualquer conteúdo escrito, de imagens e entre outros você deve utilizar isso:

$main_content .= 'Seu conteudo aki';

Até a próxima comentem ^^ Ajudei você? REP+