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
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:
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 :
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;
}
//-->
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 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
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:
Se você não quiser usar arquivos GIF para os botões de clique Anterior e Próximo, substitua as tags acima por texto.
Etapa 8
Por fim, insira o texto descritivo a ser exibido em