งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

CHAPTER 6 Macromedia Dreamweaver MX 8. สาระการเรียนรู้ เพื่อศึกษาถึงการสร้างตารางในโปรแกรม macromedia Dreamweaver MX 2004 เนื่องจาก เป็นตัวกำหนดตำแหน่งต่าง.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "CHAPTER 6 Macromedia Dreamweaver MX 8. สาระการเรียนรู้ เพื่อศึกษาถึงการสร้างตารางในโปรแกรม macromedia Dreamweaver MX 2004 เนื่องจาก เป็นตัวกำหนดตำแหน่งต่าง."— ใบสำเนางานนำเสนอ:

1 CHAPTER 6 Macromedia Dreamweaver MX 8

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

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

4 การสร้างตาราง

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

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

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

8 การปรับแต่งตาราง 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 การรวมเซลล์และแยกเซลล์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

27 THE END


ดาวน์โหลด ppt CHAPTER 6 Macromedia Dreamweaver MX 8. สาระการเรียนรู้ เพื่อศึกษาถึงการสร้างตารางในโปรแกรม macromedia Dreamweaver MX 2004 เนื่องจาก เป็นตัวกำหนดตำแหน่งต่าง.

งานนำเสนอที่คล้ายกัน


Ads by Google