powerpoint-08

เฟรมเซท (Frameset) หรือท่ีเรียกว่า (Frame) คือ การจดั แบ่ง หน้าต่าง ในเวบ็ เพจที่แสดงบนเวบ็ เบราวเ์ ซอร์ ออกเป็นส่วนต่าง ๆ เพ่ือให้ แต่ละส่วนแสดงเวบ็ เพจต่างกนั ตามที่กาหนด กล่าวคือ นาเวบ็ เพจหน่ึงมา แบ่งเป็นหลาย ๆ ส่วนเพ่ือแสดงเวบ็ เพจย่อยภายในเวบ็ เพจ ภายในแต่ละ ส่วนนัน่ เอง โดยแต่ละส่วนจะเป็นอิสระไม่ขึน้ ต่อกนั 2

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

ตวั อย่างการออกแบบเวบ็ เพจแบบใช้เฟรม 4

การสร้างเฟรม 1. ไปท่ีเมนู Insert > HTML > Frames โดยจะมีเฟรมหลายรปู แบบให้เลือก โดยแบบท่ีนิยมใช้ในเวบ็ ทวั่ ไปคือ เฟรมแบบ Top Nested Left 5

2. ให้ตงั้ ชื่อแต่ละส่วนของเฟรม โดยมีส่วนประกอบดงั นี้ 6 2.1 MainFrame คือ ส่วนท่ีแสดงเนื้อหาหลกั 2.2 TopFrame คือ เฟรมส่วนบนของเวบ็ เพจ 2.3 LeftFrame คือ เฟรมทางด้านซ้ายของเวบ็ เพจ เม่ือตงั้ ชื่อเสรจ็ แล้ว ให้คลิก OK

3. จะได้เฟรมแบบท่ีเลือกไว้ (ในตวั อย่างเป็นแบบ Top Nested Left) สาหรบั พรอ้ มให้นาเนื้อหาใส่ลงไปได้ทนั ที 7

การบนั ทึกเฟรม 1. เลือกเฟรมที่ต้องการบนั ทึก จะปรากฏชื่อเฟรมเสมือนว่าเป็นชื่อไฟล์ เวบ็ เพจไฟลห์ นึ่ง 8

2. ไปท่ีเมนู File > Save Frame As… เพื่อบนั ทึกเฟรม โดยให้ทาซา้ จน ครบทกุ เฟรม 9

การจดั การกบั เฟรมที่สร้างนัน้ สามารถทาได้ด้วยการคลิกเลือกท่ี ขอบของเฟรม จากนัน้ จะปรากฏ tag <frameset> บนพาเนล Properties ท่ี สามารถตงั้ ค่าได้ ดงั นี้ และนอกจากพาเนล Properties นัน้ สามารถจดั การกบั เฟรมในรปู แบบ อ่ืน ๆ ได้ ดงั นี้ 10

การปรบั ขนาดเฟรม การปรบั ขนาดของเฟรม (Frame) สามารถทาได้ด้วยการคลิกเมาสท์ ่ี ขอบของเฟรมและลากซ้าย-ขวา ขึน้ -ลง เพ่ือปรบั ขนาดได้ทนั ที 11

การลบเฟรม การลบเฟรม (Frame) ท่ีไม่ต้องการ สามารถทาได้ด้วยการคลิกเมาส์ แล้วลากไปไว้ที่ขอบของหน้าจอโปรแกรม โดยเฟรมจะถกู ลบโดยอตั โนมตั ิ 12

เม่ือลบแล้วหน้าจอจะปรากฏ ดงั รปู 13

ประโยชน์ของการใช้ตาราง 1. ทาให้ประหยดั พืน้ ท่ี 2. ทาให้เวบ็ เพจมีความสวยงาม ตวั อย่างการออกแบบเวบ็ เพจแบบปกติ 14

ตวั อย่างการออกแบบเวบ็ เพจแบบใช้ตาราง 15

รปู แบบและประเภทของตาราง หรบั ตารางที่สรา้ งขึน้ สามารถกาหนดคณุ ลกั ษณะได้ 3 แบบ ซึ่งมีข้อดี- ข้อเสีย และความเหมาะสมในการใช้งานแตกต่างกนั ไป ดงั นี้ แบบกำหนดขนำดตำยตัว ตารางแบบกาหนดตายตวั เหมาะกบั การออกแบบเวบ็ เพจที่ ต้องการแสดงเนื้อหาให้มีตาแหน่งตามท่ีกาหนดไว้ ไม่เคลื่อนท่ีหรอื เปลี่ยน ตาแหน่งเมื่อแสดงผลบนเบราวเ์ ซอร์ หรอื เมื่อยืด-ขยายหน้าจอ โดยการสร้าง ตารางชนิดนี้จะต้องกาหนดค่าโดยมีหน่วยเป็นพิกเซล (px) 16

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

การแทรกตารางลงในเวบ็ เพจ 1. คลิกพาเนล Insert แล้วเลือก Common จากนัน้ เลือกเคร่ืองมือ Table 18

2. กาหนดค่าต่าง ๆ ดงั นี้ จากนัน้ คลิก OK 2.1 Rows หรอื แถว คือ จานวนแถวแนวนอน ไล่จากบน-ล่าง 2.2 Columns หรอื คอลมั น์ คือ จานวนแถวในแนวตงั้ ไล่จากซ้าย-ขวา 2.3 Table Width กาหนดความกวา้ งของตาราง 19

2.4 Border thickness กาหนดความหนาของเส้นขอบตาราง 2.5 Cell padding กาหนดระยะห่างระหว่างขอบเซลลก์ บั เนื้อหาในเซลล์ 2.6 Cell spacing กาหนดระยะห่างระหว่างเซลล์ 2.7 Header กาหนดให้แถวหรอื คอลมั น์ของตารางเป็นหวั เรื่อง โดยอาจ เป็นแถวบน หรือคอลมั น์ซ้ายหรอื ทงั้ สองแบบ เมื่อได้ตารางตามท่ีต้องการแล้ว สามารถพิมพเ์ นื้อหาหรือใส่รปู ภาพ ประกอบได้ทนั ที โดยวิธีในการใส่นัน้ เหมือนกบั การใส่ลงในเวบ็ เพจตามปกติ 20

การแก้ไขตารางบนพาเนล Properties หลงั จากท่ีแทรกตารางลงในเวบ็ เพจแล้ว สามารถปรบั แต่ง ตารางได้ โดยท่ีค่าการปรบั แต่งสามารถทาได้บนพาเนล Properties โดยทาการเลือกที่ Tag <table> การแก้ไขตารางสามารถทาได้ทงั้ ปรบั แต่งโดยรวมทงั้ ตาราง หรือปรบั เฉพาะช่องหรือเซลล์ (cell)ทงั้ ในแบบคอลมั น์ (Column) หรือแถวแนวตงั้ และ แถว (Rows) หรอื แถวแนวนอน โดยมีรปู แบบการปรบั แต่ง ดงั นี้ 21

กำรปรับแต่งควำมกว้ำงของตำรำง 1. เม่ือคลิกที่ตาราง จะพบขนาดที่กาหนด และขนาดจริงท่ีใส่เนื้อหาไป แล้ว (ตวั เลขในวงเลบ็ ) เช่น 273(303) เป็นต้น 22

2. กาหนดขนาดความกว้างตาราง (W) บนพาเนล Properties ใน tag <table> ให้มีขนาดใหญ่กว่าขนาดในตวั เลขดงั กล่าว จากนัน้ กด Enter 3. จะได้ขนาดตารางใหม่ โดยที่ไม่มีตวั เลขในวงเลบ็ 23

กำรกำหนดควำมสูงของแถว 1. คลิกเลือก Tag <tr> เพ่ือเลือกแถวในตาราง 24

2. กรอกค่าลงในช่อง H จากนัน้ คลิกที่ Enter 3. แถวที่เลือกจะมีความสงู ตามที่กาหนดทนั ที 25

หรืออีกวิธีหน่ึง คือ การใช้เมาสค์ ลิก และลากบริเวณเส้นขอบของ แต่ละแถวเพื่อปรบั ความสงู และความกวา้ งได้ทนั ที 26

กำรแยกเซลล์ 1. คลิกเลือกภายในเซลลท์ ี่ 2. คลิกเลือก Rows หรือ ต้องการ แล้วกดป่ มุ (Splits Columns แล้วกาหนดจานวน cell into rows or columns) แถวท่ีต้องการก่อนคลิก OK บนพาเนล Properties (CSS) 27

3. ได้แถวใหม่ตามค่าท่ีกาหนดในเซลลท์ ่ีเลือก 28

กำรรวมเซลล์ 1. ลากเมาสค์ ลมุ เซลลท์ ่ีต้องการรวม 29

2. คลิกที่ป่ มุ (Merges selected cells using spans) จะได้เซลล์ ที่ถกู นามารวมกนั เป็น 1 เซลล์ 30

การเพิ่ม-ลบแถวและคอลมั น์ กำรเพม่ิ แถว/คอลมั น์ใหม่ 1. คลิกขวาที่บริเวณท่ีต้องการเพ่ิมแถวหรอื คอลมั น์ แล้วเลือกคาสงั่ Table > Insert Rows or Columns 31

2. เลือกกาหนดค่าดงั นี้ 2.1 Insert เลือกว่าจะเพิ่มแถวหรือคอลมั น์ 2.2 Number of Rows ระบจุ านวนของแถวหรอื คอลมั น์ท่ีต้องการเพ่ิม 2.3 Where เลือกตาแหน่งท่ีต้องการเพิ่มแถวหรือคอลมั น์ ได้แก่ เหนือ บริเวณท่ีเลือก (Above the Selection) และใต้บริเวณท่ีเลือก (Below the Selection) 32

3. ได้คอลมั น์หรือแถวใหม่ ตามจานวนและบนบริเวณท่ีเลือกไว้ทนั ที 33

กำรลบแถว/คอลมั น์ออกจำกตำรำง 1. คลิกขวาในเซลลท์ ่ีต้องการลบแถวหรือคอลมั น์ออก แล้วเลือกคาสงั่ Table > Delete Row หรือ Delete Column ตามท่ีต้องการ 34

2. แถวหรอื คอลมั นที่เลือกไวถ้ กู ลบไปในทนั ที 35

การจดั ตาแหน่งตาราง 1. คลิกเลือก Tag <table> เพื่อเลือกทางานกบั ตาราง จากนัน้ เลือก ตาแหน่งของตารางที่คาสงั่ Align บนพาเนล Properties โดยมี 4 รปู แบบได้แก่ 36 1.1 Default คือ ตามการตงั้ ค่าดงั้ เดิม ซึ่งโดยทวั่ ไปคือชิดซ้าย 1.2 Left คือ จดั ตารางชิดซ้าย

1.3 Center คือ จดั ตารางไว้ก่ึงกลาง 1.4 Right คือ จดั ตารางชิดขวา 2. ตารางจะถกู ย้ายตาแหน่งมาที่จดุ ใหม่ทนั ที 37

การจดั ระเบียบเนื้อหาในตารางแนวตงั้ -แนวนอน 1. ลากเมาสค์ ลมุ ข้อความทงั้ หมดท่ีต้องการจดั ระเบียบ (สงั เกตได้ว่า ข้อความจดั ตาแหน่งไว้ไม่เท่ากนั ) 38

2. เลือกตงั้ ค่าด้วยคาสงั่ Horz 3. เมื่อเลือกทงั้ สองแบบแล้ว และ Vert บนพาเนล ข้อความจะถกู จดั ให้เป็น ระเบียบมากขนึ้ (ในรปู นี้เลือก Properties ดงั นี้ (Default Vert เป็น Top) คือ ค่าดงั้ เดิม) 39

การตกแต่งตาราง 2. คลิกเลือกสีท่ีต้องการ แถวหรือ กำรใส่สีพืน้ หลงั เซลลท์ ี่เลือกจะเปล่ียนเป็นสี ใหม่ทนั ที 1. เลือกแถว หรือเลือกเซลลท์ ี่ ต้องการใส่สีพืน้ 40

กำรใส่ภำพเป็ นฉำกหลงั 2. ไปท่ีเมนู Modify > Edit Tag 1. คลิกเลือก Tag <table> บน พาเนล Properties เพ่ือเลือก ทางานกบั ตาราง 41

3. คลิกเลือก Browser Specific 4. ภาพที่เตรียมไว้จะถกู นามาเป็น และคลิกป่ มุ Browse… แล้ว ฉากหลงั ทนั ที เลือกไฟลภ์ าพท่ีต้องการ 42

กำรใส่ เส้ นขอบตำรำง 2. ระบคุ วามหนาของเส้นขอบ 1. เลือก Tag <table> บนพาเนล ตารางท่ีต้องการ ด้วยคาสงั่ Border จากนัน้ กดป่ มุ Enter Properties เพ่ือเลือกทางานกบั เมื่อกดแล้วเส้นขอบของตาราง ตาราง จะหนาขึน้ มาตามค่าที่กาหนด ทนั ที 43

กำรเปลย่ี นสีเส้นขอบตำรำง 1. คลิกเลือก Tag <table> เพ่ือเลือกทางานกบั ตาราง 2. ไปท่ีเมนู Modify > Edit Tag 2.2 เลือกสีเส้นขอบ ที่ Border color ตามที่ต้องการ 2.1 คลิกเลือก Browser Specific 2.3 คลิก OK 44

3. ได้ตารางท่ีเส้นขอบมีสีสนั ตามที่ต้องการ 45