<![CDATA[

หากเว็บไซต์ของคุณที่ทำไว้ ยังดูธรรมดา จืดชืด ไม่หรูหราอลังการ วันนี้ผมมีวิธีที่จะเพิ่มลูกเล่นและความน่าสนใจให้กับเว็บไซต์ของคุณด้วย ไดนามิค HTML (Dynamic HTML หรือ DHTML) เพื่อเพิ่มลูกเล่นต่างๆ ภายในเว็บไซต์คุณกับผู้ที่เข้ามาใช้บริการในเว็บไซต์คุณ ได้อย่างน่าอัศจรรย์.!

หากจะยกตัวอย่างการทำงานของ DHTML คุณๆ อาจจะเคยเห็นกันมาแล้วในหน้าเว็บไซต์ต่างๆ ซึ่งมีหลายรูปแบบในการทำ DHTML มาใช้ เช่น ทำเมนูในเว็บไซต์แปลกๆใหม่, ทำให้มีภาพลอยไปลอยมาในเว็บไซต์ของคุณ, ทำให้ตัวหนังสือในเว็บไซต์คุณมีลูกเล่นมากขึ้น, การทำให้เมาส์ หรือเคอร์เซอร์มีลูกเล่นแปลกๆ, การเปิดหน้าต่าง หรือปิดหน้าต่างเว็บไซต์, การป้องกันการคลิกเม้าส์ขวาในหน้าเว็บนั้นๆ เป็นต้น  นี้เป็นเพียงแค่บางส่วนของความสามารถของ DHTML ที่สามารถทำได้และเพิ่มลูกเล่นให้กับไซต์คุณ แค่นี้ก็อยากลองนำมาใส่ในเว็บคุณแล้วใช่ไหมครับ

Dynamic HTML (DHTML) คืออะไร?

เป็นเทคนิคที่ช่วยเพิ่มความสามารถให้ Browser สามารถทำการโต้ตอบการผู้ใช้งานเองได้ โดยไม่ต้องจำเป็นต้องไปขอข้อมูลจาก Web Server ทุกครั้งไป เป็นตัวเลือกที่จะให้ผู้ใช้สร้างเว็บเพจให้มีภาพเคลื่อนไหวมากขึ้นและตอบสนองผู้ใช้แบบ Interactive มากกว่าเว็บไซต์ในรูปแบบ HTML ปกติ  

ซึ่งวิธีการสร้างเป็นแบบ DHTML จะเป็นการใช้ เทคโนโลยีของ JavaScript และ Cascading Style Sheets เหล่านี้ช่วยในการกำหนดค่าต่างๆ ของความสูง ความกว้าง หรือตำแหน่งของส่วนต่างๆ ซึ่งอยู่บนเว็บเพจ หรืออาจจะเป็นการรับข้อมูล User Interface ได้ด้วย JavaScript ก็เป็นได้

 

ตัวอย่างของการทำงานของ Dynamic HTML

การทำงานของ DHTML สามารถทำได้หลายๆ อย่างมาก ซึ่งหากจะลองแบ่งความสามารถและลูกเล่นในการทำงานของ DHTML ที่สามารถใช้ในเว็บไซต์อาจจะแบ่งได้เป็น

 

  • การเพิ่มลูกเล่นให้กับเมนู หรือ เนวิเกเตอร์ในเว็บไซต์ (Menus & Navigation)

            การเพิ่มลูกเล่นในการใส่เมนูในเว็บไซต์ของคุณได้เช่น ทำให้เมนูซ่อนตัวเองไว้, มีเมนูในมุมต่างๆ ของหน้าเว็บ, เมนูลอยไปลอยมา หรือจะให้เมนูเลื่อนออกมาแบบอัตโนมัติ

  • การเลื่อนหน้าจอในเว็บไซต์ (Scrollers)

                การเปลี่ยนข้อความหรือข้อมูลโดยที่ไม่ต้องเลื่อนหน้าจอ, การทำให้ข้อความวิ่งเข้ามาแสดงที่หน้าเว็บของคุณจากด้านข้าง (ดูตื่นเต้นดี)

  • การจัดการเกี่ยวกับรูปภาพ (General Images)

การเปลี่ยนรูปภาพแบบอัตโนมัติโดยที่ไม่ต้องกด, การทำให้ภาพลอยไปลอยมา, การใส่หิมะให้ตกอยู่ในหน้าเว็บของคุณ, การทำภาพจิกซอวร์ในเว็บคุณ, การทำให้มีภาพลอยตามเมาส์ในหน้าเว็บคุณ, การย่อภาพให้เล็กลง (Thumbnail), การทำสไลด์ภาพโชว์ในเว็บ

  • การจัดการหน้าต่าง หรือเฟรม (Window and Frames)

                การทำให้หน้าต่าง Pop Up ออกมา, การแสดงหน้าจอเว็บเต็มหน้าจออย่างอัตโนมัติ,  การทำให้หน้าจอเลื่อนลงแบบอัตโนมัติ, การสร้างหน้าต่างใหม่ออกมา ในรูปแบบต่างๆ

  • การเพิ่มลูกเล่นให้กับข้อมูลเอกสารในเว็บไซต์ (Document effects)

                สร้างฝนตกในหน้าข้อมูลของคุณ, มีฟ้าผ่าในหน้าเว็บของคุณ, การทำ Drop Down เมนูในการดูข้อมูลในเว็บ, มีดวงดาววิ่งไปมาในหน้าเว็บคุณ, การสร้างแว่นขยาย เพื่อดูตัวอักษรในเว็บคุณ

  • การเพิ่มลูกเล่นให้กับเมาส์และเคอร์เซอร์ (Mouse and Cursor)

                ใส่หางให้กับเมาส์เมื่อมาวางไว้ที่หน้าเว็บคุณ, การสร้างเอฟเฟ็กให้กับเมาส์เมื่อเลื่อนไปมาที่หน้าเว็บคุณ (สนุกมากครับอันนี้)

  • การใส่วันที่, เวลา และปฏิทินในเว็บไซต์ (Date, Time and Calendar)

                การแสดงวันที่- เวลา หรือนาฬิกา ที่หน้าเว็บของคุณ, การนับถอยหลังภายในเว็บ, การแสดงปฏิทินในรูปแบบต่างๆในเว็บไซต์ของคุณ

 

จากตัวอย่างรูปแบบการทำงานของ DHTML ทั้งหมดที่ผมได้แนะนำไป คุณสามารถหามาใช้และใส่ใ
เว็บไซต์คุณได้ง่ายๆ โดยมีเว็บไซต์หลายๆเว็บที่ให้ข้อมูลเหล่านี้อยู่ ซึ่งท่านสามารถไปนำมาใช้ได้ ฟรี.! ๆ (ขอย้ำว่าฟรี.! ชักเริ่มสนใจแล้วสิ พอบอกว่าฟรี.! ) เช่น http://www.dynamicdrive.com, http://simplythebest.net/scripts/  แค่ 2 เว็บนี้คุณก็สนุกสนานและได้อะไรแปลก ๆใหม่มาใส่ในเว็บคุณมากมายเลยครับ เพราะภายในเว็บนี้จะมีโค๊ดที่คุณสามารถนำมาใช้ และสามารถดูตัวอย่าง DHTML ต่าง ๆได้ด้วยครับ

 

ใส่ DHTML มากๆ ระวังเต่าเกาะเครื่อง

            เนื่องจากการทำงานของ DHTML เป็นการงานที่เครื่องของผู้ใช้ (Client) หากคุณใส่ลูกเล่น DHTML ต่างๆ ในเว็บไซต์คุณนั้นมากจนเกินไป ก็อาจะทำให้เครื่องคอมพิวเตอร์ของผู้ใช้ช้าลงได้ โดยเฉพาะหากเครื่องคอมพิวเตอร์บางคนที่เป็นสเป็กต่ำๆ ก็อาจจะเครื่องคอมพ์นั้นอืดไปเต่าไปได้เลยเหมือนกันครับ ดังนั้นจะใส่ลูกเล่น DHTML อะไรลงไปในเว็บ ก็อย่างใส่มากจนเกินไป และก็ควรเช็กนิดนึงนะครับ เมื่อ DHTML แสดงผลแล้ว มันกินทรัพยากรของเครื่องผู้ใช้ไปแค่ไหน

 

ในการใช้ DHTML กับเว็บไซต์นั้น สามารถนำมาประยุกต์ ผสมผสาน หรือเพิ่มเติม ทำให้เพิ่มความสามารถและลูกเล่นที่ หลายเว็บไซต์อาจจะไม่เคยทำมาก่อนเลยก็ได้ แต่ทั้งนี้ และทั้งนั้นต้องขึ้นอยู่กับความคิดสร้างสรรค์ของคุณแล้วละครับที่จะนำสิ่งเหล่ามาประกอบกันเป็นผลงานชิ้นใหม่ๆ ออกมาครับ … เอ้า.!รีบไปเอา DHTML มาลองกับเว็บคุณเลยครับ รับรอง สนุกมากครับ ขอบอก.!

บทความนี้เป็นลิขสิทธิ์ของ นายภาวุธ พงษ์วิทยภานุ หากต้องการนำไปใช้ที่อื่นๆ แจ้งนิดนึงนะครับที่ pawoot@tarad.com

Pawoot P.  5/6/04

]]>