หน่วยที่ 7 การสร้างเฟรม - Udontechit.udontech.ac.th/.../31/mod_forum/post/17/unit7.pdf269 แบบทดสอบก อนเร ยน หน

หนวยท 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



รปแบบเฟรม

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 แสดงผลการกาหนดเสนแบงเฟรม

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 แสดงผลการไมใหกาหนดเสนแบงเฟรม

โดยปกตหากไมกาหนดแอททรบวท frameborder จะหมายถงใหแสดงเสนแบงเฟรมซงมความหมายเหมอนกนการกาหนดแอททรบวท frameborder = "yes"

5.1.3 การกาหนดสเสนแบงเซล การกาหนดขนาดของเสนแบงเฟรม สามารถกาหนดใหดวยการใชแอททรบวท bordercolor ภายในคาสง <frameset> โดยมหนวยเปนพกเซล


<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 ตวอยางการกาหนด 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 ตวอยางการกาหนด 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 แสดงผลการ ไมแสดงแถบเลอน (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>


<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 กาหนดใหแบงหนาตางโปรแกรมเวบบราวเซอรออกเปน 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> เชน


<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> เพอเพมการแบงเฟรมอก อยางตวอยางตางๆ ทผานมาไมไดกลาวถง การแบงเฟรมเพมแตไกกาหนดใหเหน จงอธบายตามคาสงแทรกทไดกาหนดมาแลว ดงเชน


<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

Documents

หน่วยที่ 7 การสร้างเฟรม - Udontechit.udontech.ac.th/.../31/mod_forum/post/17/unit7.pdf269 แบบทดสอบก อนเร ยน หน