หน่วยที่ 3 การจัดเลย์เอาต์เว็บเพจด้วยตาราง

ใบความรู้ หน่วยการเรยี นรู้ท่ี 3การจดั เลย์เอาต์เว็บเพจด้วยตาราง ขอ้ มูลจาก : หนังสอื สรา้ ง Web ง่ายๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสทิ ธ์ิ อ้ึงรัตนวงศ,์ 2554

รู้จกั กับโครงสร้างของตาราง ก่อลงมือสร้างเว็บเพจด้วยตารางน้ัน เราควรทาความรู้จักกับโครงสร้างของตารางเสียก่อน โดยประกอบด้วย - คอลัมน์ (Column) - แถว (Row) - เซลล์ (Cell) ซึ่งเปน็ สว่ นทจี่ ะนาข้อความหรือรปู ภาพเขา้ ไปใส่ ขอ้ มูลจาก : หนังสือสร้าง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จรี ะสิทธ์ิ อ้ึงรตั นวงศ,์ 2554

วางแผนกอ่ นสรา้ งตาราง หลังจากออกแบบหน้าเว็บแต่ละหน้าแล้ว ส่ิงสาคัญต่อมาคือการสร้างเว็บเพจ ซึ่งเราจะใช้วิธีจัดเลย์เอาตเ์ ว็บเพจด้วยตาราง ดงั นั้น อนั ดับแรกต้องรกู้ อ่ นวา่ เว็บเพจของเราควรมกี ี่แถว กี่คอลมั น์ - เว็บเพจควรมีกี่แถว การกาหนดว่าเว็บเพจควรมีกแี่ ถวน้นั ไม่มีกฎตายตัว ขน้ึ อยู่กับหน้าเวบ็ เพจน้ันๆซึ่งจากตวั อย่างทีไ่ ดอ้ อกแบบไว้แบง่ ออกเป็น 4 แถว ดังนี้ แถวท่ี 1 สาหรับวางโลโก้ และภาพประกอบ แถวท่ี 2 สาหรบั วางเมนู แถวท่ี 3 สาหรับเมนูยอ่ ย เนือ้ หา สว่ นคน้ หา และปา้ ยโฆษณา แถวท่ี 4 สาหรับแสดงขอ้ ความลขิ สทิ ธ์ิและผู้จดั ทา ข้อมูลจาก : หนังสือสร้าง Web งา่ ยๆ แค่คลิก Dreamweaver CS5 โดย : จรี ะสิทธ์ิ อึ้งรตั นวงศ,์ 2554

- เว็บเพจควรมีก่ีคอลัมน์ สาหรบั การพจิ ารณาจานวนคอลมั น์จะแตกต่างจากจานวนแถว เนื่องจากในแต่ละแถวอาจจะมีจานวนคอมลัมน์ไมเ่ ทา่ กนั ดังน้ันเราควรแบ่งคอลมั น์ตามคอลมั น์หลัก หรือใช้วธิ ีสร้างตารางซ้อนในแถวท่ีแบ่งคอลัมน์ ซึ่งในท่ีนี้ จะใช้วิธีการสร้างตารางซ้อน จากการออกแบบจะพบว่าแถวที่ 2 สามารถแบง่ ได้ 3 คอลมั น์ ดงั น้ี คอลัมนท์ ี่ 1 สาหรบั วางเมนยู ่อย คอลัมน์ที่ 2 สาหรบั แสดงเน้อื หา คอลัมนท์ ี่ 3 สาหรบั แสดงส่วนค้นหา และปา้ ยโฆษณา ข้อมูลจาก : หนงั สือสร้าง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จีระสิทธ์ิ อึง้ รัตนวงศ,์ 2554

ลงมือสร้างตารางสาหรับเว็บเพจ เม่ือรู้แล้วว่าจะต้องสร้างตารางจานวน 4 แถว และ3 คอลัมน์ ก็เริ่มสร้างตารางสาหรับจัดเลย์เอ้าต์เวบ็ เพจได้ ดงั น้ี 1. ดั 2. บเบิล้ คลกิ ไฟลช์ อื่ index.html หรอื สรา้ งเว็บเพจใหม่ 2. วางเคอรเ์ ซอรต์ รงตาแหน่งทจี่ ะสร้างตาราง 3. คลิกแทบ็ Common ในแถบ Insert Bar ขอ้ มูลจาก : หนังสือสร้าง Web ง่ายๆ แคค่ ลกิ Dreamweaver CS5 โดย : จีระสิทธิ์ อ้งึ รัตนวงศ,์ 2554

4. คลิกคาสัง่ Table เพ่ือสรา้ งตาราง จากนนั้ จะปรากฎไดอะล็อกบอ็ กซ์ Table ขน้ึ มา ใหก้ าหนดคณุ สมบัติของตารางท่ีจะสร้าง 5. กาหนดจานวนแถวในชอ่ ง Rows สาหรบั ตวั อย่างจานวน 4 แถว 6. กาหนดจานวนคอลัมน์ในชอ่ ง Columns สาหรบั ตัวอย่างจานวน 3 คอลัมน์ 7. กาหนดขนาดของตารางในช่อง Table width ซึ่งขนาดของตารางในท่ีนี้คือ ขนาดความกว้างของเว็บเพจทอี่ อกแบบ 8. เลอื กหน่วยของตาราง 9. กาหนดความหนาของเส้นตารางท่ีช่อง Border thickness (ถ้าไม่ต้องการแสดงเส้นขอบตารางให้กาหนดเป็น 0) 10. กาหนดระยะหา่ งระหว่างของเซลล์กับเนอื้ หาภายในเซลล์ทง้ั 4 ด้าน ท่ีช่อง Cell padding 11. กาหนดระยะห่างระหวา่ งแถวและคอลมั น์ ทชี่ ่อง Cell spacing 12. คลกิ ปุ่ม OK ขอ้ มลู จาก : หนังสอื สร้าง Web ง่ายๆ แค่คลกิ Dreamweaver CS5 โดย : จีระสทิ ธิ์ อึง้ รตั นวงศ,์ 2554

ขอ้ มลู จาก : หนงั สอื สรา้ ง Web ง่ายๆ แค่คลกิ Dreamweaver CS5 โดย : จรี ะสทิ ธ์ิ องึ้ รัตนวงศ,์ 2554

จากน้นั จะไดต้ ารางตามจานวนแถวและคอลมั น์ทกี่ าหนด ดังรูป ข้อมลู จาก : หนงั สอื สร้าง Web งา่ ยๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสทิ ธิ์ องึ้ รตั นวงศ,์ 2554

วิธเี ลือกสว่ นต่างๆ ในตาราง เมื่อต้องการนาข้อความหรือรูปภาพเข้ามาใส่ในตาราง สิ่งแรกที่ต้องทาคือ การเลือกส่วนของตารางท่ีตอ้ งการกอ่ นไม่ว่าจะ ตาราง เซลล์ แถว และคอลมั น์ เลือกตารางทงั้ หมด สามารถทาได้ 2 วธิ ี วิธที ี่ 1 ช้ีเมาส์ท่ีมุมใดมุมหนึง่ ของตาราง (เมาส์เป็นรูป ) แล้วคลิกเม้าส์ วธิ ที ี่ 2 คลกิ เมาสข์ วาบนเซลลใ์ นตารางแลว้ เลอื กคาสัง่ Table > Select Table ข้อมูลจาก : หนงั สือสร้าง Web ง่ายๆ แค่คลิก Dreamweaver CS5 โดย : จีระสิทธิ์ อง้ึ รตั นวงศ,์ 2554

เลอื กเซลล์ - เลือกเซลล์เดียว ทาได้โดยคลิกวา่ เคอรเ์ ซอรภ์ านในเซลลท์ ี่ตอ้ งการ - เลอื กหลายเซลลต์ ่อเน่อื งกนั ทาได้ 2 วิธี วิธีท่ี 1 ช้เี มา้ สท์ เ่ี ซลล์แรก จากนัน้ คลิกลากคลุมเซลลท์ ตี่ อ้ งการ วธิ ีท่ี 2 คลิกเซลล์แรก จากน้นั กด Shift ที่คียบ์ อร์ดคา้ งไว้ แลว้ คลกิ เซลลส์ ุดท้าย - เลือกหลายเซลล์ไม่ต่อเนื่องกัน ทาได้โดยกด Ctrl ที่คีย์บอร์ดค้างไว้ แล้วคลิกเลือกแต่ละเซลลท์ ต่ี อ้ งการ ข้อมลู จาก : หนงั สือสร้าง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จีระสทิ ธ์ิ อง้ึ รัตนวงศ,์ 2554

ปรับแต่งคุณสมบัติของตาราง เม่ือเลือกตารางแล้ว Properties Inspector จะแสดคุณสมบัติเฉพาะของตารางนั้นๆ ข้ึนมาปรับแต่งตามตอ้ งการ ดงั รูปเพิ่มแถวหรือคอลมั น์ในตาราง เพ่มิ แถว 1. คลิกเลือกแถวท่ตี ้องการแทรก 2. คลกิ เมาส์ขวา แล้วเลอื กคาส่ัง Table > Insert Row (หรอื กด Ctrl + M ทค่ี ียบ์ อร์ด) ข้อมลู จาก : หนังสอื สร้าง Web งา่ ยๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสทิ ธ์ิ อ้งึ รตั นวงศ,์ 2554

จากนั้นแถวใหมก่ จ็ ะถูกแทรกไวด้ า้ นบนของแถวที่เหลอืเพ่มิ คอลมั น์1. คลกิ เลอื กคอลัมน์ทีต่ อ้ งการแทรก2. คลกิ เมาสข์ วา แล้วเลอื กคาสั่ง Table > Insert Column (หรอื กด Ctrl + M ทีค่ ยี ์บอร์ด) ขอ้ มูลจาก : หนงั สือสร้าง Web งา่ ยๆ แคค่ ลิก Dreamweaver CS5 โดย : จรี ะสิทธิ์ อึ้งรตั นวงศ,์ 2554

จากนั้นคอลัมนจ์ ะถูกแทรกไวด้ า้ นซา้ ยของอคอมลัมนท์ ี่เลือกลบแถวหรอื คอมลมั น์ออกจากตาราง ลบแถว 1. คลิกแถวทต่ี ้องการลบ 2. คลิกเมาส์ขวา แล้วเลือกคาส่ัง Table > Delete Row ข้อมูลจาก : หนงั สอื สรา้ ง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จรี ะสิทธิ์ อ้ึงรตั นวงศ,์ 2554

ลบคอลมั น์1. คลกิ เลือกคอมลมั น์ท่ตี อ้ งการลบ2. คลิกเมาสข์ วา แลว้ เลอื กคาส่งั Table > Delete Column ข้อมลู จาก : หนังสือสร้าง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จีระสิทธิ์ อึง้ รัตนวงศ,์ 2554

ปรับแต่งคุณสมบตั ขิ องเซลล์ เมื่อเราเลือกเซลล์ไม่ว่าจะเซลล์เดียวหรือหลายเซลล์ก็ตามบน Properties Inspector จะแสดงคุณสมบัตเิ ฉพาะของเซลล์เหล่านน้ั เพ่อื ให้ปรบั แตง่ คุณสมบตั ิตา่ งๆ ดงั รูปรวมเซลล์หรือแยกเซลล์ จากตัวอย่างของเว็บเพจท่ีออกแบบไว้ สังเกตได้ว่าแถวที่ 1, 3 และ 4 ของตารางมีขนาดเท่ากับความกว้างของตารางพอดี โดยจะไม่มีการแบ่งคอลัมน์ในแถวดังกล่าว ซึ่งการรวมท้ัง 3 คอลัมน์ให้เหลือเพียงคอมลัมนเ์ ดียว สามารถทาได้ ดังนี้ 1. คลกิ เลอื กแถวหรือเซลล์ทตี่ อ้ งการรวมเซลล์ไวด้ ว้ ยกนั ข้อมลู จาก : หนงั สอื สรา้ ง Web ง่ายๆ แคค่ ลกิ Dreamweaver CS5 โดย : จรี ะสทิ ธ์ิ อ้ึงรตั นวงศ,์ 2554

2. คลิกปุ่ม ในหนา้ ต่าง Properties Inspector เพอ่ื รวมเซลลท์ ่เี ลือกไว้3. สงั เกตว่าตอนนี้ทง้ั คอลมั นท์ เ่ี ลือกเหลอื เพียงคอลมั นเ์ ดยี วแล้ว ข้อมลู จาก : หนังสือสรา้ ง Web ง่ายๆ แค่คลิก Dreamweaver CS5 โดย : จีระสทิ ธิ์ องึ้ รัตนวงศ,์ 2554

ขณะเดียวกนั ถ้าต้องการแบ่งเซลล์ใดเซลล์หน่ึงออกเป็นหลายๆ แถวหรือหลายคอลัมน์ สามารถทาได้ดงั น้ี 1. วางเคอร์เซอร์ภายในเซลล์ทต่ี อ้ งการแบ่ง 2. คลิกท่ี ปุม่ ในหนา้ ต่าง Properties Inspector ขอ้ มลู จาก : หนงั สือสร้าง Web ง่ายๆ แคค่ ลกิ Dreamweaver CS5 โดย : จีระสิทธ์ิ อง้ึ รตั นวงศ,์ 2554

จากนัน้ หน้าตา่ ง Split Cell จะปรากฏขึน้ มา ใหเ้ ลือกแบง่ เซลล์คอลมั น์หรือแถวตามตอ้ งการ3. เลอื กรปู แบบการแบง่ เซลล์ ในสว่ น Split cell into: ซึ่งเลือกได้ 2 แบบคอื - Rows เมื่อต้องการแบง่ เซลล์เป็นแถวยอ่ ย - Columns เม่อื ต้องการแบ่งเซลลเ์ ปน็ คอลมั นย์ อ่ ย4. กาหนดจานวนแถวหรอื คอลมั นท์ ี่ตอ้ งการแบ่งเซลล์ในช่อง Number of….5. คลกิ ปมุ่ OKจากนนั้ เซลล์ทเี่ ลือกไว้ จะถูกแบ่งตามท่ีคณุ กาหนด ขอ้ มลู จาก : หนังสอื สร้าง Web งา่ ยๆ แค่คลกิ Dreamweaver CS5 โดย : จีระสิทธ์ิ องึ้ รตั นวงศ,์ 2554

ปรบั ขนาดเซลล์ คอลมั น์ และแถว ทาได้ 2 วิธี ดังน้ี 1. ปรับดว้ ยวธิ ีคลิกลาก โดยคลกิ ลากเสน้ ขอบเซลลท์ ต่ี ้องการปรบั ขนาด(เมาส์จะเปน็ รปู หรอื ) แลว้ ลากไปตาแหน่งทตี่ อ้ งการ 2. ปรบั ดว้ ย Properties Inspector ทาได้โดยเลอื กเซลล์ แถว หรอื คอลัมน์ แล้วกาหนดความกว้างลงในช่อง W หรอื ความสงู ในช่อง H ข้อมูลจาก : หนงั สือสรา้ ง Web ง่ายๆ แคค่ ลิก Dreamweaver CS5 โดย : จรี ะสทิ ธ์ิ องึ้ รตั นวงศ,์ 2554

สรา้ งตารางย่อยซอ้ นตารางหลัก การสร้างตารางซ้อนเป็นเทคนิคที่นิยมใช้กันมาในเว็บไซต์ ซึ่งจะช่วยในการจัดเลย์เอาต์ของเว็บเพจที่ซับซ้อนทาได้ง่ายข้ึน และช่วยให้พ้ืนท่ีมีขนาดคงท่ี ถึงแม้ว่าพื้นที่อ่ืนจะมีการเปล่ียนแปลง ตลอดจนสามารถกาหนดคณุ สมบตั ิให้ตารางแตกตา่ งจากตารางหลักได้ จากร่าง Sketch ที่ออกแบบไว้ เราสามารถใส่ตารางซ้อนตารางซอ้ นตารางได้ดว้ ยกนั 3 จุด คอื จุดท่ี 1 ส่วนวางโลโก้ ภาพประกอบ จุดที่ 2 สว่ นวางเมนูยอ่ ย จุดท่ี 3 ส่วนทใ่ี ช้แสดงส่วนค้นหา และป้ายโฆษณา ขอ้ มลู จาก : หนังสือสร้าง Web ง่ายๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสิทธิ์ อ้งึ รตั นวงศ,์ 2554

เราสามารถสร้างตารางซ้อนได้ไม่จากัดขึ้นอยู่กับการออกแบบเว็บเพจเป็นหลัก โดยการสร้างตารางซ้อนนน้ั มีขน้ั ตอนดังน้ี จดุ ที่ 1 สว่ นวางโลโก้ ภาพประกอบ ในจุดท่ี 1 นี้แบง่ ส่วนต่างๆ ออกเป็น 2 แถว 5 คอลัมน์ จากนั้นให้ลงมือสร้างตารางซ้อนตารางในแถวที่ 1 ของตารางหลกั ดงั นี้ 1. วางเคอร์เซอร์ภายในเซลล์ทต่ี ้องการแทรกตารางย่อย 2. คลกิ แถบ Table บนแท็บ Common ของ Insert Bar ข้อมูลจาก : หนังสือสร้าง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จรี ะสิทธิ์ อึง้ รตั นวงศ,์ 2554

จากน้ันจะปรากฏหน้าต่าง Table ขึน้ มา 3. กาหนดคุณสมบัติของตารางย่อยที่จะสร้างขึ้นตามรูป ซึ่งคุณสมบัติของตารางไม่จาเป็นต้องเหมอื นกับตารางใหญ่ 4. คลิกปมุ่ OK5. เลือกแถวท่ี 1 ของตารางที่สร้าง6. คลิกปุม่ ในหน้าตา่ ง Properties Inspector เพื่อรวมเซลล์ ข้อมูลจาก : หนงั สอื สร้าง Web ง่ายๆ แคค่ ลกิ Dreamweaver CS5 โดย : จีระสทิ ธิ์ องึ้ รัตนวงศ,์ 2554

เมอ่ื กลับมายงั พน้ื ที่สร้างตารางย่อยถูกสร้างขนึ้ มาภายในเซลล์ตารางหลกั ทว่ี างเคอรเ์ ซอร์ไว้ ดังรูป จากนั้นให้สรา้ งตารางย่อยซ้อนตารางหลักอีกในจุดที่เหลือ แลว้ กาหนดตาแหนง่ และคุณสมบัติของตารางย่อย ดังนี้ จุดที่ 2 สว่ นวางเมนูยอ่ ย - วางเคอร์เซอร์เพอ่ื สร้างตารางยอ่ ยในตาแหน่งแถวท่ี 2 คอลัมน์ท่ี 1 ของตารางหลัก - ขนาดของตารางย่อยมขี นาด 100 % ไม่มขี อบตาราง - จานวน 1 แถว 1 คอลัมน์ จุดที่ 3 สว่ นท่ใี ช้แสดงส่วนคน้ หา และป้ายโฆษณา - วางเคอร์เซอร์เพ่ือสรา้ งตารางยอ่ ยในตาแหนง่ แถวที่ 2 คอลมั น์ที่ 3 ของตารางหลัก - ขนาดของตารางย่อยมีขนาด 100 % ไม่มีขอบตาราง - จานวน 2 แถว 1 คอลมั น์ ข้อมูลจาก : หนงั สอื สร้าง Web งา่ ยๆ แค่คลิก Dreamweaver CS5 โดย : จีระสิทธ์ิ อ้งึ รตั นวงศ,์ 2554

เมอ่ื สร้างตารางย่อยซอ้ ยตารางหลกั จนครบแลว้ จะได้ดังรูปหลังจากน้ันปรบั แตง่ สพี นื้ หลงั ของตารางแถวที่ 2 คอลมั นท์ ี่ 2 ใหเ้ ป็นสีขาว ซ่งึ ทาได้ ดังน้ี1. วางเคอรเ์ ซอร์ตรงตาแหน่งทตี่ อ้ งการ2. เลอื กสพี ื้นที่ตอ้ งการในช่อง Bg ของหนา้ ต่าง Properties Inspector ข้อมลู จาก : หนงั สอื สรา้ ง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จรี ะสทิ ธิ์ อึ้งรตั นวงศ,์ 2554

จากน้นั บันทกึ เวบ็ เพจแลว้ เรยี กดูเวบ็ เพจผา่ นเบราเซอร์ โดยกดแป้น F12 จะได้ดังรปู ขอ้ มลู จาก : หนงั สอื สร้าง Web ง่ายๆ แคค่ ลกิ Dreamweaver CS5 โดย : จีระสิทธ์ิ อึ้งรตั นวงศ,์ 2554