xTibia

.com
AT

[Tutorial] Aprendendo A Modificar Seu Website (Gesior)

Por athermillard, 07 de jan. de 2012 em Tutoriais de Websites

by: ather
otserv
tibia
5.0 (1)
9
10.6k
athermillardA
07 de janeiro de 2012 às 20:08

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:

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

Regras de divisões:

  1. Você não pode colocar uma "<td>" antes de uma "<tr>"
  2. Todo comando iniciado deve ser finalizado exemplo: "<tr><td>ESCREVA AKI</td></tr>"
  3. 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:

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

Exemplo de utilização:

<table width="100" border="1" bordercolor="#000000">

<tr>

<td bgcolor="#FFFFFF">

Ola

</td>

</tr>

</table>

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

semttulotgv.png

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

<div class="TableContainer" >

<table class="Table1" cellpadding="0" cellspacing="0" >

<div class="CaptionContainer" >

<div class="CaptionInnerContainer" >

<span class="CaptionEdgeLeftTop" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span>

<span class="CaptionEdgeRightTop" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span>

<span class="CaptionBorderTop" style="background-image:url('.$layout_name.'/images/content/table-headline-border.gif);" ></span>

<span class="CaptionVerticalLeft" style="background-image:url('.$layout_name.'/images/content/box-frame-vertical.gif);" /></span>

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

<span class="CaptionVerticalRight" style="background-image:url('.$layout_name.'/images/content/box-frame-vertical.gif);" /></span>

<span class="CaptionBorderBottom" style="background-image:url('.$layout_name.'/images/content/table-headline-border.gif);" ></span>

<span class="CaptionEdgeLeftBottom" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span>

<span class="CaptionEdgeRightBottom" style="background-image:url('.$layout_name.'/images/content/box-frame-edge.gif);" /></span>

</div>

</div>

<tr>

<td>

<div class="InnerTableContainer" >

<table style="width:100%;" >

<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

 

 

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:

<img src="images/imagem.jpg">

 

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

 

Tamanho:

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

Colocando sua imagem para redirecionar à um link:

 

<a href="google.com"><img src="images/imagem.jpg"></a>

 

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:

semttuloxe.png

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

1ª opção:

<div class="BigButton" style="background-image:url('.$layout_name.'/images/buttons/sbutton.gif)" >

<div onMouseOver="MouseOverBigButton(this);" onMouseOut="MouseOutBigButton(this);" ><div class="BigButtonOver" style="background-image:url('.$layout_name.'/images/buttons/sbutton_over.gif);" >

</div>

<a href="?subtopic=buypoints"><input class="ButtonText" type="image" name="Submit" alt="Submit" src="'.$layout_name.'/images/buttons/_sbutton_continuar.gif" ></a>

</div>

</div>

 

2ª opção: (como tabela)

<table width="100%" >

<tr align="center" >

<td>

<table border="0" cellspacing="0" cellpadding="0" >

<tr>

<td style="border:0px;" >

<div class="BigButton" style="background-image:url('.$layout_name.'/images/buttons/sbutton.gif)" >

<div onMouseOver="MouseOverBigButton(this);" onMouseOut="MouseOutBigButton(this);" ><div class="BigButtonOver" style="background-image:url('.$layout_name.'/images/buttons/sbutton_over.gif);" >

</div>

<a href="?subtopic=buypoints"><input class="ButtonText" type="image" name="Submit" alt="Submit" src="'.$layout_name.'/images/buttons/_sbutton_continuar.gif" ></a>

</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+

Editado Janeiro 8 por athermillard

BaiakZikB
07 de janeiro de 2012 às 20:44

Essa Parte Aki E uq q eu nao entendi

 

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

athermillardA
07 de janeiro de 2012 às 22:09

Amigo qual desses você não intendeu?

gabrielmotta1G
07 de janeiro de 2012 às 22:12

Ta muito Bom Mesmo Bem Espricado Lavou Meu Rep+

athermillardA
07 de janeiro de 2012 às 23:17

Brigado qualquer duvida tamo ai! ^^

BaiakZikB
07 de janeiro de 2012 às 23:47

a q eu nao entendi pra q akela tabela ali so isso ! mas acho q entendi agr

NevilleLongbottomN
08 de janeiro de 2012 às 17:28

bem legal seu tutorial

 

vai ajudar muitas pessoas

2 semanas depois...
AlicqA
19 de janeiro de 2012 às 17:36

Não entendo muito sobre este conteúdo,mas tudo ficou muito claro e fácil.

Agradeço por estar compartilhando conosco isso tudo. :XTibia_smile:

1 mês depois...
LordfireL
08 de fevereiro de 2012 às 23:35

Curti, rep+ e aprovado.