Tech &Tips

SWAP IMAGE

ขั้นตอนการทำ Swap Image

1. เตรียมรูปภาพที่ต้องการใช้ในการสร้างอย่างน้อย 2 ภาพขึ้นไป

2. สร้างไฟล์ใหม่ใน Dreamweaver

3. ทำการดึงรูปภาพเข้ามาในโปรแกรม โดยกดที่ตำแหน่ง A จากนั้นจะปรากฏหน้าไดอะล็อกบล็อก Select Image Source ตามรูปภาพด้านล่าง ให้ทำการเลือกไฟล์ภาพที่ต้องการให้เป็นภาพแรก จากนั้นกดปุ่ม OK ตามตำแหน่ง C

4. ทำการสร้างปุ่มใต้รูปภาพ โดยคลิกไปที่ Tap Manu > From > Button ซึ่งปุ่มใต้รูปภาพสามารถเปลี่ยนชื่อปุ่มได้ โดยเปลี่ยนที่ Value แล้วพิมพ์ชื่อที่ต้องการตั้งเข้าไป จากนั้นกำหนด Properties ของปุ่มแต่ละปุ่ม ให้กำหนด action เป็น reset form ตามตำแหน่ง E ตามรูปภาพด้านล่าง

5. เมื่อสร้างปุ่มจากข้อ 4. แล้ว ให้กำหนดค่าเป็น Behavior ให้แต่ละปุ่ม

6. เมื่อได้รูปภาพและปุ่มมาแล้ว ให้ทำการคลิกที่ปุ่ม จากนั้นสังเกตที่ Panel Group ทางด้านขวามือของโปรแกรม ให้เลือก Tap Behaviors (หากไม่มี Panel Group Behaviors ให้ทำการเรียกใช้งาน โดยการเลือกคำสั่ง Window จากเมนูบาร์ด้านบน แล้วเลือก Behaviors) จากนั้นคลิกที่รูปเครื่องหมายบวก ตามตำแหน่ง A แล้วเลือก Swap Image ตามรูปภาพด้านล่าง

7. เลือกรูปภาพที่จะนำมาแสดง โดยคลิกตามตำแหน่ง C > A > B ตามภาพด้านล่าง (จากรูปภาพด่านล่าง กำหนดให้รูปภาพนี้แสดงเป็นภาพแรก) เมื่อเลือกแล้วให้กด OK ในตำแหน่ง D และกำหนดรูปแบบตามขั้นตอนนี้ในปุ่มที่ต้องการ

8. Even ของแต่ละปุ่มให้กำหนดเป็น on Click

9. ทำการ save หน้าเว็บเพจให้เป็นเอกสาร .html จะได้ผลลัพธ์ที่ได้ เมื่อแสดงบนบราวเซอร์

Example: การแสดงผลบนหน้า Web

1. เมื่อกดปุ่ม ภาพที่ 1 ก็จะแสดงภาพแรกออกมา

2. เมื่อกดปุ่ม ภาพที่ 2 ก็จะแสดงภาพที่ 2 ออกมา

การแทรกไฟล์เสียง

ขั้นตอนการทำ การแทรกไฟล์เสียง

1. เปิดไฟล์ใหม่ขึ้นมา หรือเปิดไฟล์ที่ save ไว้เรียบร้อยแล้ว คลิกตำแหน่งที่ต้องการจะแทรก

2. ไปที่ Insert > Media > Plugin จะมีหน้าต่างตามรูปภาพด้านล่างปรากฏ ให้เลือกไปที่ไฟล์ที่ต้องการแทรก 

3. คลิก OK จะมีหน้าต่างดังรูปภาพด้านล่างปรากฏ 

4. เราสามารถเปลี่ยนแปลงขนาดของพื้นที่เพลง ที่จะแสดงในหน้าเว็บเพจได้

        เสียงเพลง ในเว็บเพจนั้น ถ้าไม่ใช่ไฟล์แบบ flash(flv) ตัวโปรแกรม Dreamweaver จะไม่รู้ขนาดที่ใช้ในการแสดง ทำให้ต้องกำหนดขนาดที่ต้องการให้แสดงผลเอง 

5. เมื่อเราเลือกไฟล์เพลงที่แทรก ส่วน Property inspector จะเป็นแบบตามรูปภาพด้านล่าง 

7. Plg URL ใช้กำหนดเว็บไซต์สำหรับโหลดโปรแกรม สำหรับเปิดไฟล์ที่เราแทรก จะปรากฏเมื่อเครื่องผู้ใช้ไม่สามารถเปิดไฟล์ของเราได้
8. V Space (Vertical Space) กำหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจในตำแหน่งบนและล่าง
9. H Space (Horizontal Space) กำหนดระยะห่างระหว่างไฟล์ flash กับวัตถุอื่นในเว็บเพจในตำแหน่งซ้ายและขวา
10. Border กำหนดขอบให้กับไฟล์
11. Parameters กำหนดค่าตัวแปรอื่น จะพูดถึงในบทอื่น การแสดงผลไฟล์เสียงที่เราแทรกลงไปนี้ จะแสดงผลก็ต่อเมื่อโหลดข้อมูลเสร็จเรียบร้อยแล้วเท่านั้น จะไม่มีการโหลดไฟล์พร้อมกับการเล่นไฟล์ อย่างในเว็บ YouTube ถ้าต้องการให้โหลดไปด้วยเล่นเป็นได้ต้องใช้งานในตัวเลือก Streaming ซึ่งจะต้องติดต่อกับ ผู้ดูแล server ว่าได้เปิด Streaming server ไว้หรือไม่ 

Example: ผลลัพธ์หน้าจอ

 

การนำพยากรณ์อากาศมาใส่ไว้ในเว็บ

ขั้นตอนการทำ พยากรณ์อากาศมาใส่ไว้ในเว็บ

1. เปิดไฟล์ใหม่ขึ้นมาในโปรแกรม Dreamweaver แล้วสร้างเฟรมขึ้นมา 3 เฟรม ตามตัวอย่างรูปภาพด้านล่าง (มีการนำเอาตัวเว็บของ Google Map มาใช้ในการทำ)

2. สร้าง HTML ขึ้นมาใหม่อีก 1 เพจ เพื่อจะทำการ link จากเมนูไปยัง พยากรณ์อากาศ

ขั้นตอนการนำการพยากรณ์อากาศมาใส่หน้าเว็บเพจ

1. เข้าที่เว็บไซต์ http://www.sknetcenter.tht.in/code.html 

2. ทำการ Copy โค้ดพยากรณ์อากาศทั้งหมด ดังภาพตัวอย่างด้านล่าง

3. นำโค้ดที่ได้มาวางไว้ในส่วนที่ต้องการให้แสดงผลในโปรแกรม

4. เมื่อทำหน้าเพจของพยากรณ์อากาศเสร็จแล้ว ให้กลับมาหน้าหลัก เพื่อทำการ Link ระหว่างคำว่า พยากรณ์อากาศ กับเพจ paya.html

5. ผลลัพธ์ เมื่อแสดงผลบนหน้าจอ