Um fundo de tela cheia e ágil para o seu site

Passo 1: transferência de FTP

Baixe e descompacte o arquivo zip "supersized" que contém os arquivos de origem em: http://download.intuisphere.com/Blog/supersized.zip

Você vai encontrar uma pasta chamada "js" e que contém o plugin jQuery roteiro "supersized".Abra sua ferramenta FTP (Filezilla, Cyberduck, etc) e se conectar ao seu hospedeiro e, em seguida, navegue até a pasta onde o seu website é publicado. Dentro dessa pasta, arraste e solte a pasta "js" . Considere a atualização do servidor para obter as últimas alterações entrem em vigor.

Nota: se você nomear a pasta "js" original senão você vai mudar mais tarde o código embed para inserir em WebAcappella. Certifique-se de dar a este registro um nome simples, sem letras maiúsculas ou caracteres especiais.

Passo 2: sua imagem de fundo

Na pasta "js" no mesmo nível que o arquivo de script, coloque a imagem a ser usada como um fundo para o seu site. Claro, certifique-se de ter uma imagem em tamanho grande (2000 px de largura, por exemplo) e você vai ter o cuidado de chamá-lo de "fond.jpg".

Nota : Se você nomear sua foto caso contrário, você vai mudar mais tarde no WebAcappella código de incorporação. Escolha um nome simples de lembrar evitando nomes com acentos, caracteres especiais, ressalta, etc ...

Passo 3: Código de Integração em WebAcappella

Última etapa, você tem que colar o código de script em seu site construído com WebAcappella.Para fazer isso nos arquivos de origem disponíveis para você, abra o arquivo chamado "script.html"

• com o seu navegador de internet exibindo o código-fonte
• ou o seu editor de texto / código como bloco de notas ou Dreamweaver ...

Assim que o fundo se aplica a todo o seu site, copie e cole todo o código no "Advanced Settings" (a pequena roda dentada) disponíveis no web site "Site" Propriedades ".

Nota: o código começa com a tag <script> e termina com </ script>.

Se você mudou o nome original da pasta "js" e sua imagem "fond.jpg", não se esqueça de alterar o código embed para as seguintes linhas:

• < roteiro do tipo = "  text / javascript "  src = "  js / supersized.js  "> </ script>
• corrediças: [{Imagem: ' js / fond.jpg '}]

O processo de integração está concluída. Só vai ver os resultados por meio de testes e publicação de seu site! :-) 

Fonte: http://blogwebacappella.fr/2014/11/12/un-arriere-plan-fullscreen-et-responsive-pour-votre-site/#more-3418

Navegar por âncoras com efeito de rolagem suave

O primeiro passo é inserir uma linha de código para chamar o script "Smooth Scroll" da biblioteca jQuery:

<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </ script>

Copie e cole esta linha de código na cabeça do seu site e, especificamente, em "Configurações avançadas" de "propriedades do site".

Em seguida, você deve especificar os parâmetros de efeito Scroll animação suave colando as seguintes linhas em "Configurações avançadas", mas desta vez vá em "Propriedades da página", onde irá apresentar a sua navegação Âncoras:

<Script>
 $ (Document) .ready (function () {
 $ ('A [href * = "âncora -'] ') click (function () {// Ao clicar em um elemento.
 página var = $ (this) .attr ('href'); // Página de Destino
 var anchor = page.replace ('#', '');
 coordena var = $ ('a [name = "" + âncora + "]") offset () top ..;
 velocidade var = 750; // Duração da animação (em ms)
 $ ('Html, body') animate ({scrollTop:} coordenadas, velocidade). // Go
 return false;
 });
 });
</ Script>

O Conselho de equipa: a menos que você quiser alterar o comprimento da animação, nós aconselhamos que você não tocar o conteúdo deste código. Também deve ter cuidado para colar todo o código sem excluir nada, nem mesmo um único ponto e vírgula removido poderia amaldiçoar o script de modo geral, isso não vai funcionar! : - /

Sempre que coloca gentilmente âncoras

Você precisa perguntar a suas âncoras de HTML em locais estratégicos em sua página. Imagine um cenário: você tem a sua página inicial e que pretende apresentar a diferentes "seções" que podem ser acessados ​​a partir do menu principal do site. Exemplo:

1. Home (isso vai fazer um retorno ao topo da página)
2. Sobre (a apresentar brevemente quem você é)
3. Serviços (apresentação rápida de seus serviços)
4. Portfolio (fancybox fotos para mostrar suas realizações)
5. Contact (informações de contato)

Desde que você tem 5 seções em sua página, assim você terá em seu menu de 5 abas principais: Home, About, Serviços, Portfolio e Contact. Inevitavelmente, você vai ter que perguntar também 5 âncoras que permitem o acesso a diferentes seções.

Para ensiná-lo a pedir âncoras de HTML, nós convidamos você a ler ou reler o artigo que publicamos anteriormente neste blog, intitulado "Exposé âncoras de HTML"

Engrossar um pouco, criando o cardápio

Aqui é o passo que requer mais atenção de você (um pouco antes do café pode ser útil!): A criação do menu.

Para navegação âncoras de HTML funcionais devem menu de navegação é acessível e visível a qualquer momento pelo usuário. Que melhor do que, então, oferecer um menu que se move ao longo do deslocamento de sua página na tela do usuário!

Para criar o seu menu, você tem que inserir no topo de sua página, um elemento "Código HTML".Neste elemento "Código HTML", cole estas linhas de código:

<Div style = "position: fixed; text-align: left; height: 100%; width: 100%; 
padding-top: 20px; ">
 
<A style = "
text-decoration: nenhum ; height: 100%; width: 100%; padding-left: 50px;
font-family: ' Abrir Sans '; font-size: 14px ; font-weight: bold ; color: # 000 "
onmouseover = "this.style.color = ' # fff '";
onmouseout = "this.style.color =" # 000 ";"
href = " # anchor-home "> guia Título 1 </a>

<A style =
"Text-decoration: none; height: 100%; width: 100%; padding-left: 15px;
font-family: 'Open Sans'; font-size: 14px; font-weight: bold; color: # 000 "
onmouseover = "this.style.color = '# FFF"; " 
onmouseout = "this.style.color =" # 000 ";" 
href = "# anchor-apropos"> guia Título 2 </a>

<A style =
"Text-decoration: none; height: 100%; width: 100%; padding-left: 15px;
font-family: 'Sem 0pen'; font-size: 14px; font-weight: bold; color: # 000 "
onmouseover = "this.style.color = '# FFF"; " 
onmouseout = "this.style.color =" # 000 ";" 
href = "#-âncora serviços"> guia Título 3 </a>

<A style =
"Text-decoration: none; height: 100%; width: 100%; padding-left: 15px;
font-family: 'Sem 0pen'; font-size: 14px; font-weight: bold; color: # 000 "
onmouseover = "this.style.color = '# FFF"; " 
onmouseout = "this.style.color =" # 000 ";" 
href = "# anchor-portfolio"> guia Título 4 </a>

<A style =
"Text-decoration: none; height: 100%; width: 100%; padding-left: 15px;
font-family: 'Open Sans'; font-size: 14px; font-weight: bold; color: # 000 "
onmouseover = "this.style.color = '# FFF"; " 
onmouseout = "this.style.color =" # 000 ";" 
href = "# anchor-contact"> guia Título 5 </a>

</ Div>

Você pode alterar o seguinte:

• Text-decoration: none, Sublinhado (sublinhado), etc.
• Font-family: nome da fonte usada em seu site (Arial, Sans Abertas, etc)
• Font-size: o tamanho da fonte
• Font-weight: bold ou normal
• Cor: código hexadecimal para a cor do seu guia para o estado normal
• Onmouseover..color: código hexadecimal para a cor do seu guia para o efeito hover. Eg #FFF
• Onmouseout ... color: código hexadecimal para a cor do seu guia uma vez que o mouse sobre a aba. Ex: # 000
• href = "# anchor-casa": nome de sua âncora.
• Guia Título: Ex: Home, About, Serviços, Portfolio, Fale Conosco

Se você gostaria de remover as abas em seu menu de navegação, basta apagar o código entre a tag e </a> <a>.

O tutorial está agora completo como o seu menu é criado. Testar os resultados, se divertir para alterar a aparência do menu de acordo com as necessidades e exigências do seu próprio site. E, claro, sinta-se livre para apresentar suas realizações comentar! Bom código para você!

Fonte: http://blogwebacappella.fr/2014/12/03/tutoriel-navigation-par-ancres-avec-effet-smooth-scroll/#more-3513

Slider em largura total no Web Acappella

Antes de tudo, gostaria de convida você a participar da comunidade Web Acappella Full presente aqui mesmo neste site, a fim de fortalecer ainda mais esta comunidade que já existe a quase 3 anos. Basta se cadastrar no site, depois ativar a sua conta, clicando em um link enviado para o seu e-mail após o cadastro e começar a participar. Funciona como uma rede social comum, onde você pode postar algo em seu perfil e interagir com outros usuários, adicionando-os como amigos, mencionando-os em seus comentários, além de enviá-los mensagens.

Tem o objetivo simples de discutir ideias, compartilhar experiências que envolvem o uso do Web Acappella. Cadastre-se.

Vamos ao assunto

Andando por aí na internet, encontrei um slide super bacana e muito útil, além de excepcionalmente simples de instalar e manipular.

No fim do post irei deixar o link para download, no momento vamos à instalação do slide.

Instalar no Web Acappella

A mesma e velha maneira que usamos para colocar este tipo de plugin no Web Acappella, será aplicada mais uma vez. No pacote, você receberá 2 arquivos e uma pasta, a pasta contendo as imagens, um arquivo HTML e um arquivo jquery.

Copie a pasta e o arquivo jquery para a mesma pasta no seu servidor, onde você publicou o seu site. Abra o arquivo HTML, usando algum editor como o bloco de notas ou notepad ++.

Neste arquivo tem um código relativamente grande, mas é muito simples de separa e compreender o que se refere a o que. Primeiramente, vem o código em javascript, logo depois o CSS e por fim o HTML. Para funcionar no Web Acappella, pode copiar todo o código do jeito que está e colar na head da página no Web Acappella que quer que ele apareça.

Entendendo o código

-JavaScript

No javascript, só iremos mexer se quisermos adicionar mais imagens ao slide, não vamos aprofundar muito neste quesito. Para mudar o número de imagens, basta procurar, logo nas primeiras linhas por:

items: 3,

O número 3 indica o número de itens do slide, basta alterá-lo para o desejado. Mas não é só isso que se deve fazer para o adicionar imagens, no HTML você verá como é feito.

- CSS

Não tem muito o que alterar, mas você pode mudar a posição do slide na vertical, indicando a distância que ele ficará do topo para você poder ajustar melhor o seu menu. Na parte do CSS, procure por:

#wrapper {
height: 100%;
width: 100%;
min-height: 650px;
min-width: 900px;
padding-top: 0px;
position: absolute;
top: 0px;
}

No indicador: top, você determina o número de pixels que quer que ele se distancie do topo, para chegar mais próximo você deve diminuir o número, que no caso ficaria em números negativos, para se distanciar mais, faça o contrário. No geral é só isso que temos para alterar no CSS.

- HTML

Logo abaixo do CSS, temos o HTML que corresponde ao conteúdo do slide, onde podemos alterar as imagens e os textos do mesmo. Cada imagem com seu respectivo texto, é indicado com um bloco deste.

<div style=”background-image: url(img/iceage.jpg);”>
<div>
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest   to  reunite a human baby with his tribe.</p>
</div>
</div>

Onde temos a imagem, o título e o texto. Para mudar a imagem, basta colocá-la na pasta ‘img’ e vir no código para alterar o nome e a extensão da mesma indicada em:

img/iceage.jpg,

Bata mudar o nome a extensão da imagem, correspondente à imagem que você salvou na pasta ‘img’.

Entre as tags ‘<h4>’, está o título e entre as tags <p>, a descrição do slide.

Para adicionar mais uma imagem, duplique o bloco de código acima, repetindo os procedimentos acima. Depois cole todo código na head da página que deseja exibir o slide.

Abaixo você pode fazer o download do slide.

Download   |   Ver o slide

fonte : http://webacappellafull.com/slide-show-em-largura-total-web-acappella/

Retirar o .html das páginas no Web Acappella

Já me fizeram esta pergunta seguida vezes, se era possível retirar o .html do final das páginas para deixar a URL mais limpas e sim, é possível através de um método muito simples, mas antes vamos ver a diferença que isso pode fazer.

Para que serve?

Basicamente para deixar a URL do site mais limpa e fácil de encontrar, por exemplo, você que anunciar a sua página de contato, e ao invés de dizer para o usuário acessar seusite.com.br/contato.html ele pode simplesmente digitar seusite.com.br/contato, assim acessará mais facilmente a página.

Outra vantagem é o SEO, que pode melhorar pelo fato da URL ser mais simplista e no Web Acappella é possível você colocar URL’s mais extensas sem a necessidade do .html no final.

Como fazer

Como eu disse, o processo é bem simples e iremos utilizar uma ferramenta proveniente das novas versões do Web Acappella que é o gestor de .htaccess. Este é um documento que permite fazer vários conjuntos de regras no servidor e modificar algumas coisas.

No menu superior do Web Acappella, clique em site, depois em propriedades do website e por fim clique na penúltima opção, um ícone que é uma pena.

Clique no botão ‘editar htaccess’, abrirá uma janela com um espaço em branco, será onde você irá colar o código abaixo:

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_FILENAME}\.html -f

RewriteRule ^(.*)$ $1.html

Depois de feito isso, basta editar o nome de cada página que você deseja que automaticamente este código irá retirar o .html da URL. Você pode ver o exemplo desta função funcionando clicando no botão abaixo:

fonte : http://webacappellafull.com/retirar-o-html-das-paginas-web-acappella/

Slide Carousel para Web Acappella

Lindo Slide Carousel para Web Acappella

Um slide carousel é um conjunto de imagens na horizontal que pode servir para mostrar alguns trabalhos ou notícias ou o que seja destaque. Este que estou postando aqui hoje é um plugin muito simples que funciona a base de jquery e um bocado de HTML. É muito simples de instalar no Web Acappella e mais simples ainda de deixar da foram que você quer.