View
2
Download
0
Category
Preview:
Citation preview
หนวยท 7 การสรางเฟรม
หวขอเรอง
1. คาศพททเกยวของ 2. หลกการสรางเฟรม 3. การกาหนดการแบงเฟรม 4. การแบงหนาตางโปรแกรมออกเปนเฟรม 5. การกาหนดรายละเอยดของการแบงเฟรม 6. การกาหนดรายละเอยดของแตละเฟรม 7. การเชอมโยงเปลยนหนาเวบเพจในเฟรม 8. การแทรกเฟรมซอนเฟรม
จดประสงคการเรยนร 1. บอกหลกการสรางเฟรมไดถกตอง 2. ปฏบตการกาหนดการแบงเฟรมไดถกตอง 3. ปฏบตการแบงหนาตางโปรแกรมออกเปนเฟรมไดถกตอง 4. ปฏบตการกาหนดรายละเอยดของการแบงเฟรมไดถกตอง 5. ปฏบตการกาหนดรายละเอยดของแตละเฟรมไดถกตอง 6. ปฏบตการเชอมโยงเปลยนหนาเวบเพจในเฟรมไดถกตอง 7. ปฏบตการแทรกเฟรมซอนเฟรมไดถกตอง
สมรรถนะอาชพประจาหนวย(สงทตองการใหเกดการประยกตใชความร ทกษะ คณธรรมเขาดวยกน)
1. มทกษะกระบวนการกลมรวมกนระดมความคดในการกาหนดรปแบบของเฟรมตาง ๆ 2. ทางานเปนทมเพอการพฒนาเวบไซต
269
แบบทดสอบกอนเรยน หนวยท 7 การสรางเฟรม
คาชแจง เลอกคาตอบทถกเพยงขอเดยวลงในกระดาษคาตอบ 1. สวนของหนาตางโปรแกรมเวบเบราวเซอรทแบงออกเปนสวน เรยกวาอะไร ก. ฟอรม ข. เฟรม ค. เฟรมเซต ง. ถกทกขอ
2. ขอใดเปนคาสงสาหรบกาหนดไฟลเวบเพจทจะแสดงผลในแตละเฟรม ก. <form>.....</form> ข. <frame>.....</frame> ค. <frameset>.....</frameset> ง. <noframes>.....</ noframes>
3. ขอใดคอไมสามารถแบงหนาตางโปรแกรมออกเปนเฟรมได ก. <frame>.....</frame> ข. <noform>.....</noform> ค. <noframes>.....</ noframes> ง. <noframeset>.....</noframeset>
4. ขอใดคอกลาวถงการแบงเฟรมไดถกตอง ก. เมอมคาสงในการแบงเฟรมจะไมมการใชคาสง <body> ข. เมอมคาสงในการแบงเฟรมจะไมมการใชคาสง <head> ค. เมอมคาสงในการแบงเฟรมจะไมมการใชคาสง <html> ง. เมอมคาสงในการแบงเฟรมจะไมมการใชคาสง <title> 5. ขอใดคอ แบงตามหนาตางเฟรมออกเปน 2 เฟรม โดยเฟรมท 1 มขนาด 500 pixels และพนททเหลอทงหมดจะเปนเฟรมท 2 ก. “500,*” ข. “*,*” ค. “50%,*,*” ง. “500,*,*” 6. คาสงแทก <frameset cols = “50%,*> มความหมายตรงกบขอใด ก. การแบงเฟรมในแนวตงเปนสองเฟรม ข. การแบงเฟรมในแนวตงเปน 50 เปอรเซนต ค. การแบงเฟรมในแนวนอนเปน 50 เปอรเซนต ง. การแบงเฟรมในแนวนอนเปนสองเฟรม
270
7. คาสงแทก <frameset border = “red”> ตรงกบขอใด ก. กาหนดสใหกบขอความทอยในเฟรม ข. กาหนดสใหทงเฟรมของเฟรมเปนสแดง ค. กาหนดสใหกบกรอบของเฟรมเปนสแดง ง. กาหนดสใหกบพนหลงของเฟรมเปนสแดง
8. เมอนาเมาสไปวางทเสนแบงเฟรม สงเกตรปเมาสจะเปลยนจาก สญลกษณในขอใด
ก. เปนรป หรอ
ข. เปนรป หรอ
ค. เปนรป หรอ
ง. เปนรป หรอ
9. คาสงสาหรบการเชอมโยงในเฟรมคอขอใด ก. <frame src="head.html" name="topFrame" > ข. <frame href ="head.html" name="topFrame"> ค. <frameset src="head.html" name="topFrame"> ง. <frameset href ="head.html" name="topFrame">
10. <iframe src="link_map.html" width="600" heigth="500"></iframe> ก. การกาหนดชอเฟรม ข. การสรางการเชอมโยงโดยระบเฟรม ค. การแทรกเฟรมภายในเอกสารเวบเพจ ง. การกาหนดใหแสดง/ไมแสดงแถบเลอน
271
หนวยท 7 การสรางเฟรม
การใชเฟรมเปนการแบงหนาจอของโปรแกรมเวบเบราวเซอรออกเปนสวนยอย ทาใหสามารถใชพนททงหมดบนหนาจอไดอยางประสทธภาพ เชน กาหนดใหหนาจอสวนบนสดแสดงชอและโลโกของหนวยงาน หรอ บรษท หนาจอสวนทางซายแสดงปมตาง ๆ เพอเปดดเวบเพจอน ๆ และหนาจอสวนกลางสาหรบแสดงเนอหา เมอใชแถบเลอนขอมลเลอนสวนแสดงเนอหาขนลงปมและชอหนวยงานหรอบรษททอยในสวนอนจะไมเลอนตามจอภาพดวย
1. คาศพททเกยวของ 1.1 ทบทวนคาศพทหนวยการเรยนทผานมา ไดแก HTML , Attribute 1.2 คาศพทใหม 1.2.1 เฟรม (Frame) คอการแบงหนาตางของโปรแกรมเวบเบราวเซอรออกเปนหลาย ๆ สวนในหนงหนาเวบเพจ 1.2.2 เฟรมเซต (Frameset) คอ การแบงหนาเวบเพจออกเปนพนทหลาย ๆ สวน โดยแตละสวนทแยกออกไปจะเปนอสระไมขนตอกน ตามปกตนยมใชเฟรมเพอแบงเนอหาบนหนาจอเปน 2 กลม เพอใชแสดงหรอเปรยบเทยบขอมล 1.2.3 ระบบเนวเกชน (Navigation System) คอ ระบบการทางานในเวบไซตหรอกลมของการเชอมโยงทมรปแบบทงทเปนตวหนงสอและกราฟฟก ททาหนาทพาผใชไปยงทองสวนตางๆ บนอนเทอรเนตตองออกแบบใหเขาใจงายและใชงานไดสะดวก 1.2.4 โคด (Code) คอ ขอความทเปนชดทถกเขยนขน และสามารถอานและเขาใจได ใชสาหรบภาษาโปรแกรม ในการเขยนโปรแกรมแบบใหม รหสตนฉบบนยมเกบไวในไฟลหลายไฟลแยกจากกน เพอใหงายในการเรยกใชสวนยอยของคาสงนน
2. หลกการสรางเฟรม
ในการสรางเฟรมในเอกสารเอชทเอมแอล แตละหนากคอ การแบงเฟรม และแตละเฟรม จะเปนอสระจากเฟรมอน ๆ สามารถแสดงผลเอกสารเวบเพจทแตกตางกนได ตามปกตนกพฒนาเวบไซตนยมใชเฟรมเพอแบงเนอหาบนเวบเพจ เพราะสามารถนา เฟรม มาแบงเปนสวนเมน กบสวนเนอหา โดยทสวนเมนจะไมมการเปลยนแปลง แตเมอผใชงานคลกทเมนเรองใด สวนเนอหาเปลยนไปตามเมนทถกเลอก แตการใช เฟรมกมขอเสย คอ ยงยากเวลาจะสงพมพหนาเวบเพจทงหมดกอนทจะรการแบงหนาเวบเพจออกเปนเฟรมคาสงสาหรบสรางเฟรม ตองศกษาเกยวกบรายละเอยดทเกยวของกบเฟรม ดงน
272
2.1 องคประกอบของเฟรม แบงออกเปน 2 กลมดงน 2.1.1 เฟรมหลก คอหนาตางเฟรมใหญทสด ทาหนาทคอยควบคมเฟรมยอยอกทหนง โดยกาหนดวาในแตละสวนชออะไร มขนาดและคณสมบตอยางไร เรมตนทตาแหนงใด เปนตน 2.2.2 เฟรมยอย คอ หนาตางเฟรมททาหนาทกาหนดชอของแตละเฟรม และกาหนดไฟลเวบเพจภายในเฟรมไดหนดเปาหมายดวยวาจะใหเวบเพจปลายทางแสดงเฟรมใด ตวอยางเชน
ภาพท 7.1 การแบงหนาตางของโปรแกรมเวบเบราวเซอรเพอแสดงหลายหนาเวบเพจพรอมกน
2.2 การแบงหนาทของเฟรม 2.2.1 ทาหนาทเปนเฟรมเซต จะมคาสงสาหรบแบงหนาจอออกเปนสวน ๆ ซงเรยกวา เฟรม โดยกาหนดวาแตละสวนชออะไร เรมตนทตาแหนงใด มขนาดและคณสมบตเปนอยางไร รวมทงกาหนดวาแตละเฟรมจะแสดงเวบเพจใดในตอนเรมตน เฟรมเซตอาจจะมเฉพาะคาสงในการแบงเฟรมอยางเดยวโดยไมมเนอหาอน ซงเฟรมเซตลกษณะนจะแสดงไดในโปรแกรมเวบเบราวเซอรทสนบสนนเฟรมเทานน แตบางเฟรมเซตอาจมเนอหาปกตทแทรกอยดวย ซงหมายความวา ถาผชมใชโปรแกรมเวบเบราวเซอรทมาสนบสนนเฟรม เนอหาปกตทแทรกอยจะถกนามาแสดงแทน เฟรมแตละเฟรมภายในเฟรมเซตจะเปนอสระจากกน และคณสมบตทเราสามารถปรบแตงได เฟรม เชน ใหมสกรอลบาร หรอใหผชมปรบขนาดเฟรมได เปนตน ตามปกตเฟรมเซตมกนยมใชทาเปนโฮมเพจ กลาวคอ เมอผชมเขามาทเวบไซตจะพบกบเฟรมเซตเลย หลงจากนนเมอมการคลกลงคเวบเพจอน ๆ จะถกแสดงขนมาในเฟรมตามทผสรางกาหนด 2.2.2 ทาหนาทเปนเอกสารเวบเพจทใชในการเผยแพรขอมลขาวสาร ผานทางเครอขายอนเทอรเนต เวบเพจจะถกนามาใชประโยชนในการประชาสมพนธ และนาเสนอขอมลตาง ๆ จงสงผลทาใหแตละเวบเพจมความแตกตางกนไปตามวตถประสงคของการนาไปใชงานนนเอง เนองจากแตละเวบเพจสามารถนามาแสดงในเฟรมได เพยงแตอาจจะตองจดหนาตาใหเหมาะสมกบขนาดของเฟรมเปาหมาย เชน กาหนดความกวางของภาพกราฟฟกส หรอตารางไมใหเกนความกวางของเฟรม เปนตน นอกจากน การกาหนดเมน หรอระบบเนวเกชน การเชอมโยงตาง ๆ กจะตองถกกาหนดเปาหมายดวยวาจะใหเวบเพจปลายทางแสดงเฟรมใด ตวอยางเชน
2.เฟรมซาย
1.เฟรมบน
3.เฟรมหลก
เฟรมเซต ประกอบดวย 3 เฟรม
273
ภาพท 7.2 รปแบบการทางานของโปรแกรมเวบเบราวเซอรของเฟรมเซต
2.3 ความรเกยวกบการใชเฟรม เนองจากเฟรมมคณสมบตเฉพาะตวหลายอยางทแตกตางจากการจดหนาเวบเพจดวยวธการอน ดงนนการนามาใชจงมขอทควรรและระมดระวง ดงน 2.3.1 โปรแกรมเวบเบราวเซอร โดยเฉพาะทเปนเวอรชนเกา ๆ ไมสนบสนนการทางานของเฟรม ดงนน จงควรแนใจวากลมผชมเปาหมายสวนใหญใชโปรแกรมเวบเบราวเซอรทเหมาะสม และถาเปนไปได กควรใสเนอหาไวในสวนปกตสาหรบผชมซงใชโปรแกรมเวบบราวเซอรทไมสนบสนนเฟรมดวย 2.3.2 เมอใชเฟรม ในชองแอสแดรส ของโปรแกรมเวบเบราวเซอรจะแสดงเฉพาะ ทอยหลกของเวบไซตโดยไมเปลยนแปลงไปตามการเชอมโยงทเปด ดงนนผชมจะไมสามารถบคมารคหนาเวบเพจทตองการเพราะเมอทาบคมารค จะไดแสดงแตทอยหลกของเวบไซตเทานน 2.3.3 เวลามผตองการเชอมโยงจากเวบไซตของเรา ถาหากเชอมโยงมายงโฮมเพจหรอหนาเฟรมเซต แตการเชอมโยงมายงเวบเพจแตละหนาโดยตรง เวบเพจจะแสดงเนอหาทไมสมบรณ ปญหานแกไดดวยการใสโคดภาษาจาวาสครปต เพอตรวจสอบและเรยกเฟรมเซตขนมาแสดงแทน 2.3.4 ไมควรแบงเฟรมมากกนไปเพราะจะสรางความสบสนใหกบผชมควรใชเฟรมเทาทจาเปน 2.3.5 กาหนดคณสมบตของเฟรมและเวบเพจทแสดงในเฟรมใหเหมาะสม เชน สวนทเปนเมนไมควรใหเกดมสกรอลบารและมาควรใหมเนอททใหญเกนเฟรม 2.3.6 เมอใชเฟรม เวลาทดสอบกาเชอมโยงเวบเพจ ตองดดวยวาเอกสารเวบเพจปลายทางแสดงขนในเฟรมทกาหนดอยางถกตองหรอไม 2.4 ขอพจารณาในการออกแบบเฟรม เมอไดตดสนใจวาจะใชเฟรมในการแบงหนาเวบเพจ ขนตอนตอไปคอการออกแบบเฟรมวาเฟรมเซตจะตองมองคประกอบและคณสมบตอยางไร เรองทควรพจารณาคอ
เวบเพจ 1
เวบเพจ 2
เวบเพจ 3
รปแบบเฟรม
274
2.4.1 จะแบงหนาตางโปรแกรมเวบเบราวเซอรเปนกเฟรมและจะแบงในลกษณะใด 2.4.2 จะใหมขนาดขอบเฟรมหรอไม และถามจะใหผชมปรบขนาดเฟรมไดหรอไม 2.4.3 เนอหาในแตละเฟรมทาหนาท อน ๆ เชน เฟรมหนงจะเปนเมน ซงอยนง สวนอกเฟรมหนงมเนอหาทเปลยนแปลงได 2.4.4 ความสมพนธระหวางเฟรม คอกาหนดวาเมอผชมคลกทจดเชอมโยงในเฟรมหนงแลว จะใหเอกสารเวบเพจปลายทางแสดงทเฟรมใด
3. การกาหนดการแบงเฟรม
การแบงหนาตางโปรแกรมเวบเบราวเซอรออกเปนเฟรมตาง ๆ ประกอบดวยคาสงแทก 3 คาสง ดงน
คาสงแทก < frameset > ใชสาหรบการแบงหนาตางโปรแกรมเวบเบราวเซอรออกเปนเฟรมตาง ๆ มรายละเอยด ดงน
คาสง ความหมาย <frameset>.....</frameset> คาสงสาหรบกาหนดไฟลเวบเพจทจะแสดงผลในแตละเฟรม
รวมถงการกาหนดรายละเอยดอนทเกยวของ <frame> คาสงทใชแสดงขอความในกรณทโปรแกรมเวบเบราวเซอร
<noframes>.....</> noframes>
ไมสามารถแบงหนาตางโปรแกรมออกเปนเฟรมได (จะมหรอไมมคาสงนกได)
โดยปกตโปรแกรมเวบเบราวเซอรจะแสดงผลไฟลเวบเพจ จากการกาหนดชอไฟลทตาแหนงทอยของโปรแกรม และหนาตางกจะแสดงผลครงละหนงไฟลเสมอ ซงขอความตาง ๆ ทตองการแสดงผลจะอยระหวางคาสง <body> เทานน
เมอใชคาสง <frameset> แบงหนาตางโปรแกรมเวบเบราวเซอรออกเปนเฟรมแลว จะตองระบดวยวาเฟรมไหนจะใหแสดงไฟลเวบเพจไฟลใด ซงการระบไฟลเวบเพจของแตละเฟรมจะระบทคาสง <frame> ดงนน ไฟลเวบเพจทกาหนดคาสง <frameset> เพอแบงหนาตางออกเปนเฟรม จะไมมคาสง <body> และแมวาในไฟลเวบเพจทกาหนดคาสง <frameset> จะมคาสง <body> กจะไมสามารถแสดงผลขอความทอยระหวางคาสงได เนองจากการแสดงผลไฟลเวบเพจจะเปนไปตามทกาหนดในคาสง <frame> เทานนจากตวอยาง สงเกตไดวาไมมคาสง <body> แตจะมคาส ง <frameset> แทนคาส ง<body> โดยขอมลตาง ๆ ทจะแสดงบนโปรแกรมเวบเบราวเซอรจะถกกาหนดภายในคาสง<frame>
รปแบบคาสง <frameset> <frame> <noframes>.....</ noframes> </frameset>
275
4. การแบงหนาตางโปรแกรมออกเปนเฟรม
การแบงหนาตางโปรแกรมเวบเบราวเซอรออกเปนเฟรมดวยคาสง <frameset> จะตองใชควบคกบคาสง <frame> เสมอ โดยการแบงหนาตางโปรแกรมเวบเบราวเซอรออกเปนเฟรมกาหนดไดดงน
4.1 การแบงหนาตางโปรแกรมเวบเบราวเซอรออกเปนเฟรม
ความหมายของแอททรบวทตาง ๆ มดงน
แอททรบวท ความหมาย rows ใชกาหนดจานวนและขนาดของเฟรมทตองการแบงในแนวนอน cols ใชกาหนดจานวนและขนาดของเฟรมทตองการแบงในแนวตง
src ใชกาหนดชอไฟลเวบเพจทตองการแสดงในแตละเฟรม
การกาหนดขนาดของเฟรม สามารถกาหนดได 3 วธดงน 4.1.1 กาหนดขนาดของเฟรมเปนตวเลข เปนการกาหนดตวเลขขนาดของเฟรมทตองการแบง มหนวยเปนพกเซล 4.1.2 กาหนดขนาดของเฟรมเปนสดสวนรอยละ เปนการกาหนดขนาดของเฟรมทตองการแบงสดสวนรอยละของหนาตางแสดงผล 4.1.3 กาหนดขนาดของเฟรมดวยสญลกษณ * ม 2 ความหมาย 1) ความหมายท 1 การใชสญลกษณ * หมายถง การแบงเฟรมใหมขนาดเทากน 2) ความหมายท 2 การใชสญลกษณ * หมายถง การแบงเฟรมดวยพนท ทเหลออยจากการแบงเฟรม
ตวอยาง <head> <title>ตวอยางการแบงหนาตางโปรแกรมเวบเบราวเซอร </title>
</head> <frameset..........> <frame...........> <frame...........> </frameset>
รปแบบคาสง <frameset rows = "ขนาดของเฟรม" cols = "ขนาดของเฟรม" > <frame scr = " ชอไฟลเวบเพจ"> </frameset>
276
4.2 ขนตอนการแบงเฟรม
4.2.1 ขนตอนท 1 กาหนดขนาดของเฟรมในคาสง <frameset> การแบงเฟรมไมวาจะแบงตามแนวตงหรอแบงตามแนวนอน จะกาหนดขนาดของเฟรมวธใดวธหนง โดยจะตองกาหนดอยางนอย 2 เฟรมเสมอและจะคนขนาดของแตละเฟรมดวยเครองหมาย , เชน
ตวอยาง ความหมาย " 700,* " แบงตามหนาตางโปรแกรมออกเปน 2 เฟรมโดยเฟรมท 1 มขนาด 700 พกเซล
และพนททเหลอทงหมดจะเปนเฟรมท 2 " *,* " แบงตามหนาตางโปรแกรมออกเปน 2 เฟรม โดยมขนาดของเฟรมเทากน
" 30%,*,* " แบงตามหนาตางโปรแกรมออกเปน 2 เฟรม โดยเฟรมท 1 มขนาดรอยละ 30 ของหนาตางการแสดงผล และพนททเหลอทงหมดแบงเปน 2 เฟรมโดยมขนาดของเฟรมเทากน
4.2.2 ขนตอนท 2 กาหนดไฟลเวบเพจทจะแสดงของแตละเฟรมในคาสง <frame> เมอแบงขนาดของเฟรมแลวจะตองกาหนดดวยวาเฟรมใดจะแสดงผลไฟลเวบเพจ ชอไฟลอะไร โดยกาหนดชอไฟลเวบเพจทแอททรบวท src ในคาสง <frame> เรยงตามลาดบของการแบงเฟรม เชน หากแบงออกเปน 2 เฟรม ชอไฟลเวบเพจในคาสง <frame> คาสงท 1จะแสดงผลในเฟรมท 1 และชอไฟลเวบเพจในคาสง <frame> คาสงท 2 กจะแสดงผลในเฟรมท 2 ตามลาดบ ในทนเปนตวอยางการกาหนดจานวนและขนาดของเฟรมทตองการแบงในแนวนอน
เมอแสดงผลผานโปรแกรมเวบเบราวเซอร ดงภาพท 7.3
ภาพท 7.3 ตวอยางการกาหนดจานวนและขนาดของเฟรมทตองการแบงในแนวนอน
<html> <head><title> กาหนดไฟลเวบเพจ</title></head> <frameset rows = "30%,* "> <frame src ="font.html" >
<frame src = "hn_sample.html" > </frameset> </html>
เฟรมทอยสวนบนมขนาดรอยละ 30 ของหนาตาง ไฟลเวบเพจทกาหนดเปน font.html และเฟรมท 2 มขนาดเทากบพนททเหลอ
277
จากภาพท 7.3 เปนการแบงหนาตางโปรแกรมเวบเบราวเซอรออกเปน 2 เฟรมตามแนวนอนสงเกตไดจากเสนแบงเฟรม โดยเฟรมท 1 คอเฟรมทอยสวนบนมขนาดรอยละ 30 ของหนาตาง ไฟลเวบเพจทกาหนดเปน font.html และเฟรมท 2 มขนาดเทากบพนททเหลอทงหมด สาหรบไฟลเวบเพจทกาหนดเปน hn_sample.html หมายความวาใหแสดงหนาตางเวบเพจ อกหนาหนงสวนการกาหนดจานวนและขนาดของเฟรมทตองการแบงในแนวตงไฟลเอกสารเวบเพจ อยางไฟลframe1.html
ไฟล file_1.html
ไฟล file_2.html
เมอแสดงผลโปรแกรมเวบเบราวเซอร ดงน
ภาพท 7.4 ตวอยางการกาหนดจานวนและขนาดของเฟรมทตองการแบงในแนวตง
<html> <body>
<img src ="cmfft_office.jpg"> </body> </html>
<html> <body>
<img src ="cmcat.jpg"> </body> </html>
<html> <head><title> กาหนดไฟลเวบเพจ</title></head>
<frameset cols = "*,*"> <frame src = "file_1.html" > <frame src = "file_2.html" > </frameset>
</html>
การกาหนดจานวนและขนาดของเฟรมทตองการแบงในแนวตง โดยการแบงเฟรมละเทากน
File_2.html File_1.html
278
จากภาพท 7.4 เปนการแบงหนาตางโปรแกรมเวบเบราวเซอรแบงในแนวตงสงเกตไดจากเสนแบงเฟรม โดยการกาหนดใหไฟลเอกสารเวบเพจเปนตวกาหนดการเชอมโยงในทนไดกาหนดไฟลเอกสารเวบเพจคอ frame2.html เปนไฟลทกาหนดเฟรมออกเปน 2 เฟรม โดยทเฟรมท 1 คอเฟรมทอยสวนดานซาย ไฟลเวบเพจทกาหนดเปน file_1.html และเฟรมท 2 ไฟลเวบเพจทกาหนด file_2.html หมายความวาใหแสดงหนาตางเวบ เพจทมขอมลอยในเวบเพจ มการกาหนดขนาดของแอททรบวท cols= "*,*"
5. การกาหนดรายละเอยดของการแบงเฟรม 5.1 การกาหนดรายละเอยดของเสนแบงเฟรม การกาหนดขนาดของเสนแบงเฟรม สามารถกาหนดไดดวยการใชแอททรบวท border ภายในคาสง <frameset> โดยมหนวยเปนพกเซล
ความหมายของแอททรบวทตาง ๆ มดงน
แอททรบวท ความหมาย border กาหนดความหนาใหกบกรอบของเฟรม
bordercolor กาหนดสใหกบกรอบของเฟรม frameborder เปด/ปด การแสดงเสนกรอบ ระบเปน 0/1 หรอ เปน yes/no framespacing กาหนดความหางระหวางเฟรม หนวยเปน พกเซล
5.1.1 การกาหนดใหมเสนแบงเฟรม การกาหนดขนาดของเสนแบงเฟรม สามารถกาหนดใหดวยการใชแอททรบวท border ภายในคาสง <frameset> โดยมหนวยเปนพกเซล
รปแบบคาสง <frameset border = "ขนาดของเสนแบงเฟรม" > <frame src = "ชอไฟลเวบเพจ" >
</frameset>
รปแบบคาสง <frameset border = "ขนาดของเสนแบงเฟรม" frameset frameborder = "no"
bordercolor=”ชอของสหรอ#สรหสเลขฐานสบหก framespacing="กาหนดความหางระหวางเฟรม "> <frame src = "ชอไฟลเวบเพจ" > </frameset>
279
เมอแสดงผลผานโปรแกรมเวบเบราวเซอร ดงภาพท 7.5
ภาพท 7.5 แสดงผลการกาหนดเสนแบงเฟรม
5.1.2 การกาหนดไมใหแสดงเสนแบงเฟรม โดยปกตเมอแบงเฟรมแลวจะปรากฏ เสนแบงเฟรมเพอแสดงถงขอบเขตของเฟรมทถกแบงออกจากกน แตหากไมตองการใหแสดงเสนแบงเฟรมสามารถทาไดดวยการกาหนดแอททรบวท frameborder ภายในคาสง <frameset> มหนวยเปนพกเซล
<head><title> กาหนดเสนขอบเฟรม</title></head> <frameset rows = "30%,*" frameborder="no"> <frame src = "head.html"> <frameset cols="45%,*" > <frame src = "left.html" > <frame src = "main.html" > </frameset> </frameset>
รปแบบคาสง <frameset frameborder = "yes/ no" > <frame src = " ชอไฟลเวบเพจ" >
</frameset>
<head><title> กาหนดเสนขอบเฟรม</title></head> <frameset rows = "30%,*" border="10">
<frame src = "head.html" > <frameset cols="45%,*">
<frame src = "left.html" > <frame src = "main.html" > </frameset>
</frameset
280
เมอแสดงผลผานโปรแกรมเวบเบราวเซอร ดงภาพท 7.6
ภาพท 7.6 แสดงผลการไมใหกาหนดเสนแบงเฟรม
โดยปกตหากไมกาหนดแอททรบวท frameborder จะหมายถงใหแสดงเสนแบงเฟรมซงมความหมายเหมอนกนการกาหนดแอททรบวท frameborder = "yes"
5.1.3 การกาหนดสเสนแบงเซล การกาหนดขนาดของเสนแบงเฟรม สามารถกาหนดใหดวยการใชแอททรบวท bordercolor ภายในคาสง <frameset> โดยมหนวยเปนพกเซล
เมอแสดงผลผานโปรแกรมเวบเบราวเซอร ดงภาพท 7.7
<html> <head><title> กาหนดเสนขอบเฟรม</title></head> <frameset rows = "30%,*" frameborder ="yes">
<frame src = "head.html"> <frameset cols="45%,*" > <frame src = "left.html" > <frame src = "main.html" > </frameset>
</frameset> </html>
รปแบบคาสง <frameset frameborder = "yes/ no" > <frame src = “ชอไฟลเวบเพจ” >
</frameset>
281
ภาพท 7.7 แสดงผลการกาหนดสเสนแบงเฟรม
5.1.4 การกาหนดลกษณะของกรอบของเฟรมทกแบบ การกาหนดขนาดของเสนแบงเฟรม สามารถกาหนดใหดวยการใชแอททรบวท border, bordercolor, frameborder, framespacing ภายในคาสง <frameset>โดยมหนวยเปนพกเซล ถากาหนดลกษณะน frameborder จะตองกาหนดเปน " yes "
เมอแสดงผลโปรแกรมเวบเบราวเซอร ดงภาพท 7.8
ภาพท 7.8 ตวอยางการกาหนดรายละเอยดของเสนแบงเฟรม
<html> <head><title> กาหนดเสนขอบเฟรม</title></head> <frameset rows = "30%,* "border="5" bordercolor="red" frameborder="yes" framespacing="10">
<frame src = "head.html" > <frameset cols="45%,*"> <frame src = "left.html" > <frame src = "main.html" > </frameset>
</frameset> </html>
282
การเลอกใชแอททรบวทจากคายใดกได ไมวาจะเปนโปรแกรมอนเทอรเนตเอกซพลอเรอรหรอโปรแกรมไฟรฟอกซ สงหนงทตองระมดระวงเสมอ กคอการแสดงผลในโปรแกรมเวบเบราวเซอร เนองจากไมใชแอททรบวท มาตรฐาน ถานามาใชกควรตรวจสอบดกบโปรแกรมเวบเบราวเซอรอนดวยมผลดและผลเสยเกดขนหรอไม ถาเกดผลเสยกจะไดเลยงไปใชแอททรบวทแทน 5.1.5 การกาหนดชองวางในเฟรม การกาหนดชองวางในเฟรม สามารถกาหนดตาแหนงของหนาเวบเพจของเอกสารเอชทเอมแอล ทอยในเฟรมได เพอความสวยงาม มรปแบบคาสงกาหนดดงน
ความหมายของแอททรบวทตาง ๆ มดงน
แอททรบวท ความหมาย marginwidth การกาหนดชองวางระยะหางทางดานซายและดานขวา มหนวยเปนพกเซล marginheigth การกาหนดชองวางระยะหางทางบนและดานลาง มหนวยเปนพกเซล
เมอแสดงผลโปรแกรมเวบเบราวเซอร ดงภาพท 7.9
ภาพท 7.9 ตวอยางการกาหนด marginwidth= "50"
<html> <head><title> กาหนดเสนขอบเฟรม</title></head> <frameset rows = "30%,*"
<frame src = "head.html" marginwidth= "50"> <frameset cols="45%,*"> <frame src = "left.html" > <frame src = "main.html" > </frameset>
</frameset> </html>
รปแบบคาสง <frameset marginwidth= “ชองวางทางดานซายและดานขวา” marginheigth = “ชองวางทางบนและดานลาง” >
<frame scr = “ ชอไฟลเวบเพจ”> </frameset>
283
เมอแสดงผลโปรแกรมเวบเบราวเซอร ดงภาพท 7.10
ภาพท 7.10 ตวอยางการกาหนด marginheigth= "20"
6. การกาหนดรายละเอยดของแตละเฟรม
6.1 การลอกขนาดของเฟรม โดยปกตเสนแบงเฟรมทปรากฏจากการแบงเฟรม สามารถเคลอนยายตาแหนงไดดวย
การนาเมาสไปชทเสนแบงเฟรม สงเกตรปเมาสจะเปลยนจาก เปนรป หรอ ขนอยกบวาเสนแบงเฟรมอยในแนวใด และเมอคลกเมาสคางไวแลวลากขนาดของเฟรมกจะเปลยนแปลงไป เมอตองการใหไมสามารถปรบเปลยนขนาดของเฟรม สามารถทาไดดวยการกาหนดแอททรบวท noresize ภายในคาสง <frame>
รปแบบคาสง <frameset > <frame src = “ชอไฟลเวบเพจ” noresize >
</frameset>
<html> <head><title> กาหนดเสนขอบเฟรม</title></head>
<frameset rows = "30%,*" <frame src = "head.html" marginheigth= "50"> <frameset cols="45%,*"> <frame src = "left.html" > <frame src = "main.html" > </frameset> </frameset>
</html>
284
เมอแสดงผลโปรแกรมเวบเบราวเซอร ดงน
ภาพท 7.11 แสดงไมไดการลอกและการลอกขนาดของเฟรม
6.2 การกาหนดใหแสดง/ไมแสดงแถบเลอน (scroll bar)
กรณทเมอแสดงผลไฟลเวบเพจแลวมขอมลจานวนมากกวาพนททแสดงผล โปรแกรมเวบบราวเซอรจะแสดงแถบเลอนเพอใหสามารถเลอนดขอมลได และเมอแบงเฟรมแลวหากมขอมลจานวนมากกวาพนทของเฟรม โปรแกรมเวบบราวเซอรกจะแสดงแถบเลอนเพอใหสามารถเลอนดขอมลของเฟรมไดเชนกน ซงหลงจากแบงเฟรมแลวสามารถกาหนดไดวาจะใหแสดงหรอไมแสดงแถบเลอน การกาหนดใหแสดง/ไมแสดงแถบเลอน สามารถทาไดดวยการกาหนดแอททรบวท scrolling ภายในคาสง <frame> ทตองการ
ความหมายคาตาง ๆ ของแอททรบวท scrolling มดงน
รปแบบคาสง <frameset > <frame src = “ชอไฟลเวบเพจ” scrolling = “ คาการแสดงแถบเลอน” >
</frameset>
<html> <head><title> กาหนดเสนขอบเฟรม</title></head>
<frameset rows = "30%,*" > <frame src = "head.html" noresize > <frameset cols="45%,*"> <frame marginheigth= "20" src = "left.html" > <frame src = "main.html" > </frameset> </frameset>
</html>
ไมสามารถยอขยายเสนเฟรมได สามารถยอขยายเสนเฟรมได
285
แอททรบวท ความหมาย yes กาหนดใหแสดงแถบเลอน no กาหนดใหไมแสดงแถบเลอน
auto กาหนดใหหากมขอมลมากกวาพนททแสดงผลใหแสดงแถบเลอน แตหากขอมลนอยกวาพนทแสดงผลไมตองแสดงแถบเลอน
เมอแสดงผลโปรแกรมเวบเบราวเซอร ดงภาพท 7.12
ภาพท 7.12 แสดงผลการ ไมแสดงแถบเลอน (scroll bar)
ภาพท 7.13 การกาหนดใหแสดงแถบเลอน (scroll bar) โดยกาหนด scrolling="yes"
<html> <head><title> กาหนดเสนขอบเฟรม</title></head> <frameset rows = "30%,*" > <frame src = "head.html" noresize scrolling="no" > <frameset cols="45%,*"> <frame marginheigth= "20" src = "left.html" > <frame src = "main.html" > </frameset> </frameset>
</html>
286
7. การเชอมโยงเปลยนหนาเวบเพจในเฟรม
7.1 การกาหนดชอเฟรม
การกาหนดชอของเฟรม เพอประโยชนของการแสดงไฟลเวบเพจในกรณทเมอสรางจดเชอมโยงไฟลเวบเพจแลวตองการใหแสดงไฟลเวบเพจในเฟรมทกาหนด นยมใชสาหรบการแบงเฟรมโดยมเฟรมหนงเปนรายการหลกเพอใหคลกเลอก เมอคลกเลอกรายการแลวกจะแสดงผลไฟลเวบเพจในอกเฟรมหนงการแบงเฟรมเพอใหเลอกรายการเพอแสดงผลในเฟรมทกาหนด มขนตอนดงน 7.1.1 สรางไฟลเวบเพจทแสดงเปนรายการหลก โดยแตละรายการใหกาหนดเปนจดเชอมโยงดวยคาสง <a> และใหกาหนดแอททรบวท target ตามดวยชอของเฟรมทตองการแสดงผล 7.1.2 สรางไฟลเวบเพจเพอแบงหนาตางโปรแกรมเวบบราวเซอรออกเปนเฟรม แตละเฟรมใหกาหนดชอของเฟรม ขอสาคญ เฟรมทตองการใหแสดงผลไฟลเวบเพจ จะตองกาหนดชอใหตรงกบชอทกาหนดในแอททรบวท target ในขอ 1
การกาหนดชอของเฟรมสามารถทาไดดวยการกาหนดแอททรบวท name ภายในคาสง <frame>
เมอแสดงผลโปรแกรมเวบเบราวเซอร ดงภาพท 7.14
<html> <head> <title>การเชอมโยงเฟรม</title> </head> <frameset rows="125,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="head.html" name="topFrame" scrolling="no noresize="noresize" >" <frameset rows="*" cols="184,*" framespacing="0" frameborder="no" border="0"> <frame src="left.html" name="leftFrame" scrolling="no" noresize="noresize"> <frame src="main.html" name="mainFrame" > </frameset>
</frameset> </html>
รปแบบคาสง <frameset > <frame src = “ชอไฟลเวบเพจ” name = “ ชอของเฟรม” > </frameset>
287
ภาพท 7.14 การกาหนดชอของเฟรม
7.2 การสรางการเชอมโยงโดยระบเฟรม
การกาหนดการเชอมโยงโดยระบเฟรมทตองการเชอมโยงนน ตองสรางเอกสารเวบเพจทมการเชอมโยง กาหนดแอททรบวท target ไวในคาสงแทก <a href >
ความหมายคาตาง ๆ ของแอททรบวท target มดงน
แอททรบวท ความหมาย _blank กาหนดใหเปดไฟลการเชอมโยงในหนาตางใหม _parent กาหนดใหเปดไฟลการเชอมโยงนนเตมพนทกรอบของเฟรมหลก
_self กาหนดใหเปดไฟลการเชอมโยงในพนทเฟรมของตนเอง _top กาหนดใหเปดไฟลการเชอมโยงในพนทกรอบโปรแกรมเวบเบราวเซอร
<html> <head><title>การเชอมโยงเฟรม ไฟล left.html</title></head> <body>
<table width="142" border="1"> <tr> <td><a href="frame_set1.html" target="_parent">หนาหลก </a> </td> </tr> <tr> <td><a href="register.html" target="mainFrame">สมครสมาชก</a></td> </tr>
รปแบบคาสง <body> < a href = “ชอเอกสารเวบเพจ” target “คาเฉพาะท”> </body>
ชอ topFrame
ชอ mainFrame ชอ leftFrame
288
เมอแสดงผลโปรแกรมเวบเบราวเซอร ดงภาพท 7.15
ภาพท 7.15 การเชอมโยงโดยระบเฟรม
จากตวอยางภาพท 7.15 กาหนดใหแบงหนาตางโปรแกรมเวบบราวเซอรออกเปน 2 สวน คอเฟรมทางซายและเฟรมทางขวา โดยเฟรมทางขวากาหนดใหมชอคอ mainframe เพอใชสาหรบแสดงผลไฟลเวบเพจ เฟรมทอยทางซายแสดงไฟล left.html ซงในไฟล left.html จะกาหนดจดเชอมโยงเพอแสดงไฟลเวบเพจตาง ๆ และกาหนดแอททรบวท target=“mainframe ” ดงนนเมอคลกทจดเชอมโยงในแตละตาแหนงแลวกจะแสดงผลไฟลในเฟรมชอ mainframe ซงเปนเฟรมทอยทางขวาการแบงเฟรมภายในเฟรม แตมการกาหนดจดหนงคอ หนาหลก ใหเลอกการเชอมโยงไปยงหนาเดม จงกาหนด <target="_parent">
จากตวอยางทผานมาหลายๆ ตวอยางเปนการแบงหนาตางโปรแกรมเวบเบราวเซอร ออกเปนเฟรมตาง ๆ เพยงครงเดยวเทานน แตเฟรมทถกแบงออกมาแลวยงสามารถแบงเปนเฟรมยอยไดอกดวยการใช <frameset> และคาสง <frame> เพอแบงเฟรมเปนเฟรมยอยอก
<tr> <td><a href="css_table.html" target="mainFrame">รายชอสมาชก</a></td>
</tr> <tr> <td><a href="bgcolor2.html" target="mainFrame">ปรชญาเศรษฐกจพอเพยง </a></td> </tr>
</table> </body> </html>
Target = mainFrame Left.html
289
8. การแทรกเฟรมซอนเฟรม
8.1 การแทรกเฟรมภายในเอกสารเวบเพจ
ตามตวอยางทผานมามการกาหนดเฟรมแลวนาเอกสารเวบเพจมาใสในเฟรม แตในทน เปนการกาหนดการแทรกเฟรมภายในเอกสารเวบเพจ ซงจะสลบกบนาเอกสารเวบเพจมาใสในเฟรม โดยมรการกาหนดคาสงแทกคอ <iframe> ใวในแทก <body> เชน
เมอแสดงผลโปรแกรมเวบเบราวเซอร ดงภาพท 7.16
<html> <head><title>การเชอมโยงเฟรม ไฟล left.html</title></head> <body>
<center> <font color="blue">วชา การเขยนเวบเพจดวยภาษา HTML
รหสวชา 3204-2201<br> หลกสตรประกาศนยบตรวชาชพชนสง พทธศกราช 2546<br> หมวดวชาชพ สาขาวชาคอมพวเตอรธรกจ<br> สาขางานการพฒนาเวบเพจ ประเภทวชาบรหารธรกจ<br> จานวนหนวยกต ( ชวโมง ) 3 ( 4 ) จานวน 4 ชวโมง รวม 72 ชวโมง<br>
<font color="fuchsia">โดย <br> นางสาวอภวนท จกรคา จกรคา<br> แผนกวชาธรกจเกษตร<br> วทยาลยเกษตรและเทคโนโลยเชยงใหม<br><br> </center> <tr>
<td> <iframe src="link_map.html" width="600" height= "500" >
</iframe> </td>
</tr> </body> </html>
รปแบบคาสง <body> <iframe src ="ชอไฟล HTML หรอชอเวบไซต">… </iframe> </body>
290
ภาพท 7.16 การแทรกเฟรมภายในเอกสารเวบเพจ
8.2 การแทรกเฟรมกบเฟรม
การแทรกเฟรมภายในเฟรมหลก สามารถกาหนดใหเฟรมมเฟรมยอยขนมาดวยการเพมคาสงแทก <frameset> เพอเพมการแบงเฟรมอก อยางตวอยางตางๆ ทผานมาไมไดกลาวถง การแบงเฟรมเพมแตไกกาหนดใหเหน จงอธบายตามคาสงแทรกทไดกาหนดมาแลว ดงเชน
เมอแสดงผลโปรแกรมเวบเบราวเซอร ดงภาพท 7.17
<html> < head><title> กาหนดเสนขอบเฟรม</title></head>
<frameset rows = "30%,*" frame src = "head.html" > <frameset cols="45%,*"> <frame src = "left.html" > <frame src = "main.html" > </frameset>
</frameset> </html>
รปแบบคาสง <frameset frame …………………….
<frameset > <frame ……………………. <frame ……………………. </frameset>
</frameset>
291
ภาพท 7.17 การแทรกเฟรมกบเฟรม
สรปทายหนวยท 7
เฟรม คอ สวนของหนาตางเวบเบราวเซอรทถกแบงออกเปนสวนๆ โดยสามารถแบง
ออกเปนกสวนกได แตละสวนทถกแบงจะมความเปนอสระจากกน สามารถแสดงผลไฟลเวบเพจทแตกตางกนได ซงคาสงสาหรบสรางเฟรม การกาหนดการแบงเฟรม การแบงหนาตางโปรแกรมออกเปนเฟรม การกาหนดรายละเอยดของการแบงเฟรม การกาหนดรายละเอยดของแตละเฟรม การเชอมโยงเปลยนหนาเวบเพจในเฟรม การแทรกเฟรมซอนเฟรม
292
แบบทดสอบหลงเรยน หนวยท 7 การสรางเฟรม
คาชแจง เลอกคาตอบทถกเพยงขอเดยวลงในกระดาษคาตอบ 1. เฟรม (Frame) มความหมายตรงกบขอใด ก. การแบงเปนคอลมนกบแถว ข. หนาตางโปรแกรมเวบเบราวเซอร ค. ไมสามารถแบงหนาตางโปรแกรมออกเปนเฟรมได ง. สวนของหนาตางโปรแกรมเวบเบราวเซอรทแบงออกเปนสวน
2. คาสงแทก <frameset>.....</frameset> ตรงกบขอใด ก. หนาตางโปรแกรมเวบบราวเซอร ข. ไมสามารถแบงหนาตางโปรแกรมออกเปนเฟรมได ค. คาสงสาหรบกาหนดไฟลเวบเพจทจะแสดงผลในแตละเฟรม ง. สวนของหนาตางโปรแกรมเวบเบราวเซอรทแบงออกเปนสวน
3. คาสงแทก <noframeset>.....</noframeset> ตรงกบขอใด ก. การแบงเปนคอลมนกบแถว ข. ไมสามารถแบงหนาตางโปรแกรมออกเปนเฟรมได ค. คาสงสาหรบกาหนดไฟลเวบเพจทจะแสดงผลในแตละเฟรม ง. สวนของหนาตางโปรแกรมเวบเบราวเซอรทแบงออกเปนสวน
4. ขอใดคอกลาวถงการแบงเฟรมไดถกตอง ก. เมอมคาสงในการแบงเฟรมจะไมมการใชคาสง <body> ข. เมอมคาสงในการแบงเฟรมจะไมมการใชคาสง <head> ค. เมอมคาสงในการแบงเฟรมจะไมมการใชคาสง <html> ง. เมอมคาสงในการแบงเฟรมจะไมมการใชคาสง <title> 5. “500,*,*” คอแบงตามหนาตางโปรแกรมตามขอใด ก. แบงตามหนาตางโปรแกรมออกเปน 2 เฟรม โดยเฟรมท 1 มขนาด 500 pixels และ พนททเหลอทงหมดจะเปนเฟรมท 2 ข. แบงตามหนาตางโปรแกรมออกเปน 2 เฟรม โดยเฟรมท 2 มขนาด 50 % และพนทท เหลอทงหมดจะเปนเฟรมท 2 ค. แบงตามหนาตางโปรแกรมออกเปน 3 เฟรม โดยเฟรมท 1 มขนาด 500 pixels และ พนททเหลอทงหมดจะเปนเฟรมท 1 และ เฟรม 3 ง. แบงตามหนาตางโปรแกรมออกเปน 3 เฟรม โดยเฟรมท 2 มขนาด 500 pixels และ พนททเหลอทงหมดจะเปนเฟรม 1 และเฟรม 2
293
6. การแบงเฟรมในแนวตงเปน 50 เปอรเซนต ตรงกบคาสงแทกขอใด
ก. <frameset Cols = “50%,*> ข. <frameset row = “50%,*> ค. <frameset Cols = “50%,*,0*> ง. <frameset row = “50%,*> 7. กาหนดสใหกบขอบของเฟรม ตรงกบคาสงแทกขอใด ก. <frames border = “red”> ข. <iframe border = “red”> ค. <frameset border = “red”> ง. <noframe border = “red”>
8. สญลกษณ เปนรป หรอ .คอเหตการณอะไร
ก. เมอนาเมาสไปวางทเสนแบงเฟรม สงเกตรปเมาสจะเปลยนจาก เปนรป หรอ
ข. เมอนาเมาสไปวางทเสนแบงเฟรม สงเกตรปเมาสจะเปลยนจาก เปนรป หรอ
ค. เมอนาเมาสไปวางทเสนแบงเฟรม สงเกตรปเมาสจะเปลยนจาก เปนรป หรอ
ง. เมอนาเมาสไปวางทเสนแบงเฟรม สงเกตรปเมาสจะเปลยนจาก เปนรป หรอ
9. คาสงแทก <frame src="main.html" name="mainFrame" > ตรงกบขอใด ก. การแบงเฟรม ข. การเชอมโยงในเฟรม ค. การกาหนดแทรกเฟรม ง. การกาหนดสใหกบเฟรม
10. ขอใดคอคาสงการเชอมโยงในเฟรม
ก. < src="link_map.html" width="600" heigth="500"> ข. <iframe src="link_map.html" width="600" heigth="500"></iframe> ค. <iframe src="link_map.html" width="600" heigth="500"></iframe> ง. <frameset src="link_map.html" width="600" heigth="500"></frameset>
294
เฉลยแบบทดสอบกอนเรยน หนวยท 7 การสรางเฟรม
ขอท 1 ข ขอท 6 ข ขอท 2 ค ขอท 7 ค ขอท 3 ค ขอท 8 ก ขอท 4 ก ขอท 9 ข ขอท 5 ก ขอท 10 ค
เฉลยแบบทดสอบหลงเรยน
ขอท 1 ง ขอท 6 ก ขอท 2 ง ขอท 7 ก ขอท 3 ข ขอท 8 ก ขอท 4 ก ขอท 9 ข ขอท 5 ก ขอท 10 ง
หมายเหต นกศกษาตองไดคะแนนไมนอยกวา 6 คะแนน (รอยละ 60) ถอวาผานเกณฑ
295
แบบฝกหด หนวยท 7 การสรางเฟรม
ตอนท 1 จงใสเครองหมาย หนาขอความทถกและใสเครองหมาย หนาขอทผด
1. การใชเฟรมเปนการแบงหนาจอของโปรแกรมเวบเบราวเซอรออกเปนสวนยอย ทาให สามารถใชพนททงหมดบนหนาจอไดอยางประสทธภาพ
2. ชอแอทรบวต column เปนการแบงพนทตามแนวนอน และ rows เปนการแบงพนท ตามแนวนตง
3. frameborer เปนตวเลอกหนงในการกาหนดลกษณะของกรอบเฟรม 4. border, bordercolor , frameborder, frameapacing เปนแอทรบวตทกาหนดโดย
โปรแกรมเวบเบราวเซอร 5. แอทรบวต marginwidth , marginheigth ไมสนบสนนโปรแกรมเวบเบราวเซอร
internet Explorer 6. scrolling มคาทกาหนดได 2 คา คอ yes กบ no 7. noresize คอ แทรบวตทปองกนไมใหปรบขนาดของเฟรม 8. target=”_blank เปนการเดไฟลการเชอมโยงนนในพนทเฟรมของตนเอง 9. การแทรกเฟรมคาสงแทกทถกตองคอ <frame> <frame>
<franeset> ..ขอความ...
</franeset> </frame> </frame> 10. การปรบขนาดของเฟรมสามารถปรบขนาดได โดยการคลกเมาสทกรอบของเฟรมจะ ปรากฏเคอรเซอรเปนสญลกษณลกศร เพอใชเลอนปรบขนาด
296
เฉลยแบบฝกหด หนวยท 7 การสรางเฟรม
ขอท.
1 ขอท.
2 ขอท.
3 ขอท.
4 ขอท.
5 ขอท.
6 ขอท.
7 ขอท.
8 ขอท.
9 ขอท. 10
297
ใบงานท 11 วชาการเขยนเวบเพจดวยภาษา HTML (3204-2201) หนวยท 7 ชอหนวย การสรางเฟรม สอนครงท 12 ชองานเรอง จดโครงสรางหนาเวบเพจดวยเฟรม ชวโมงรวม 4 ชวโมง จดประสงคการเรยนร 1. เพอใหนกศกษามความรความเขาใจเกยวกบการสรางเฟรม 2. เพอกาหนดการสรางเฟรมใหสวยงามไดอยางถกตอง 3. เพอใหนกศกษาเกดความคดรเรมสรางสรรค มเทคนคการกาหนดเฟรมสาหรบจด โครงสรางหนาเวบเพจ จดประสงคเชงพฤตกรรม 1. กาหนดตารางแบงสดสวนขอบเขตใหสวยงามตามหลกการ 2. รจกใชคาสงแทกในการสรางเฟรมแบงสดสวนขอบเขตเวบเพจใหสวยงามและเปน ระเบยบ 3. จดสรรเวลาในการปฏบตใบงานไดอยางรอบคอบและมความคดสรางสรรคผลงาน สอการเรยนการสอน
1. เครองคอมพวเตอร, โนตบค, พอกเกตพซ, แทบเลตพซ 2. กลองดจตอล หรอมอถอทมระบบบนทกภาพได
วสดอปกรณ 1. แผน CD 2. ใบงานท 10 3. แบบฟอรมกจกรรมทกษะท 11 4. แบบประเมนผลกจกรรมทกษะ ภาคผนวก ก 5. แบบประเมนคณธรรม จรยธรรม คานยมและคณลกษณะทพงประสงค การบรณการ ตามหลกของเศรษฐกจพอเพยงและคณลกษณะ 3 D ลาดบขนตอนการปฏบต 1. นกศกษาปฏบตเปนรายกลมตามกจกรรมกลม หนวยท 6 กจกรรมทกษะท 9 เพอปฏบตกจกรรมทกษะท 10 2. กอนทจะดาเนนการจดกลมใหนกศกษารวมกนระดมความคดในการทจะทารปแบบของเฟรมตางๆ ใหเทากบจานวนกลมทจดขน เชน ถาม 5 กลม กระดมความคดจดทารปแบบของเฟรมออกมา 5 เฟรม ตามตวอยาง โดยมหวหนาหองเรยนเปนประธานทาหนาทเปนผนาดาเนนการและจดเตรยมฉลากเลอกรปแบบการจดเฟรม
298
3. ใหแตละกลมสงตวแทนจบฉลากเลอกรปแบบเฟรม 4. ใหแตละกลมนาผลจากพฒนาเวบเพจ จากใบงานท 10 กจกรรมทกษะท 10 หนวยท 6
การสรางตาราง ของแตละกลม ปฏบตการจดโครงสรางหนาเวบเพจดวยเฟรมตามทจบฉลากได 5. ใหสมาชกคนอนๆ ในกลมชวยกนระดมความคดเหนใหมากทสดปรบปรงแกไขชนงานให
ครอบคลมดงน การแบงหนาตางโปรแกรมออกเปนเฟรม 5.1 การกาหนดรายละเอยดของการแบงเฟรม
5.2 การกาหนดรายละเอยดของแตละเฟรม 5.3 การเชอมโยงเปลยนหนาเวบเพจในเฟรม 5.4 การแทรกเฟรมซอนเฟรม
. นาผลจากการพฒนาเวบเพจ บนทกลงในแบบฟอรมกจกรรมทกษะท 11 6. สงตวแทนออกมา นาเสนอผลงานเพอแลกเปลยนเรยนรใหเพอนกลมอนฟง 7. เมอนาเสนอผลงานทกกลมเสรจแลว ใหทกกลมทาการ Print Screen หนาจอภาพแตละหนาเพจ นาผลงานตดบอรดหนาหองเรยนเพอแลกเปลยนความรภายนอกกลม 8. ใ หท าการบนทก ไฟลข อม ลหนา โฮมเพจ คอ ช อกล มตามดวย work10 เ ชน fuilt_work10.html สาหรบไฟลขอมลอนใหบนทกตามหลกการบนทกไฟลเอกสาร 9. การจดเกบไฟลใหเกบไวท โฟลเดอร Group_ ตามดวยชอกลม เชน Group_fuilt คดลอกโฟลเดอรและไฟลทงหมด ลงบน แผน CD-ROM จดสงใหครผสอน 10. ข อม ลท ไ ด ส บค นมา ใ ห ร ะ บแหล งท ม า ด วย ด ต วอ ย า งการ เข ยนแหล งท ม า http://apiwan.cmcat.ac.th/dataapiwan/subject/bb.pdf
ขอเสนอแนะ 1. ใหอยทดลพนจของผสอน 2. กอนฝกปฏบตการเขยน ควรตรวจสอบความพรอมการทางานของอปกรณ ไดแก เครองคอมพวเตอร โนตบค, พอกเกตพซ, แทบเลตพซ 3. ตรวจสอบการใชงานดวยโปรแกรมเวบเบราวเซอรได 4. นกศกษาสามารถใชความคดรเรมสรางสรรคในการสรางชนงานได 5. ชวงระหวางฝกปฏบตการเขยนใหสงเกตการเขยนคาสงแทกตาง ๆ วาถกตองตามองคประกอบของเอกสารเอชทเอมแอล 7. ใบกจกรรมทกษะท 10 สามารถจดพมพใหมเพมเตมได หรอดาวนโหลดไดท http://apiwan.cmcat.ac.th/dataapiwan/lesson7/activity10.docx
8. ผเรยนสามารถคนหาขอมลเพมเตมไดท http://apiwan.cmcat.ac.th/
299
การประเมนผล
1. สงเกตพฤตกรรมขณะปฏบตงาน 2. ตรวจกจกรรมทปฏบตจากผลงานกจกรรมทกษะท 11 3. ประเมนผลงานเปนรายกลม ภาคผนวก ก 4. ประเมนคณธรรม จรยธรรม คานยมและคณลกษณะทพงประสงค การบรณการตามหลกของเศรษฐกจพอเพยงและคณลกษณะ 3 D
เกณฑประเมนผลงานกจกรรมท 11 1. รปแบบการนาเสนอผลงาน 5 คะแนน 2. ลกษณะการเขยนเปนระเบยบ อานงาย สะอาด 5 คะแนน 3. คาสงแทก ถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 4. เนอหาถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 5. รบผดชอบสงงานตรงตามเวลาทกาหนด 5 คะแนน
รวม 25 คะแนน
300
กจกรรมทกษะท 11 เรอง การจดระเบยบเอกสารHTMLดวยตาราง
ชอกลม สมาชกกลม 1 2 3 6
ระดบคะแนน ผาน ไมผาน
1. ออกแบบบการแบงเฟรม ดตวอยางหนา 298
2. คาสงแทกในการสรางเฟรม
แผนท..........
301
ตวอยางการออกแบบเฟรม
1.1 index.html
ระบบคอมพวเตอร
สวนรบขอมล สวนประมวลผล สวนแสดงผล หนวยความจา
ตดตอเรา
input_frame.html Process_frame.html Output_frame.html Memory.html About.html
1.2 output_frame.html
สวนแสดงผล
หนาหลก จอภาพ
เครองพมพ สแกนเนอร
Index.html mornitor.html Printer.html Scanner.html
LOGO
LOGO
Top.html
main.html
left.html
top2.html
main2.html
left2.html
Recommended