Como exportar e usar o seu slide HTML

Você pode querer exportar o seu slide no formato HTML, para coloca-lo num website baseado em HTML, ou em outro CMS que não o Wordpress. O HTML criado pelo cssSlider pode ser usado em qualquer CMS, que permite que você edite o código HTML diretamente.

Quando terminar o seu slide,adicionando todas as imagens pretendidas, alterar a skin e os efeitos de transição, títulos e legendas, pode exportar o seu código HTML da seguinte maneira:

Clique no botão “Save HTML/Guardar HTML” no topo da barra de navegação.

Escolha a pasta onde deseja guarder o seu HTML e clique em “save”.

Usando o HTML

O HTML principal poderá ser encontrado num ficheiro com o nome de “cssslider.html”. Isto contém uma página completa de HTML, pronta a ser mostrada no seu navegador, sem ser necessário fazer qualquer modificação ou edição.

Você pode usar esta página como uma base simples de uma página de websites, adicionando conteúdo, como cabeçalhos, cópias e links.

Contudo, o cenário mais provável é que você deseje copiar o cssSlider, para uma página que já tem.

Se desejar copier o slider, para um HTML já existente, tem que se certificar que copia tudo que esta entre:

<!-- Start cssSlider.com -->

E:

<!-- End cssSlider.com -->

Você deve colar o código no local correto, para o slider, no seu código HTML, por exemplo para header div. Lembre-se que esse slider é completamente responsivo, por isso ele ficar numa forma em que se adapte ao espaço de cada ecrã.

Soluções de Problemas em HTML

Se, após copiar o HTML tiver alguns problemas, por favor verifique as próximas secções:

<link rel="stylesheet" href="engine1/style.css">
<!--[if IE]><link rel="stylesheet" href="engine1/ie.css"><![endif]-->
<!--[if lte IE 9]><script type="text/javascript" src="engine1/ie.js"></script><![endif]-->

Os links das urls para as stylesheets ficam numa pasta separada de nome engine/motor(ID do seu slide). Se mudar o nome desta pasta ou move-la para uma localização diferente dentro dos sistemas de arquivos, você vai precisar de atualizar os links apropriadamente.

<div class="img"><img src="data1/images/istock_000000654343xsmall.jpg" style="width: 100%;"></div>

Estes links dão acesso as imagens do slideshoe, e de novo estas imagens, ficam numa pasta separada de nome data(ID do seu slider). De novo, se você renomear ou mudar a localização,você deve atualizar estes links. Nós recomendámos, que mantenha todas as imagens do slideshow numa pasta separada, para serem mais fáceis de encontrar/usar.

<div class="img"><img src='data1/tooltips/istock_000000654343xsmall.jpg' alt='iStock_000000654343XSmall' title='iStock_000000654343XSmall' /></div>

Na mesma pasta “data”(ID do seu slider), encontra-se um segunda sub-pasta, para as imagens de pré-visualização. Se você incluiu pontos de navegação, com pré-visualizações, este é o local onde ficam esses thumbnails/pré-visualizações. De novo, caso queira mover ou modificar o nome desta pasta, não se esuqeça de mudar os links.