การทำภาพสไลด์
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 ที่เตรียมไว้เข้ามาใช้
การ import ไฟล์ java script ที่เตรียมไว้เข้ามาใช้
<script type="text/javascript" src="../js/jquery.js"></script>
<scripttype="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>
การใส่เพลง
1. เตรียมไฟล์เพลงที่ต้องการ นำมาวางในโฟลเดอร์เดียวกับไฟล์เว็บไซต์ หรือจะสร้างโฟลเดอร์ใหม่สำหรับเก็บเพลงก็ได้ แต่ต้องอยู่ในโฟล์เดอร์ของเว็บไซต์ ซึ่งไฟล์เพลงต้องมีนามสุกล เป็น .wav หรือ .mid หรือ .mp3 แต่นามสกุล .mp4 รู้สึกยังมีปัญหาอาจต้องแทรกแบบวิดีโอแทน
2. เรียกแสดงหน้าต่าง Behaviors ให้ปรากฎขึ้นมาโดยคลิกเมนู Windows--> Behaviors ดังภาพ
3. จะปรากฎหน้าต่างดังกล่างทางด้านขวามือ ดังภาพ ให้คลิกปุ่มเครื่องหมายบวกเพื่อเพิ่มรายการ
4. คลิกเลือ รายการ Play Sound
5. จะปรากฎหน้าต่างให้เลือกเสียง คลิกปุ่ม Browse... เพื่อเลือกเสียงที่ต้องการให้คลิก OK
6. ที่พื้นที่ออกแบบเว็บไซต์จะปรากฎสัญลักษณ์ดังภาพ และที่รายการ Behaviors จะปรากฎเหตุการณ์ Play Soundแสดงว่าได้แทรกรายการเล่นเพลงได้แล้ว ให้บันทึกงาน และดูตัวอย่างเว็บไซต์ โดยกดปุ่ม F12 เสียงเพลงจะเล่นอัตโนมัติ
7. หากต้องการตั้งค่าเกี่ยวกับการเล่น สามารถคลิกเลือกตั้งค่าได้จากปุ่ม Parameters ดังภาพ
8. จบขั้นตอนการใส่เสียงเพลงประกอบครับ
9. หากต้องการลบรายการเล่นเพลงออกจากเว็บให้คลิกรายการก่อนแล้วคลิกเครื่องหมาย ลบ ดังรูป
* หมายเหตุ ไฟล์เพลงบางนามสกุล ที่เปิดในแต่ละ Browser อาจมีการแจ้งเตือนให้ดาวน์โหลดเพลงที่เราใส่ไว้ ลงในเครื่องก่อน อันนี้แล้วแต่ว่าเครื่องไหนลงโปรแกรมดาวน์โหลดไว้หรือเปล่า บางเครื่องก็สามารถฟังได้เลยครับ
การทำไอคอน ลงในDream
ขั้นตอนการทำ
1. ขั้นแรกเราต้องมีภาพขนาด 16x16 px แนะนำให้เป็นภาพสกุล PNG นะครับเพื่อที่ภาพที่ออกมาจะได้คมครับ
2. จากนั้นทำการแปลงภาพจาก PNG เป็นไฟล์ ICON โดยเข้าผ่านเว็บไซต์นี้นะครับ จะได้ไม่ต้องไปหาโปรแกรมให้ยุ่งยากครับ แถมยังฟรีอีกด้วยครับ http://www.converticon.com/
3. จากนั้นเราจะได้ไฟล์ .ico ให้เราทำการ save ลงมายังเครื่องเราดังภาพ
4. ทำการเปลี่ยนชื่อของ icon เป็น favicon.ico เพื่อให้ Browser อ่านไฟล์ออก
5. จากนั้นทำการ upload ให้ไปที่เดียวกับเว็บไซต์ และลอง Favorites ดูนะครับก็จะได้ดังภาพ
กดปุ่มที่ Favorites จะเห็นดังภาพ
เปิดเว็บไซต์หลังจากที่ Favorites ก็จะได้ผลดังภาพ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น