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

ใบความรู้ที่ 2 การสร้างเฟรม

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

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

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

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

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

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

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

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

4. จากก็ให้คุณพิมพ์ข้อความอะไรก็ได้ใส่ลงไปในบริเวณที่ 2 เอาให้ข้อความล้นไปด้านล่างเยอะ ๆ ยิ่งดี แล้วตั้งชื่อ title เป็น frame 2 แล้วเซฟเป็น frame2.html (ตอนนี้เราเซฟไฟล์ไปแล้ว 2 ไฟล์ คือ frame1.html กับ frame2.html)

5. จากนั้นกดปุ่ม F12 เพื่อดูผลลัพธ์ แต่ก่อนที่จะได้ดูนั้น มันจะมีหน้าต่างเปิดขึ้นมาก่อนว่า จะเซฟ หรือปล่าว อัันนี้กดปุ่ม Cancel ไปก่อนครับ

6. จากนั้นคุณจะได้ผลลัพธ์คล้าย ๆ ดังรูป จะเห็นได้ว่าบริเวณเลข 1 นั้น ผมได้พิมพ์ข้อความล้นไปตั้งเยอะ แต่ก็ไม่มีสกอล์บาร์แสดงให้เห็น (เหมือนคำแนะนำที่ผมได้ให้ไว้ที่ข้อ 2) และในขณะเดียวกัน บริเวณที่เป็นหมายเลข 2 กลับมีสกอล์บาร์ให้เราเลื่อนขึ้นลงไปมาได้

6. จากนั้นมองไปที่แท็บเฟรม ที่เราได้เปิดเอาไว้ในตอนแรก (รูป 1) แล้วพยามคลิกตรงบริเวณสีแดง (รูป 2) ต้องคลิกให้ได้ระยะ ถ้าคลิกถูกที่ จะได้ขอบเป็นสีดำ ๆ ดังรูปที่ 3

รูปที่ 1

รูปที่ 2

รูปที่ 3

ในขณะเดียวกันที่หน้าต่าง Properties จะได้ดังรูปด้านล่าง

เลข 1	ถ้าต้องการให้แสดงขอบของเฟรม (ดูรูปตัวอย่าง) ก็เลือกเป็น Yes ถ้าไม่ต้องการเลือกเป็น No
เลข 2	เป็นผลจากเลข 1 ถ้าเราเลือกเป็น Yes เพื่อต้องการให้มีขอบแล้ว หมายเลข 2 นี้ก็จะทำการเปลี่ยนสีขอบเป็นสีที่เราต้องการ (ดูรูปตัวอย่าง)
เลข 3	กำหนดความกว้างของขอบ
เลข 4	ใช้กำหนดความกว้างของพื้นที่บริเวณ เลข 1
เลข 5	ใช้เลือกพื้นที่บริเวณเลข 1 หรือเลข 2

7 . จากนั้นเราก็เซฟไฟล์ตัวนั้น โดยไปที่ แล้วบันทึกชื่อไฟล์เป็น frame-index.html แล้วตั้งชื่อ Title เป็น frame 1 and frame 2 เท่านี้ก็เสร็จแล้วล่ะครับ สำหรับการสร้างเฟรม


8. แบบสำเร็จที่ได้

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

ผลลัพธ์ที่ได้ก็จะเป็นดังรูปที่ 3 ครับ

รูปที่ 1

รูปที่ 2

รูปที่ 3

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

แล้วเช็คเอาเครื่องหมาย ถูก ที่หัวข้อ No Resize ออก ผลลัพธ์ที่ได้ตะได้ดังรูปที่ 1 และ 2

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

รูปที่ 1 

รูปที่ 2

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

3. จากรูปในข้อ 2 ท่านอาจจะสงสัยว่า "เอ๊ะ ทำไมมีคำว่า mainFrame กับ LeftFrame ล่ะ มันมาจากไหน ??" มันก็คือชื่อของเฟรม ในบริเวณเลข 1 กับ เลข 2 นั่นแหละครับ ดูตามภาพซิครับ

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

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

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

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

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

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

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

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