การทำภาพสไลด์
ขั้นตอนการทำภาพสไลด์
1.การทำภาพสไลด์ที่จะกล่าวถึงต่อไปนี้ต้องอาศัย โค้ดสองส่วนด้วยกันคือ java script ซึ่งเป็นส่วนควบการทำงานหลักของการสไลด์ภาพ และ CSS เป็นส่วนของการจัดรูปแบบในการนำเสนอภาพให้มีความสวยงามเหมาะสมตรงตามความต้องการที่ผู้จัดทำต้องการนำเสนอ
2.ก่อนที่จะลงมือทำภาพสไลด์นี้เราจะต้องมีการเตรียมความพร้อมก่อน นั้นคือ จะต้องมีการเตรียมรูปภาพที่ต้องการนำไปทำสไลด์ รูปภาพที่เราจะนำไปทำสไลด์นั้นควรมีขนาดของรูปภาพเท่ากันทุกรูป สิ่งนี้จำเป็นเพราะจะทำให้ภาพที่สไลด์ออกมานั้นมีความสวยงามสม่ำเสมอ และอีกอย่างที่จะต้องเตรียมก่อนทำภาพสไลด์นี้ก็คือ ไฟล์ ที่ควบคุมการทำงาน(Java Script) จำนวน 2 ไฟล์(jquery.js, easySlider1.7.js) และไฟล์ css 1 ไฟล์(screen.css)
3.เมื่อเตรียมสิ่งที่กล่าวมาในข้างต้นเรียบร้อยแล้ว เราก็ลงมือเขียนโค้ดได้เลย และในส่วนของการเขียนโค้ดลงไปนั้นจะมีอยู่สองส่วนด้วยกันคือ
3.1เขียนโค้ดลงไปในส่วนของ Head (<Head> ...โค้ด... </Head>) ซึ่งเป็นส่วนของการกำหนดค่าการทำงานต่างๆ โดยโค้ดที่จะต้องนำไปเขียนไว้ในส่วนนี้ก็คือ
· การ import ไฟล์ CSS เข้ามา
<link href="../css/screen.css" rel="stylesheet" type="text/css" media="screen" />
· การ import ไฟล์ java script ที่เตรียมไว้เข้ามาใช้
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript"src="../js/easySlider1.7.js"></script>
· เขียนโค้ด java script เพิ่มเติมเพื่อสั่งให้มีการทำงาน โดยพิมพ์ตามด้านล่างนี้
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true, //ภาพสไลด์เองอัตโนมัติ(True)
continuous: true,//การกำหนดให้มีการวนภาพซ้ำ(Repeat)
numeric: true//เมื่อกดตัวเลขภาพจะสไลด์ตามลำดับตัวเลขนั้น
});
});
</script>
3.2เขียนโค้ดลงไปในส่วนของ body(<body>...โค้ด...</body>)เพื่อให้แสดงผล(ให้เขียนโค้ดตรงตำแหน่งตามที่ต้องการให้แสดงผล) โค้ดดังกล่าวดูไปจากด้านล่างนี้
<div id="container">
<div id="header">//กำหนดส่วนหัวของรูป
<h1>ข้อความที่เป็นห้วข้อของรูปที่สไลด์</h1>
</div>
<div id="content">
<div id="slider">//ส่วนของภาพที่นำไปทำสไลด์
<ul>
<li><a href="#ลิงค์"><img src="รูปที่ 1(image1.jpg)" alt="คำอธิบายแทนภาพ" /></a></li>
<li><a href="#ลิงค์"><img src="รูปที่ 2(image2.jpg)" alt="คำอธิบายแทนภาพ" /></a></li>
</ul>
</div>
</div>
</div>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น