หนวยการเรยนท 8 การออกแบบเวบดวยเทคนค Frame

สาระการเรยนร การออกแบบเวบดวยเทคนค Frame เปนการเรยนรรปแบบการสรางหนาเวบทใชนาเสนอเนอหาเวบ บนโปรแกรมบราวเซอรโดยนาเอาหนาเวบเพจ มากกวา 1 หนามานาเสนอในหนาจอเดยวกนโดยมการจดสดสวนหนาจอเหมอนเปนหนาเอกสารเวบ 1 หนา ซงแตละสวนทแบงกคอไฟลเวบเพจ .html 1 ไฟลเราเรยกวาเฟรม (Frame) ถามการแบงเปน 3 สวน หนาเวบทแสดงอยจะประกอบดวยไฟลเนอหา .html 3 ไฟลหรอ 3 เฟรม และหนาแสดงทรวม เฟรมไวเราเรยกวาเฟรมเซต(Frameset) เปนไฟล .html อก 1 ไฟลหนาแสดงผลทรวมไฟล 3 ไฟลไวคอหนาโฮมเพจนนเอง รวมแลวในหนาโฮมเพจ ทมการแบงออกเปน 3 เฟรม จะมไฟลเวบ html ทงหมด 4 ไฟล (Frameset 1 , Frame 3 = 4 ) เนองจากการสรางเวบเพอนาเสนอเนอหา บางประเภท เชน เวบ E-Learning การนาเสนอเนอหาแบบเฟรมเซตจะทาใหผเรยน ใชงานสะดวกกวาแบบอน เพราะสวนของเฟรมเมน กบสวนเฟรมเนอหาทแสดงคกน จะเปนอสระ ไมเลอนไหลตามกนเมอใช Scrollbar เราสามารถตรงสวนเฟรมเมนใหคงทไว (ปกตมกอยดานซายของผชม) เมอคลกเลอกเมนใด ๆ สวนเนอหากแสดงในสวนเฟรม (ปกตมกจดไวดานขวาของผชม) ในหนาเดยวกน ทาใหสะดวกตอการเรยนรเนอหาตาง ๆ การออกแบบวางหนาเวบ ใหเหมาะสมกบงาน ท ใช ผเรยนตองเรยนรรปแบบการจดแบบตาง ๆ เพอเลอกแบบไปใชงานไดอยางเหมาะสม

ผงความคด (Mind Mapping)

การออกแบบเวบดวยเทคนค Frame

1. ความรเกยวกบ Frame

3. การบนทกเฟรม เฟรมเซต

2. การสราง Frame และ Frameset

4. การกาหนดคณสมบตเฟรม เฟรมเซต 5. การใสเนอหาในเฟรม

6. การเชอมโยงในเฟรม เฟรมเซต

278

จดประสงคการเรยนร 1. บอกความหมายของ Frame ในการสรางเวบได 2. บอกความหมายของ Frameset ในการสรางเวบได 3. สามารถใชคาสงออกแบบเวบดวยเฟรม และเฟรมเซตได 4. สามารถบนทกเฟรม และเฟรมเซตได

5. สามารถตกแตงเพม คณสมบตของเฟรม และเฟรมเซตได 6. บอกขนตอน การใสเนอหาลงใน เฟรมได 7. สามารถสรางการเชอมโยงเวบแบบเฟรมเซตไดอยาง เหมาะสม

279

การออกแบบเวบดวยเทคนคเฟรม (Frame)

การออกแบบหนาเวบดวยเทคนคการแบงสวนการทางานเปนสวน ๆ ใหแตละสวนมอสระตอ กนเชนสวนเนอหา สามารถเลอนไป แตเมนอยกบท ทาใหผชมสามารถคลกเลอก ดรายการเนอหาไดอยาง สะดวก วธแบงหนาเอกสารเวบเปนสวน ๆ โดยแตละสวนแสดงผลอยในหนาเดยวกนไดนเรยกวาการแบง หนาเวบดวย เฟรม ซงมรายละเอยดการสรางดงน

1. ความรเกยวกบ Frame

เฟรม (Frame) คอ การแบงสวนพนทการแสดงผลบนเวบบราวเซอรออกเปนสวน ๆ แตละสวน จะแสดงไฟลเวบเพจหรอไฟล HTML ทแตกตางกนไดอยางเปนอสระจากกน การสรางเวบดวยเฟรมจะใช พนทเตมหนาจอคอมพวเตอรทงหมด ดงนนการออกแบบจะตองคา นวณขนาดความกวางของแตละเฟรม คอไฟล HTML ใหลงตวกบหนาจอคอมพวเตอร เพอใหตาแหนงขอมลอยในตาแหนงท เราออกแบบ ขอดของการใชเฟรมเขามาชวยในการจดหนาเวบเพจ คอ สามารถแสดงเวบเพจไดหลายหนา ในจอภาพเดยวกน และเนองจากเฟรมสามารถแบงพนทหน าจอของเวบบราวเซอรได จงสะดวกตอการกาหนดพนทในการนาเสนอเนอหาตามตองการได

เฟรมเซต (Frameset) คอ ไฟล HTML ทประกอบไปดวยกลมของเฟรม และคณสมบต ตาง ๆ ของเฟรม เชนขนาดของแตละเฟรม จานวนเฟรม ไฟล HTML ทจะนามาใชในแตละเฟรม รวมทง การเชอมโยงในแตละเฟรม ดงรปท 8.1

รปท 8.1 แสดงตวอยางเฟรมและเฟรมเซต

2 3

1

Frame Set

280

2. การสราง Frame และ Frameset

การสรางเวบดวยเฟรม เปนการใชเฟรมเซต (Frameset) มาสรางหนาเวบเพจเพอใหการแสดงเนอหาในหนาเวบ แบง ออกเปนสวน ๆ โดย แตละสวน ทแบงเรยกวา เฟรม (Frame) เพอใหแตละสวนของ เนอหา เปนอสระตอกน (ดรปท 8.15) เทคนคการออกแบบดวยเฟรมนเราจะพบมากในเวบประเภท E-Learning ซงใชวธตรงรายการหวขอเนอหา (เมนลงค)ไวดานซายของจอภาพ และใหสวนของเนอหา ซงจะจดไวดานขวาสามารถเลอนไปไดโดยใชแถบเลอน (Scrollbar) ทาใหผเรยนทราบวากาลงศกษา เนอหาอะไรอย หรอบางกรณ มการใชเพยงเฟรมเดยวแทรกในหนาเวบเปนกรอบเลก ๆ โดยภายในกรอบเนอหามแถบเลอน เพอนาเสนอรายละเอยดเนอหา เพม เปนการเนนสรางความนาสนใจและใชพนท หนาเวบเพจใหเสนอเนอหาใหมากทสด การออกแบบเวบดวยเทคนคเฟรม จะตองวางแผนการออกแบบอยางเปนขนตอน และตองรวาเรากาลงทางานอยในเฟรม หรอเฟรมเซต เอกสารประกอบการเรยนการสอนน จะเนนการเสนอเนอหา การสรางเวบแบบเฟรมเซตเทานน สาหรบการแทรกเฟรมเดยวในเนอหาไดแนะนา Code HTML ไวในตอนทายของบทเรยน ซงสามารถนาไปใชแทรกเนอหาเวบทวไปไดเลย

การสรางเฟรม และเฟรมเซต เพอนาเสนอหนาเวบเพจแบบแบงเปนสวน ๆ ดวยโปรแกรม Dreamweaver 8.0 สามารถสรางได 2 วธคอ

1. สรางโดยใชแบบสาเรจของโปรแกรม 2. สรางโดยการวาดใหมดวยตนเอง

1. สรางโดยใชแบบสาเรจของโปรแกรม การสรางเฟรมจากแบบสาเรจทเปนโปรแกรมเตรยมไวให มวธใชคาสงเรยกมาได 2 วธ

1.1 สรางจากเมน File มขนตอน ดงรปท 8.2

1. เรมจาก คลกเลอกเมนคาสง File > New 2. จะปรากฏกรอบโตตอบ New Document ใหคลกทแทบ General เลอก Framesets ในสวน

Category แลวเลอกรปแบบของเฟรมเซต ในสวน Framesets โดยสามารถดตวอยางไดจาก Preview ทางดานขวามอ จากนนคลกปม Create

3. จะปรากฏเฟรมเซตตามแบบทเลอกไว ตามทแสดงหมายเลข 3 เปนพาเนลเครองมอควบคม เฟรมเซต และหนาตาง Properties Inspector ดานลางจะเปนของเฟรมเซต แตหากคลกเมาสทเฟรมยอย ใด ๆ กจะเปลยน Properties ไปเปนแบบเวบเพจ HTML ธรรมดา

281

1

2

3

Properties ของเฟรมเซต

รปท 8.2 แสดงการสรางเฟรมจากคาสง File > New

1.2 สรางจากเมน Layout มขนตอน ดงรปท 8.3 1. คลกทแทบ Layout จาก Insert Bar 2. จากนนคลกทไอคอน Standard Mode 3. คลกทไอคอน Frame เพอเลอกรปแบบเฟรมทตองการสราง 4. เลอกรปแบบเฟรมตามตองการกจะไดชดเฟรมเซต ทาการปรบแตงขนาดเฟรมตอไป

282

รปท 8.3 แสดงขนตอนการสราง Frame ดวย คาสง Layout

5. จะไดหนาตางชดของเฟรมเซตดงรปท 8.4 หมายเลข 1. คอชดของเฟรมเซต หมายเลข 2. คอพาเนลควบคมเฟรม หมายเลข 3. หนาตาง ทใหเรากาหนด ตาแหนงปลายทางการแสดงผล (Target) เมอสงใหลงคในชดของเฟรมเซต ใหกาหนดเปน MainFrame แลวตอบ OK จะได Frameset ดงปรากฏ ในพนทสรางงาน (Document) จะมเสนสนาตาลแบงเฟรมใหเหนตามแบบทเลอก ตอไปใหทาการบนทก จะกลาวถงในหวขอ การบนทกเฟรมและเฟรมเซตตอไป

รปท 8.4 แสดง Frame ทไดจากคาสง Layout

283

2. สรางโดยการวาดใหมดวยตนเอง

การวาดเฟรมเซต ขนใหมดวยตนเอง ใชวธการเปลยนไฟลเวบเพจธรรมดา เปนเฟรมเซต ทาได ดงรปท 8.5 และ รปท 8.6

1. สรางไฟล HTML จาก File > New เมอไดไฟล HTMLใหมมาแลว เราจะเปลยนใหเปนเฟรมเซต ใหคลกเมาสในพนทหนาเอกสารเวบ HTML ตรงตาแหนงทตองการแบงพนทออกเปนสวนของเฟรม แลวเลอกเมน Modify

2. เลอก Frameset 3. เลอกรายการแบบการแยกเฟรม ควรเลอกแบบ Split Frame Up หรอ Split Frame Down

เพอเพม หรอแบง พนทออกเปน 2 สวนกอน Split Frame Up จะสรางเฟรมขนไปทางดานบนของตาแหนง เคอรเซอร Split Frame Down จะสรางเฟรมลงไปทางดานลางของเคอรเซอร เมอเราไดหนาเวบแบงเปน 2 สวน (2 เฟรม) แลว เราจะแบงเฟรมเพม อกไดตามตองการ

รปท 8.5 การใชคาสงแบงหนาเวบเพจ เปน เฟรมเซต

4. จากรปท 8.5 เราเลอก Split Frame Up จะไดเฟรม 2 เฟรม ดงรปท 8.6 หมายเลข 1 เปนเสนขอบเฟรมเซต หมายเลข 2 เปนเสนแบงเฟรม หมายเลข 3 เปนพาเนลควบคมเฟรม

284

รปท 8.6 แสดงผลการแบงหนาเอกสารเวบเปนเฟรมเซต

5. วาดเสนแบงเฟรมเพมเตม ดงรปท 8.7 ในทนจะแบงเฟรมท 2 เ รมจาก คลกทพาเนลควบคม เฟรมตามตาแหนงทตองการ แบง

ตามหมายเลข 1 > จะปรากฏเสนปะในกรอบพนทเฟรม ใหกด Alt +แดรกเมาสลากเสนแบงจากเสนกรอบเฟรมนอกสด (เสนของเฟรมเซต) ตามหมายเลข 2 > จะปรากฏมเสนแบงตามมาดงหมายเลข 3 จดเลอนตาแหนงตามตองการ จะไดเฟรมใหมเพมขนมา หากไมตองการหรอตองการลบเฟรมทลากออกมากให ลากเสนแบงกลบไปทเสนขอบ หมายเลข 2 เสนแบงก จะหายไป การสรางเฟรมดวยวธนเราจะเพมหรอ ลบเฟรม ไดตามจานวนทตองการ เพราะ เปนการวาดกาหนดเสนแบงเฟรมขนมาดวยตนเอง เมอแบงเฟรมเรยบรอยแลวเรากจะทาการ บนทกตอไป

รปท 8.7 แสดงการแบงเฟรมเพมเตม

285

3. การบนทกเฟรม และเฟรมเซต

การบนทกเฟรมและเฟรมเซตเปนขนตอน ทตองใหความระมดระวงความผดพลาดมาก เพราะในเฟรมเซต ประกอบดวยเฟรมซงแตละเฟรม คอไฟล .html 1 ไฟล และตวเฟรมเซตกเปนไฟล .html อก 1ไฟลเชนกน ตวเฟรมเซตนจะเปนไฟลหลกทนาทกเฟรมในชดมาแสดงรวมกน เราจะใชไฟลเฟรมเซตนเปน Home page หากเราใชไฟลนเปนหนาชเขาสเวบไซต เราตองใชชอไฟลเฟรมเซตน วา index.html หรอ default.html (ชอมาตรฐานทผควบคมเวบไซตใชชเขาสเวบไซตทวโลกจะใช index หรอ default เทานน ) สวน เฟรมอน ๆ กตงชอไดตามตองการ จะตงชอตามงา นหรอหนาท เพอใหจาไดงาย ดงตวอยางการบนทกเฟรมเซตทจะแสดงดง รปท 8.8

กอนสงบนทก ใหเตรยมสราง Folder เกบงาน ไวกอน ใน Drive C: หรอ D: (ตองปฏบตเชนน เสมอ) จงเรมสงบนทกเฟรม แ ละเฟรมเซต

1. คลกทเสนขอบกลองควบคมหรอพาเนล Frame ใหปรากฏสดาเขมโดยรอบ 2. สงเกตท Properties เปนชอของ Frameset แสดงวาคลกเสนใน ขอ 1. ถกตอง 3. คลกทปมคาสง Save all หรอไปทเมน File > Save all

รปท 8.8 แสดงขนตอนการสงบนทกเฟรมเซต

286

4. จะปรากฏหนาตางการบนทก > ใหเลอก Folder เกบงานทเตรยมไว > หมายเลข 1. ตามตวอยางนใชชอโฟลเดอรวา project การบนทกไฟลแรกจะเปนกรอบของ เฟรมเซตเสมอ เพราะเราคลกกรอบนอกไว (ดงกลาวแลวในขอ 2)ไฟลท 1 จงเปนหนาโฮมเพจ ใหใชชอไฟล index.html > หมายเลข 2. เมอคลกปมบนทกไฟลแรก index.html แลวจะปรากฎหนาตางใหเราบนทกตอ (เนองจากเราใชคาสง Save all)ใหบนทกตอโดย สงเกตกรอบแลเงาดงภาพหมายเลข 2 ตงชอตามความเหมาะสม ในทนจะใชสวนเฟรมนเปนเมน จงใชชอวา Menu.html ดงหมายเลข 3 เมอสงบนทกกจะปรากฏกรอบ บรเวณสวนเฟรมตอไป ใหคลกปม Save บนทกไฟล .html ตามหมายเลข 4 จนครบทกเฟรม หนาตางการบนทกจงจะปดไปเอง ดงรปท 8.9

รปท 8.9 แสดงการบนทกเฟรมเซตและเฟรม

5. เมอบนทกเสรจใหทาการเปด เพอตรวจสอบวาเราไดบนทกเฟรม เซต เฟรม ครบหรอไม ดงตวอยางนเราเลอกแบบเฟรมไวแบบ 3 เฟรม รวมตวเฟรมเซตทชอ index.html อก 1 เฟรม ทงหมดเรา จะบนทกไฟลไว 4 ไฟล ดงรปท 8.10

287

รปท 8.10 แสดงรายชอไฟลในเฟรมเซตทบนทก

ในการใสขอมลลงในเฟรมเซต เราจะเปดทางานทไฟลของเฟรมเทา นน ตามตวอยางนม ไฟลชอ main1.html, menu.html และ top.html สาหรบไฟล index.html จะใชสาหรบเรยกดผล และปรบขนาดกรอบเสนแบงเฟรมใหแตละเฟรมแสดงไดครบตามการออกแบบ ซงจะกลาวตอไปใน เรอง การกาหนดคณสมบตของเฟรมและเฟรมเซต

4. การกาหนดคณสมบตของเฟรมและเฟรมเซต

การกาหนดคณสมบตเพอทา งาน ในการออกแบบเวบดวยเฟรม ใหปฏบตเชนเดยวกบการ ออกแบบในไฟลเวบเพจ .html ทวไป หากในเฟรมเซตมไฟล index.html ทพเศษกวาไฟลอน ๆ เพราะเปนหนาตางของไฟลรวมของทกไฟลทเรยกว า เฟรม การทางานจงตองระมดระวงมากขน การกาหนดค ณสมบตแตละเฟรมหรอเฟรมเซต คอการกาหนดคณสมบตของแตละไฟลเวบ HTML จะตองเขาใจและสามารถควบคมไฟล และเฟรมได ใหเรม ดงรปท 8.11 1. สรางไซตใหม เพอใช พาเนล File เปด Folder งานออกมาใหเราทางานไดอยางสะดวก แลวทาการเปดไฟลทตองการออกแบบมาใหหมด โดยดบเบลคลกทชอไฟล เมอเปดแลวเราจะเหนรายชอแสดงในตาแหนงหมายเลข 3

288

2. เปดพาเนล Frame เพอการควบคมตาเหนงงานทเรากาลงทาวาอย เฟรมใด ตวอยางนเมอเรา เปดไฟลทงหมด ดงหมายเลข 3 และคลกทไฟล index.html > เมอนาเมาสมาคลกทตาแหนงเฟรมMainFrame หมายเลข 4 ซงเราตงชอไฟลตาแหนงนวา main1.html ใหเคอรเซอร I-beem รปตว I แสดงขน เราจะเหนวาทพาเนล Frame จะปรากฏกรอบสดาตามตาแหนงทเราคลก ในทา งกลบกนเราสามารถคลกทเฟรมตามตาแหนงเฟรมทตองการ จะปรากฎกรอบจดไขปลาสดาตามตาแหนงเฟรมเชนกน 3. เมอเราสามารถควบคมการเปดไฟล และเฟรมไดอยางสมพนธกน การกาหนดคณสมบตของเฟรม กใหกาหนดในรายการ Properties หมายเลข 5

รปท 8.11 แสดงการเปดไฟลและพาแนล Frame ควบคมการทางานกบเฟรม

การกาหนดคณสมบตของเฟรม และเฟรมเซต ดรปท 8.12 หมายเลข 1 คอการกาหนด

คณสมบตของเฟรมเซต หมายเลข 2 เปนการกาหนดคณสมบตของเฟรม ซงเปนไฟลเวบเพจ .html ธรรมดา โดยคลกเลอกทพาแนล Frame กอน แลวจงเลอกกาหนดรายการใน Properties เชน

Border = กาหนดใหแสดงเสนขอบ Border Color = กาหนดใหแสดงสเสนขอบ Border Width = กาหนดความกวางหรอความหนาเสนขอบ Scroll = กาหนดใหแสดง Scroll Bar หรอไม

289

รปท 8.12 แสดงการกาหนดคณสมบตของเฟรมเซต และเฟรม

ในกรณทเมอเปดไฟล index.html ซงเปนไฟลของเฟรมเซต แลวปรากฏวาไมแสดงเสนขอบเฟรม (Border) ทาใหไมสามารถปรบขนา ดระยะขอบเฟรมแตละเฟรมได ให คลกเลอกรายการแสดงเสนขอบเฟรมจาก เครองมอ Visual Aids หรอทเมน View > Visual Aids > Frame Borders ดงรปท 8.13

รปท 8.13 แสดงการเลอกรายการแสดงเสนขอบเฟรม

290

5. การใสเนอหาลงในเฟรม

การใสเนอหาลงในเฟรมเพอนาไปแสดงผลในเฟรมเซต มวธการใส 2 วธ คอ

1. ใสเนอหาจากงานทสรางไวแลว เราตองสรางงานโดยวางแผนออกแบบไวกอน 2. สรางงานใหมทงหมด โดยนาไฟลทบนทกไวซงย งไมมเนอหาไปใสเนอหาจนครบ แลวทดสอบผลงานตามปกต ซงวธนไมมอะไรซบซอน เหมอนการสรางเวบเพจทกลาวมา ขางตน การนาเสนอในทนจะกลาวถงวธท 1 และจะแสดงการใชโปรแกรม Photoshop มาชวยออกแบบดวย เพอผเรยนจะไดประโยชนมากขน การปฏบตมขนตอนดงน

การสรางงาน เราตองทาการเลเอาทกาหนด ขนาดพนทลง ในแบบ Story Board วางแผนการแสดงผลบนบราวเซอร วาเมอลงคแลวจะแสดงรวมในเฟรมเซต หรอแสดงหนาเวบใหม (_bank) ให เ รยบรอยโดยเฉพาะหากตองการแสดงบนหนา เฟรมเซต จะใชพนทสวนของ MainFrame การออกแบบเนอหาตองคานวณขนาดความกวางของหนาเวบเพจใหพอด เพอไมใหเนอหาหรอรปภาพ ขยบผดตาแหนงไป ดงตวอยางการออกแบบตอไปน ซงใชโปรแกรม Photoshop ออกแบบและแบงเฟรม มขนตอน ดงรปท 8.14 1. ทาการออกแบบ Layout แบงสดสวนออกเปนเฟรม ในทนแบงไว 4 เฟรม คอ 1.main.html 2. top.html 3. menu.html และ footer.html

รปท 8.14 แสดงการออกแบบและแบงสวนเปน 4 เฟรมดวยโปรแกรม Photoshop

291

2. ตกแตงแตละสวนทคดวาไมตองเพมเตมรายละเอยด นาแตละสวนตดออกเปนไฟล 3 ไฟลในโปรแกรม Photoshop แตละไฟลใหตด Slices ใหไดสวนงานทจะตองออกแบบตอไป (ตองวางแผนการ Slices ใหด) แลวนาไฟลท Slice บนทกตามชอทกาหนดไว คอ top.html , menu.html และ footer.html สาหรบ ไฟล main.html ในทนไมตองตดเพราะเป นพนทสขาวทงหมดไมมภาพกราฟก เพอเตรยมไวใสเนอหา สามารถใชพนทของ ไฟลเวบ ในตาแหนงทตรงกนในเฟรมเซต (mainframe ตาแหนงหมายเลข 4 ในรปท 8.11)

รปท 8.15 แสดงการตดภาพแยกเปนไฟล 3 ไฟล และ Slices เปนสวนไฟลเลก ๆ

สาหรบขนตอนการตดแบงภาพดวยเครองมอ Slice Tool และการบนทกไฟล .html และ

ไฟลรปภาพ ท Slice มขนตอน ดงรปท 8.16

292

1. ตดแบงดวย Slice Tool

รปท 8.16 แสดงตวอยางการตดแบงภาพเพอบนทกไฟล top.html

2. การบนทกเรมจากเมน File > Save for Web > 1.เลอกคลมพนทงานทงหมด > 2.เลอกนามสกล ในทนใช PNG-8 > 3. Save ดงรปท 8.17

รปท 8.17 แสดงขนตอนการบนทกไฟล top.html

293

3.ในหนาตางบนทก > 1. ตงชอไฟล > 2. เลอกชนด Save as type: เลอก HTML and Images เพอใหไฟลทบนทกเปนไฟล เวบเพจ .html นาไปใชงานไดเลย สวนภาพทตดจะถกเกบใน Folder Images โดยจะเกบใน Folder งานเดยวกน ในทนคอ Folder project การนาไฟล HTML ไปใชงานจะตองนา Folder Images ไปดวยเสมอ > 3. เลอก Default Setting > 4. เลอก All Slices > 5. Save > 6.แสดงไฟล .html ทบนทกแลว > 7. แสดง Folder Images ทเกบรปภาพ ดงรปท 8.18

รปท 8.18 แสดงขนตอนการบนทกไฟล HTML and Images

ใสตามตาแหนงเฟรมเซต ทแบงเฟรมตามการออกแบบใน 4. การนาไฟล HTML Photoshop

(ในรปท 8.15) ทาได ดงรปท 8.19

294

รปท 8.19 แสดงเฟรมเซตทแบงเฟรมตามแบบการเลเอาท

การใสไฟล .html ในทนจะใส สวน TopFrame > 1. เลอกพนท TopFrame ในพาเนล Frame > 2. ท Properties ตาแหนงแทรกไฟลท Src คลกปมเบราว เพอหาไฟลใน โฟลเดอร Project > 3. เลอก Folder ทเกบ > 4. เลอกไฟล > 5. กดปม OK ไฟล top.html จะปรากฏในตาแหนง TopFrame ตามตองการ การเรยกไฟลอนกทาเชนเดยวกน ในทนไฟล main.html ไมตองเรยกใหบ นทกไฟลเดมได เพราะเปนบรเวณสขาว ใชไฟลวางไดเลย ดงผลในรปท 8.20, 8.21

เมอไดไฟลทงหมดก บนทก เลอก Save all โดยเลอกโฟลเดอรเกบทเดยวกนกบไฟล HTML ททาจาก Photoshop ไดเลย การบนทก จะเรมบนทกไฟลเฟรมเซต คอ index.html และไฟลทยงไมได ใส ในทนคอ main.html ซงเราตองการไฟลวาง ดงกลาวแลวขางตน เมอบนทกเสรจ เรากปรบแตง ใส เนอหาตาง ๆ ตอไปได

295

รปท 8.20 แสดงผลการนาไฟล HTML มาใสลงเฟรมเซต

296

เมอทดสอบ Preview in Browser จะเหนวาเวบเพจจะแบงพนทเป น 4 สวนอสระตอกน ดงรปท 8.21

รปท 8.21 แสดงผลการสรางเวบดวยเฟรม ทแบงสวนไว 4 เฟรม

6. การเชอมโยงเวบเพจในเฟรม เฟรมเซต

การเชอมโยงหรอการลงคเวบเพจในเฟรมจะทาในขณะแสดงในหนา Frameset คอหนา

index.html สามารถสรางการลงคเหมอนการสรางลงคในเวบเพจปกต แตมจดเดนทเราสามารถใหเวบเพจ ทสงใหลงคไปแสดงในสวนของเฟรมเซตหนาเดม ซงจะใชตาแหนงหรอสวนของ MaimFrame คอสวนหมายเลข 1 ตามตาแหนงทแสดงในรปท 8.21 การสรางลงคและเลอกตาแหนงการแสดงผลมขนตอนดงน

1. เลอกเมนหรอ Object ทจะสรางลงค > 2. ทชอง Link เลอกเวบเพจ หรอ url ทตองการ > 3. ท Target เลอกตามรายการดงน ดงรปท 8.22

_bank หมายถง เมอเปดบราวเซอรแลวใหเปดเวบเพจนใหมอกเวบเพจหนง _parent หมายถง เปดเวบเพจใหมในบราวเซอ รโดยอยในหนาเดมเปนเฟรมชนนอก _self หมายถง เปดเวบเพจใหมทเชอมโยงในเฟรมเดม _bank หมายถง เปดเวบเพจใหมทเชอมโยงเฟรมชนนอกสด

297

มรายการ Target ทเพม มาใหเลอกไดสาหรบการสรางลงคในเฟรมเซต คอ mainframe หมายถง แสดงเวบเพจใหมในหนาหลกตาแหนง MainFrame topframe หมายถง แสดงเวบเพจใหมในหนาหลกตาแหนง TopFrame leftframe หมายถง แสดงเวบเพจใหมในหนาหลกตาแหนง LeftFrame

รปท 8.22 แสดงขนตอนการสรางลงคในเฟรมเซต

ตวอยางผลจาก การเลอกตาแหนงการแสดง (Target) แบบ mainframe ดงรปท 8.23 รปท 8.23 แสดงผลการสรางลงคในเฟรม

298

การแทรกเฟรมลงในหนาเวบเพจธรรมดา เพยง 1 เฟรม โดยใชรหสคาสง iframe

<td ><iframe src="file:///D:/webpage/index2.html” width="350"

height="300" scrolling="yes" /></td>

Iframe : กรณผออกแบบไมตองการใชเฟรมเซต เพยงตองการแทรกเฟรม

เพยง 1 เฟรมลงในหนาเวบเพจบางสวน เพอใหดงไฟล HTML มาแสดงในชองเซลล

หรอแถวตาราง โดยในเฟรมจะม Scrollbar เลอนดขอมลไดเปนการประหยดพนท

บนบราวเซอร สามารถทาไดโดยใชคาสง iframe

ดงตวอยางเปนคาสงแทรกเฟรมลงใน Tage Table ทชองTD

สรป บทเรยน การสรางเวบดวยเทคนคเฟรม หรอเฟรมเซต ชวยในการควบคมหน าแสดงเนอหา ใชได

สะดวกเพราะสวนของเฟรมเมน กบสวนเฟรมเนอหาทแสดงคกน จะไมเลอนไหลตามกนเมอใช Scrollbar สวนเฟรมเมน จะคงท เมอคลกเลอกเมนใดๆ สวนเนอหากแสดงในสวนเมนเฟรม (ปกตมกจดไวดานขวาของผชม) ในหนาเดยวกน ลกษณะการใชงานจะเหมาะกบการนาเสนอเนอหาแบบ E-learning หรอจดแสดงสนคา เพราะผชมสามารถเลอกรายการเมน ซงอาจใชรปสนคา คลกลงคใหแสดงรายละเอยดเนอหา ทจะศกษาไดในหนาเดยวกน แตม ขอเสยคอ การสรางหนาเวบ มการใชเฟรมหลายเฟรมประกอบกนจะจดใหพอดลาบาก และตองระวงการกาหนด ขนาดแตละเฟรมใหพอด หาก เกดชอง ระหวางเฟรมหรอจดซอนกนไมพอด จะแสดงเนอหาไมครบ การฝกใหเกดทกษะเทานนท ชวยใหสามารถใชเทคนคการออกแบบดวยเฟรมอยางมประสทธภาพ และสามารถนาไปใชในการทางานจรงตอไป ได

.........................................................................................................

299

เพอใหนกศกษาทบทวนความรในบทเรยน ใหตอบคาถามตอไปน วาเรามความรในสงตอไปนเพยงใด

แบบฝกหดประจาบทเรยน

คาสง ใหตอบคาถามตอไปน

1. ความหมายของเฟรม ในการออกแบบเวบ หมายถงการออกแบบลกษณะใด ............................................................................................................................................................ ............................................................................................................................................................ 2. เฟรมเซต หมายถงอะไร ……………………………………………………………………………………………………… …………………………………………………………………………………………………….. 3. การสรางเฟรมเซตดวยโปรแกรม Dreamweaver มกวธ.......................................................................................................................................................... …………………………………………………………………………………………………….. 4. การควบคมการสรางเฟรมเซต ตองมพาเนลเครองมอสาคญอะไรบาง(บอกมา 3 อยาง ) .......................................................................................................................................................... .......................................................................................................................................................... 5. การบนทก เฟรมเซตครงแรก มขนตอนอยางไร …………………………………………………………………………………………………….. …………………………………………………………………………………………………….. 6. การสราง link สาหรบการสรางเวบดวยเฟรม มรายการใน Target เพมจากเวบทวไปคอ บอก มา 2 ขอ

.........................................................................................................................................................

.......................................................................................................................................................... 7. การใสเนอหาลงในเฟรมเซตมกวธ อะไรบาง ....................................................................................................................................................... ....................................................................................................................................................... .......................................................................................................................................................

300

อางอง

กตต ภกดวฒนะกล , Dream weaver MX 2004,กรงเทพ , เคทพ เกรยงศกด เจรญวงศศกด,ออกแบบและสรางเวบสวยดวย Dream weaver CS3,กรงเทพ ; ซเอดยเคชน,2551. กฤษณะ สถต , สรางโฮมเพจดวยตนเอง ,กรงเทพ:Info press. ประภาพร ชางไม , สรางเวบสวยดวย Dreamweaver 8.0 , กรงเทพฯ : ดจอารต. พรเศก จตตแจง , การสรางเวบไซต ,กรงเทพ ; Success Media. แหลงสบคน : http://www.nectect.or.th http://www.webthaidd.com/dreamweaver/news.php?id=445 http://cannot.info/page?p=1310520034773 http://www.pyayam.com/article/show.php?Category=webpage&No=67