การสร้างตารางลงบนเว็บเพจด้วยโปรแกรม dreamweaver ทำได้กี่วิธี

การสร้างตาราง (Table)

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

Table            Table มีส่วนช่วยในการจัดระเบียบข้อความและรูปภาพทั้งหลาย มีเพียงโปรแกรมใน Dreamweaver เท่านั้นที่สามารถ เปลี่ยนเวบที่ออกแบบด้วยเลเยอร์มาเป็นตาราง ได้ทำให้เราสามารถออกแบบได้อย่างอิสระในตอนแรก จากนั้นจึงเปลี่ยนมา ใช้ระบบตารางเพื่อให้เปิดดูใน Browser ได้ทุกระบบไม่ผิดเพี้ยน (สาเหตุที่ Dreamweaver ต้องมีคำสั่งแบบนี้ เพราะ Browser รุ่นเก่าไม่สามารถใช้เลเยอร์ได้นั่นเอง)Tool บางตัวที่ใช้เขียนเวบเพจจะใช้หลัก Table ในการออกแบบเป็นหลักเช่น FRONTPAGE 98 เนื่องจากใช้งานง่าย และเมื่อดูใน Browser จะได้ผลไม่ผิดเพี้ยนเลย แต่มีข้อด้อยคือไม่ให้ความอิสระ ในออกแบบเหมือนเลเยอร์

ส่วนประกอบของตาราง (Table)         Rows (แถว) = รายละเอียดในแนวนอนหรือแนวแถวของตาราง         Columns (คอลัมน์) = รายละเอียดในแนวตั้งหรือแนวคอลัมน์ของตาราง          Cell (เซลล์) = รายละเอียดของช่อง 1 ช่องในตาราง         Border (เส้นขอบ) = เส้นขอบของตาราง         Width = กำหนดความกว้างของตารางซึ่งมีหน่วยความกว้างสองแบบให้เลือกคือ                      Percent : กำหนดเป็นเปอร์เซ็นต์เทียบกับความกว้างของหน้าจอเวบเพจบนโปรแกรมเบราเซอร์                      Pixels : กำหนดเป็น Pixels หรือเป็นจุดบนหน้าจอ         Cell Pading = กำหนดระยะห่างระหว่างขอบเซลล์กับข้อความของเซลล์         Cell Spacing =กำหนดระยะห่างระหว่างช่องเซลล์แต่ละช่อง

การสร้างตาราง         หลังจากได้ทราบส่วนประกอบต่างๆของตารางแล้ว ในขั้นตอนต่อไปคุณจะได้เรียนรู้เกี่ยวกับวิธีสร้างตาราง       เลือกตำแหน่งที่ต้องการใส่ตาราง ด้วยการวางเคอร์เซอร์ที่ตำแหน่งนั้น คลิกปุ่ม Table ใน Object Palette หรือเลือกเมนู Insert > Table 

      จะมี Dialog box ขึ้นมาให้เลือกจำนวนและค่าต่างๆ

       Row จำนวนแถวแนวนอน        Columns จำนวนแถวแนวตั้ง        Width ขนาดของตารางโดยรวม เลือกได้ว่าจะให้หน่วยเป็น percent หรือ Pixel        Border กรอบของตาราง        Cell Padding ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 1        Cell Spacing ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 2        Click OK จะมีตารางที่เราได้กำหนดขนาดปรากฎที่หน้า Document ดังภาพ

       เราสามารถปรับขนาดได้จาก Property inspector ได้โดยการคลิกที่ขอบของ Tableให้ทำงาน

Select table element          ตารางสามารถเลือกส่วนที่จะเซ็ทค่าต่างได้หลายแบบ โดยจะเลือกแก้ไขทั้งตาราง หรือแก้ไขทีละช่อง หรือ แก้ไขทีละแถว หรือที่ละคอลัมน์ก็ได้

การเลือกทั้งตารางเพื่อแก้ไข       คลิกที่ขอบด้านใดด้านนึงของตาราง (วิธีนี้ค่อนข้างลำบากโดยเฉพาะถ้าตารางนั้นซ้อนอยู่ในเลเยอร์อีกที)       คลิกในตารางส่วนใดก็ได้หนึ่งครั้ง แล้วคลิกขวาที่เมาส์เลือก Table > select table

การเลือกเฉพาะในแถว       คลิกเลือกตารางช่องหัวแถวที่เราจะเลือกแล้วลากเมาส์ไปทางขวา

การเลือกเฉพาะคอลัมน์       คลิกที่ตารางบนสุดของ Column นั้น แล้วลากเมาส์ลงมา

การเลือกเฉพาะตารางที่ต้องการ       กด CTRL ค้างไว้ แล้วคลิกไปทีละช่องที่ต้องการ

Table property        หลังจากที่เลือก Table แล้วมาดูค่าต่างๆใน Property inspector ว่าสามารถกำหนดค่าอะไรได้บ้าง

        Table Name : ตั้งชื่อไว้เรียกอ้างอิง         Rows : สามารถเพิ่มจำนวนแถวได้โดยพิมพ์ตัวเลขเพิ่มเข้าไป

Cols : สามารถเพิ่มจำนวน Columns ได้โดยการเพิ่มจำนวนตัวเลขเข้าไป         W และ H : ความกว้างและความสูงของตาราง ถ้าความกว้างถูกเซ็ทหน่วยเป็นเปอร์เซ็นหมายถึง สั่งให้ Browser ปรับความ กว้างของหน้าจอซึ่งจะทำให้ความกว้างของตารางไม่แน่นอน ถ้าระบุเป็นหน่วย Pixel หรือ หน่วยอื่นจะดีกว่า         Cell Pad ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 1         Cell Space ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 2         Align : กำหนดชิดซ้าย กลาง หรือ ขวา         Border : ขอบของตาราง         Bg Color : สีพื้นหลังของตาราง         Bg Image : ใช้รูปเป็นพื้นหลังของตาราง         Brdr Color : สีของขอบของตาราง

Porperty inspector ของ Row ,Column และ Cell            Porperty ในการใช้งานแต่ละอย่างจะไม่แตกต่างกันขึ้นอยู่กับที่เราทำการเลือก Select ไม่ว่าจะเป็น Row Column Cell

        Property ส่วนบนจะเป็นการควบคุมตัวอักษรหรือรูปภาพที่นำมาใส่ในตารางเหมือนกับ Property ของ Font ที่ได้กล่าวมาแล้ว         Property ส่วนล่างเป็น Property ที่ควบคุมตารางในส่วนของ Row Column Cell         W และ H : ขนาดความกว้างของ Cell ไม่จำเป็นต้องปรับ         No Wrap : ช่อง Wrap จะสั่งให้โปรแกรมทำการตัดคำเมื่อเจอประโยคยาวๆ แต่จะขยายช่องให้ตามแนวนอนไปเรื่อยๆ จนกระทั่งหมดคำแล้วจึงขึ้นบรรทัดใหม่              (ไม่ต้องติ๊กช่องนี้)         Head : ในช่อง Head จะทำให้ช่องตารางนั้นกลายเป็นข้อความ เหมือนส่วนหัวตาราง คือเป็นส่วนใหญ่ ตัวหนา และจัด ตำแหน่งอยู่กึ่งกลางเสมอ         Bg : การนำรูปภาพมาทำเป็นพื้นหลัง         Bg: เลือกสีทำเป็นพื้นหลังถ้าเลือกรูปภาพแล้วไม่ต้องเลือกสี         Brdr : เลือกสีของขอบพร้อมทั้งขนาดของขอบ

Merge Cell การรวม Cell         Select Cell ที่ต้องการรวม

        คลิกรวม Cell

        หลังจากคลิกรวม Cell       

 Split Cell การแบ่ง Cell         Select Cell ที่ต้องการแบ่ง Cell โดย กด Ctrl ค้างแล้วคลิกภายใน Cell

        มาที่ Property inspector

        คลิกที่ Splits cell ดังภาพด้านบน         จากนั้นจะมี Dialog box ให้ใส่ค่าดังนี้

         Split Cell Into : ให้ทำการเลือกว่าต้องการเพิ่ม Cell ไปในทางไหน Row หรือ Columns          Number of Rows : ระบุจำนวน Cell ที่ต้องการ ส่วนมากโปรแกรมจะคำนวนจำนวนมาให้พอดีแล้ว          คลิ   การใช้ตารางในการออกแบบเป็นสิ่งที่จำเป็นอย่างยิ่งเพื่อช่วยเพิ่มความสวยงามและการจัดระเบียบได้อย่างถูกต้อง และ Browser ก็สามารถแสดงผลได้เป็นอย่างดีไม่ว่า Browser จะเป็นรุ่นไหน เก่า หรือ ใหม่ ก็ไม่เป็นปัญหาในการแสดงผล และ สามารถนำตารางมาประยุกต์ใช้ช่วยเพิ่มความเร็วในการ Load รูปภาพโดยการนำรูปภาพมาแบ่งเป็นชิ้นส่วนเล็กๆ แล้วนำมาใส่ ในตารางทีละช่องและกำหนดไม่ให้แสดงขอบของตารางพอที่ Browser ก็จะเหมือนกับว่ารูปที่นำมาต่อกันในตารางนั้นเป็นรูปเดียว กัน และยังสามารถรับชมได้เร็วไม่ต้องเสียเวลา Load นานอีกด้วย ดังนั้นต้องศึกษาและทำความเข้าใจให้ดีเพื่อประโยชน์ ในการออกแบบ

การแทรกตารางทั้งแถวและแนนคอลัมน์

เลือกแนวนอนที่จะทำการแทรกใหม่

แล้วกด Crtl + M จะได้ภาพดังรูปข้างล่างนี้

การลบตารางทั้งแนวนอนและแนวคอลัมน์

เลือกแนวตารางที่จะลบดังรูป

แล้วกด Delete แนวตารางที่เลือกไว้จะหายไปดังรูป

***หมายเหตุ*** การลบคอลัมน์ก็เหมือนกัน  เพียงแค่เลือกเป็นคอลัมนแล้วกด Delete แค่นี้ก็เป็นอันเสร็จสิ้นการลบตารางที่ไม่ต้องการออก

คุณสมบัติต่างๆของตาราง

หากคุณต้องการกำหนดคุณสมบัติเพิ่มเติมของตารางคุณสามารถเรียกวินโดว์ Properties ขึ้นมาโดยมีขั้นตอนดังนี้ 1. ให้คุณเลือกที่ตารางก่อน 2. คลิกที่เมนู Windows เลือก Properties 3. จากนั้นจะปรากฏวินโดว์ Properties ของตารางดังนี้

ตารางแสดงรายละเอียดคุณสมบัติต่างๆของตาราง

Rollover

Rollover Image          เป็นเทคนิคที่ใช้กันแพร่หลายให้ทั้งความสวยงามและความตื่นตาตื่นใจกับผู้ชมได้เป็นอย่างดี ในสมัยก่อนต้องมีความรู้ด้านภาษา JavaScript ถึงจะทำได้ แต่ด้วยความสามารถของ Dreamweaver ช่วยให้ผู้ที่ไม่รู้ภาษา JavaScript ก็สามารถเพิ่มลูกเล่นนี้เข้าไปได้ (ดูตัวอย่างที่http://www.ntinfonet.com/books) ้ ขั้นตอนการทำ           คลิก Cursor ให้อยู่ในตำแหน่งที่ต้องใส่ Rollover Image          กดปุ่ม Rollover ใน Object palette หรือที่เมนู Insert > Rollover Image 

         จะมี Dialog box ขึ้นมาให้ใส่ค่าดังนี้

         Image Name ใส่ชื่อถ้าไม่ใส่ทางโปรแกรมจะกำหนดให้เป็น Image1 ,2,3,4…………          Original Image ให้คลิกรูปจาก Browser แล้วเลือกรูปที่ต้องการ ( เป็นรูปที่กำหนดให้เป็นปุ่มก่อนที่เม้าส์จะลากผ่าน          Rollover Image ให้คลิกรูปจาก Browser แล้วเลือกรูปที่ต้องการ ( เป็นรูปที่กำหนดให้เป็นปุ่มเวลาที่ลากเม้าส์ผ่าน          ใส่เครื่องหมายถูกหน้า Preload Rollover Image ( เพื่อเป็นการ Load รูปภาพล่วงหน้าเพื่อให้การทำงานของ Rollover เป็นไป อย่างราบรื่น )          When Clicked, Go To URL ใส่ลิ้งค์ที่ต้องการให้เรียกขึ้นมาหลังจากที่คลิกปุ่มแล้ว          หลังจากเรียบร้อย คลิก OK แล้วจากนั้นให้ทำงานการทดสอบดูใน Browser โดยการกดปุ่ม F12 เมื่อ Browser เปิดขึ้นมาให้ลอง เลื่อนเมาส์ผ่านรูปดู

ตัวอย่างการใช้ Rollover

จากภาพข้างล่างคุณจะเห็นว่าเป็นภาพธรรมดาน่ะ  แต่มันไม่ใช่อย่างที่คุณคิด เมื่อคุณเอาเมาส์ไปวางที่ตำแหน่งภาพคุณจะเห็นว่ามันเป็นการลิงค์ เมื่อเมาส์ไปวางตำแหน่งนั้น รูปก็จะเปลี่ยนรูปเป็นรูปอื่นทันทีตามที่เรากำหนดไว้

วิธีการยกเลิก Rollover Image

สำหรับการยกเลิก Rollover ให้คุณทำตามขั้นตอนดังนี้ 1. คลิกที่ตำแหน่งรูปที่ทำ Rollover ไว้

2. ที่วินโดว์ Bahaviors ในช่อง Events คลิกรายการของการกำหนด Rollover แล้วคลิกที่ปุ่มเครื่องหมายลบ จบครบทุกรายการ

การสร้างตารางมีกี่วิธีอะไรบ้าง

การแทรกตารางลงในโปรแกรม Dreamweaver ใช้คำสั่งใด

ข้อใด คือ วิธีการใส่ตารางในหน้าเว็บเพจ

รายละเอียดของตารางประกอบไปด้วยอะไรบ้าง