31/08/2018

Rodapé fixo na base do site




TEMA: Códigos | Rodapé
ARTIGO: Atualizado em 30/08/2018
VERSÃO: WA RC  |  WA 4

Olá galera do bem!! Vamos postar hoje uma gambiarra que funciona..hehehe

Hoje vou passar um truque que é muito útil para quem quer por  "Um rodapé fixo na base do site.". Este rodapé fica fixo enquanto o site rola por baixo dele.


Já vou falar um inconveniente que deve-se presta atenção:

Não crie botões redirecionando para  uma página na internet ou do próprio projeto, pois irá carregar dentro do rodapé; a não ser que defina para abri em uma nova guia.



Mãos a obra:

NO WEBACAPPELLA 4

O primeiro passo é se criar uma "página" no Webacappella com a mesma largura usada nas outras páginas. Dê um nome para essa página de rodape por exemplo. No caso deste post estamos mostrando somente para a versão desketop do site. Para quem está usando o WA4 criando sites nas versões desktop, tablet e celular terá que criar a página rodapé para cada versão. (Para saber mais sobre várias versões do site usando WA4 clique aqui)




Lembre-se de usar a mesma largura das outras páginas do seu projeto. No caso do exemplo 1024px. e a altura desejada de acordo com o tamanho do rodapé. Caso seu rodapé for ter menos de 100px, não se preocupe, configure com 100px pois o WebAcappella 4  não permite que seja menor do que isso.
Mas logo em frente vamos contornar esta situação.

Configure também a cor do fundo que você deseja para seu rodapé definindo a cor do plano de fundo da página.

No caso eu configure a cor preta de código #000000 no exemplo.



Dê um nome para sua página no browser. No caso do exemplo será rodape.html, marque para ignorar a página nos mecanismos de busca.




Agora preste atenção, se seu rodapé for ter a altura menor que 100px, Coloque uma marca na altura que você vai utilizar. Neste exemplo o meu rodapé vai ter 50px de altura. Veja na imagem abaixo como fiz a marcação:




Portanto se meu rodapé terá 50px de altura eu só vou trabalhar na parte superior da linha.

Fiz um exemplo de como editei meu rodapé bem simples para terem uma ideia, veja abaixo:





Agora copiem o código abaixo e cole no head das propriedades da página do seu rodapé.

<body style="overflow-y: hidden;overflow-x: hidden;">



Clique em OK


Agora vamos utilizar o seguinte código para configurar nosso rodapé. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

#rodape /*rodapé do sistema */

{



background-color: códigocor;

width:100%;

text-align: center;

position:fixed;

bottom:0px;

left:0px;

}

</style>



<form id="form1" runat="server">

<div id="rodape">

<html>

<iframe src="urlrodape" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="altura" width="largura" allowfullscreen></iframe>

</html>


</div>






Você vai alterar somente os trechos de vermelho no código da seguinte maneira:

códigocor : Utilize o mesmo código da cor utilizada para o fundo da sua página definida como rodapé. No case deste exemplo foi #000000
largura: Utilize o mesmo valor que usou para largura da sua página rodapé. No caso do exemplo foi 1024

altura: Agora você vai usar o valor que você deseja para altura do rodapé, NÃO é o valor configurado para altura da sua página no caso do seu rodapé for menor que 100px. No caso deste exemplo é 50px.

urlrodape: Substitua pela url da página do seu rodapé (Ex: http://www.seudominio.com.br/rodape.html -> se a página se chamar rodape)


O código do exemplo ficou assim:


<style type="text/css">
#rodape /*rodapé do sistema */
{
background-color: #000000;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe src="http://www.webacappellashow.com.br/wasevents/wa4/rodape.html" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="50px" width="100%" allowfullscreen></iframe>
</html>
</div>


Agora crie uma matriz, pode nomear como "rodapé" para facilitar depois. E lá você usa a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código.



Agora nas páginas que deseja utilizar o rodapé fixo basta ir nas propriedades e Escolher o rodapé  que criou como matriz.




Clique abaixo para ver um exemplo on line:




NO WEBACAPPELLA RC (WA5 - RESPONSIVE)

O primeiro passo é se criar uma "página" no Webacappella . Dê um nome para essa página de rodape por exemplo.






Configure também a cor do fundo que você deseja para seu rodapé definindo a cor do plano de fundo da página.

No caso eu configure a cor preta de código #000000 no exemplo.





Dê um nome para sua página no browser. No caso do exemplo será rodape.html, marque para ignorar a página nos mecanismos de busca.





Agora copiem o código abaixo e cole no head das propriedades da página do seu rodapé.

<body style="overflow-y: hidden;overflow-x: hidden;">




Agora vamos utilizar o seguinte código para configurar nosso rodapé. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">
#rodape /*rodapé do sistema */

{
background-color: códigocor;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe src="urlrodape" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="altura" width="100%" allowfullscreen></iframe>
</html>
</div>



Você vai alterar somente os trechos de vermelho no código da seguinte maneira:

códigocor : Utilize o mesmo código da cor utilizada para o fundo da sua página definida como rodapé. No case deste exemplo foi #000000


altura: Agora você vai usar o valor que você deseja para altura do rodapé,  Já no WARC você terá que ir ajustando o valor da altura ao publicar o site. Tipo, você ajusta, publica e ve se ficou bom, e assim por diante.

urlrodape: Substitua pela url da página do seu rodapé (Ex: http://www.seudominio.com.br/rodape.html -> se a página se chamar rodape)





O código do exemplo ficou assim:


<style type="text/css">
#rodape /*rodapé do sistema */
{
background-color: #000000;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe src="http://www.webacappellashow.com.br/wasevents/warc/rodape.html" style="border:0px #000000 hidden;" name="rodape" scrolling="no" frameborder="0" height="50" width="100%" allowfullscreen></iframe>
</html>
</div>


Agora crie uma subpage, pode nomear como "rodapé" para facilitar depois. E lá você usa a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código.



Agora nas páginas que deseja utilizar o rodapé fixo basta inserir um box no fim da página e adicionar uma subpage que obviamente será a que você fez para o rodapé.



Maravilha. agora só publicar.


Clique abaixo para ver um exemplo on line:





Um comentário:

Olá pessoas do bem!!! Se gostou do post deixa um comentário. Os comentários é bom para aumentar a estima de quem ta postando. Valeu.

Related Posts Plugin for WordPress, Blogger...