CHAPTER 6 Macromedia Dreamweaver MX 8

สาระการเรียนรู้ เพื่อศึกษาถึงการสร้างตารางในโปรแกรม macromedia Dreamweaver MX 2004 เนื่องจากเป็นตัวกำหนดตำแหน่งต่าง ๆในการวางองค์ประกอบ ดังนั้น การใช้ตารางจะช่วยในการจัดวางตำแหน่งของภาพและข้อความในหน้าโฮมเพจ

การสร้างตาราง 1.คลิกปุ่ม ที่ Inser Bar จากนั้นหน้าต่าง ๆ Table จะปรากฎขึ้น 2.กำหนดจำนวนแถวที่ช่อง Rows = 2 และคอลัมน์ที่ช่อง Column = 3 3.ที่ช่อง Table width กำหนดค่าความกว้างของตาราง = 500 4.ที่ช่อง Border thickness กำหนดค่าขอบของตาราง = 1 pixels 5.กำหนดระยะห่างของข้อความ ในตารางที่ช่อง Cell padding = 0 และความกว่างของ CELL ในตารางที่ช่อง Cell spacing = 0 6.เสร็จแล้วคลิกที่ปุ่ม OK

การสร้างตาราง 1 2 3 4 5

การสร้างตาราง 6.สังเกตผลลัพธ์ จะมีแถว 2 แถว และมีคอลัมน์ 2 คอลัมน์

การใส่รูปภาพและข้อความลงในตาราง 1.คลิกที่ช่องตารางที่ต้องการใส่ภาพ 2.คลิกที่ปุ่ม ค้างไว้จากนั้นเลือก Image 3.คลิกเลือกไฟล์ที่ต้องการ เสร็จแล้วคลิกปุ่ม OK 2 3

การใส่รูปภาพและข้อความลงในตาราง 4.สังเกตุผลลัพธ์ภาพจะถูกนำมาใส่ในตาราง 5.ปรับแต่งตารางโดยการ ดึงเส้นขอบตารางนำมาชิดกัน 6.สังเกตุผลลัพธ์อีกครั้งหลังจากนำตารางมาชิดกัน

การปรับแต่งตาราง การรวมเซลล์และแยกเซลล์ 1.คลิกที่ปุ่ม ที่ Insert bar เพื่อสร้างตารางจากนั้นกำหนด ค่าดังต่อไปนี้ Rows = 5 Column = 4 Table width = 520 pixels Border thickness = 1 pixels Cell padding = 0 Cell spacing = 0 Header = Both 2.คลิกปุ่ม OK

การปรับแต่งตาราง 1

การปรับแต่งตาราง 3.คลิกที่แถวที่ต้องการรวมตารางและลากเมาส์ไปทางขาวให้เท่ากับจำนวนเซลล์ที่ต้องการ รวม เช่น ต้องการควม 5 คอลัมน์ ตามภาพ 4.คลิกปุ่ม

การปรับแต่งตาราง 5.สังเกตุผลลัพธ์ที่เกิดขึ้น 6.หากต้องการแยกเซลล์เหมือนเดิมให้คลิกที่ปุ่ม

การเพิ่ม- ลดแถวคอลัมมน์ 1.คลิกที่ตารางจะสังเกตุว่ามีสีแถบดำปรากฎขึ้นดังภาพ 2.ที่หน้าต่าง Properties กำหนดค่าขนาดตารางใหม่เป็น Rows = 9 Cols = 5 เสร็จแล้วกดปุ่ม <Enter> บนคีย์บอร์ด 3.สังเกตผลลัพธ์

การเพิ่ม- ลดแถวคอลัมมน์

การใส่สีให้กับตาราง การใส่สีเดียวทั้งตาราง 1.คลิกเลือกที่ตาราง 2.คลิกที่ปุ่ม ที่ช่อง Bg Color จากนั้นเลือกสีที่ต้องการ 3.สังเกตผลลัพธ์ที่แสดง

การใส่สีให้กับตาราง การใส่สีตารางเฉพาะที่ 1.คลิกเลือกช่องที่ต้องการใส่สี 2.คลิกที่ปุ่ม ที่ช่อง Bg Color จากนั้นเลือกสีที่ต้องการ 3.สังเกตผลลัพธ์ที่แสดง

การซ่อนตาราง 1.คลิกเลือกตารางที่ต้องการ 2.กำหนดค่า Border = 0 ที่หน้าต่าง Properties 3.สังเกตผลลัพธ์ที่แสดง หลัง ก่อน

การทดลองดูเว็บเพจที่สร้างไว้ 1.คลิกเมนู File > Preview in Browser จากนั้นเลือก iexplore หรือ กดปุ่ม F12 2.คลิกปุ่ม YES

การสร้างเส้นคั่นระหว่างบรรทัด 1.คลิกที่ปุ่ม ที่หน้าต่าง Insert Bar จากนั้นเลือก HTML 2.คลิกเลือกตำแหน่งที่ต้อง จากนั้น คลิกปุ่ม 3.สังเกตผลลัพธ์ที่แสดง

การใส่วันที่ลงในหน้าเว็บเพจ 1.คลิกที่ปุ่ม จากนั้นเลือก COMMON 2.คลิกเลือกตำแหน่งที่ต้อง จากนั้น คลิกปุ่ม 3.หน้าต่าง Insert Date จำปรากฎขึ้น จากนั้นกำหนดค่าต่าง ๆ ดังนี้ Day format = Thu, (วัน) Date format = 7-03-1974 (วันที่,เดือน,ปี) Time format = 10:18 PM (เวลา) 5.คลิก OK

การลิงค์เว็บเพจ การลิงค์เว็บเพจในไซด์เดียวกัน 1.คลิกที่บริเวณที่จะต้องการลิงค์แล้วทำการ ลากเมาส์ คลุม 2.คลิกที่ปุ่ม 3.คลิกที่

การลิงค์เว็บเพจ 4.จะปรากฎหน้าจอที่ให้เลือก และทำการ เลือก File ที่ต้องการลิงค์ 5.คลิก OK

การลิงค์เว็บเพจ 6.ทดสอบการลิงค์ที่ IE 7.สังเกตุผลลัพธ์

การลิงค์เว็บเพจ การลิงค์เว็บไซด์ 1.คลิกที่บริเวณที่จะต้องการลิงค์แล้วทำการ ลากเมาส์ คลุม 2.คลิกที่ปุ่ม 3.คลิกที่ OK

การลิงค์เว็บเพจ 4.ทำการแสดงผลลัพธ์บน Internet Explorer 5.สังเกตุผลลัพธ์

การลิงค์เว็บเพจ ข้อสังเกต ในตำแหน่ง Traget คือเป็นส่วนที่แสดงให้เห็นว่าจะให้ แสดงเว็บเพจในรูปแบบใด

จงออกแบบตารางดังต่อไปนี้

THE END