Recommended
More Related Content
Similar to หน่วยที่ 9
หน่วยที่ 9
- 4. การสร้างเฟรมซ้อนกัน เราสามารถเฟรมซ้อนกันได้ซึ่งจะได้การแบ่งรูปแบบหลายรูปแบบ กาหนดไฟล์HTMLที่ใช้แต่ละเฟรม ในแต่ละช่องเฟรมคือ 1 เว็บเพจ หมายความว่าเราต้องแบ่งบราวเซอร์เป็น 2 เฟรม เราจะสามารถดูเว็บเพจ 2 หน้าพร้อมกัน จากข้างต้นที่เราสร้างโครงของหน้าเว็บเพจไวเรียบร้อยแล้ว ในที่นี้เราจะไม่ระบุไฟล์เว็บลงไปโดยแต่ละส่วนแสดงเว็บเพจชื่อ web1.html, web2.html และ web3.html ตามลาดับ
- 5. เมื่อผู้ใช้เปิดดูเฟรมไม่ได้ <noframes> ในกรณีมีผู้ใช้บางคนที่ใช้บราวเซอร์รุ่นเก่าที่ไม่สามารถแสดงเฟรมได้เราสามารถกาหนดข้อความแสดงให้ผู้ใช้ทราบได้โดย การใช้แท็ก noframes ดังตัวอย่าง เมื่อผู้ใช้ใช้บราวเซอร์ที่ไม่สนับสนุนการแสดงเฟรมข้อความ บราวเซอร์ที่ท่านใช้งานอยู่ไม่สามารถแสดงเฟรมได้จะปรากฏขึ้น โดยปกติส่วนของ noframes ก็คือส่วนหน้าเว็บเพจธรรมดานั้นเอง
- 6. การกาหนดลักษณะของกรอบเฟรม เราสามารถกาหนดลักษณะของกรอบเฟรมเช่น การให้แสดงกรอบหรือไม่แสดง กาหนดความหนาของกรอบ มีตัวเลือกดังนี้ Border กาหนดความหนาให้กรอบเฟรม Bordercolor กาหนดสีให้กรอบของเฟรม Frameborder เปิด/ปิดการแสดงเส้นกรอบ Framespacing กาหนดความห่างระหว่างเฟรม ตัวอย่างต่อไปนี้ จากาหนดความหาของกรอบ
- 7. การกาหนดช่องว่างระหว่างเว็บเพจกับเฟรม เราสามารถกาหนดตาแหน่งของเว็บเพจ HTML ที่อยู่ในเฟรมได้เพื่อความสวนงามโดยการกาหนดช่องว่างระหว่างเว็บเพจ เฟรม ดังนี้ Marginwidth กาหนดช่องว่างทางซ้ายและขวา Maeginlghtกาหนดช่องว่างทางด้านบนและล่าง จากตัวอย่างที่ผ่านมา ลองเพิ่มแอตทริบิวต์นี้เข้าไปไปเฟรมที่ 1 เพื่อกาหนดระยะห่างของข้อมูลในเฟรม
- 8. การกาหนดช่องว่างระหว่างเนื้อหากับเว็บเพจ <body> นอกจากระยะห่างระหว่างเฟรมกับเว็บเพจแล้ว ยังมีระยะห่างระหว่างเว็บเพจกับเนื้อหาในเว็บเพจเดียวกัน ซึ่งการเว้นระยะใน กรณีนี้ เราจะเลือกกาหนดแอตทริบิวต์ในแท็ก body ในไฟล์HTML ที่แสดงในเฟรมนั้น แอตทริบิวต์ที่กาหนดโดย Intemet Exolorer แอตทริบิวต์ที่กาหนดโดย Netscape Bottommargin กาหนดช่องว่างทางด้านล่าง Marginheightกาหนดช่องว่างทางด้านบนและด้านล่าง Ieftmargin กาหนดช่องว่างทางด้านซ้าย Marginwidth กาหนดช่องว่างทางด้านซ้ายและด้านขวา Rightmargin กาหนดช่องว่างทางด้านขวา Topmargin กาหนดช่องว่างทางด้านบน Marginwidth กาหนดช่องว่างทางด้านซ้ายและด้านขวา ตัวอย่างนี้เราจะใช้ไฟล์web1.html ในเฟรมที่ 1 มาแก้ไขในส่วนของ body
- 9. การปรับขนาดเฟรม เฟรมที่สร้างในตัวอย่างที่ผ่านสามารถปรับขนาดได้โดยการคลิกเมาส์ที่กรอบของเฟรมจะปรากฏเคอร์เซอร์เป็นสัญลักษณ์ ↕ ทาให้เราลากเมาส์ปรับขนาดที่ต้องการได้ ป้ องกันไม่ให้ปรับขนาดเฟรม โดยทั่วไปเว็บไซต์จะถูกออกแบบให้มีขนาดเฟรมที่แน่นอน และไม่ต้องการปรับขนาดได้ โดยใช้แอตทริบิวต์ noresize
- 11. การใช้ลิงก์เปลี่ยนหน้าเว็บในเฟรม เมื่อเราแบ่งหน้าจอเป็นเฟรม การกาหนดลิงก์เพื่อเชื่อมต่อกับเว็บเพจหน้าอื่นจะต้องระบุเฟรมที่จะให้เว็บเพจหน้านั้นไปเปิด แสดงด้วย ขั้นที่ 1 กาหนดชื่อให้กับเฟรม การตั้งชื่อให้กับเฟรม เพื่อระบุตาแหน่งที่เราต้องการให้เว็บที่เชื่อมโยงกับลิงก์ไปแสดงที่เฟรมนั้น ตัวอย่างการตั้งชื่อเฟรม ให้เราลองตั้งเฟรมแล้วตั้ง 2 เฟรม ตั้งชื่อว่า menu และ main ตามลาดับ
- 12. ขั้นที่ 2 สร้างลิงก์แบบระบุเฟรม การสร้างลิงก์เราจะใช้แท็ก a สร้างขึ้นมาและระบุแอตทริบิวต์ target เพื่อระบุเฟรมปลายที่จะใช้ในการเปิดลิงก์นั้น ในตัวอย่างก่อนหน้านี้เราสร้างเฟรมแนวตั้งมา2 เฟรมเฟรมซ้ายเปิดไฟล์HTML ชื่อ menu.html เฟรมขวาเปิดไฟล์HTML ชื่อ web1.html เราจะสร้างลิงก์ในไฟล์ menu.html ดังนี้
- 13. ขั้นที่ 3 ทดสอบการทางาน ให้เราลองเปิดหน้าเฟรมในขั้นที่ 1 อีกครั้งที่นี้ลองคลิกที่ลิงก์ที่เราสร้างในขั้นที่ 2 การเปลี่ยนหน้าเว็บขจะไปปรากฏในส่วนของ เฟรมที่เราระบุ นอกจากการระบุชื่อเฟรมในแอตทริบิวต์ target เรายังสามารถกาหนดค่าเฉพาะที่ใน HTML ได้ซึ่งค่าเฉพาะและความหมายจะมีดังนี้ Target=”_blank” เปิดไฟล์ลิงก์นั้นในหน้าต่างใหม่ Target=”_parent” เปิดไฟล์ลิงก์นั้นเต็มพื้นที่กรอบของเฟรม Target=”_self” เปิดไฟล์ลิงก์นั้นในพื้นที่เฟรมของตนเอง Target=”_top” เปิดไฟล์นั้นเต็มพื้นที่กรอบบราวเซอร์ เราลองแก้ไขไฟล์menu.html เป็นดังนี้
- 14. ทาการแทรกเฟรมภายในเว็บเพจ <iframe> ตัวอย่างที่ผ่านมาเรามีเฟรมแล้วเอาเว็บเพจไปใส่ในเฟรมแต่ในหัวข้อนี้เราจะสลับมีเว็บเพจและแทรกเฟรมอยู่ในกรอบภายใน เว็บเพจ นอกจากนี้จะมีแอตทริบิวต์อื่นๆ ที่น่าสนใจ ดังนี้ Width กาหนดความกว้างของ iframe Height กาหนดความสูงของ iframe Align จัดวางตาแหน่งของ iframe
- 15. ป้ องกันบราวเซอร์ที่ไม่สนับสนุนเฟรม <noframes> โดยทั่วไป Internet ,Netscape และ Firefox จะไม่มีปัญหาเรื่องการแสดงผลเฟรม แต่จะมีบางบราวเซอร์ที่มีปัญหา ฉะนั้นทางที่ ดีเราควรจะเพื่อกรณีบราวเซอรที่ม่สนับสนุนการแสดงผลแบบเฟรมด้วย เราสามารถแสดงให้เป็นข้อความแจ้งให้ทราบ หรือสร้างเป็นหน้าเว็บเพิ่มขึ้นมาให้สามารเรียดูได้แม้บราวเซอร์จะไม่สนับสนุนการทางานแบบเฟรม