누구나 웹사이트에 휴가 사진을 올릴 수 있지만, 가장 멋진 웹 빌더만이 그 사진을 슬라이드쇼로 디자인할 수 있습니다. 그리고 이는 하나의 사진과 하나의 HTML 페이지로 구성된 단순한 슬라이드 쇼가 아니라 각 이미지가 동일한 HTML 페이지에 다운로드되는 진정한 동적 슬라이드 쇼입니다. 동적 HTML(DHTML)과 CSS(Cascading Style Sheets)를 사용하여 친구, 가족, 동료를 더욱 지루하게 만드는 개인 슬라이드 쇼를 만드는 방법을 가르쳐 드리겠습니다. 더 인상적이네요. 하지만 기억하세요! 이 슬라이드 쇼는 DHTML로 작성되었기 때문에 브라우저 버전 4.0 이상에서만 볼 수 있습니다.
물론 이런 종류의 슬라이드쇼는 매우 중요한 용도로 사용됩니다. 단지 우리가 아직 그것에 대해 생각하지 않았을 뿐입니다.
1단계
이미 웹에 있는 이미지를 모아서 같은 크기로 자릅니다. 크기 범위가 640 x 480픽셀보다 크지 않은지 확인하고 모든 사진에서 픽셀 크기를 동일하게 유지하십시오. 사진의 크기가 다양하면 보는 사람에게 시각적으로 불편할 수 있습니다.
2단계
헤더 태그에서 가장 먼저 해야 할 일은 <STYLE> 태그에서 CSS를 사용하고 있음을 나타내는 것입니다. <STYLE> 태그에는 페이지에서 슬라이드를 표시할 위치를 설정하고, 빈 배경 이미지로 시작할지, 아니면 첫 번째 슬라이드를 바로 보여줄지 결정합니다. 선택한 위치 좌표를 사용하여 다음 프로그램 코드를 잘라내어 페이지에 붙여넣으십시오.
<STYLE type="text/css"> <!-- .slides {위치:절대; 왼쪽: 25% 가시성: 숨김} --> </STYLE>
3단계
다음으로 CSS의 내용을 바로 처리하거나 헤더 태그에 JavaScript를 삽입합니다. var numSLides = 뒤에 표시할 슬라이드 수를 설정합니다(각 사진이 페이지에 상당한 양의 KB를 추가하므로 너무 많이 설정하지 마십시오). 이 예에는 5장의 사진이 있습니다. 다음은 프로그램 코드입니다.
<SCRIPT 언어="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
4단계
이미지에 대한 설명 텍스트를 추가하려면 다음 프로그램 코드를 사용하여 설명 텍스트를 원하는 설명 텍스트로 바꿀 수 있습니다.
var captionTxt = new Array(numSlides)
function setUpCaptions() {
captionTxt[1] = "피어 39 입구."
captionTxt[2] = "바다사자가 부두 근처를 돌아다닙니다."
captionTxt[3] = "배가 부두에 정박했습니다."
captionTxt[4] = "수중 세계 고래 벽화."
captionTxt[5] = "바다에 있는 작은 섬이나 바위입니다."
}
5단계
여기에 표시된 프로그램 코드를 웹페이지 HTML 파일의 JavaScript 설명 아래에 붙여넣습니다. Navigator 4.0과 IE 4.0은 CSS를 다르게 해석하기 때문에 우리 스크립트는 객체 감지를 사용하여 렌더링 모드를 결정합니다. 제시된 모드가 Navigator인 경우 IE 프로그램 코드가 계속 작동하도록 일부 특정 개체를 정의할 수 있습니다. 또한 이는 전체 프로그램 코드의 끝이기도 하므로 </SCRIPT> 태그로 끝나야 합니다.
함수 설정() {
if (!document.all) {
document.all = 문서;
for (i=1;i<=numSlides;i++) document.all[("image"+i)].
style=document.all[("image"+i)];
}
스위치슬라이드(1);
}
기능 스위치슬라이드(sDir) {
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("이미지"+currentSlide)].
style.visibility="숨김";
// 설명 텍스트를 원하지 않으면 다음 줄을 제거하세요.
document.all["captions"].document.forCaptions.captionsText.
값=captionTxt[newSlide];
currentSlide = newSlide;
}
//-->
</script>
프로그램 코드 끝 부분에 있는 주석에 주의하세요. 설명이 없으면 그 아래 줄을 제거하세요.
6단계
</HEAD>로 헤더 태그를 닫은 후, 웹 페이지 HTML 파일의 본문 부분에 다음 프로그램 코드를 붙여넣습니다. 프로그램 코드는 일반 <IMG src> 형식과 연결된 별도의 <DIV> 태그로 각 이미지를 식별합니다.
<BODY onLoad="setUp()">
<B> 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>
7단계
청중은 자신의 속도에 맞춰 슬라이드를 클릭해야 하므로 클릭할 만한 내용을 제공해야 합니다. . 평범하고 오래된 하이퍼링크를 사용할 수 있지만 특별한 이전 및 다음 GIF 클릭 버튼을 사용하면 훨씬 더 정교해집니다. 샘플 프로그램 코드는 테이블을 사용하여 next.gif와 이전.gif를 연결합니다.
<DIV 스타일="위치:절대; 상단:350px; 왼쪽: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>
이전 및 다음 클릭 버튼에 GIF 파일을 사용하지 않으려면 위의 <IMG> 태그를 텍스트로 바꾸세요.
8단계
마지막으로 <TEXTAREA>에 표시할 설명 텍스트를 입력합니다. 원하는 대로 <TEXTAREA>의 크기를 결정할 수 있습니다. 행= 및 열= 숫자만 변경하면 됩니다. 다음은 프로그램 코드입니다.
<DIV id="captions" 스타일="위치:절대; 왼쪽: 320px; 상단:75px">
<B>사진 캡션</B>
<양식 이름=forCaptions>
<TEXTAREA name="captionsText" Wrap="virtual" 행=25 cols=20"></TEXTAREA>
</FORM>
</DIV>