Qualquer um pode colocar fotos das férias em seu site, mas apenas os construtores de sites mais legais irão projetá-las como uma apresentação de slides. E não é uma simples apresentação de slides com uma foto e uma página HTML, mas uma apresentação de slides verdadeiramente dinâmica, com cada imagem baixada na mesma página HTML. Ensinaremos você a usar HTML Dinâmico (DHTML) e Folhas de Estilo em Cascata (CSS) para criar sua própria apresentação de slides pessoal que deixará seus amigos, familiares e colegas mais chatos, ah, não! É mais impressionante. Mas lembre-se! Como esta apresentação de slides está escrita em DHTML, ela só pode ser visualizada em navegadores versões 4.0 ou superiores.
Claro, esse tipo de apresentação de slides tem utilidades sérias. É que ainda não pensamos nisso.
primeiro passo
Colete as imagens que você já possui na web e corte-as no mesmo tamanho. Certifique-se de que o intervalo de tamanho não seja maior que 640 x 480 pixels e mantenha as dimensões dos pixels iguais em todas as fotos - será visualmente chocante para o visualizador se as fotos tiverem tamanhos variados.
Etapa 2
Na sua tag de cabeçalho, a primeira coisa que você precisa fazer é indicar que está usando CSS na tag <STYLE>. Na tag <STYLE>, defina a posição na página onde deseja que o slide apareça e decida se deseja começar com uma imagem de fundo em branco ou mostrar o primeiro slide diretamente. Recorte e cole o seguinte código do programa em sua página, usando as coordenadas de localização de sua escolha:
<STYLE type="text/css"> <!-- .slides {posição:absolute; esquerda: 25%; visibilidade:oculto} --> </STYLE>
Etapa 3
Em seguida, trate dos detalhes do CSS imediatamente ou insira JavaScript na tag de cabeçalho. Após var numSLides =, defina o número de slides a serem exibidos (não defina muitos, pois cada foto adicionará um número considerável de KB à página). Existem cinco fotos em nosso exemplo. A seguir está o código do programa:
<linguagem SCRIPT="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
Etapa 4
Se quiser adicionar um texto explicativo à imagem, você pode usar o seguinte código de programa para substituir nosso texto de descrição pelo seu próprio texto de descrição:
var captionTxt = new Array(numSlides);
função setUpCaptions() {
captionTxt[1] = "Entrada do Píer 39."
captionTxt[2] = "Leões marinhos vagam perto do cais."
captionTxt[3] = "O barco atracou no cais."
captionTxt[4] = "Mural subaquático de baleias."
captionTxt[5] = "Ilhotas ou rochas no mar."
}
Etapa 5
Cole o código do programa mostrado aqui no arquivo HTML da sua página web, abaixo da descrição do JavaScript. Como o Navigator 4.0 e o IE 4.0 interpretam CSS de maneira diferente, nosso script usa a detecção de objetos para determinar o modo de renderização. Se o modo apresentado for Navigator, ele ainda pode definir alguns objetos específicos para que o código do programa IE ainda funcione. Além disso, este também é o fim de todo o código do programa, portanto deve terminar com a tag </SCRIPT>:
função configurar() {
if (!document.all) {
documento.todos = documento;
para (i=1;i<=numSlides;i++) document.all[("imagem"+i)].
estilo=document.all[("imagem"+i)];
}
switchSlide(1);
}
função switchSlide(sDir) {
novoSlide = slideAtual + sDir;
if (!newSlide) newSlide=numSlides;
if (novoSlide > numSlides) novoSlide=1;
document.all[("imagem"+newSlide)].style.visibility="visible";
document.all[("imagem"+ slide atual)].
style.visibility="oculto";
// Se você não quiser texto de descrição, remova a próxima linha:
document.all["captions"].document.forCaptions.captionsText.
valor=captionTxt[novoSlide];
slideAtual = novoSlide;
}
//-->
</script>
Preste atenção aos comentários próximos ao final do código do programa: se não tiver uma descrição, remova a linha abaixo dela.
Etapa 6
Feche a tag de cabeçalho com </HEAD> e cole o seguinte código de programa na parte do corpo do arquivo HTML da página da web. Observe que o código do programa identifica cada imagem com uma tag <DIV> separada, que está associada ao formato <IMG src> regular:
<BODY onLoad="setUp()">
<B> Apresentação de slides do Builder.com!</B>
<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>
<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>
Etapa 7
Seu público precisa clicar nos slides em seu próprio ritmo, então você deve fornecer a eles algo em que clicar. . Você pode usar hiperlinks simples e antigos, mas é muito mais sofisticado com botões especiais de clique Anterior e Próximo GIF. O código do programa de exemplo usa uma tabela para conectar next.gif e previous.gif:
<DIV style="posição:absoluta; topo:350px; esquerda:100px">
<A href="javascript:switchSlide(-1)"><IMG src="previous.gif" border=0></A>
<A href="javascript:switchSlide(1)"><IMG src="next.gif" border=0></A>
</DIV>
Se você não quiser usar arquivos GIF para os botões de clique Anterior e Próximo, substitua as tags <IMG> acima por texto.
Etapa 8
Por fim, insira o texto descritivo a ser exibido em <TEXTAREA>. Você pode decidir o tamanho de <TEXTAREA> como quiser, basta alterar os números rows= e cols=. A seguir está o código do programa:
<DIV id="captions" style="posição:absolute; esquerda: 320px; topo:75px">
<B>Legenda da imagem</B>
<nome do FORM=forCaptions>
<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>
</FORM>
</DIV>