ใบความรู้ที่ 2

ใบงานที่ 2

การสร้างเฟรม

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

* ให้เราเปิดแท็บเฟรมค้างไว้ด้วยนะครับ โดยเปิดไปที่ Window > Others > Frames

1. ไปที่ แท็บ Frames ในหัวข้อ Insert

2. เราจะมาสร้างเฟรมแบบง่าย ๆ กันนะครับ โดยเราจะสร้างเฟรมโดยเลือกที่รูปที่ 1 (ดังรูป)

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

3.หลังจากที่เราคลิกที่รูปไอคอนนั้นแล้ว เราจะได้ดังรูปด้านล่าง จะเห็นได้ว่าหน้าเว็บเพจของเรามีการแบ่งออกเป็น 2 ส่วน คือบริเวณ เลข 1 กับบริเวณเลข 2

3. จากนั้นเอาเมาส์ไปคลิกในบริเวณที่ 1 แล้วเปลี่ยนสีพื้นหลังเป็น สีแสดอ่อน (#FFCC99)จากนั้นให้เราพิมพ์ข้อความอะไรก็ได้ใส่ลงไป ในบริเวณที่ 1 (ให้มีหลาย ๆ บรรทัด ถ้าเป็นไปได้ ให้พิมพ์จนตัวหนังสือล้นไปด้านล่างเลย) แล้วตั้งชื่อ Title เป็น frame 1 แล้วจึงบันทึกไฟล์ตัวนี้เป็น frame1.html

                   

 

การแก้ปัญหาเกี่ยวกับเฟรม

* ตอนนี้เรายังเปิดไฟล์ frame-index.html อยู่นะครับ

   ปัญหาเกี่ยวกับสกอล์บาร์

   จากการที่ในข้อ 5 บริเวณเลข 1 นั้นมันไม่มีสกลอบาร์ เราก็สามารถแก้ปัญหาได้ดังนี้ คลิกที่ช่องด้านซ้าย (ดังรูปที่ 1) แล้วไปที่หัวข้อ Scroll แล้วเลือกค่าเป็น Yes (รูปที่ 2)

รูปที่ 1

รูปที่ 2

การทำงานเกี่ยวกับลิงค์

* ตอนนี้เรายังเปิดไฟล์ frame-index.html อยู่นะครับ

1. ผมจะทำให้ข้อความ "บรรทัดที่ 1" เป็นจุดลิงค์นะครับ แล้วผมจะให้ลิงค์ไปที่ไฟล์ Hello.html
2. ผมก็ทำลิงค์ไปตามปกติ ก็จะได้ดังรูป

  3. จากนั้นเอาเมาส์ไปคลิกในบริเวณที่ 1 แล้วเปลี่ยนสีพื้นหลังเป็น สีแสดอ่อน (#FFCC99)จากนั้นให้เราพิมพ์ข้อความอะไรก็ได้ใส่ลงไป ในบริเวณที่ 1 (ให้มีหลาย ๆ บรรทัด ถ้าเป็นไปได้ ให้พิมพ์จนตัวหนังสือล้นไปด้านล่างเลย) แล้วตั้งชื่อ Title เป็น frame 1 แล้วจึงบันทึกไฟล์ตัวนี้เป็น frame1.html

รูปนี้ เป็นคุณสมบัติของพื้นที่บริเวณเลข 1 หรือเป็นของไฟล์ frame1.html ซึ่งชื่อของเฟรมส่วนนี้คือ leftFrame                                              
รูปนี้ เป็นคุณสมบัติของพื้นที่บริเวณเลข 2 หรือเป็นของไฟล์ frame2.html ซึ่งชื่อของเฟรมส่วนนี้คือ mainFrame
                                                             

ถ้าเราอยากไปปรับแต่งคุณสมบัติ ของเฟรมใดเฟรมหนึ่ง ก็คลิกเลือกได้ที่แท็บเฟรมครับ

4. ถ้าเราเลือกรูปแบบของการแสดงผลเป็น mainFrame ล่ะก็ ผลลัพธ์ที่ได้จะได้ดังรูปด้านล่าง ซึ่งมันก็จะไปแสดงผลในเฟรมที่ชื่อว่า mainFrame

 

5. ถ้าเราเลือกรูปแบบของการแสดงผลเป็น leftFrame ล่ะก็ ผลลัพธ์ที่ได้จะได้ดังรูปด้านล่าง ซึ่งมันก็จะไปแสดงผลในเฟรมที่ชื่อว่า leftFrame

คลิกเพื่อทดสอบจุดลิงค์ ด้วยตัวคุณเอง

**

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

ส่วนรูปแบบการแสดงผลอื่น ๆ ก็เหมือนกันกับเวอร์ชั่น 4 ครับ || อ่านลักษณะการแสดงผล


**    คุณจะเห็นได้ว่าการสร้างเฟรมที่เราได้ทำมาเมื่อกี้จะมีไฟล์ที่เกี่ยวข้อง 3 ไฟล์ คือ
ไฟล์ frame1.html ซึ่งแสดงในบริเวณเลข 1 ไฟล์ frame2.html ซึ่งแสดงในบริเวณเลข 2และไฟล์ frame-index.html ซึ่งเป็นไฟล์ที่รวมเอาทั้ง ไฟล์ frame1.html และ frame2.html มารวมไว้ด้วยกัน

ถ้าเราต้องการให้แสดงรูปแบบของการแสดงผลเป็นรูปแบบอื่นที่ไม่ใช่ leftFrame กับ mainFrame เราก็ตั้งชื่อของเฟรมส่วนต่าง ๆ ใหม่ เช่นตั้งเป็น menu , content ดังตัวอย่างข้างล่าง