SSGames - Servidores online de qualidade - Inscreva-se Ja! é entre para nossa comunidade! - Ouça nossa web radio -Veja nossas novidades - Participe dos nossos setores de jogos online - Parcerias aberta fale já com um administrador.

[HTML] Criando um site para seu jogo #2 - Menu de navegação

Compartilhe
avatar
Renanr_Script
--> Postador Iniciante
--> Postador Iniciante

Mensagens : 5
Moedas : 1951
Data de inscrição : 29/09/2013

[HTML] Criando um site para seu jogo #2 - Menu de navegação

Mensagem por Renanr_Script em Dom 29 Set 2013 - 17:59

Antes de começar, confirme ter lido:
A parte #1 do tutorial

AUTORIA MINHA- Renanr_Script

Nessa parte iremos aprender a criar uma navbar;

Vamos lá.
Vamos precisar das imagens do menu, eu criei umas básicas no paint e salvei na pasta Imagens, na ordem menu1.png, menu2.png, menu3.png, e menu4.png

Tá, vamos olhar o nosso código.
Código:
<html>
   <head><title>Meu Jogo</title>

   </head>

   <body background="Imagens\bg.png">

<span style="margin-left: 285px;">
<img src="Imagens/banner.gif" style="margin-top: 50px;">
</span>

   </body>

</html
Ok, abaixo do código da banner, iremos colocar a tag a href:
Código:
<a href="index.html"> </a>
Esse código nos redireciona à algum link. No caso do index.html, iremos ser redirecionados à página principal do site.
Se quisermos por pra sermos redirecionados a algum link de site da internet, usaremos o código substituindo o index.html pelo link do site, mas deve conter no início da url o "http://" , exemplo:
Código:
<a href="http://www.siteparceiro.com"> </a>
Ok.
Já adicionamos uma tag de a href que nos redireciona a pagina principal, mas no meio da tag deve conter o texto ou imagem de exibição, que é onde vamos clicar pra sermos redirecionados. Portanto, usaremos a tag img para uma imagem de menu. Logo, nosso código ficará assim:
Código:
<a href="index.html"><img src="Imagens/menu1.png"></a>
Vamos ver o resultado.
Parece que deu certo, porém a imagem se encontra num lugar inadequado.. então vamos usar a tag center para centralizar, logo o código fica assim:
Código:
<center><a href="index.html"><img src="Imagens/menu1.png"></a>
Sim, não fechamos a tag center, pois ainda falta o resto do menu, que também deve ficar centralizado.
O que faremos agora é adicionar o resto dos menus, iremos copiar o seguinte código:
Código:
<a href="index.html"><img src="Imagens/menu1.png"></a>
E colar do lado desse mesmo código. Alterando os campos "index.html" para o redirecionamento, no meu caso coloquei o link de um fórum. E o campo menu1.png mudamos para menu2.png Logo, meu código ficou:
Código:
<center><a href="index.html"><img src="Imagens/menu1.png"></a><a href="http://www.seuforum.com"><img src="Imagens/menu2.png"></a>
Show, agora vou criar mais um menu, esse será para uma nova página do site: contato(não vou cria-la ainda, só vou por no menu), logo meu código ficou:
Código:
<center><a href="index.html"><img src="Imagens/menu1.png"></a><a href="http://www.seuforum.com"><img src="Imagens/menu2.png"></a><a href="contato.html"><img src="Imagens/menu3.png"></a>
Tá, agora vamos fechar a tag center:
Código:
<center><a href="index.html"><img src="Imagens/menu1.png"></a><a href="http://www.seuforum.com"><img src="Imagens/menu2.png"></a><a href="contato.html"><img src="Imagens/menu3.png"></a></center>
Resultado do código:
Código:
<html>
   <head><title>Meu Jogo</title>

   </head>

   <body background="Imagens/bg.png">


<span style="margin-left: 285px;">
<img src="Imagens/banner.gif" style="margin-top: 50px;">
</span>

<center><a href="index.html"><img src="Imagens/menu1.png"></a><a href="http://www.seuforum.com"><img src="Imagens/menu2.png"></a><a href="contato.html"><img src="Imagens/menu3.png"></a></center>

   </body>

</html>
Resultado:
https://i.imgur.com/ZFVJDk8.png
É pode ter ficado feinho mas isso é questão do designer (fiz o menu no paint rapidinho), estou ensinando a programação, que está ok. Pra ficar mais bonito coloque bem mais menus, pra ficar mais pro tamanho da banner, rs.
Ao clicarmos em Inicio, vamos a pagina principal, ao clicarmos em Fórum, vamos ao site do forum, e em Contato vamos a pagina de contato, porém esta não foi criada então dará erro (mostrarei a criação em uma outra parte do tutorial)
avatar
Weslley_Script
SS - Fundador
SS - Fundador

Steam Steam : WeslleySSGames
Zello : WeslleySSGames
Mensagens : 7267
Moedas : 1018838
Data de inscrição : 06/10/2011
Idade : 23
Localização : Brasil

Re: [HTML] Criando um site para seu jogo #2 - Menu de navegação

Mensagem por Weslley_Script em Dom 29 Set 2013 - 18:34

Renanr faz isso com o resutado dando o forum da SSGames ^^

    Data/hora atual: Seg 21 Jan 2019 - 2:30

    Copyright © SSGamers 2011/2018 - DIREITOS RESERVADOS PARA COMUNIDADE SSGAMERS S.A.