วิธีรวบรวมหน้าเว็บโดยใช้ DHTML

1 บทนำ

ด้วยความนิยมและการพัฒนาอย่างต่อเนื่องของอินเทอร์เน็ต/อินทราเน็ต บริษัท องค์กร และบุคคลจำนวนมากขึ้นเรื่อยๆ เริ่มสร้างเว็บไซต์ของตนเอง เขียนเว็บเพจ และเผยแพร่ข้อมูลสู่โลกภายนอกในรูปแบบใหม่เพื่อให้ผู้คนสามารถเรียกดูได้ . การอ่านและการประยุกต์ใช้ ดังนั้นการผลิตหน้าเว็บจึงได้รับความสนใจจากผู้เชี่ยวชาญมากขึ้นเรื่อยๆ
เว็บเพจหมายถึงไฟล์เอกสารบางไฟล์ที่ให้ข้อมูลแก่โลกผ่านทางอินเทอร์เน็ต รวมถึงข้อมูลส่วนบุคคล ธุรกิจ ความบันเทิง และเนื้อหาอื่นๆ เว็บเพจเขียนโดยใช้ HyperText Markup Language (HTML) และจัดเก็บไว้ในเว็บเซิร์ฟเวอร์บนอินเทอร์เน็ต/อินทราเน็ตเพื่อให้ผู้เยี่ยมชมอ่านโดยใช้เบราว์เซอร์ เว็บเพจที่เขียนด้วยภาษา HTML เรียกอีกอย่างว่าไฮเปอร์เท็กซ์ กล่าวคือ เว็บเพจประกอบด้วยข้อมูลมัลติมีเดีย เช่น ข้อความ กราฟิก เสียง รูปภาพ และไฮเปอร์ลิงก์ (HyperLink)

2 DHTML Simple

ฉันสามารถเข้าถึงหน้าเว็บจำนวนมากที่เขียนด้วย HTML และภาษาสคริปต์ในเบราว์เซอร์ เพื่ออำนวยความสะดวกในการสืบค้น ผู้ผลิตคอมพิวเตอร์หลายรายจึงได้เปิดตัวเบราว์เซอร์ของตนเอง เบราว์เซอร์เหล่านี้ยังไม่มีมาตรฐานเดียวกันในการรองรับ HTML ซึ่งเห็นได้ชัดว่าไม่เอื้อต่อการพัฒนาอินเทอร์เน็ต ดังนั้น World Wide Web Consortium (W3C) จึงได้พัฒนา Document Object Model (DOM) ซึ่งเป็นข้อกำหนดที่ไม่ขึ้นอยู่กับแพลตฟอร์มและภาษา
DOM รวม HTML, CSS (สไตล์ชีตแบบเรียงซ้อน) และภาษาสคริปต์เพื่อสร้างแบบจำลองการทำงานร่วมกันที่บุคคลหนึ่งคนขึ้นไปสามารถนำมาใช้ได้ ทั้ง Netscape และ Microsoft ได้ให้คำแนะนำแก่ W3C เพื่อนำ DOM ไปใช้: ใช้ HTML แบบไดนามิก นั่นคือ DHTML (Dynamic HTML) เพื่อแก้ไขปัญหา
DHTML เป็นคำทั่วไปสำหรับฟังก์ชันใหม่หลายอย่างที่ได้รับการขยายออกไปโดยยังคงรักษาความเข้ากันได้กับ HTML ที่มีอยู่ คุณสมบัติใหม่เหล่านี้ส่วนใหญ่อ้างถึงคุณสมบัติไดนามิก คุณสมบัติการวางตำแหน่ง และความสามารถในการใช้ CSS
มีเหตุผลสองประการในการใช้ DHTML: ประการแรก DHTML แบ่งแต่ละองค์ประกอบบนหน้าเว็บออกเป็นออบเจ็กต์อิสระจำนวนมาก และคุณสมบัติของออบเจ็กต์เหล่านี้จะถูกระบุผ่าน CSS ประการที่สอง DHTML จะเปิดแต่ละออบเจ็กต์ไปยังเฟรมเวิร์กภาษาการเขียนโปรแกรมและสคริปต์ ภาษาการเขียนโปรแกรม C++ สามารถใช้เพื่อจัดการออบเจ็กต์บนหน้าเว็บได้ และสคริปต์ Java และ VBscript ยังสามารถใช้เพื่อจัดการออบเจ็กต์บนหน้าเว็บได้ด้วย ซึ่งหมายความว่าเว็บเพจและทุกสิ่งบนนั้นสามารถตั้งโปรแกรมได้ ซึ่งนำความสามารถใหม่ๆ มาสู่เว็บเพจ เราจะพบความแตกต่างเมื่อเรารันแอปพลิเคชัน: เมื่อเราเคยรันโปรแกรมบนเว็บ เราต้องรอให้หน้าเว็บดาวน์โหลดใหม่ทุกครั้งหลังจากองค์ประกอบเดียว หากเว็บเพจมีจำนวนมาก ของวัตถุที่ซ่อนอยู่ มันจะใช้เวลาเต็มหน้าจอด้วยซ้ำ หน้าใหม่จะเข้าสู่กระบวนการเข้าถึงเซิร์ฟเวอร์อีกครั้ง ด้วย DHTML คุณสามารถคลิกรูปภาพที่ด้านบนของหน้าจอเพื่อสร้างย่อหน้าที่ด้านล่างของ เปลี่ยนหน้าจอทันทีโดยไม่ต้องเข้าเซิร์ฟเวอร์อีกครั้ง ตารางทั้งหมดจะกลายเป็นฐานข้อมูลสด และผู้ใช้สามารถกรองข้อมูลแบบไดนามิกและจัดเรียงได้ ซึ่งจะช่วยลดจำนวนคำขอไปยังเซิร์ฟเวอร์ ซึ่งจะช่วยลดภาระบนเซิร์ฟเวอร์และปรับปรุงประสิทธิภาพไคลเอ็นต์และเซิร์ฟเวอร์โดยรวม

3 การใช้สไตล์ชีต CSS

พื้นฐานของ DHTML คือ Cascading Style Sheets (Cascading Style Sheets) สไตล์หมายถึงชุดของคุณลักษณะการแสดงผลและการวางตำแหน่งที่กำหนดโดยผู้เขียนเว็บเพจ คุณสมบัติที่ใหญ่ที่สุดของ CSS คือการออกแบบเว็บเชิงวัตถุ กล่าวคือ ทุกหน้า ทุกย่อหน้า ทุกรูปภาพและตารางถือเป็นวัตถุ จากนั้นประกาศแต่ละอินสแตนซ์ของวัตถุนั้น แต่ละอินสแตนซ์มีสไตล์ ซึ่งเป็นชุดของแอตทริบิวต์หรือคำแนะนำในการแสดงผล ตราบใดที่มีการประกาศเพียงครั้งเดียว คุณสมบัติเหล่านี้จะถูกใช้ทั่วทั้งหน้าเว็บหรือแม้แต่ทั้งไซต์ แต่ละสไตล์สามารถตั้งชื่อได้ เช่น H1, Li หากชื่อของสไตล์เหมือนกับชื่อขององค์ประกอบ DHTML ที่ถูกต้อง (หรือแท็ก) สไตล์นั้นจะนำไปใช้กับทุกอินสแตนซ์ขององค์ประกอบโดยอัตโนมัติหากกำหนด หากตั้งชื่อสไตล์โดยไม่มีแท็ก DHTML ที่เกี่ยวข้อง จะต้องนำสไตล์นั้นไปใช้ด้วยตนเองในตำแหน่งที่คุณต้องการให้ปรากฏ
3.1 กำหนดและใช้สไตล์พื้นฐาน มีสองสไตล์ในส่วนของโปรแกรมต่อไปนี้: H1 และรายการโปรด H1 เป็นองค์ประกอบ DHTML ที่ถูกต้อง ส่วนที่ทำเครื่องหมายโดย 〈H1〉〈／H1〉 ในโปรแกรมจะสืบทอดคุณลักษณะทั้งหมดของสไตล์ H1 ; Favorite เป็นองค์ประกอบที่ไม่ใช่ DHTML เมื่อกำหนดคุณจะต้องเพิ่มจุดไว้ด้านหน้า เมื่ออ้างอิง คุณต้องใช้ เพื่อประกาศส่วนที่ทำเครื่องหมายด้วย /favor> จะสืบทอดความโปรดปรานของสไตล์ทั้งหมด
〈HTML〉
〈HEAD〉〈TITLE〉ทดสอบ〈／TITLE〉
〈ประเภทสไตล์=”ข้อความ／css〉
-
H1{แบบอักษร:ปกติ;
แบบอักษรน้ำหนัก: ตัวหนา;
สี: สีเขียว;
line-height:20pt} ／กำหนดสไตล์ H1／
.favor{font-style:ปกติ;
ขนาดตัวอักษร:15pt;
ภาพพื้นหลัง: url (back.imag.gif);
textalign:center} ／กำหนดสไตล์ที่ชื่นชอบ／
-


〈H1〉นี่คือการทดสอบ!〈／H1〉／รูปแบบการใช้งาน H1／
〈P CLASS=”favor”〉คุณชอบสิ่งนี้ไหม〈／P〉／ใช้สไตล์ที่โปรดปราน／

3.2 การใช้สไตล์ภายนอก สไตล์ชีตสามารถเก็บไว้ในไฟล์ภายนอกได้ การเชื่อมต่อระหว่างไฟล์นี้และเพจสามารถทำได้ผ่านการนำเข้าหรือลิงก์ ตัวอย่างเช่น สไตล์ชีตถูกจัดเก็บไว้ในไฟล์ mysite.css คุณสามารถแทรกโค้ดต่อไปนี้ลงในเอกสารเพื่อเรียกสไตล์ชีตภายนอก:
〈LINK REL=สไตล์ชีต
HREF=”mysite.css”
ประเภท =”ข้อความ／css”
Title=”Test Style”〉

4 ตระหนักถึงฟังก์ชันโต้ตอบ

CSS เองไม่มีฟังก์ชันโต้ตอบ จำเป็นต้องรวมวัตถุที่กำหนดโดย CSS เข้ากับโมเดลเอกสาร (DOM) และแปลงเอกสารเว็บเป็นเอกสาร DHTML DOM จัดเตรียมวิธีสำหรับภาษาสคริปต์ในการเข้าถึงองค์ประกอบบนเพจ โมเดลออบเจ็กต์ที่ Microsoft และ Netscape รองรับนั้นค่อนข้างแตกต่างกัน
ในโมเดลของ Microsoft ภาษาสคริปต์สามารถเข้าถึงองค์ประกอบทั้งหมดบนหน้า HTML และองค์ประกอบทั้งหมดจะสะท้อนให้เห็นเป็นวัตถุใน document.all ข้อมูลโค้ดของโปรแกรมต่อไปนี้ใช้เพื่อเขียนองค์ประกอบทั้งหมดในหน้า:
สำหรับ (I=0;I -
document.write(document.all［I］.tagName+”＼n” );
-
ในโมเดลของ Netscape ภาษาสคริปต์สามารถเข้าถึงชุดองค์ประกอบเฉพาะบนหน้า HTML เช่น เนื้อหาในแท็ก ส่วนของโปรแกรมต่อไปนี้ใช้สำหรับเขียนชื่อของเลเยอร์ทั้งหมดในหน้า:
สำหรับ (I=0;I -
document.write(document.layers［I］.name+”＼n”);
}

5 การใช้เทคโนโลยีการกำหนดตำแหน่ง

ใน HTML ตำแหน่งของวัตถุใดๆ จะสัมพันธ์กับส่วนอื่นๆ ของโครงสร้างหน้าเว็บเสมอ เมื่อเรารวบรวมหน้าเว็บ เรามักจะบีบรูปภาพออกจากหน้าโดยการเพิ่มข้อความ ในปัจจุบัน ด้วยการใช้เทคโนโลยีการวางตำแหน่งของ DHTML วัตถุต่างๆ จึงสามารถแก้ไขและซ้อนกันได้ กล่าวคือ รูปภาพหลายภาพจะถูกวางในตำแหน่งเดียวกันบนหน้า จากนั้นวัตถุที่วางอยู่ด้านบนจะถูกกำหนดอย่างต่อเนื่องเพื่อให้ได้เอฟเฟ็กต์ภาพเคลื่อนไหว
ตัวอย่าง:
*myback{สีพื้นหลัง:โปร่งใส}
*มายพอต
ตำแหน่ง:แน่นอน;
ด้านบน:5in;
ขวา:5in;
ความกว้าง:10นิ้ว}
ร่างกาย{ภาพพื้นหลัง:url(／รูปภาพ／back.gif);}
〈class=.mypoint〉Img(src=”／รูปภาพ／a.gif)
〈DIV CLASS=”กอง” ID=”image1” style=”z-index:4”〉
〈DIV CLASS=”กอง” ID=”image2” style=”z-index:3”〉
〈DIV CLASS=”ไพน์” ID=”image3” style=”z-index:2”〉
〈DIV CLASS=”ไพน์” ID=”image4” style=”z-index:1”〉

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

6 บทสรุป

ข้างต้นได้ทำการวิจัยเกี่ยวกับวิธีใช้ DHTML เพื่อคอมไพล์หน้าเว็บ ยังมีปัญหาทางเทคนิคมากมายที่รอให้ผู้ผลิตเว็บเพจเจาะลึกร่วมกัน

Wei Xiaotan เป็นนักศึกษาปริญญาโทที่ School of Transportation, Northern Jiaotong University, 100044, Beijing