Ran khaa ya
    ยินดีต้อนรับเข้าสู่เว็บการเรียนรู้ เรื่อง การเขียนเว็บเพจด้วยภาษา HTML
 
 
ytDynamic HTML


ความรู้เกี่ยวกับ DHTML | ตัวอย่างที่ 1 | ตัวอย่างที่ 2 | ตัวอย่างที่ 3

ytความรู้เกี่ยวกับ Dynamic HTML

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

DHTML ประกอบด้วยเทคโนโลยีในการสร้างเว็บเพจหลายๆตัว เช่น Javascript , VB Script , ActiveX control , Cascading Style Sheet (CSS)  โดยจุดเริ่มมาจาก Microsoft ได้เริ่มสร้างเทคโนโลยีที่ช่วยเพิ่มความสามารถในการควบคุมการแสดงผลในเว็บเพจด้วยเว็บ Browser ให้มีลูกเล่นมากขึ้น ต่อมาทางกลุ่ม W3C ได้เข้ามีส่วนในการกำหนดมาตรฐานดังกล่าว ทำให้ DHTML กลายเป็นมาตรฐานในเว็บ Browser รุ่นหลังตลอดมา

ขีดความสามารถของ DHTML 

  1. กำหนดตำแหน่งแสดงผลได้ทั้งแนวแกน x ,y ,z
  2. แสดงข้อความและภาพเคลื่อนไหวในเว็บเพจได้
  3. กำหนดให้ซ่อน หรือแสดง ข้อมูลหรือรูปภาพได้
  4. สนับสนุนการใช้ CSS ทำให้ปรับเปลี่ยนรูปแบบการแสดงผลได้ง่าย
  5. เพิ่มเอฟเฟ็กต์ หรือลูกเล่นให้เว็บเพจได้มากขึ้น
  6. สนับสนุนการเขียนโปรแกรมแบบ Event-Driven เพื่อให้การแสดงผลปรับเปลี่ยนตามเหตุการณ์ที่เกิดขึ้นในเว็บเพจ
Click to TOP

ytตัวอย่าง Dynamic HTML  :  เปลี่ยนรูปแบบการแสดงผลตามเหตุการณ์ของเมาส์

<html>
<head>
<title>Dynamic HTML เปลี่ยนรูปแบบการแสดงผลตามเหตุการณ์ของเมาส์</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<style>
H3{text-align="center";}
</style>
</head>
<body OnClick="document.bgColor='pink'" OnDblClick="document.bgColor='white'">
<H3 OnMouseOver="style.color='blue';style.fontSize='30'"
OnMouseOut="style.color='red';style.fontSize='30'" >ข้อความนี้มีลักษณะของ DHTML
<br>ถ้านำเมาส์มาวางเหนือข้อความนี้ จะเปลี่ยนสีน้ำเงิน ขนาด 30
<br>ถ้านำเมาส์มาวางออกจากข้อความนี้ จะเปลี่ยนสีแดง ขนาด 30</H3>
<H3 onMouseOver="style.color='black';style.font-style='normal';document.bgColor='white'">ข้อความปกติ</H3>
<H3>คลิกที่พื้นหลังเพื่อเปลี่ยนสีพื้นหลังเป็นสีชมพู</H3>
<H3>ดับเบิ้ลคลิกที่พื้นหลังเพื่อเปลี่ยนสีพื้นหลังเป็นสีแดง</H3>
</body>
</html>



Click to TOP


ก่อนหน้านี้
หน้าถัดไป
 
 
เว็บไซต์นี้ แสดงผลได้ดี บน Internet Explorer ความละเอียดที่ 1024 x 760 Text Size Medium
จัดทำเพื่อใช้ประกอบการเรียนการสอนผ่านระบบเครือข่ายอินเทอร์เน็ต
รายวิชา การพัฒนาเว็บเพจด้วยโปรแกรมสำเร็จรูป
โรงเรียนคูซอดประชาสรรค์ อำเภอเมือง จังหวัดศรีสะเกษ
 
SITEMAP นโยบายความเป็นส่วนตัว
นโยบายการคืนสินค้า
กฎของร้าน